refactoring of chartist js component

src/app/pages/charts/components/chartistJs/chartistJs.component.ts

@@ -1,230 +1,31 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {BaCard} from '../../../../theme/components';
 
-import {ChartistJsService} from "./chartistJs.service";
+import {ChartistJsService} from './chartistJs.service';
 import {BaChartistChart} from '../../../../theme/components';
 
 @Component({
   selector: 'chartist-js',
+  encapsulation: ViewEncapsulation.None,
   pipes: [],
   providers: [ChartistJsService],
-  encapsulation: ViewEncapsulation.None,
-  styles: [require('chartist/dist/chartist.css'), require('./chartistJs.scss')],
   directives: [BaCard, BaChartistChart],
+  styles: [require('chartist/dist/chartist.css'), require('./chartistJs.scss')],
   template: require('./chartistJs.html'),
 })
 
-// TODO: service for the data
 export class ChartistJs {
 
-  private simpleLineOptions = {
+  data:any;
-    fullWidth: true,
-    height: "300px",
-    chartPadding: {
-      right: 40
-    }
-  };
-
-  private simpleLineData = {
-    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
-    series: [
-      [20, 20, 12, 45, 50],
-      [10, 45, 30, 14, 12],
-      [34, 12, 12, 40, 50],
-      [10, 43, 25, 22, 16],
-      [3, 6, 30, 33, 43]
-    ]
-  };
-
-  private areaLineData = {
-    labels: [1, 2, 3, 4, 5, 6, 7, 8],
-    series: [
-      [5, 9, 7, 8, 5, 3, 5, 4]
-    ]
-  };
-
-  private areaLineOptions = {
-    fullWidth: true,
-    height: "300px",
-    low: 0,
-    showArea: true
-  };
-
-  private biLineData = {
-    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    series: [
-      [1, 2, 3, 1, -2, 0, 1],
-      [-2, -1, -2, -1, -2.5, -1, -2],
-      [0, 0, 0, 1, 2, 2.5, 2],
-      [2.5, 2, 1, 0.5, 1, 0.5, -1]
-    ]
-  };
-
-  private biLineOptions = {
-    height: "300px",
-    high: 3,
-    low: -3,
-    showArea: true,
-    showLine: false,
-    showPoint: false,
-    fullWidth: true,
-    axisX: {
-      showGrid: false
-    }
-  };
-
-  private simpleBarData = {
-    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-    series: [
-      [15, 24, 43, 27, 5, 10, 23, 44, 68, 50, 26, 8],
-      [13, 22, 49, 22, 4, 6, 24, 46, 57, 48, 22, 4]
-    ]
-  };
-
-  private simpleBarOptions = {
-    fullWidth: true,
-    height: "300px"
-  };
-
-  private multiBarData = {
-    labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
-    series: [
-      [5, 4, 3, 7],
-      [3, 2, 9, 5],
-      [1, 5, 8, 4],
-      [2, 3, 4, 6],
-      [4, 1, 2, 1]
-    ]
-  };
-
-  private multiBarOptions = {
-    fullWidth: true,
-    height: "300px",
-    stackBars: true,
-    axisX: {
-      labelInterpolationFnc: function (value) {
-        return value.split(/\s+/).map(function (word) {
-          return word[0];
-        }).join('');
-      }
-    },
-    axisY: {
-      offset: 20
-    }
-  };
-
-  private multiBarResponsive = [
-    ['screen and (min-width: 400px)', {
-      reverseData: true,
-      horizontalBars: true,
-      axisX: {
-        labelInterpolationFnc: Chartist.noop
-      },
-      axisY: {
-        offset: 60
-      }
-    }],
-    ['screen and (min-width: 700px)', {
-      stackBars: false,
-      reverseData: false,
-      horizontalBars: false,
-      seriesBarDistance: 15
-    }]
-  ];
-
-  private stackedBarData = {
-    labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
-    series: [
-      [800000, 1200000, 1400000, 1300000],
-      [200000, 400000, 500000, 300000],
-      [100000, 200000, 400000, 600000]
-    ]
-  };
-
-  private stackedBarOptions = {
-    fullWidth: true,
-    height: "300px",
-    stackBars: true,
-    axisY: {
-      labelInterpolationFnc: function (value) {
-        return (value / 1000) + 'k';
-      }
-    }
-  };
-
-  private simplePieData = {
-    series: [5, 3, 4]
-  };
-
-  private simplePieOptions = {
-    fullWidth: true,
-    height: "300px",
-    weight: "300px",
-    labelInterpolationFnc: function (value) {
-      return Math.round(value / 12 * 100) + '%';
-    }
-  };
-
-  private labelsPieData = {
-    labels: ['Bananas', 'Apples', 'Grapes'],
-    series: [20, 15, 40]
-  };
-
-  private labelsPieOptions = {
-    fullWidth: true,
-    height: "300px",
-    weight: "300px",
-    labelDirection: 'explode',
-    labelInterpolationFnc: function (value) {
-      return value[0];
-    }
-  };
-
-  private simpleDonutData = {
-    labels: ['Bananas', 'Apples', 'Grapes'],
-    series: [20, 15, 40]
-  };
-
-  private simpleDonutOptions = {
-    fullWidth: true,
-    donut: true,
-    height: "300px",
-    weight: "300px",
-    labelDirection: 'explode',
-    labelInterpolationFnc: function (value) {
-      return value[0];
-    }
-  };
 
   constructor(private _chartistJsService:ChartistJsService) {
   }
 
+  ngOnInit() {
+    this.data = this._chartistJsService.getAll();
+  }
 
   getResponsive(padding, offset) {
-    return [
+    return this._chartistJsService.getResponsive(padding, offset);
-      ['screen and (min-width: 1550px)', {
-        chartPadding: padding,
-        labelOffset: offset,
-        labelDirection: 'explode',
-        labelInterpolationFnc: function (value) {
-          return value;
-        }
-      }],
-      ['screen and (max-width: 1200px)', {
-        chartPadding: padding,
-        labelOffset: offset,
-        labelDirection: 'explode',
-        labelInterpolationFnc: function (value) {
-          return value;
-        }
-      }],
-      ['screen and (max-width: 600px)', {
-        chartPadding: 0,
-        labelOffset: 0,
-        labelInterpolationFnc: function (value) {
-          return value[0];
-        }
-      }]
-    ];
   }
 }

