refactor(charts): change color scheme for d3 charts

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

@@ -81,14 +81,5 @@ export const COSMIC_THEME = {
       axisLineColor: '#a1a1e5',
       textColor: '#ffffff',
     },
-
-    d3: {
-      pie: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-      bar: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-      line: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-      advancedPie: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-      areaStack: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-      polar: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-    },
   },
 };

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

@@ -75,14 +75,5 @@ export const DEFAULT_THEME = {
       axisLineColor: '#cccccc',
       textColor: '#484848',
     },
-
-    d3: {
-      pie: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-      bar: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-      line: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-      advancedPie: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-      areaStack: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-      polar: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
-    },
   },
 };

src/app/pages/charts/d3/d3-advanced-pie.component.ts

@@ -5,7 +5,6 @@ import { NbThemeService } from '@nebular/theme';
   selector: 'ngx-d3-advanced-pie',
   template: `
     <ngx-charts-advanced-pie-chart
-      [view]="view"
       [scheme]="colorScheme"
       [results]="single">
     </ngx-charts-advanced-pie-chart>
@@ -26,13 +25,13 @@ export class D3AdvancedPieComponent {
       value: 7200000,
     },
   ];
-  view: any[] = [700, 400];
   colorScheme: any;
 
   constructor(private theme: NbThemeService) {
     this.theme.getJsTheme().subscribe(config => {
+      const colors: any = config.variables;
       this.colorScheme = {
-        domain: (<any>config.variables.d3).advancedPie,
+        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
       };
     });
   }

src/app/pages/charts/d3/d3-area-stack.component.ts

@@ -5,7 +5,6 @@ import { NbThemeService } from '@nebular/theme';
   selector: 'ngx-d3-area-stack',
   template: `
     <ngx-charts-area-chart
-      [view]="view"
       [scheme]="colorScheme"
       [results]="multi"
       [xAxis]="showXAxis"
@@ -20,50 +19,34 @@ import { NbThemeService } from '@nebular/theme';
   `,
 })
 export class D3AreaStackComponent {
-  multi = [
+  multi = [{
-    {
     name: 'Germany',
-      series: [
+    series: [{
-        {
         name: '2010',
         value: 7300000,
-        },
+      }, {
-        {
         name: '2011',
         value: 8940000,
-        },
+      }],
-      ],
+  }, {
-    },
-
-    {
     name: 'USA',
-      series: [
+    series: [{
-        {
         name: '2010',
         value: 7870000,
-        },
+      }, {
-        {
         name: '2011',
         value: 8270000,
-        },
+      }],
-      ],
+  }, {
-    },
-
-    {
     name: 'France',
-      series: [
+    series: [{
-        {
         name: '2010',
         value: 5000002,
-        },
+      }, {
-        {
         name: '2011',
         value: 5800000,
-        },
+      }],
-      ],
+  }];
-    },
-  ];
-  view: any[] = [700, 400];
   showLegend = true;
   autoScale = true;
   showXAxis = true;
@@ -76,8 +59,9 @@ export class D3AreaStackComponent {
 
   constructor(private theme: NbThemeService) {
     this.theme.getJsTheme().subscribe(config => {
+      const colors: any = config.variables;
       this.colorScheme = {
-        domain: (<any>config.variables.d3).areaStack,
+        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
       };
     });
   }

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

@@ -5,49 +5,35 @@ import { NbThemeService } from '@nebular/theme';
   selector: 'ngx-d3-bar',
   template: `
     <ngx-charts-bar-vertical
-      [view]="view"
       [scheme]="colorScheme"
-      [results]="single"
+      [results]="results"
       [xAxis]="showXAxis"
       [yAxis]="showYAxis"
       [legend]="showLegend"
-      [showXAxisLabel]="showXAxisLabel"
-      [showYAxisLabel]="showYAxisLabel"
       [xAxisLabel]="xAxisLabel"
       [yAxisLabel]="yAxisLabel">
     </ngx-charts-bar-vertical>
   `,
 })
 export class D3BarComponent {
-  single = [
+
-    {
+  results = [
-      name: 'Germany',
+    { name: 'Germany', value: 8940 },
-      value: 8940000,
+    { name: 'USA', value: 5000 },
-    },
+    { name: 'France', value: 7200 },
-    {
-      name: 'USA',
-      value: 5000000,
-    },
-    {
-      name: 'France',
-      value: 7200000,
-    },
   ];
-  view: any[] = [700, 400];
   showLegend = true;
   showXAxis = true;
   showYAxis = true;
-  showLabels = true;
-  showXAxisLabel = true;
   xAxisLabel = 'Country';
-  showYAxisLabel = true;
   yAxisLabel = 'Population';
   colorScheme: any;
 
   constructor(private theme: NbThemeService) {
     this.theme.getJsTheme().subscribe(config => {
+      const colors: any = config.variables;
       this.colorScheme = {
-        domain: (<any>config.variables.d3).bar,
+        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
       };
     });
   }

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

@@ -5,7 +5,6 @@ import { NbThemeService } from '@nebular/theme';
   selector: 'ngx-d3-line',
   template: `
     <ngx-charts-line-chart
