v20.2.49 is released

Author: pipeline

controls/base/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-base",
-	"version": "20.2.46",
+	"version": "20.2.48",
 	"description": "A common package of Essential JS 2 base libraries, methods and class definitions",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/charts/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 ## [Unreleased]
 
+## 20.2.49 (2022-09-13)
+
+### Chart
+
+#### Bug Fixes
+
+- `#I398960` - Now chart axis scrollbar is working properly.
+- `#I399859` - Pie chart subtitle is overlapped with datalabel issue has been fixed.
+
+### Stock Chart
+
+#### Bug Fixes
+
+- `#I401042` - Now label stlye is applying properly for stock chart axis labels.
+
 ## 20.2.48 (2022-09-06)
 
 ### Chart

controls/charts/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-charts",
-	"version": "20.2.46",
+	"version": "20.2.48",
 	"description": "Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/charts/src/accumulation-chart/accumulation.ts

@@ -1817,6 +1817,7 @@ export class AccumulationChart extends Component<HTMLElement> implements INotify
             titleHeight,
             getAnchor, this.titleCollection, '', 'auto'
         );
+        if (!this.subTitle) {
         options.x = parseInt(this.series[0].radius) >= 80 || getAnchor != 'middle' ? options.x : this.accBaseModule.center.x;
         options.y = parseInt(this.series[0].radius) >= 80 ? options.y : (this.accBaseModule.center.y - this.accBaseModule.radius - padding 
                                                                          - titleHeight - legendHeight - expodeValue);
@@ -1826,7 +1827,7 @@ export class AccumulationChart extends Component<HTMLElement> implements INotify
                         (this.accBaseModule.center.x + (titleSize.width / 2)) > (this.initialClipRect.x + this.initialClipRect.width) ?
                         (this.initialClipRect.x + this.initialClipRect.width) - (titleSize.width / 2) - this.initialClipRect.x : options.x;
             options.y = options.y < (this.initialClipRect.y - legendHeight) ? (this.initialClipRect.y - legendHeight) : options.y;
-        }
+        }}
         const element: Element = textElement(
             this.renderer, options, this.titleStyle, this.titleStyle.color || this.themeStyle.chartTitle, this.svgObject, false, this.redraw
         );

controls/charts/src/common/scrollbar/scrollbar.ts