src/app/pages/charts/components/chartistJs/chartistJs.html

@@ -5,22 +5,22 @@
         <h5>Simple line chart</h5>
         <ba-chartist-chart baChartistChartClass="ct-chart"
                            baChartistChartType="Line"
-                           [baChartistChartData]="simpleLineData"
+                           [baChartistChartData]="data['simpleLineData']"
-                           [baChartistChartOptions]="simpleLineOptions">
+                           [baChartistChartOptions]="data['simpleLineOptions']">
         </ba-chartist-chart>
 
         <h5>Line chart with area</h5>
         <ba-chartist-chart baChartistChartClass="ct-chart"
                            baChartistChartType="Line"
-                           [baChartistChartData]="areaLineData"
+                           [baChartistChartData]="data['areaLineData']"
-                           [baChartistChartOptions]="areaLineOptions">
+                           [baChartistChartOptions]="data['areaLineOptions']">
         </ba-chartist-chart>
 
         <h5>Bi-polar line chart with area only</h5>
         <ba-chartist-chart baChartistChartClass="ct-chart"
                            baChartistChartType="Line"
-                           [baChartistChartData]="biLineData"
+                           [baChartistChartData]="data['biLineData']"
-                           [baChartistChartOptions]="biLineOptions">
+                           [baChartistChartOptions]="data['biLineOptions']">
         </ba-chartist-chart>
       </ba-card>
     </div>
@@ -30,23 +30,23 @@
         <h5>Simple bar chart</h5>
         <ba-chartist-chart baChartistChartClass="ct-chart"
                            baChartistChartType="Bar"
-                           [baChartistChartData]="simpleBarData"
+                           [baChartistChartData]="data['simpleBarData']"
-                           [baChartistChartOptions]="simpleBarOptions">
+                           [baChartistChartOptions]="data['simpleBarOptions']">
         </ba-chartist-chart>
 
         <h5>Multi-line labels bar chart</h5>
         <ba-chartist-chart baChartistChartClass="ct-chart"
                            baChartistChartType="Bar"
