@syncfusion/ej2-angular-charts 34.2.8-ngcc → 35.1.37

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "@syncfusion/ej2-angular-charts",
-  "version": "34.2.8-ngcc",
+  "version": "35.1.37",
   "description": "Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball. for Angular",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
   "schematics": "./schematics/collection.json",
   "dependencies": {
-    "@syncfusion/ej2-base": "~34.2.8",
-    "@syncfusion/ej2-angular-base": "~34.2.8",
-    "@syncfusion/ej2-charts": "34.2.8"
+    "@syncfusion/ej2-base": "~35.1.37",
+    "@syncfusion/ej2-angular-base": "~35.1.37",
+    "@syncfusion/ej2-charts": "35.1.37"
   },
-  "devDependencies": {},
   "keywords": [
     "angular",
     "angular-charts",
@@ -33,10 +32,17 @@
     "url": "https://github.com/syncfusion/ej2-angular-ui-components.git"
   },
   "sideEffects": false,
-  "main": "dist/ej2-angular-charts.umd.js",
-  "module": "@syncfusion/ej2-angular-charts.es5.js",
-  "es2015": "@syncfusion/ej2-angular-charts.js",
-  "typings": "ej2-angular-charts.d.ts",
-  "metadata": "ej2-angular-charts.metadata.json",
+  "module": "fesm2022/syncfusion-ej2-angular-charts.mjs",
+  "typings": "types/syncfusion-ej2-angular-charts.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/syncfusion-ej2-angular-charts.d.ts",
+      "default": "./fesm2022/syncfusion-ej2-angular-charts.mjs"
+    }
+  },
+  "type": "module",
   "homepage": "https://www.syncfusion.com/angular-components"
 }

package/schematics/collection.json