@@ -270,12 +270,11 @@ export class ScrollBar {
         const circleWidth: number = 1;
         const currentScrollWidth: number = currentX + currentWidth + circleRadius + circleWidth;
         const currentZPWidth: number = circleRadius + (circleWidth / 2);
-        this.zoomPosition = (currentX - (currentX - currentZPWidth <= 0 ? currentZPWidth : 0)) / (this.isVertical
-            ? axis.rect.height : this.width);
-        this.zoomFactor = (currentWidth + (currentScrollWidth >= this.width ? circleRadius + circleWidth : 0)) / (this.isVertical
-            ? axis.rect.height : this.width);
-        axis.zoomPosition = this.zoomPosition < 0 ? 0 : this.zoomPosition > 0.9 ? 1 : this.zoomPosition;
+        let axisSize = this.isVertical ? axis.rect.height : this.width;
+        this.zoomFactor = (currentWidth + (currentScrollWidth >= this.width ? circleRadius + circleWidth : 0)) / axisSize;
         axis.zoomFactor = isRequire ? this.zoomFactor : axis.zoomFactor;
+        this.zoomPosition = currentScrollWidth > axisSize ? (1 - axis.zoomFactor) : currentX < (circleRadius + circleWidth) ? 0 : (currentX - (currentX - currentZPWidth <= 0 ? currentZPWidth : 0)) / axisSize;
+        axis.zoomPosition = this.zoomPosition < 0 ? 0 : this.zoomPosition > 0.9 ? 1 : this.zoomPosition;
     }
     /**
      * Handles the mouse move on scrollbar

controls/charts/src/stock-chart/model/base-model.d.ts

@@ -1,4 +1,4 @@
-import { ChildProperty, Property, Complex, Collection } from '@syncfusion/ej2-base';import { DataManager, Query} from '@syncfusion/ej2-data';import { MarkerSettings, Series, Trendline } from '../../chart/series/chart-series';import { MarkerSettingsModel, TrendlineModel } from '../../chart/series/chart-series-model';import { StockChart } from '../stock-chart';import { ChartSeriesType, EmptyPointMode, TechnicalIndicators, MacdType, FinancialDataFields, ChartTheme, ChartShape } from '../../chart/utils/enum';import { Anchor, ZIndex, SizeType, LabelIntersectAction, LabelPlacement, AxisPosition, IntervalType } from '../../chart/utils/enum';import { SkeletonType, ChartRangePadding, EdgeLabelPlacement, ValueType, LegendShape, TrendlineTypes } from '../../chart/utils/enum';import { MajorGridLinesModel, MajorTickLinesModel, CrosshairTooltipModel, AxisLineModel } from '../../chart/axis/axis-model';import { MinorGridLinesModel, MinorTickLinesModel } from '../../chart/axis/axis-model';import { MajorGridLines, MajorTickLines, MinorTickLines, MinorGridLines, CrosshairTooltip, AxisLine } from '../../chart/axis/axis';import { ConnectorType } from '../../accumulation-chart/model/enum';import { TextOverflow, Alignment, Regions, Units, Position, FlagType } from '../../common/utils/enum';import { Theme } from '../../common/model/theme';import { AnimationModel, CornerRadiusModel, EmptyPointSettingsModel, ConnectorModel, IChartEventArgs } from '../../chart/index';
+import { ChildProperty, Property, Complex, Collection } from '@syncfusion/ej2-base';import { DataManager, Query} from '@syncfusion/ej2-data';import { MarkerSettings, Series, Trendline } from '../../chart/series/chart-series';import { MarkerSettingsModel, TrendlineModel } from '../../chart/series/chart-series-model';import { StockChart } from '../stock-chart';import { ChartSeriesType, EmptyPointMode, TechnicalIndicators, MacdType, FinancialDataFields, ChartTheme, ChartShape } from '../../chart/utils/enum';import { Anchor, ZIndex, SizeType, LabelIntersectAction, LabelPlacement, AxisPosition, IntervalType } from '../../chart/utils/enum';import { SkeletonType, ChartRangePadding, EdgeLabelPlacement, ValueType, LegendShape, TrendlineTypes } from '../../chart/utils/enum';import { MajorGridLinesModel, MajorTickLinesModel, CrosshairTooltipModel, AxisLineModel } from '../../chart/axis/axis-model';import { MinorGridLinesModel, MinorTickLinesModel } from '../../chart/axis/axis-model';import { MajorGridLines, MajorTickLines, MinorTickLines, MinorGridLines, CrosshairTooltip, AxisLine } from '../../chart/axis/axis';import { ConnectorType } from '../../accumulation-chart/model/enum';import { TextOverflow, Alignment, Regions, Units, Position, FlagType } from '../../common/utils/enum';import { Theme } from '../../common/model/theme';import { AnimationModel, CornerRadiusModel, EmptyPointSettingsModel, ConnectorModel, IChartEventArgs, Font, FontModel } from '../../chart/index';
 
 /**
  * Interface for a class StockChartFont
@@ -1040,7 +1040,7 @@ export interface StockChartAxisModel {
      * Options to customize the axis label.
      */
 