-                           [baChartistChartData]="multiBarData"
+                           [baChartistChartData]="data['multiBarData']"
-                           [baChartistChartOptions]="multiBarOptions"
+                           [baChartistChartOptions]="data['multiBarOptions']"
-                           [baChartistChartResponsive]="multiBarResponsive">
+                           [baChartistChartResponsive]="data['multiBarResponsive']">
         </ba-chartist-chart>
 
         <h5>Stacked bar chart</h5>
         <ba-chartist-chart baChartistChartClass="ct-chart stacked-bar"
                            baChartistChartType="Bar"
-                           [baChartistChartData]="stackedBarData"
+                           [baChartistChartData]="data['stackedBarData']"
-                           [baChartistChartOptions]="stackedBarOptions">
+                           [baChartistChartOptions]="data['stackedBarOptions']">
         </ba-chartist-chart>
       </ba-card>
     </div>
@@ -59,23 +59,23 @@
           <div class="col-md-12 col-lg-4"><h5>Simple Pie</h5>
             <ba-chartist-chart baChartistChartClass="ct-chart stacked-bar"
                                baChartistChartType="Pie"
-                               [baChartistChartData]="simplePieData"
+                               [baChartistChartData]="data['simplePieData']"
-                               [baChartistChartOptions]="simplePieOptions"
+                               [baChartistChartOptions]="data['simplePieOptions']"
                                [baChartistChartResponsive]="getResponsive(20, 80)">
             </ba-chartist-chart>
           </div>
           <div class="col-md-12 col-lg-4"><h5>Pie with labels</h5>
             <ba-chartist-chart baChartistChartClass="ct-chart stacked-bar"
                                baChartistChartType="Pie"
-                               [baChartistChartData]="labelsPieData"
+                               [baChartistChartData]="data['labelsPieData']"
-                               [baChartistChartOptions]="labelsPieOptions">
+                               [baChartistChartOptions]="data['labelsPieOptions']">
             </ba-chartist-chart>
           </div>
           <div class="col-md-12 col-lg-4"><h5>Donut</h5>
             <ba-chartist-chart baChartistChartClass="ct-chart stacked-bar"
                                baChartistChartType="Pie"
-                               [baChartistChartData]="simpleDonutData"
+                               [baChartistChartData]="data['simpleDonutData']"
-                               [baChartistChartOptions]="simpleDonutOptions"
+                               [baChartistChartOptions]="data['simpleDonutOptions']"
                                [baChartistChartResponsive]="getResponsive(5, 40)">
             </ba-chartist-chart>
           </div>

src/app/pages/charts/components/chartistJs/chartistJs.service.ts