@@ -1,11 +1,150 @@
 {
-                "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
-                "schematics": {
-                  "ng-add": {
-                    "description": "Adds Essential JS 2 specific Angular package to an application",
-                    "factory": "./ng-add",
-                    "schema": "./ng-add/schema.json"
-                  }
-                }
-              }
-              
+  "$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Adds Essential JS 2 specific Angular package to an application",
+      "factory": "./ng-add",
+      "schema": "./ng-add/schema.json"
+    },
+    "chart-axes-crossing": {
+      "description": "Create an Angular component with EJ2 chart with axes-crossing sample",
+      "factory": "./generators/chart-axes-crossing",
+      "schema": "./generators/chart-axes-crossing/schema.json"
+    },
+    "chart-crosshair": {
+      "description": "Create an Angular component with EJ2 chart with crosshair sample",
+      "factory": "./generators/chart-crosshair",
+      "schema": "./generators/chart-crosshair/schema.json"
+    },
+    "chart-donut": {
+      "description": "Create an Angular component with EJ2 chart with donut sample",
+      "factory": "./generators/chart-donut",
+      "schema": "./generators/chart-donut/schema.json"
+    },
+    "chart-line": {
+      "description": "Create an Angular component with EJ2 chart with line sample",
+      "factory": "./generators/chart-line",
+      "schema": "./generators/chart-line/schema.json"
+    },
+    "chart-multi-level-labels": {
+      "description": "Create an Angular component with EJ2 chart with multi level labels sample",
+      "factory": "./generators/chart-multi-level-labels",
+      "schema": "./generators/chart-multi-level-labels/schema.json"
+    },
+    "chart-pie": {
+      "description": "Create an Angular component with EJ2 chart with pie sample",
+      "factory": "./generators/chart-pie",
+      "schema": "./generators/chart-pie/schema.json"
+    },
+    "chart-rangenavigator": {
+      "description": "Create an Angular component with EJ2 chart with range navigator sample",
+      "factory": "./generators/chart-rangenavigator",
+      "schema": "./generators/chart-rangenavigator/schema.json"
+    },
+    "chart-remotedata": {
+      "description": "Create an Angular component with EJ2 chart with remote data sample",
+      "factory": "./generators/chart-remotedata",
+      "schema": "./generators/chart-remotedata/schema.json"
+    },
+    "chart-technical-indicator": {
+      "description": "Create an Angular component with EJ2 chart with technical indicator sample",
+      "factory": "./generators/chart-technical-indicator",
+      "schema": "./generators/chart-technical-indicator/schema.json"
+    },
+    "chart-trackball": {
+      "description": "Create an Angular component with EJ2 chart with trackball sample",
+      "factory": "./generators/chart-trackball",
+      "schema": "./generators/chart-trackball/schema.json"
+    },
+    "chart-zooming": {
+      "description": "Create an Angular component with EJ2 chart with zooming sample",
+      "factory": "./generators/chart-zooming",
+      "schema": "./generators/chart-zooming/schema.json"
+    },
+    "smithchart-admittance-rendering": {
+      "description": "Create an Angular Smithchart component with admittance rendering",
+      "factory": "./generators/smithchart-admittance-rendering",
+      "schema": "./generators/smithchart-admittance-rendering/schema.json"
+    },
+    "smithchart-animation": {
+      "description": "Create an Angular Smithchart component with animation",
+      "factory": "./generators/smithchart-animation",
+      "schema": "./generators/smithchart-animation/schema.json"
+    },
+    "smithchart-default": {
+      "description": "Create an Angular Smithchart component with default",
+      "factory": "./generators/smithchart-default",
+      "schema": "./generators/smithchart-default/schema.json"
+    },
+    "smithchart-label": {
+      "description": "Create an Angular Smithchart component with label",
+      "factory": "./generators/smithchart-label",
+      "schema": "./generators/smithchart-label/schema.json"
+    },
+    "smithchart-legend": {
+      "description": "Create an Angular Smithchart component with legend",
+      "factory": "./generators/smithchart-legend",
+      "schema": "./generators/smithchart-legend/schema.json"
+    },
+    "smithchart-marker": {
+      "description": "Create an Angular Smithchart component with marker",
+      "factory": "./generators/smithchart-marker",
+      "schema": "./generators/smithchart-marker/schema.json"
+    },
+    "smithchart-multiple-series": {
+      "description": "Create an Angular Smithchart component with multiple-series",
+      "factory": "./generators/smithchart-multiple-series",
+      "schema": "./generators/smithchart-multiple-series/schema.json"
+    },
+    "smithchart-print": {
+      "description": "Create an Angular component with EJ2 smithchart with print",
+      "factory": "./generators/smithchart-print",
+      "schema": "./generators/smithchart-print/schema.json"
+    },
+    "smithchart-radius": {
+      "description": "Create an Angular Smithchart component with radius",
+      "factory": "./generators/smithchart-radius",
+      "schema": "./generators/smithchart-radius/schema.json"
+    },
+    "smithchart-series": {
+      "description": "Create an Angular Smithchart component with series",
+      "factory": "./generators/smithchart-series",
+      "schema": "./generators/smithchart-series/schema.json"
+    },
+    "smithchart-tooltip": {
+      "description": "Create an Angular Smithchart component with tooltip",
+      "factory": "./generators/smithchart-tooltip",
+      "schema": "./generators/smithchart-tooltip/schema.json"
+    },
+    "sparkline-area": {
+      "description": "Create an Angular Sparkline chart component with area",
+      "factory": "./generators/sparkline-area",
+      "schema": "./generators/sparkline-area/schema.json"
+    },
+    "sparkline-column": {
+      "description": "Create an Angular Sparkline chart component with column",
+      "factory": "./generators/sparkline-column",
+      "schema": "./generators/sparkline-column/schema.json"
+    },
+    "sparkline-line": {
+      "description": "Create an Angular Sparkline chart component with line",
+      "factory": "./generators/sparkline-line",
+      "schema": "./generators/sparkline-line/schema.json"
+    },
+    "sparkline-range-band": {
+      "description": "Create an Angular Sparkline chart component with range-band",
+      "factory": "./generators/sparkline-range-band",
+      "schema": "./generators/sparkline-range-band/schema.json"
+    },
+    "sparkline-track-line": {
+      "description": "Create an Angular Sparkline chart component with track-line",
+      "factory": "./generators/sparkline-track-line",
+      "schema": "./generators/sparkline-track-line/schema.json"
+    },
+    "sparkline-win-loss": {
+      "description": "Create an Angular Sparkline chart component with win-loss",
+      "factory": "./generators/sparkline-win-loss",
+      "schema": "./generators/sparkline-win-loss/schema.json"
+    }
+  }
+}

package/schematics/generators/chart-axes-crossing/index.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from '@angular-devkit/schematics';
+import { Schema } from './schema';
+export default function (options: Schema): Rule;