-      [view]="view"
       [scheme]="colorScheme"
       [results]="multi"
       [xAxis]="showXAxis"
@@ -25,11 +24,11 @@ export class D3LineComponent {
       series: [
         {
           name: '2010',
-          value: 7300000,
+          value: 7300,
         },
         {
           name: '2011',
-          value: 8940000,
+          value: 8940,
         },
       ],
     },
@@ -38,11 +37,11 @@ export class D3LineComponent {
       series: [
         {
           name: '2010',
-          value: 7870000,
+          value: 7870,
         },
         {
           name: '2011',
-          value: 8270000,
+          value: 8270,
         },
       ],
     },
@@ -51,20 +50,18 @@ export class D3LineComponent {
       series: [
         {
           name: '2010',
-          value: 5000002,
+          value: 5002,
         },
         {
           name: '2011',
-          value: 5800000,
+          value: 5800,
         },
       ],
     },
   ];
-  view: any[] = [700, 400];
   showLegend = true;
   showXAxis = true;
   showYAxis = true;
-  showLabels = true;
   showXAxisLabel = true;
   xAxisLabel = 'Country';
   showYAxisLabel = true;
@@ -73,8 +70,9 @@ export class D3LineComponent {
 
   constructor(private theme: NbThemeService) {
     this.theme.getJsTheme().subscribe(config => {
+      const colors: any = config.variables;
       this.colorScheme = {
-        domain: (<any>config.variables.d3).line,
+        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
       };
     });
   }

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

@@ -5,44 +5,28 @@ import { NbThemeService } from '@nebular/theme';
   selector: 'ngx-d3-pie',
   template: `
     <ngx-charts-pie-chart
-      [view]="view"
       [scheme]="colorScheme"
-      [results]="single"
+      [results]="results"
       [legend]="showLegend"
       [labels]="showLabels">
     </ngx-charts-pie-chart>
   `,
 })
 export class D3PieComponent {
-  single = [
+  results = [
-    {
+    { name: 'Germany', value: 8940 },
-      name: 'Germany',
+    { name: 'USA', value: 5000 },
-      value: 8940000,
+    { name: 'France', value: 7200 },
-    },
-    {
-      name: 'USA',
-      value: 5000000,
-    },
-    {
-      name: 'France',
-      value: 7200000,
-    },
   ];
-  view: any[] = [700, 400];
   showLegend = true;
-  showXAxis = true;
-  showYAxis = true;
   showLabels = true;
-  showXAxisLabel = true;
-  xAxisLabel = 'Country';
-  showYAxisLabel = true;
-  yAxisLabel = 'Population';
   colorScheme: any;
 
   constructor(private theme: NbThemeService) {
     this.theme.getJsTheme().subscribe(config => {
+      const colors: any = config.variables;
       this.colorScheme = {
-        domain: (<any>config.variables.d3).pie,
+        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
       };
     });
   }

src/app/pages/charts/d3/d3-polar.component.ts

@@ -5,7 +5,6 @@ import { NbThemeService } from '@nebular/theme';
   selector: 'ngx-d3-polar',
   template: `
     <ngx-charts-polar-chart
-      [view]="view"
       [scheme]="colorScheme"
       [results]="multi"
       [xAxis]="showXAxis"
@@ -73,7 +72,6 @@ export class D3PolarComponent {
       ],
     },
   ];
-  view: any[] = [700, 400];
   showLegend = true;
   autoScale = true;
   showXAxis = true;
@@ -86,8 +84,9 @@ export class D3PolarComponent {
 
   constructor(private theme: NbThemeService) {
     this.theme.getJsTheme().subscribe(config => {
+      const colors: any = config.variables;
       this.colorScheme = {
-        domain: (<any>config.variables.d3).polar,
+        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
       };
     });
   }

src/app/pages/charts/d3/d3.component.scss

@@ -1,4 +1,14 @@
 @import '../../../@theme/styles/themes';
 
 @include nb-install-component() {
+  ngx-d3-bar,
+  ngx-d3-pie,
+  ngx-d3-advanced-pie,
+  ngx-d3-area-stack,
+  ngx-d3-line,
+  ngx-d3-polar {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 }

src/app/pages/pages-menu.ts

@@ -75,12 +75,12 @@ export const MENU_ITEMS: List<NbMenuItem> = List([{
   children: List<NbMenuItem>([{
     title: 'Echarts',
     link: '/pages/charts/echarts',
-  }, {
-    title: 'D3',
-    link: '/pages/charts/d3',
   }, {
     title: 'Charts.js',
     link: '/pages/charts/chartjs',
+  }, {
+    title: 'D3',
+    link: '/pages/charts/d3',
   }]),
 }, {
   title: 'Editors',