@@ -3,4 +3,199 @@ import {Injectable} from '@angular/core';
 @Injectable()
 export class ChartistJsService {
 
+  private _data = {
+    simpleLineOptions: {
+      fullWidth: true,
+      height: "300px",
+      chartPadding: {
+        right: 40
+      }
+    },
+    simpleLineData: {
+      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+      series: [
+        [20, 20, 12, 45, 50],
+        [10, 45, 30, 14, 12],
+        [34, 12, 12, 40, 50],
+        [10, 43, 25, 22, 16],
+        [3, 6, 30, 33, 43]
+      ]
+    },
+    areaLineData: {
+      labels: [1, 2, 3, 4, 5, 6, 7, 8],
+      series: [
+        [5, 9, 7, 8, 5, 3, 5, 4]
+      ]
+    },
+    areaLineOptions: {
+      fullWidth: true,
+      height: "300px",
+      low: 0,
+      showArea: true
+    },
+    biLineData: {
+      labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      series: [
+        [1, 2, 3, 1, -2, 0, 1],
+        [-2, -1, -2, -1, -2.5, -1, -2],
+        [0, 0, 0, 1, 2, 2.5, 2],
+        [2.5, 2, 1, 0.5, 1, 0.5, -1]
+      ]
+    },
+
+    biLineOptions: {
+      height: "300px",
+      high: 3,
+      low: -3,
+      showArea: true,
+      showLine: false,
+      showPoint: false,
+      fullWidth: true,
+      axisX: {
+        showGrid: false
+      }
+    },
+    simpleBarData: {
+      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+      series: [
+        [15, 24, 43, 27, 5, 10, 23, 44, 68, 50, 26, 8],
+        [13, 22, 49, 22, 4, 6, 24, 46, 57, 48, 22, 4]
+      ]
+    },
+    simpleBarOptions: {
+      fullWidth: true,
+      height: "300px"
+    },
+    multiBarData: {
+      labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
+      series: [
+        [5, 4, 3, 7],
+        [3, 2, 9, 5],
+        [1, 5, 8, 4],
+        [2, 3, 4, 6],
+        [4, 1, 2, 1]
+      ]
+    },
+    multiBarOptions: {
+      fullWidth: true,
+      height: "300px",
+      stackBars: true,
+      axisX: {
+        labelInterpolationFnc: function (value) {
+          return value.split(/\s+/).map(function (word) {
+            return word[0];
+          }).join('');
+        }
+      },
+      axisY: {
+        offset: 20
+      }
+    },
+    multiBarResponsive: [
+      ['screen and (min-width: 400px)', {
+        reverseData: true,
+        horizontalBars: true,
+        axisX: {
+          labelInterpolationFnc: Chartist.noop
+        },
+        axisY: {
+          offset: 60
+        }
+      }],
+      ['screen and (min-width: 700px)', {
+        stackBars: false,
+        reverseData: false,
+        horizontalBars: false,
+        seriesBarDistance: 15
+      }]
+    ],
+    stackedBarData: {
+      labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
+      series: [
+        [800000, 1200000, 1400000, 1300000],
+        [200000, 400000, 500000, 300000],
+        [100000, 200000, 400000, 600000]
+      ]
+    },
+    stackedBarOptions: {
+      fullWidth: true,
+      height: "300px",
+      stackBars: true,
+      axisY: {
+        labelInterpolationFnc: function (value) {
+          return (value / 1000) + 'k';
+        }
+      }
+    },
+    simplePieData: {
+      series: [5, 3, 4]
+    },
+    simplePieOptions: {
+      fullWidth: true,
+      height: "300px",
+      weight: "300px",
+      labelInterpolationFnc: function (value) {
+        return Math.round(value / 12 * 100) + '%';
+      }
+    },
+    labelsPieData: {
+      labels: ['Bananas', 'Apples', 'Grapes'],
+      series: [20, 15, 40]
+    },
+    labelsPieOptions: {
+      fullWidth: true,
+      height: "300px",
+      weight: "300px",
+      labelDirection: 'explode',
+      labelInterpolationFnc: function (value) {
+        return value[0];
+      }
+    },
+    simpleDonutData: {
+      labels: ['Bananas', 'Apples', 'Grapes'],
+      series: [20, 15, 40]
+    },
+    simpleDonutOptions: {
+      fullWidth: true,
+      donut: true,
+      height: "300px",
+      weight: "300px",
+      labelDirection: 'explode',
+      labelInterpolationFnc: function (value) {
+        return value[0];
+      }
+    }
+  };
+
+  public getAll() {
+    return this._data;
+  }
+  
+  public getResponsive(padding, offset) {
+    return [
+      ['screen and (min-width: 1550px)', {
+        chartPadding: padding,
+        labelOffset: offset,
+        labelDirection: 'explode',
+        labelInterpolationFnc: function (value) {
+          return value;
+        }
+      }],
+      ['screen and (max-width: 1200px)', {
+        chartPadding: padding,
+        labelOffset: offset,
+        labelDirection: 'explode',
+        labelInterpolationFnc: function (value) {
+          return value;
+        }
+      }],
+      ['screen and (max-width: 600px)', {
+        chartPadding: 0,
+        labelOffset: 0,
+        labelInterpolationFnc: function (value) {
+          return value[0];
+        }
+      }]
+    ];
+  }
 }

src/app/theme/components/baChartistChart/baChartistChart.component.ts

@@ -1,12 +1,10 @@
 import {Component, ViewEncapsulation, Input, Output, ElementRef, EventEmitter} from '@angular/core';
 
-import './baChartistChart.loader.ts';
-
 @Component({
   selector: 'ba-chartist-chart',
+  encapsulation: ViewEncapsulation.None,
   styles: [require('chartist/dist/chartist.css'), require('./baChartistChart.scss')],
   template: require('./baChartistChart.html'),
-  encapsulation: ViewEncapsulation.None,
   providers: [],
 })
 export class BaChartistChart {
@@ -21,9 +19,6 @@ export class BaChartistChart {
   constructor (private _elementRef:ElementRef) {
   }
 
-  ngOnInit() {
-  }
-
   ngAfterViewInit() {
     let el = this._elementRef.nativeElement.querySelector('.ba-chartist-chart');