package/schematics/generators/chart-axes-crossing/index.js

@@ -0,0 +1,5 @@
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import * as sampleDetails from './sample-details';
+export default function (options) {
+    return componentBuilder(options, sampleDetails);
+}

package/schematics/generators/chart-axes-crossing/index.ts

@@ -0,0 +1,8 @@
+import { Rule } from '@angular-devkit/schematics';
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import { Schema } from './schema';
+import * as sampleDetails from './sample-details';
+
+export default function (options: Schema): Rule {
+  return componentBuilder(options, sampleDetails);
+}

package/schematics/generators/chart-axes-crossing/sample-details.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName: string;
+export declare const sampleName: string;
+export declare const diModules: string | null;
+export declare const packageName: string;
+export declare const libModules: string;

package/schematics/generators/chart-axes-crossing/sample-details.js

@@ -0,0 +1,5 @@
+export const componentName = 'chart';
+export const sampleName = 'axes-crossing';
+export const diModules = 'LineSeriesService,SplineSeriesService,ScatterSeriesService,TooltipService,LegendService';
+export const packageName = '@syncfusion/ej2-angular-charts';
+export const libModules = 'ChartModule';

package/schematics/generators/chart-axes-crossing/sample-details.ts

@@ -0,0 +1,5 @@
+export const componentName: string = 'chart';
+export const sampleName: string = 'axes-crossing';
+export const diModules: string | null =  'LineSeriesService,SplineSeriesService,ScatterSeriesService,TooltipService,LegendService';
+export const packageName: string = '@syncfusion/ej2-angular-charts';
+export const libModules: string = 'ChartModule';

package/schematics/generators/chart-axes-crossing/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css

@@ -0,0 +1,3 @@
+.control-fluid {
+    padding: 0px !important;
+}

package/schematics/generators/chart-axes-crossing/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -0,0 +1,20 @@
+<div class="control-section">
+    <div class="col-md-8">
+        <ejs-chart style='display:block' [legendSettings]='legend' #chart id='chartcontainer' [primaryXAxis]='primaryXAxis' [tooltip]='tooltip'
+            [primaryYAxis]='primaryYAxis' [title]='title' (load)='load($event)'>
+            <e-series-collection>
+                <e-series [dataSource]='data2' name='Linear Interpolation' type='Line' fill='blue' xName='x' yName='y' width=2 enableTooltip=false>
+                </e-series>
+                <e-series [dataSource]='data3' name='Cubic Spline Interpolation' fill='green' type='Spline' xName='x' yName='y' width=2 enableTooltip=false>
+                </e-series>
+                <e-series [dataSource]='data1' name='Data Points' fill='red' type='Scatter' xName='x' yName='y' width=2 [marker]='marker'>
+                </e-series>                
+            </e-series-collection>
+        </ejs-chart>
+    </div>
+</div>   
+<style>
+    .control-section {
+        min-height: 450px;
+    }
+</style>