-    labelStyle?: StockChartFontModel;
+    labelStyle?: FontModel;
 
     /**
      * Specifies the title of an axis.

controls/charts/src/stock-chart/model/base.ts

@@ -14,7 +14,7 @@ import { ConnectorType } from '../../accumulation-chart/model/enum';
 import { CornerRadius } from '../../common/model/base';
 import { TextOverflow, Alignment, Regions, Units, Position, FlagType } from '../../common/utils/enum';
 import { Theme } from '../../common/model/theme';
-import { AnimationModel, CornerRadiusModel, EmptyPointSettingsModel, ConnectorModel, IChartEventArgs } from '../../chart/index';
+import { AnimationModel, CornerRadiusModel, EmptyPointSettingsModel, ConnectorModel, IChartEventArgs, Font, FontModel } from '../../chart/index';
 import {  StockChartBorderModel, StockChartConnectorModel, StockChartStripLineSettingsModel, StockSeriesModel } from './base-model';
 import { StockChartFontModel } from './base-model';
 
@@ -1246,8 +1246,8 @@ export class StockChartAxis extends ChildProperty<StockChartAxis> {
      * Options to customize the axis label.
      */
 
-    @Complex<StockChartFontModel>(Theme.axisLabelFont, StockChartFont)
-    public labelStyle: StockChartFontModel;
+    @Complex<FontModel>(Theme.axisLabelFont, Font)
+    public labelStyle: FontModel;
 
     /**
      * Specifies the title of an axis.

controls/diagrams/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## [Unreleased]
 
+## 20.2.49 (2022-09-13)
+
+### Diagram
+
+#### Bug fixes
+
+- `#I399417` - Now, fit to page is working properly when we call it multiple times.
+
 ## 20.2.45 (2022-08-23)
 
 ### Diagram

controls/diagrams/spec/diagram/interaction/scroller.spec.ts

@@ -495,4 +495,41 @@ describe('Diagram Control', () => {
             done();
         });
     });
+    
+    describe('FitToPage not working when we call it multiple times ', () => {
+        let diagram: Diagram;
+        let ele: HTMLElement;
+
+        beforeAll((): void => {
+            ele = createElement('div', { id: 'diagram_fitToPageIssue' });
+            ele.style.width = '100%';
+            document.body.appendChild(ele);
+            let node: NodeModel = { id: 'node1', width: 100, height: 100, offsetX: 350, offsetY: 350 };
+            diagram = new Diagram({
+                width: '500px',
+                height: '500px',created:created,
+                nodes: [node],
+                scrollSettings: { padding: { right: 50, bottom: 50 } }
+            });
+            diagram.appendTo('#diagram_fitToPageIssue');
+            function created(){
+                diagram.fitToPage();
+            }
+        });
+
+        afterAll((): void => {
+            diagram.destroy();
+            ele.remove();
+        });
+        it('Calling fit to page at runtime', (done: Function) => {
+           let scrollX =  diagram.scrollSettings.horizontalOffset;
+           let scrollY =  diagram.scrollSettings.verticalOffset;
+           diagram.fitToPage();
+           diagram.fitToPage();
+            expect(scrollX === diagram.scrollSettings.horizontalOffset && scrollY === diagram.scrollSettings.verticalOffset).toBe(true);
+            done();
+            console.log(scrollX);
+            console.log(scrollY);
+        });
+    });
 });

controls/diagrams/src/diagram/interaction/scroller.ts

@@ -751,16 +751,13 @@ export class DiagramScroller {
                 break;
             }
             /**
-             * In applyScrollLimit method the sign of deltaX and deltaY 
-             * will be changed ,so here we change the sign.
-             * similarly for bringIntoView and bringToCenter.
+             * EJ2-62912 - fitToPage is not working when we call it multiple times.
              */ 
