bug(EJ2-4114): fabric theme isssue in chart fixed

pipeline · pipeline · commit 8ec103fbbc2b · 2017-09-20T09:37:37.000Z
diff --git a/src/chart/category-plnkr.json b/src/chart/category-plnkr.json
@@ -1 +1 @@
-{"common/shared.module":"import { NgModule } from '@angular/core';\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ListViewModule } from '@syncfusion/ej2-ng-lists';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\n\n\n@NgModule({\n    imports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ],\n     \n    exports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ]\n})\nexport class SharedModule { }\n","app.module":"import { CategoryChartComponent } from './category.component';\n\n\n\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\n/**\n * Chart Control\n */\nimport { NgModule, ModuleWithProviders, Type } from '@angular/core';\n\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-ng-charts';\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n@NgModule({\n    imports: [ChartAllModule, SharedModule, ButtonModule, AccumulationChartAllModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [CategoryChartComponent],\nbootstrap: [CategoryChartComponent]\n})\nexport class AppModule { }","category.component":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { IPointRenderEventArgs } from '@syncfusion/ej2-ng-charts';\n/**\n * Category axis\n */\n@Component({\n    selector: 'control-content',\n    templateUrl: 'category.html',\n    styleUrls: ['chart.style.css'],\n    encapsulation: ViewEncapsulation.None\n})\nexport class CategoryChartComponent {\n\n    public data: Object[] = [\n        { x: 'GER', y: 71.7 },\n        { x: 'RUS', y: 103.1 },\n        { x: 'BRZ', y: 139.1 },\n        { x: 'IND', y: 462.1 },\n        { x: 'CHN', y: 721.4 },\n        { x: 'USA', y: 286.9 },\n        { x: 'GBR', y: 60.2 },\n        { x: 'JAP', y: 115.1 },\n        { x: 'NGR', y: 97.2 },\n    ];\n    public primaryXAxis: Object = {\n        title: 'Countries',\n        valueType: 'Category'\n    };\n    public pointRender(args: IPointRenderEventArgs): void {\n        let seriesColor: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',\n            '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];\n        args.fill = seriesColor[args.point.index];\n    };\n    public primaryYAxis: Object = {\n        title: 'Users in Millions',\n        minimum: 0,\n        maximum: 800,\n        labelFormat: '{value}M',\n        edgeLabelPlacement: 'Shift'\n    };\n    public tooltip: Object = {\n        enable: true,\n        format: '${point.x} : ${point.y}'\n    };\n    public title: string = 'Internet Users – 2016';\n    ;\n\n}\n","category.html":"<div class=\"control-section\">\n        <div>\n            <ej-chart style='display:block;' id='chartcontainer' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'\n                [title]='title' [tooltip]='tooltip' (pointRender)='pointRender($event)'>\n                <e-series-collection>\n                    <e-series [dataSource]='data' type='Bar' xName='x' yName='y' width=2> </e-series>\n                </e-series-collection>\n            </ej-chart>\n        </div>\n        <div style=\"float: right; margin-right: 10px; margin-top: -5px\">Source:\n            <a href=\"http://www.internetworldstats.com/top20.htm\" target=\"_blank\">www.internetworldstats.com</a>\n        </div>\n</div>","chart.style.css":".control-fluid {\n    padding: 0px !important;\n}","index.html":"<!DOCTYPE html>\n<html>\n    \n    <head>\n        <meta name=\"author\" content=\"Syncfusion\" />\n        <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n        <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n        <script src=\"https://unpkg.com/reflect-metadata@0.1.3\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n        <script src=\"systemjs.config.js\"></script>\n    </head>\n    \n    <body>\n        <control-content>\n            <div id='loader'>Loading...</div>\n        </control-content>\n    </body>\n    \n    </html>\n    ","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\",\n        \"angular:\": \"https://unpkg.com/@angular/\"\n    },\n    map: {\n        main: 'main.ts',\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n        \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n\n        \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n        \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n        \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n        \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n        \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n        \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n        \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n        \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n        \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n        \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n        \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n        '@angular/core': 'angular:core/bundles/core.umd.js',\n        '@angular/common': 'angular:common/bundles/common.umd.js',\n        '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n        '@angular/http': 'angular:http/bundles/http.umd.js',\n        '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n        '@angular/router': 'angular:router/bundles/router.umd.js',\n        '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n        '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n        '@angular/material': 'angular:material/bundles/material.umd.js',\n        'rxjs': 'https://unpkg.com/rxjs'\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}
+{"common/shared.module":"import { NgModule } from '@angular/core';\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ListViewModule } from '@syncfusion/ej2-ng-lists';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\n\n\n@NgModule({\n    imports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ],\n     \n    exports: [\n        ButtonModule,\n        ListViewModule,\n        DropDownListModule\n    ]\n})\nexport class SharedModule { }\n","app.module":"import { CategoryChartComponent } from './category.component';\n\n\n\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\n/**\n * Chart Control\n */\nimport { NgModule, ModuleWithProviders, Type } from '@angular/core';\n\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-ng-charts';\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n@NgModule({\n    imports: [ChartAllModule, SharedModule, ButtonModule, AccumulationChartAllModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [CategoryChartComponent],\nbootstrap: [CategoryChartComponent]\n})\nexport class AppModule { }","category.component":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { IPointRenderEventArgs } from '@syncfusion/ej2-ng-charts';\n/**\n * Category axis\n */\n@Component({\n    selector: 'control-content',\n    templateUrl: 'category.html',\n    styleUrls: ['chart.style.css'],\n    encapsulation: ViewEncapsulation.None\n})\nexport class CategoryChartComponent {\n\n    public data: Object[] = [\n        { x: 'GER', y: 71.7 },\n        { x: 'RUS', y: 103.1 },\n        { x: 'BRZ', y: 139.1 },\n        { x: 'IND', y: 462.1 },\n        { x: 'CHN', y: 721.4 },\n        { x: 'USA', y: 286.9 },\n        { x: 'GBR', y: 60.2 },\n        { x: 'JAP', y: 115.1 },\n        { x: 'NGR', y: 97.2 },\n    ];\n    public primaryXAxis: Object = {\n        title: 'Countries',\n        valueType: 'Category'\n    };\n    public pointRender(args: IPointRenderEventArgs): void {\n        let materialColors: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',\n                                         '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];\n        let fabricColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n                                      '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300'];\n        let selectedTheme: string = location.hash.split('/')[1];\n        if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n           args.fill = fabricColors[args.point.index];\n        } else {\n           args.fill = materialColors[args.point.index];\n        }\n    };\n    public primaryYAxis: Object = {\n        title: 'Users in Millions',\n        minimum: 0,\n        maximum: 800,\n        labelFormat: '{value}M',\n        edgeLabelPlacement: 'Shift'\n    };\n    public tooltip: Object = {\n        enable: true,\n        format: '${point.x} : ${point.y}'\n    };\n    public title: string = 'Internet Users – 2016';\n    ;\n\n}\n","category.html":"<div class=\"control-section\">\n        <div>\n            <ej-chart style='display:block;' id='chartcontainer' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'\n                [title]='title' [tooltip]='tooltip' (pointRender)='pointRender($event)'>\n                <e-series-collection>\n                    <e-series [dataSource]='data' type='Bar' xName='x' yName='y' width=2> </e-series>\n                </e-series-collection>\n            </ej-chart>\n        </div>\n        <div style=\"float: right; margin-right: 10px; margin-top: -5px\">Source:\n            <a href=\"http://www.internetworldstats.com/top20.htm\" target=\"_blank\">www.internetworldstats.com</a>\n        </div>\n</div>","chart.style.css":".control-fluid {\n    padding: 0px !important;\n}","index.html":"<!DOCTYPE html>\n<html>\n    \n    <head>\n        <meta name=\"author\" content=\"Syncfusion\" />\n        <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n        <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n        <script src=\"https://unpkg.com/reflect-metadata@0.1.3\"></script>\n        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n        <script src=\"systemjs.config.js\"></script>\n    </head>\n    \n    <body>\n        <control-content>\n            <div id='loader'>Loading...</div>\n        </control-content>\n    </body>\n    \n    </html>\n    ","systemjs.config.js":"System.config({\n    transpiler: \"typescript\",\n    typescriptOptions: {\n        compilerOptions: {\n            target: \"umd\",\n            module: \"commonjs\",\n            moduleResolution: \"node\",\n            emitDecoratorMetadata: true,\n            experimentalDecorators: true\n        }\n    },\n    paths: {\n        \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\",\n        \"angular:\": \"https://unpkg.com/@angular/\"\n    },\n    map: {\n        main: 'main.ts',\n        typescript: \"https://unpkg.com/typescript@2.2.2/lib/typescript.js\",\n        \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\n        \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n        \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n        \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n        \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n        \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n        \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\n        \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\n        \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n        \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\n        \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n        \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n\n        \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n        \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n        \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n        \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n        \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n        \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n        \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n        \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n        \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n        \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n        \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n        \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n        \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n        '@angular/core': 'angular:core/bundles/core.umd.js',\n        '@angular/common': 'angular:common/bundles/common.umd.js',\n        '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n        '@angular/http': 'angular:http/bundles/http.umd.js',\n        '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n        '@angular/router': 'angular:router/bundles/router.umd.js',\n        '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n        '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n        '@angular/material': 'angular:material/bundles/material.umd.js',\n        'rxjs': 'https://unpkg.com/rxjs'\n    },\n     meta: { \n       '*.json': { loader: 'plugin-json' }\n    }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}
diff --git a/src/chart/category.component.ts b/src/chart/category.component.ts
@@ -27,9 +27,16 @@ export class CategoryChartComponent {
         valueType: 'Category'
     };
     public pointRender(args: IPointRenderEventArgs): void {
-        let seriesColor: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
-            '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];
-        args.fill = seriesColor[args.point.index];
+        let materialColors: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
+                                         '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];
+        let fabricColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',
+                                      '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300'];
+        let selectedTheme: string = location.hash.split('/')[1];
+        if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {
+           args.fill = fabricColors[args.point.index];
+        } else {
+           args.fill = materialColors[args.point.index];
+        }
     };
     public primaryYAxis: Object = {
         title: 'Users in Millions',

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-{"common/shared.module":"import { NgModule } from '@angular/core';\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ListViewModule } from '@syncfusion/ej2-ng-lists';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\n\n\n@NgModule({\n imports: [\n ButtonModule,\n ListViewModule,\n DropDownListModule\n ],\n \n exports: [\n ButtonModule,\n ListViewModule,\n DropDownListModule\n ]\n})\nexport class SharedModule { }\n","app.module":"import { CategoryChartComponent } from './category.component';\n\n\n\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\n/*\n Chart Control\n /\nimport { NgModule, ModuleWithProviders, Type } from '@angular/core';\n\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-ng-charts';\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n@NgModule({\n imports: [ChartAllModule, SharedModule, ButtonModule, AccumulationChartAllModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [CategoryChartComponent],\nbootstrap: [CategoryChartComponent]\n})\nexport class AppModule { }","category.component":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { IPointRenderEventArgs } from '@syncfusion/ej2-ng-charts';\n/\n Category axis\n /\n@Component({\n selector: 'control-content',\n templateUrl: 'category.html',\n styleUrls: ['chart.style.css'],\n encapsulation: ViewEncapsulation.None\n})\nexport class CategoryChartComponent {\n\n public data: Object[] = [\n { x: 'GER', y: 71.7 },\n { x: 'RUS', y: 103.1 },\n { x: 'BRZ', y: 139.1 },\n { x: 'IND', y: 462.1 },\n { x: 'CHN', y: 721.4 },\n { x: 'USA', y: 286.9 },\n { x: 'GBR', y: 60.2 },\n { x: 'JAP', y: 115.1 },\n { x: 'NGR', y: 97.2 },\n ];\n public primaryXAxis: Object = {\n title: 'Countries',\n valueType: 'Category'\n };\n public pointRender(args: IPointRenderEventArgs): void {\n let seriesColor: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',\n '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];\n args.fill = seriesColor[args.point.index];\n };\n public primaryYAxis: Object = {\n title: 'Users in Millions',\n minimum: 0,\n maximum: 800,\n labelFormat: '{value}M',\n edgeLabelPlacement: 'Shift'\n };\n public tooltip: Object = {\n enable: true,\n format: '${point.x} : ${point.y}'\n };\n public title: string = 'Internet Users – 2016';\n ;\n\n}\n","category.html":"<div class=\"control-section\">\n <div>\n <ej-chart style='display:block;' id='chartcontainer' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'\n [title]='title' [tooltip]='tooltip' (pointRender)='pointRender($event)'>\n <e-series-collection>\n <e-series [dataSource]='data' type='Bar' xName='x' yName='y' width=2> </e-series>\n </e-series-collection>\n </ej-chart>\n </div>\n <div style=\"float: right; margin-right: 10px; margin-top: -5px\">Source:\n <a href=\"http://www.internetworldstats.com/top20.htm\" target=\"_blank\">www.internetworldstats.com</a>\n </div>\n</div>","chart.style.css":".control-fluid {\n padding: 0px !important;\n}","index.html":"<!DOCTYPE html>\n<html>\n \n <head>\n <meta name=\"author\" content=\"Syncfusion\" />\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n </head>\n \n <body>\n <control-content>\n <div id='loader'>Loading...</div>\n </control-content>\n </body>\n \n </html>\n ","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\",\n \"angular:\": \"https://unpkg.com/@angular/\"\n },\n map: {\n main: 'main.ts',\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n\n \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n '@angular/core': 'angular:core/bundles/core.umd.js',\n '@angular/common': 'angular:common/bundles/common.umd.js',\n '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n '@angular/http': 'angular:http/bundles/http.umd.js',\n '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n '@angular/router': 'angular:router/bundles/router.umd.js',\n '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n '@angular/material': 'angular:material/bundles/material.umd.js',\n 'rxjs': 'https://unpkg.com/rxjs'\n },\n meta: { \n '.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}
	`1`	+{"common/shared.module":"import { NgModule } from '@angular/core';\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ListViewModule } from '@syncfusion/ej2-ng-lists';\nimport { DropDownListModule } from '@syncfusion/ej2-ng-dropdowns';\n\n\n@NgModule({\n imports: [\n ButtonModule,\n ListViewModule,\n DropDownListModule\n ],\n \n exports: [\n ButtonModule,\n ListViewModule,\n DropDownListModule\n ]\n})\nexport class SharedModule { }\n","app.module":"import { CategoryChartComponent } from './category.component';\n\n\n\nimport { HttpModule, JsonpModule } from '@angular/http';\nimport { BrowserModule } from '@angular/platform-browser';\nimport 'rxjs/add/operator/map';\n/*\n Chart Control\n /\nimport { NgModule, ModuleWithProviders, Type } from '@angular/core';\n\nimport { ButtonModule } from '@syncfusion/ej2-ng-buttons';\nimport { ChartAllModule, AccumulationChartAllModule } from '@syncfusion/ej2-ng-charts';\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nimport { SharedModule } from './common/shared.module';\n\n\n\n\n@NgModule({\n imports: [ChartAllModule, SharedModule, ButtonModule, AccumulationChartAllModule, HttpModule, JsonpModule, BrowserModule],\ndeclarations: [CategoryChartComponent],\nbootstrap: [CategoryChartComponent]\n})\nexport class AppModule { }","category.component":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { IPointRenderEventArgs } from '@syncfusion/ej2-ng-charts';\n/\n Category axis\n /\n@Component({\n selector: 'control-content',\n templateUrl: 'category.html',\n styleUrls: ['chart.style.css'],\n encapsulation: ViewEncapsulation.None\n})\nexport class CategoryChartComponent {\n\n public data: Object[] = [\n { x: 'GER', y: 71.7 },\n { x: 'RUS', y: 103.1 },\n { x: 'BRZ', y: 139.1 },\n { x: 'IND', y: 462.1 },\n { x: 'CHN', y: 721.4 },\n { x: 'USA', y: 286.9 },\n { x: 'GBR', y: 60.2 },\n { x: 'JAP', y: 115.1 },\n { x: 'NGR', y: 97.2 },\n ];\n public primaryXAxis: Object = {\n title: 'Countries',\n valueType: 'Category'\n };\n public pointRender(args: IPointRenderEventArgs): void {\n let materialColors: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',\n '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];\n let fabricColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',\n '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300'];\n let selectedTheme: string = location.hash.split('/')[1];\n if (selectedTheme && selectedTheme.indexOf('fabric') > -1) {\n args.fill = fabricColors[args.point.index];\n } else {\n args.fill = materialColors[args.point.index];\n }\n };\n public primaryYAxis: Object = {\n title: 'Users in Millions',\n minimum: 0,\n maximum: 800,\n labelFormat: '{value}M',\n edgeLabelPlacement: 'Shift'\n };\n public tooltip: Object = {\n enable: true,\n format: '${point.x} : ${point.y}'\n };\n public title: string = 'Internet Users – 2016';\n ;\n\n}\n","category.html":"<div class=\"control-section\">\n <div>\n <ej-chart style='display:block;' id='chartcontainer' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'\n [title]='title' [tooltip]='tooltip' (pointRender)='pointRender($event)'>\n <e-series-collection>\n <e-series [dataSource]='data' type='Bar' xName='x' yName='y' width=2> </e-series>\n </e-series-collection>\n </ej-chart>\n </div>\n <div style=\"float: right; margin-right: 10px; margin-top: -5px\">Source:\n <a href=\"http://www.internetworldstats.com/top20.htm\" target=\"_blank\">www.internetworldstats.com</a>\n </div>\n</div>","chart.style.css":".control-fluid {\n padding: 0px !important;\n}","index.html":"<!DOCTYPE html>\n<html>\n \n <head>\n <meta name=\"author\" content=\"Syncfusion\" />\n <link href=\"http://npmci.syncfusion.com/packages/production/material.css\" rel=\"stylesheet\" />\n <script src=\"https://unpkg.com/core-js/client/shim.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js\"></script>\n <script src=\"https://unpkg.com/[email protected]\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js\"></script>\n <script src=\"systemjs.config.js\"></script>\n </head>\n \n <body>\n <control-content>\n <div id='loader'>Loading...</div>\n </control-content>\n </body>\n \n </html>\n ","systemjs.config.js":"System.config({\n transpiler: \"typescript\",\n typescriptOptions: {\n compilerOptions: {\n target: \"umd\",\n module: \"commonjs\",\n moduleResolution: \"node\",\n emitDecoratorMetadata: true,\n experimentalDecorators: true\n }\n },\n paths: {\n \"syncfusion:\": \"http://npmci.syncfusion.com/packages/production/\",\n \"angular:\": \"https://unpkg.com/@angular/\"\n },\n map: {\n main: 'main.ts',\n typescript: \"https://unpkg.com/[email protected]/lib/typescript.js\",\n \"plugin-json\":\"https://cdnjs.cloudflare.com/ajax/libs/systemjs-plugin-json/0.3.0/json.min.js\",\n \"@syncfusion/ej2-base\": \"syncfusion:ej2-base/dist/ej2-base.umd.min.js\",\n \"@syncfusion/ej2-buttons\": \"syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js\",\n \"@syncfusion/ej2-calendars\": \"syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js\",\n \"@syncfusion/ej2-charts\": \"syncfusion:ej2-charts/dist/ej2-charts.umd.min.js\",\n \"@syncfusion/ej2-circulargauge\": \"syncfusion:ej2-circulargauge/dist/ej2-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-data\": \"syncfusion:ej2-data/dist/ej2-data.umd.min.js\",\n \"@syncfusion/ej2-dropdowns\": \"syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-grids\": \"syncfusion:ej2-grids/dist/ej2-grids.umd.min.js\",\n \"@syncfusion/ej2-inputs\": \"syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js\",\n \"@syncfusion/ej2-lists\": \"syncfusion:ej2-lists/dist/ej2-lists.umd.min.js\",\n \"@syncfusion/ej2-navigations\": \"syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js\",\n \"@syncfusion/ej2-popups\": \"syncfusion:ej2-popups/dist/ej2-popups.umd.min.js\",\n \"@syncfusion/ej2-lineargauge\": \"syncfusion:ej2-lineargauge/dist/ej2-lineargauge.umd.min.js\",\n\n \"@syncfusion/ej2-ng-base\": \"syncfusion:ej2-ng-base/dist/ej2-ng-base.umd.min.js\",\n \"@syncfusion/ej2-ng-buttons\": \"syncfusion:ej2-ng-buttons/dist/ej2-ng-buttons.umd.min.js\",\n \"@syncfusion/ej2-ng-calendars\": \"syncfusion:ej2-ng-calendars/dist/ej2-ng-calendars.umd.min.js\",\n \"@syncfusion/ej2-ng-charts\": \"syncfusion:ej2-ng-charts/dist/ej2-ng-charts.umd.min.js\",\n \"@syncfusion/ej2-ng-circulargauge\": \"syncfusion:ej2-ng-circulargauge/dist/ej2-ng-circulargauge.umd.min.js\",\n \"@syncfusion/ej2-ng-data\": \"syncfusion:ej2-ng-data/dist/ej2-ng-data.umd.min.js\",\n \"@syncfusion/ej2-ng-dropdowns\": \"syncfusion:ej2-ng-dropdowns/dist/ej2-ng-dropdowns.umd.min.js\",\n \"@syncfusion/ej2-ng-grids\": \"syncfusion:ej2-ng-grids/dist/ej2-ng-grids.umd.min.js\",\n \"@syncfusion/ej2-ng-inputs\": \"syncfusion:ej2-ng-inputs/dist/ej2-ng-inputs.umd.min.js\",\n \"@syncfusion/ej2-ng-lists\": \"syncfusion:ej2-ng-lists/dist/ej2-ng-lists.umd.min.js\",\n \"@syncfusion/ej2-ng-navigations\": \"syncfusion:ej2-ng-navigations/dist/ej2-ng-navigations.umd.min.js\",\n \"@syncfusion/ej2-ng-popups\": \"syncfusion:ej2-ng-popups/dist/ej2-ng-popups.umd.min.js\",\n \"@syncfusion/ej2-ng-lineargauge\": \"syncfusion:ej2-ng-lineargauge/dist/ej2-ng-lineargauge.umd.min.js\",\n\n '@angular/core': 'angular:core/bundles/core.umd.js',\n '@angular/common': 'angular:common/bundles/common.umd.js',\n '@angular/compiler': 'angular:compiler/bundles/compiler.umd.js',\n '@angular/http': 'angular:http/bundles/http.umd.js',\n '@angular/forms': 'angular:forms/bundles/forms.umd.js',\n '@angular/router': 'angular:router/bundles/router.umd.js',\n '@angular/platform-browser': 'angular:platform-browser/bundles/platform-browser.umd.js',\n '@angular/platform-browser-dynamic': 'angular:platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',\n '@angular/material': 'angular:material/bundles/material.umd.js',\n 'rxjs': 'https://unpkg.com/rxjs'\n },\n meta: { \n '.json': { loader: 'plugin-json' }\n }\n});\n\nSystem.import('main.ts').catch(console.error.bind(console));\n","main.ts":"import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { enableProdMode } from '@angular/core';\nimport { AppModule } from './app.module';\nimport { enableRipple } from '@syncfusion/ej2-base';\n\nenableRipple(true);\n\nenableProdMode();\nplatformBrowserDynamic().bootstrapModule(AppModule);"}