feat(charts): integrate js theme with chart.js

src/app/@theme/styles/theme.cosmic.ts

@@ -85,5 +85,39 @@ export const COSMIC_THEME = {
     echartsRadarLegendTextColor: 'white',
     echartsRadarNameTextColor: 'white',
     echartsRadarSplitAreaStyleColor: 'transparent',
+
+    chartjsPieXAxisColor: 'rgba(148,159,177,1)',
+    chartjsPieYAxisColor: 'rgba(148,159,177,1)',
+    chartjsPieTickColor: 'white',
+    chartjsPieLegendTextColor: 'white',
+
+    chartjsBarXAxisColor: 'rgba(148,159,177,1)',
+    chartjsBarYAxisColor: 'rgba(148,159,177,1)',
+    chartjsBarTickColor: 'white',
+    chartjsBarLegendTextColor: 'white',
+
+    chartjsLineXAxisColor: 'rgba(148,159,177,1)',
+    chartjsLineYAxisColor: 'rgba(148,159,177,1)',
+    chartjsLineTickColor: 'white',
+    chartjsLineLegendTextColor: 'white',
+
+    chartjsMultipleXAxisXAxisColor: 'rgba(148,159,177,1)',
+    chartjsMultipleXAxisYAxisColor: 'rgba(148,159,177,1)',
+    chartjsMultipleXAxisTickColor: 'white',
+    chartjsMultipleXAxisLegendTextColor: 'white',
+
+    chartjsBarHorizontalColor1: 'red',
+    chartjsBarHorizontalColor2: 'blue',
+    chartjsBarHorizontalXAxisColor: 'rgba(148,159,177,1)',
+    chartjsBarHorizontalYAxisColor: 'rgba(148,159,177,1)',
+    chartjsBarHorizontalTickColor: 'white',
+    chartjsBarHorizontalLegendTextColor: 'white',
+
+    chartjsRadarColor1: 'red',
+    chartjsRadarColor2: 'blue',
+    chartjsRadarLegendTextColor: 'white',
+    chartjsRadarScaleGridLinesColor: 'white',
+    chartjsRadarScaleAngleLinesColor: 'white',
+    chartjsRadarPointLabelFontColor: 'white',
   },
 };