-            if(factor === 1){deltaX*=-1;deltaY*=-1};
-            this.zoom(factor, deltaX, deltaY, { x: 0, y: 0 });
+            this.zoom(factor, deltaX, deltaY, { x: 0, y: 0 },true);
         } else {
             factor = 1 / this.currentZoom;
-            if(factor === 1){deltaX*=-1;deltaY*=-1};
-            this.zoom(factor, deltaX, deltaY, { x: 0, y: 0 });
+
+            this.zoom(factor, deltaX, deltaY, { x: 0, y: 0 },true);
         }
     }
     /**
@@ -813,6 +810,11 @@ export class DiagramScroller {
         const actualbounds: Rect = new Rect(bounds.x * scale, bounds.y * scale, bounds.width * scale, bounds.height * scale);
         let hoffset: number = actualbounds.x + actualbounds.width / 2 - this.viewPortWidth / 2;
         let voffset: number = actualbounds.y + actualbounds.height / 2 - this.viewPortHeight / 2;
+        /**
+         * In applyScrollLimit method the sign of deltaX and deltaY 
+         * will be changed ,so here we change the sign.
+         * similarly for bringIntoView.
+         */
         hoffset*=-1;voffset*=-1;
         this.zoom(1, -this.horizontalOffset - hoffset, -this.verticalOffset - voffset, null);
     }

controls/diagrams/themestudio/styles/calendars/datepicker/_layout.scss

@@ -96,6 +96,12 @@
     top:0 !important;
     left: 0 !important;
   }
+
+  .e-datepicker.e-popup-wrapper.e-popup-expand.e-lib.e-popup.e-control.e-popup-open {
+    min-width: 100%;
+    min-height:100%;
+  }
+
 }
 
 .e-content-placeholder.e-datepicker.e-placeholder-datepicker {
@@ -109,6 +115,62 @@
   min-height: 40px;
 }
 
+.e-datepick-mob-popup-wrap {
+
+  
+  #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+
+    #{if(&, '&', '*')} .e-model-header {
+
+      height:15%;
+
+      #{if(&, '&', '*')} .e-popup-close {
+        float: right;
+        margin-right: 10px;
+        padding: 5px;
+      }
+
+      #{if(&, '&', '*')} .e-popup-close::before {
+        content: "\e932";
+        font-family: "e-icons";
+        color: rgba(255,255,255);
+      }
+    }
+
+    #{if(&, '&', '*')} .e-calendar {
+      min-width: 100%;
+      min-height:100%;
+      height:100%;
+      
+      #{if(&, '&', '*')} .e-header.e-month {
+        height: 10%;
+      }
+
+    }
+
+  #{if(&, '&', '*')} .e-calendar-cell-container {
+    height:85%;
+  }
+
+  .e-footer-container
+  {
+    height: 10%;
+  }
+
+  #{if(&, '&', '*')} .e-content.e-month
+  {
+    height: 80%;
+    table
+    {
+    height:100%;
+    }
+
+  }
+
+  }
+}
+
+
 // sass-lint:enable-all
 
 
@@ -121,3 +183,64 @@
   }
 }
 
+@media screen and (orientation: landscape) {
+  .e-datepick-mob-popup-wrap {
+
+    #{if(&, '&', '*')} .e-datepicker.e-popup-expand {
+      #{if(&, '&', '*')} .e-model-header {
+
+        float: left;
+        height: 100%;
+        width: 30%;
+
+        .e-popup-close {
+          float: left;
+          padding: 5px;
+        }
+
+        .e-model-year {
+          font-size: 35px;
+          margin-top: 35%;
+        }
+
+      }
+
+      #{if(&, '&', '*')} .e-model-month ,
+      #{if(&, '&', '*')} .e-model-day {
+        display: block;
+        font-size: 40px;
+        margin-top: 10%;
+      }
+
+      #{if(&, '&', '*')} .e-header.e-month ,
+      #{if(&, '&', '*')} .e-footer-container {
+        height: 10%;
+      }
+
+      .e-content.e-month {
+        height: 75%;
+      }
+
+      .e-calendar {
+        display: flex;
+      }
+
+      .e-calendar-cell-container {
+        float: right;
+        height: 90%;
+        width: 70%;
+      }
+
+      .e-calendar.e-device .e-month table tbody {
+        display: table-row-group;
+      }
+
+      #{if(&, '&', '*')} .e-content.e-month table ,
+      #{if(&, '&', '*')} .e-content.e-decade table ,
+      #{if(&, '&', '*')} .e-content.e-year table {
+        height: 100%;
+      }
+    }
+  }
+}
+