feature(EJ2-4114): fabric theme for chart changed

Author: pipeline

src/chart/area-plnkr.json

@@ -1,4 +1,5 @@
 import { Component, ViewEncapsulation } from '@angular/core';
+import { ILoadedEventArgs } from '@syncfusion/ej2-ng-charts';
 
 /**
  * Area Series
@@ -45,6 +46,10 @@ export class AreaChartComponent {
         majorTickLines: { width: 0 },
         labelFormat: '{value}M'
     };
+    public load(args: ILoadedEventArgs): void {
+        let selectedTheme: string = location.hash.split('/')[1];
+        args.chart.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
+    };
     public title: string = 'Average Sales Comparison';
     constructor() {
         // code

src/chart/area.component.ts

@@ -1,5 +1,5 @@
 <div class="control-section">
-        <ej-chart style='display:block;' [title]='title' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'>
+        <ej-chart style='display:block;' [title]='title' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis' (load)='load($event)'>
             <e-series-collection>
                 <e-series [dataSource]='data' type='Area' xName='x' yName='y' name='Product A' opacity=0.5 width=2 border-color='transparent'>
                 </e-series>

src/chart/area.html

@@ -1,5 +1,5 @@
 import { Component, ViewEncapsulation } from '@angular/core';
-
+import { ILoadedEventArgs } from '@syncfusion/ej2-ng-charts';
 /**
  * Bar Series
  */
@@ -41,6 +41,10 @@ export class BarChartComponent {
         enable: true,
         format: '${series.name}<br> ${point.x} : ${point.y}'
     };
+    public load(args: ILoadedEventArgs): void {
+        let selectedTheme: string = location.hash.split('/')[1];
+        args.chart.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
+    };
     public title: string = 'UK Trade in Food Groups - 2015';
     constructor() {
         //code

src/chart/bar-plnkr.json

@@ -1,7 +1,7 @@
 <div class="control-section">
         <div>
             <ej-chart style='display:block;' id='chartcontainer' [primaryXAxis]='primaryXAxis' [primaryYAxis]='primaryYAxis'
-                [title]='title' [tooltip]='tooltip'>
+                [title]='title' [tooltip]='tooltip' (load)='load($event)'>
                 <e-series-collection>
                     <e-series [dataSource]='data' type='Bar' xName='x' yName='y' name='Imports' width=2> </e-series>
                     <e-series [dataSource]='data1' type='Bar' xName='x' yName='y' name='Exports' width=2> </e-series>

src/chart/bar.component.ts

@@ -50,9 +50,16 @@ export class BubbleChartComponent {
     };
 
     public pointRender(args: IPointRenderEventArgs): void {
-        let seriesColor: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',
-                                     '#ea7a57', '#404041', '#00bdae' ];
-        args.fill = seriesColor[args.point.index];
+        let materialColors: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883', '#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb',
+                                        '#ea7a57', '#404041', '#00bdae' ];
+        let fabricColors: string[] = ['#4472c4', '#ed7d31', '#ffc000', '#70ad47', '#5b9bd5',
+                                      '#c1c1c1', '#6f6fe2', '#e269ae', '#9e480e', '#997300', '#4472c4', '#70ad47', '#ffc000', '#ed7d31'];
+        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 legend: Object = {

src/chart/bar.html

@@ -1,5 +1,5 @@
 import { Component, ViewEncapsulation } from '@angular/core';
-
+import { ILoadedEventArgs} from '@syncfusion/ej2-ng-charts';
 /**
  * Column Series
  */
@@ -39,6 +39,10 @@ export class ColumnChartComponent {
         enable: true,
         format: '${series.name}<br>${point.x} : ${point.y}'
     };
+    public load(args: ILoadedEventArgs): void {
+        let selectedTheme: string = location.hash.split('/')[1];
+        args.chart.theme = (selectedTheme && selectedTheme.indexOf('fabric') > -1) ? 'Fabric' : 'Material';
+    };
     constructor() {
         //code
     };