src/app/pages/charts/chartjs/chartjs-bar-horizontal.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NgaThemeService } from '@akveo/nga-theme';
 
 @Component({
   selector: 'ngx-chartjs-bar-horizontal',
@@ -19,57 +20,88 @@ import { Component } from '@angular/core';
   `,
 })
 export class ChartjsBarHorizontalComponent {
-  chartData = [
+  chartData: any[];
-    {
-      label: 'Dataset 1',
-      backgroundColor: 'red',
-      borderColor: 'red',
-      borderWidth: 1,
-      data: [
-        this.randomScalingFactor(),
-        this.randomScalingFactor(),
-        this.randomScalingFactor(),
-        this.randomScalingFactor(),
-        this.randomScalingFactor(),
-        this.randomScalingFactor(),
-        this.randomScalingFactor(),
-      ],
-    },
-    {
-      label: 'Dataset 2',
-      backgroundColor: 'blue',
-      borderColor: 'blue',
-      data: [
-        this.randomScalingFactor(),
-        this.randomScalingFactor(),
-        this.randomScalingFactor(),
-        this.randomScalingFactor(),
-        this.randomScalingFactor(),
-        this.randomScalingFactor(),
-        this.randomScalingFactor(),
-      ],
-    },
-  ];
   chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-  chartOptions = {
-    // Elements options apply to all of the options unless overridden in a dataset
-    // In this case, we are setting the border of each horizontal bar to be 2px wide
-    elements: {
-      rectangle: {
-        borderWidth: 2,
-      },
-    },
-    responsive: true,
-    legend: {
-      position: 'right',
-    },
-    title: {
-      display: true,
-      text: 'Chart.js Horizontal Bar Chart',
-    },
-  };
   chartLegend: boolean = true;
   chartType: string = 'horizontalBar';
+  chartOptions: any;
+
+  constructor(private theme: NgaThemeService) {
+    this.theme.getJsTheme().subscribe(config => {
+      this.chartData = [
+        {
+          label: 'Dataset 1',
+          backgroundColor: config.chartjsBarHorizontalColor1,
+          borderColor: config.chartjsBarHorizontalColor1,
+          borderWidth: 1,
+          data: [
+            this.randomScalingFactor(),
+            this.randomScalingFactor(),
+            this.randomScalingFactor(),
+            this.randomScalingFactor(),
+            this.randomScalingFactor(),
+            this.randomScalingFactor(),
+            this.randomScalingFactor(),
+          ],
+        },
+        {
+          label: 'Dataset 2',
+          backgroundColor: config.chartjsBarHorizontalColor2,
+          borderColor: config.chartjsBarHorizontalColor2,
+          data: [
+            this.randomScalingFactor(),
+            this.randomScalingFactor(),
+            this.randomScalingFactor(),
+            this.randomScalingFactor(),
+            this.randomScalingFactor(),
+            this.randomScalingFactor(),
+            this.randomScalingFactor(),
+          ],
+        },
+      ];
+
+      this.chartOptions = {
+        // Elements options apply to all of the options unless overridden in a dataset
+        // In this case, we are setting the border of each horizontal bar to be 2px wide
+        elements: {
+          rectangle: {
+            borderWidth: 2,
+          },
+        },
+        responsive: true,
+        scales: {
+          xAxes: [
+            {
+              gridLines: {
+                display: true,
+                color: config.chartjsBarHorizontalXAxisColor,
+              },
+              ticks: {
+                fontColor: config.chartjsBarHorizontalTickColor,
+              },
+            },
+          ],
+          yAxes: [
+            {
+              gridLines: {
+                display: true,
+                color: config.chartjsBarHorizontalYAxisColor,
+              },
+              ticks: {
+                fontColor: config.chartjsBarHorizontalTickColor,
+              },
+            },
+          ],
+        },
+        legend: {
+          position: 'right',
+          labels: {
+            fontColor: config.chartjsBarHorizontalLegendTextColor,
+          },
+        },
+      };
+    });
+  }
 
   private randomScalingFactor() {
     return Math.round(Math.random() * 100);

src/app/pages/charts/chartjs/chartjs-bar.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NgaThemeService } from '@akveo/nga-theme';
 
 @Component({
   selector: 'ngx-chartjs-bar',
@@ -19,39 +20,6 @@ import { Component } from '@angular/core';
   `,
 })
 export class ChartjsBarComponent {
-  chartOptions: any = {
-    scaleShowVerticalLines: false,
-    responsive: true,
-    legend: {
-      labels: {
-        fontColor: 'white',
-      },
-    },
-    scales: {
-      xAxes: [
-        {
-          gridLines: {
-            display: true,
-            color: 'rgba(148,159,177,1)',
-          },
-          ticks: {
-            fontColor: 'white',
-          },
-        },
-      ],
-      yAxes: [
-        {
-          gridLines: {
-            display: true,
-            color: 'rgba(148,159,177,1)',
-          },
-          ticks: {
-            fontColor: 'white',
-          },
-        },
-      ],
-    },
-  };
   chartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
   chartType: string = 'bar';
   chartLegend: boolean = true;
@@ -59,4 +27,43 @@ export class ChartjsBarComponent {
     { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
     { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
   ];
+  chartOptions: any;
+
+  constructor(private theme: NgaThemeService) {
+    this.theme.getJsTheme().subscribe(config => {
+      this.chartOptions = {
+        scaleShowVerticalLines: false,
+        responsive: true,
+        legend: {
+          labels: {
+            fontColor: config.chartjsBarLegendTextColor,
+          },
+        },
+        scales: {
+          xAxes: [
+            {
+              gridLines: {
+                display: true,
+                color: config.chartjsBarXAxisColor,
+              },
+              ticks: {
+                fontColor: config.chartjsBarTickColor,
+              },
+            },
+          ],
+          yAxes: [
+            {
+              gridLines: {
+                display: true,
+                color: config.chartjsBarYAxisColor,
+              },
+              ticks: {
+                fontColor: config.chartjsBarTickColor,
+              },
+            },
+          ],
+        },
+      };
+    });
+  }
 }

src/app/pages/charts/chartjs/chartjs-line.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NgaThemeService } from '@akveo/nga-theme';
 
 @Component({
   selector: 'ngx-chartjs-line',
@@ -24,40 +25,45 @@ export class ChartjsLineComponent {
     { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
     { data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C' },
   ];
-
   chartLabels: any[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-  chartOptions: any = {
-    responsive: true,
-    scales: {
-      xAxes: [
-        {
-          gridLines: {
-            display: true,
-            color: 'rgba(148,159,177,1)',
-          },
-          ticks: {
-            fontColor: 'white',
-          },
-        },
-      ],
-      yAxes: [
-        {
-          gridLines: {
-            display: true,
-            color: 'rgba(148,159,177,1)',
-          },
-          ticks: {
-            fontColor: 'white',
-          },
-        },
-      ],
-    },
-    legend: {
-      labels: {
-        fontColor: 'white',
-      },
-    },
-  };
   chartLegend: boolean = true;
   chatyType: string = 'line';
+  chartOptions: any;
+
+  constructor(private theme: NgaThemeService) {
+    this.theme.getJsTheme().subscribe(config => {
+      this.chartOptions = {
+        responsive: true,
+        scales: {
+          xAxes: [
+            {
+              gridLines: {
+                display: true,
+                color: config.chartjsLineXAxisColor,
+              },
+              ticks: {
+                fontColor: config.chartjsLineTickColor,
+              },
+            },
+          ],
+          yAxes: [
+            {
+              gridLines: {
+                display: true,
+                color: config.chartjsLineYAxisColor,
+              },
+              ticks: {
+                fontColor: config.chartjsLineTickColor,
+              },
+            },
+          ],
+        },
+        legend: {
+          labels: {
+            fontColor: config.chartjsLineLegendTextColor,
+          },
+        },
+      };
+    });
+  }
 }

src/app/pages/charts/chartjs/chartjs-multiple-xaxis.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NgaThemeService } from '@akveo/nga-theme';
 
 @Component({
   selector: 'ngx-chartjs-multiple-xaxis',
@@ -21,39 +22,6 @@ import { Component } from '@angular/core';
 export class ChartjsMultipleXaxisComponent {
   chartType: string = 'line';
   chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
-  chartOptions: {
-    responsive: true;
-    legend: {
-      position: 'bottom';
-    };
-    hover: {
-      mode: 'index';
-    };
-    scales: {
-      xAxes: [
-        {
-          display: true;
-          scaleLabel: {
-            display: true;
-            labelString: 'Month';
-          };
-        }
-      ];
-      yAxes: [
-        {
-          display: true;
-          scaleLabel: {
-            display: true;
-            labelString: 'Value';
-          };
-        }
-      ];
-    };
-    title: {
-      display: true;
-      text: 'Chart.js Line Chart - Different point sizes';
-    };
-  };
   chartLegend: boolean = true;
   chartData: any[] = [
     {
@@ -124,6 +92,58 @@ export class ChartjsMultipleXaxisComponent {
       pointHitRadius: 20,
     },
   ];
+  chartOptions: any;
+
+  constructor(private theme: NgaThemeService) {
+    this.theme.getJsTheme().subscribe(config => {
+      this.chartOptions = {
+        responsive: true,
+        legend: {
+          position: 'bottom',
+          labels: {
+            fontColor: config.chartjsLineLegendTextColor,
+          },
+        },
+        hover: {
+          mode: 'index',
+        },
+        scales: {
+          xAxes: [
+            {
+              display: true,
+              scaleLabel: {
+                display: true,
+                labelString: 'Month',
+              },
+              gridLines: {
+                display: true,
+                color: config.chartjsLineXAxisColor,
+              },
+              ticks: {
+                fontColor: config.chartjsLineTickColor,
+              },
+            },
+          ],
+          yAxes: [
+            {
+              display: true,
+              scaleLabel: {
+                display: true,
+                labelString: 'Value',
+              },
+              gridLines: {
+                display: true,
+                color: config.chartjsLineXAxisColor,
+              },
+              ticks: {
+                fontColor: config.chartjsLineTickColor,
+              },
+            },
+          ],
+        },
+      };
+    });
+  }
 
   private randomScalingFactor() {
     return Math.round(Math.random() * 100);

src/app/pages/charts/chartjs/chartjs-pie.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NgaThemeService } from '@akveo/nga-theme';
 
 @Component({
   selector: 'ngx-chartjs-pie',
@@ -10,7 +11,7 @@ import { Component } from '@angular/core';
     `,
   ],
   template: `
-    <canvas baseChart width="400" height="400"
+    <canvas baseChart
             [data]="chartData"
             [labels]="chartLabels"
             [options]="chartOptions"
@@ -21,36 +22,48 @@ export class ChartjsPieComponent {
   chartType: string = 'pie';
   chartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
   chartData: number[] = [300, 500, 100];
-  chartOptions: any = {
+  chartOptions: any;
-    responsive: true,
+
-    scales: {
+  constructor(private theme: NgaThemeService) {
-      xAxes: [
+    this.theme.getJsTheme().subscribe(config => {
-        {
+      this.chartOptions = {
-          gridLines: {
+        responsive: true,
-            display: true,
+        scale: {
-            color: 'rgba(148,159,177,1)',
+          pointLabels: {
-          },
+            fontSize: 14,
-          ticks: {
+            fontColor: config.chartjsRadarPointLabelFontColor,
-            fontColor: 'white',
           },
         },
-      ],
+        scales: {
-      yAxes: [
+          xAxes: [
-        {
+            {
-          gridLines: {
+              gridLines: {
-            display: true,
+                display: true,
-            color: 'rgba(148,159,177,1)',
+                color: config.chartjsPieXAxisColor,
-          },
+              },
-          ticks: {
+              ticks: {
-            fontColor: 'white',
+                fontColor: config.chartjsPitTickColor,
+              },
+            },
+          ],
+          yAxes: [
+            {
+              gridLines: {
+                display: true,
+                color: config.chartjsPieYAxisColor,
+              },
+              ticks: {
+                fontColor: config.chartjsPieTickColor,
+              },
+            },
+          ],
+        },
+        legend: {
+          labels: {
+            fontColor: config.chartjsPieLegendTextColor,
           },
         },
-      ],
+      };
-    },
+    });
-    legend: {
+  }
-      labels: {
-        fontColor: 'white',
-      },
-    },
-  };
 }

src/app/pages/charts/chartjs/chartjs-radar.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { NgaThemeService } from '@akveo/nga-theme';
 
 @Component({
   selector: 'ngx-chartjs-radar',
@@ -11,16 +12,55 @@ import { Component } from '@angular/core';
   ],
   template: `
     <canvas baseChart
-        [datasets]="chartData"
+            [datasets]="chartData"
-        [labels]="chartLabels"
+            [labels]="chartLabels"
-        [chartType]="chartType"></canvas>
+            [chartType]="chartType"
+            [options]="chartOptions"></canvas>
   `,
 })
 export class ChartjsRadarComponent {
   chartLabels: string[] = ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'];
-  chartData: any = [
-    { data: [65, 59, 90, 81, 56, 55, 40], label: 'Series A' },
-    { data: [28, 48, 40, 19, 96, 27, 100], label: 'Series B' },
-  ];
   chartType: string = 'radar';
+  chartOptions: any;
+  chartData: any[];
+
+  constructor(private theme: NgaThemeService) {
+    this.theme.getJsTheme().subscribe(config => {
+      this.chartData = [
+        {
+          data: [65, 59, 90, 81, 56, 55, 40],
+          label: 'Series A',
+          borderColor: config.chartjsRadarColor1,
+          backgroundColor: config.chartjsRadarColor1,
+        },
+        {
+          data: [28, 48, 40, 19, 96, 27, 100],
+          label: 'Series B',
+          borderColor: config.chartjsRadarColor2,
+          backgroundColor: config.chartjsRadarColor2,
+        },
+      ];
+
+      this.chartOptions = {
+        scaleFontColor: 'white',
+        legend: {
+          labels: {
+            fontColor: config.chartjsRadarLegendTextColor,
+          },
+        },
+        scale: {
+          pointLabels: {
+            fontSize: 14,
+            fontColor: config.chartjsRadarPointLabelFontColor,
+          },
+          gridLines: {
+            color: config.chartjsRadarScaleGridLinesColor,
+          },
+          angleLines: {
+            color: config.chartjsRadarScaleAngleLinesColor,
+          },
+        },
+      };
+    });
+  }
 }