package/schematics/generators/chart-axes-crossing/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -0,0 +1,110 @@
+import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
+import { ILoadedEventArgs, ChartComponent, ChartTheme } from '@syncfusion/ej2-angular-charts';
+/**
+ * Sample for box and whisker series
+ */
+@Component({
+    selector: '<%=dasherize(selector)%>',
+    templateUrl: '<%=dasherize(name)%>.component.html',
+    styleUrls: ['<%=dasherize(name)%>.component.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class <%= classify(name) %>Component {
+    public data1: Object[] = [{ x: -6, y: 2 }, { x: -3, y: -4 }, { x: 1.5, y: 3.5 }, { x: 6, y: 4.5 }];
+    public data2: Object[] = [
+        { x: -6, y: 2 }, { x: -5, y: 0 }, { x: -4.511, y: -0.977 }, { x: -3, y: -4 }, { x: -1.348, y: -1.247 },
+        { x: -0.6, y: 0 }, { x: 0, y: 1 }, { x: 1.5, y: 3.5 }, { x: 6, y: 4.5 },
+    ];
+    public data3: Object[] = [
+        { x: -6, y: 2 }, { x: -5.291, y: 0 }, { x: -5, y: -0.774 }, { x: -3, y: -4 }, { x: -0.6, y: -0.965 },
+        { x: -0.175, y: 0 }, { x: 0, y: 0.404 }, { x: 1.5, y: 3.5 }, { x: 3.863, y: 5.163 }, { x: 6, y: 4.5 },
+    ];
+    //Initializing Primary X Axis
+    public primaryXAxis: Object = {
+        minimum: -8, maximum: 8, interval: 2,
+        valueType: 'Double',
+        lineStyle: {
+            width: 2
+        },
+        minorTickLines: { width: 0 },
+        majorTickLines: { width: 0 },
+        crossesAt: 0,
+        minorTicksPerInterval: 3
+    };
+    //Initializing Primary Y Axis
+    public primaryYAxis: Object = {
+        minimum: -8, maximum: 8, interval: 2,
+        lineStyle: {
+            width: 2
+        },
+        majorTickLines: { width: 0 },
+        minorTickLines: { width: 0 },
+        crossesAt: 0,
+        minorTicksPerInterval: 3,
+    };
+    public marker: Object = {
+        visible: false,
+        height: 12,
+        width: 12,
+    };
+    //Initializing Tooltip
+    public tooltip: Object = { enable: true };
+    public load(args: ILoadedEventArgs): void {       
+        let selectedTheme: string = location.hash.split('/')[1];
+        selectedTheme = selectedTheme ? selectedTheme : 'Material';
+        args.chart.theme = <ChartTheme>(selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1));
+      };
+    public title: string = 'Spline Interpolation';
+    @ViewChild('chart')
+    public chart: ChartComponent;
+    // public check(e: Event): void {
+    //     let value: boolean = (e.target as HTMLInputElement).checked;
+    //     if (this.axis.index === 0) {
+    //         this.chart.primaryXAxis.placeNextToAxisLine = value;
+    //     } else {
+    //         this.chart.primaryYAxis.placeNextToAxisLine = value;
+    //     }
+    //     this.chart.dataBind();
+    // };
+    public legend: Object = {
+        visible: true
+    };
+    // public axis: DropDownList;
+    // public crossValue: NumericTextBox;
+    // ngOnInit(): void {
+    //     this.axis = new DropDownList({
+    //         index: 0,
+    //         width: 120,
+    //         change: () => {
+    //             let target: HTMLInputElement = document.getElementById('axisElements') as HTMLInputElement;
+    //             if (this.axis.index === 0) {
+    //                 target.checked = this.chart.primaryXAxis.placeNextToAxisLine;
+    //                 this.crossValue.value = +this.chart.primaryXAxis.crossesAt;
+    //             } else {
+    //                 target.checked = this.chart.primaryYAxis.placeNextToAxisLine;
+    //                 this.crossValue.value = +this.chart.primaryYAxis.crossesAt;
+    //             }
+    //             this.chart.dataBind();
+    //         }
+    //     });
+    //     this.axis.appendTo('#selectAxis');
+    //     this.crossValue = new NumericTextBox({
+    //         value: 0, min: -8,
+    //         max: 8, width: 120,
+    //         step: 2,
+    //         change: () => {
+    //             if (this.axis.index === 0) {
+    //                 this.chart.primaryXAxis.crossesAt = this.crossValue.value;
+    //             } else {
+    //                 this.chart.primaryYAxis.crossesAt = this.crossValue.value;
+    //             }
+    //             this.chart.dataBind();
+    //         }
+    //     });
+    //     this.crossValue.appendTo('#crossingValue');
+    // }
+    constructor() {
+        //code
+    };
+
+}

package/schematics/generators/chart-axes-crossing/schema.d.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+export interface Schema extends ComponentSchema {
+}

package/schematics/generators/chart-axes-crossing/schema.js

@@ -0,0 +1 @@
+export {};

package/schematics/generators/chart-axes-crossing/schema.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "EJ2SchemaTemplateID",
+  "title": "chart-axes-crossing",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path to create the component.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "inlineStyle": {
+      "description": "Specifies if the style will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "s"
+    },
+    "inlineTemplate": {
+      "description": "Specifies if the template will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "t"
+    },
+    "viewEncapsulation": {
+      "description": "Specifies the view encapsulation strategy.",
+      "enum": [
+        "Emulated",
+        "Native",
+        "None",
+        "ShadowDom"
+      ],
+      "type": "string",
+      "alias": "v"
+    },
+    "changeDetection": {
+      "description": "Specifies the change detection strategy.",
+      "enum": [
+        "Default",
+        "OnPush"
+      ],
+      "type": "string",
+      "default": "Default",
+      "alias": "c"
+    },
+    "prefix": {
+      "type": "string",
+      "description": "The prefix to apply to generated selectors.",
+      "alias": "p",
+      "oneOf": [
+        {
+          "maxLength": 0
+        },
+        {
+          "minLength": 1,
+          "format": "html-selector"
+        }
+      ]
+    },
+    "styleext": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css"
+    },
+    "spec": {
+      "type": "boolean",
+      "description": "Specifies if a spec file is generated.",
+      "default": true
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Flag to indicate if a dir is created.",
+      "default": false
+    },
+    "skipImport": {
+      "type": "boolean",
+      "description": "Flag to skip the module import.",
+      "default": false
+    },
+    "selector": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The selector to use for the component."
+    },
+    "module": {
+      "type": "string",
+      "description": "Allows specification of the declaring module.",
+      "alias": "m"
+    },
+    "export": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if declaring module exports the component."
+    },
+    "entryComponent": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if the component is an entry component of declaring module."
+    },
+    "lintFix": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies whether to apply lint fixes after generating the component."
+    }
+  },
+  "required": [
+    "name"
+  ],
+  "id": "chart-axes-crossing"
+}

