@syncfusion/ej2-angular-charts 34.2.8 → 35.1.39

package/schematics/generators/chart-technical-indicator/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-technical-indicator/schema.js

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

package/schematics/generators/chart-technical-indicator/schema.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "EJ2SchemaTemplateID",
+  "title": "chart-technical-indicator",
+  "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-technical-indicator"
+}

package/schematics/generators/chart-technical-indicator/schema.ts

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

package/schematics/generators/chart-trackball/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-trackball/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-trackball/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-trackball/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-trackball/sample-details.js

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

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

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

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

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

package/schematics/generators/chart-trackball/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' id='chartcontainer' [primaryXAxis]='primaryXAxis'
+            [primaryYAxis]='primaryYAxis' [title]='title' [tooltip]='tooltip' [crosshair]='crosshair' (load)='load($event)'>
+            <e-series-collection>
+                <e-series [dataSource]='john' type='Line' xName='x' yName='y' name='John' width=2 [marker]='marker'> </e-series>
+                <e-series [dataSource]='andrew' type='Line' xName='x' yName='y' name='Andrew' width=2 [marker]='marker'>
+                </e-series>
+                <e-series [dataSource]='thomas' type='Line' xName='x' yName='y' name='Thomas' width=2 [marker]='marker'>
+                </e-series>
+            </e-series-collection>
+        </ejs-chart>
+    </div>
+</div>

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

@@ -0,0 +1,80 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { ILoadedEventArgs, ChartTheme } from '@syncfusion/ej2-angular-charts';
+import { Browser } from '@syncfusion/ej2-base';
+
+/**
+ * Sample for Trackball in chart
+ */
+@Component({
+    selector: '<%=dasherize(selector)%>',
+    templateUrl: '<%=dasherize(name)%>.component.html',
+    styleUrls: ['<%=dasherize(name)%>.component.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class <%= classify(name) %>Component {
+
+    public john: Object[] = [
+        { x: new Date(2000, 2, 11), y: 15 }, { x: new Date(2000, 9, 14), y: 20 },
+        { x: new Date(2001, 2, 11), y: 25 }, { x: new Date(2001, 9, 16), y: 21 },
+        { x: new Date(2002, 2, 7), y: 13 }, { x: new Date(2002, 9, 7), y: 18 },
+        { x: new Date(2003, 2, 11), y: 24 }, { x: new Date(2003, 9, 14), y: 23 },
+        { x: new Date(2004, 2, 6), y: 19 }, { x: new Date(2004, 9, 6), y: 31 },
+        { x: new Date(2005, 2, 11), y: 39 }, { x: new Date(2005, 9, 11), y: 50 },
+        { x: new Date(2006, 2, 11), y: 24 }
+    ];
+    public andrew: Object[] = [
+        { x: new Date(2000, 2, 11), y: 39 }, { x: new Date(2000, 9, 14), y: 30 },
+        { x: new Date(2001, 2, 11), y: 28 }, { x: new Date(2001, 9, 16), y: 35 },
+        { x: new Date(2002, 2, 7), y: 39 }, { x: new Date(2002, 9, 7), y: 41 },
+        { x: new Date(2003, 2, 11), y: 45 }, { x: new Date(2003, 9, 14), y: 48 },
+        { x: new Date(2004, 2, 6), y: 54 }, { x: new Date(2004, 9, 6), y: 55 },
+        { x: new Date(2005, 2, 11), y: 57 }, { x: new Date(2005, 9, 11), y: 60 },
+        { x: new Date(2006, 2, 11), y: 60 }
+    ];
+    public thomas: Object[] = [
+        { x: new Date(2000, 2, 11), y: 60 }, { x: new Date(2000, 9, 14), y: 55 },
+        { x: new Date(2001, 2, 11), y: 48 }, { x: new Date(2001, 9, 16), y: 57 },
+        { x: new Date(2002, 2, 7), y: 62 }, { x: new Date(2002, 9, 7), y: 64 },
+        { x: new Date(2003, 2, 11), y: 57 }, { x: new Date(2003, 9, 14), y: 53 },
+        { x: new Date(2004, 2, 6), y: 63 }, { x: new Date(2004, 9, 6), y: 50 },
+        { x: new Date(2005, 2, 11), y: 66 }, { x: new Date(2005, 9, 11), y: 65 },
+        { x: new Date(2006, 2, 11), y: 79 }
+    ];
+    //Initializing Primary X Axis
+    public primaryXAxis: Object = {
+        inimum: new Date(2000, 1, 1), maximum: new Date(2006, 2, 11),
+        valueType: 'DateTime',
+        skeleton: 'y',
+        lineStyle: { width: 0 },
+        majorGridLines: { width: 0 },
+        edgeLabelPlacement: 'Shift'
+    };
+    //Initializing Primary Y Axis
+    public primaryYAxis: Object = {
+        title: 'Revenue',
+        labelFormat: '{value}M',
+        majorTickLines: { width: 0 },
+        minimum: 10, maximum: 80,
+        lineStyle: { width: 0 },
+    };
+    public chartArea: Object = {
+        border: {
+            width: 0
+        }
+    };
+
+    public width: string = Browser.isDevice ? '100%' : '60%';
+    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 = 'Average Sales per Person';
+    public marker: Object = { visible: true };
+    public tooltip: Object = { enable: true, shared: true };
+    public crosshair: Object = { enable: true, lineType: 'Vertical' };
+    constructor() {
+        //code
+    };
+
+}

package/schematics/generators/chart-trackball/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-trackball/schema.js

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

package/schematics/generators/chart-trackball/schema.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "EJ2SchemaTemplateID",
+  "title": "chart-trackball",
+  "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-trackball"
+}

package/schematics/generators/chart-trackball/schema.ts

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

package/schematics/generators/chart-zooming/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-zooming/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-zooming/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-zooming/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-zooming/sample-details.js

@@ -0,0 +1,5 @@
+export const componentName = 'chart';
+export const sampleName = 'zooming';
+export const diModules = 'DateTimeService,AreaSeriesService,LegendService,ZoomService,ScrollBarService';
+export const packageName = '@syncfusion/ej2-angular-charts';
+export const libModules = 'ChartModule';

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

@@ -0,0 +1,5 @@
+export const componentName: string = 'chart';
+export const sampleName: string = 'zooming';
+export const diModules: string | null =  'DateTimeService,AreaSeriesService,LegendService,ZoomService,ScrollBarService';
+export const packageName: string = '@syncfusion/ej2-angular-charts';
+export const libModules: string = 'ChartModule';

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

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

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

@@ -0,0 +1,36 @@
+
+<style>
+    #gradient-chart stop {
+        stop-color: #BDEDE9;
+    }
+
+    #gradient-chart stop[offset="0"] {
+        stop-opacity: 0.75;
+    }
+
+    #gradient-chart stop[offset="1"] {
+        stop-opacity: 0;
+    }
+</style>
+
+<div class="control-section">
+    <div align='center'>
+        <ejs-chart style='display:block;width: 92%' [chartArea]='chartArea' [width]='width' align='center' [chartArea]='chartArea'
+            [primaryXAxis]='primaryXAxis' [legendSettings]='legend' [zoomSettings]='zoomSettings' [title]='title' [primaryYAxis]='primaryYAxis'
+            (load)='load($event)'>
+            <e-series-collection>
+                <e-series [dataSource]='series1' type='Area' xName='x' yName='y' [animation]='animation' fill='url(#gradient-chart)' [border]='border'>
+                </e-series>
+            </e-series-collection>
+        </ejs-chart>
+    </div>
+</div>
+
+<svg style="height: 0">
+    <defs>
+        <linearGradient id="gradient-chart" x1="0" x2="0" y1="0" y2="1">
+            <stop offset="0" />
+            <stop offset="1" />
+        </linearGradient>
+    </defs>
+</svg>

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