package/schematics/generators/chart-axes-crossing/schema.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+
+export interface Schema extends ComponentSchema { }

package/schematics/generators/chart-crosshair/index.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from '@angular-devkit/schematics';
+import { Schema } from './schema';
+export default function (options: Schema): Rule;

package/schematics/generators/chart-crosshair/index.js

@@ -0,0 +1,5 @@
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import * as sampleDetails from './sample-details';
+export default function (options) {
+    return componentBuilder(options, sampleDetails);
+}

package/schematics/generators/chart-crosshair/index.ts

@@ -0,0 +1,8 @@
+import { Rule } from '@angular-devkit/schematics';
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import { Schema } from './schema';
+import * as sampleDetails from './sample-details';
+
+export default function (options: Schema): Rule {
+  return componentBuilder(options, sampleDetails);
+}

package/schematics/generators/chart-crosshair/sample-details.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName: string;
+export declare const sampleName: string;
+export declare const diModules: string | null;
+export declare const packageName: string;
+export declare const libModules: string;

package/schematics/generators/chart-crosshair/sample-details.js

@@ -0,0 +1,5 @@
+export const componentName = 'chart';
+export const sampleName = 'crosshair';
+export const diModules = 'DateTimeService,LineSeriesService,HiloOpenCloseSeriesService,LegendService,CrosshairService';
+export const packageName = '@syncfusion/ej2-angular-charts';
+export const libModules = 'ChartModule';

package/schematics/generators/chart-crosshair/sample-details.ts

@@ -0,0 +1,5 @@
+export const componentName: string = 'chart';
+export const sampleName: string = 'crosshair';
+export const diModules: string | null =  'DateTimeService,LineSeriesService,HiloOpenCloseSeriesService,LegendService,CrosshairService';
+export const packageName: string = '@syncfusion/ej2-angular-charts';
+export const libModules: string = 'ChartModule';

package/schematics/generators/chart-crosshair/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css

@@ -0,0 +1,3 @@
+.control-fluid {
+    padding: 0px !important;
+}

package/schematics/generators/chart-crosshair/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -0,0 +1,15 @@
+
+<div class="control-section">
+    <div align='center'>
+        <ejs-chart style='display:block; width: 92%' [chartArea]='chartArea' [width]='width' align='center' [primaryXAxis]='primaryXAxis'
+            [primaryYAxis]='primaryYAxis' [axes]='axes' [title]='title' [crosshair]='crosshairLabel' (load)='load($event)' [legendSettings]='legend'>
+            <e-series-collection>
+                <e-series [dataSource]='series1' type='Line' xName='xDate' yName='High' width=2 [border]='border' [marker]='marker'>
+                </e-series>
+                <e-series [dataSource]='series2' type='HiloOpenClose' xName='xDate' yAxisName='yAxis' high='High' low='Low' open='Open' close='Close'
+                    bearFillColor='#2ecd71' bullFillColor='#e74c3d'>
+                </e-series>
+            </e-series-collection>
+        </ejs-chart>
+    </div>
+</div>