@@ -0,0 +1,61 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+import { ChartDataService } from './assets/chart-data.service';
+import { ILoadedEventArgs, ChartTheme, ScrollBar } from '@syncfusion/ej2-angular-charts';
+import { Browser } from '@syncfusion/ej2-base';
+/**
+ * Sample for Zooming in chart
+ */
+@Component({
+    selector: '<%=dasherize(selector)%>',
+    templateUrl: '<%=dasherize(name)%>.component.html',
+    styleUrls: ['<%=dasherize(name)%>.component.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class <%= classify(name) %>Component {
+
+    //Initializing Primary X Axis
+    public primaryXAxis: Object = {
+        title: 'Years',
+        valueType: 'DateTime',
+        skeleton: 'yMMM',
+        edgeLabelPlacement: 'Shift',
+        majorGridLines: { width: 0 }
+    };
+    //Initializing Primary Y Axis
+    public primaryYAxis: Object = {
+        title: 'Profit ($)',
+        rangePadding: 'None',
+        lineStyle: { width: 0 },
+        majorTickLines: { width: 0 }
+    };
+    public legend: Object = {
+        visible: false
+    };
+    public animation: Object = { enable: false };
+    public zoomSettings: Object = {
+        mode: 'X',
+        enableMouseWheelZooming: true,
+        enablePinchZooming: true,
+        enableSelectionZooming: true,
+        enableScrollbar: true
+    };
+    public chartArea: Object = {
+        border: {
+            width: 0
+        }
+    };
+    public width: string = Browser.isDevice ? '100%' : '80%';
+    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));
+        args.chart.scrollBarModule = new ScrollBar(args.chart);
+    };
+    public border: Object = { width: 0.5, color: '#00bdae' };
+    public title: string = 'Sales History of Product X';
+    public series1: Object = ChartDataService.prototype.GetZoomingData().series1;
+    constructor() {
+        //code
+    };
+
+}