baChartistChart component

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

@@ -2,6 +2,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 import {BaCard} from '../../../../theme/components';
 
 import {ChartistJsService} from "./chartistJs.service";
+import {BaChartistChart} from '../../../../theme/components';
 
 @Component({
   selector: 'chartist-js',
@@ -9,9 +10,11 @@ import {ChartistJsService} from "./chartistJs.service";
   providers: [ChartistJsService],
   encapsulation: ViewEncapsulation.None,
   styles: [require('chartist/dist/chartist.css'), require('./chartistJs.scss')],
-  directives: [BaCard],
+  directives: [BaCard, BaChartistChart],
   template: require('./chartistJs.html'),
 })
+
+// TODO: service for the data
 export class ChartistJs {
 
   private simpleLineOptions = {
@@ -196,19 +199,6 @@ export class ChartistJs {
   constructor(private _chartistJsService:ChartistJsService) {
   }
 
-  ngOnInit() {
-    new Chartist.Line('#line-chart', this.simpleLineData, this.simpleLineOptions);
-    new Chartist.Line('#area-chart', this.areaLineData, this.areaLineOptions);
-    new Chartist.Line('#bi-chart', this.biLineData, this.biLineOptions);
-
-    new Chartist.Bar('#simple-bar', this.simpleBarData, this.simpleBarOptions);
-    new Chartist.Bar('#multi-bar', this.multiBarData, this.multiBarOptions, this.multiBarResponsive);
-    new Chartist.Bar('#stacked-bar', this.stackedBarData, this.stackedBarOptions);
-
-    new Chartist.Pie('#simple-pie', this.simplePieData, this.simplePieOptions, this.getResponsive(20, 80));
-    new Chartist.Pie('#label-pie', this.labelsPieData, this.labelsPieOptions);
-    new Chartist.Pie('#donut', this.simpleDonutData, this.simpleDonutOptions, this.getResponsive(5, 40));
-  }
 
   getResponsive(padding, offset) {
     return [

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

@@ -3,22 +3,51 @@
     <div class="col-md-6 ">
       <ba-card title="Lines" baCardClass="with-scroll">
         <h5>Simple line chart</h5>
-        <div id="line-chart" class="ct-chart"></div>
+        <ba-chartist-chart baChartistChartClass="ct-chart"
+                           baChartistChartType="Line"
+                           [baChartistChartData]="simpleLineData"
+                           [baChartistChartOptions]="simpleLineOptions">
+        </ba-chartist-chart>
+
         <h5>Line chart with area</h5>
-        <div id="area-chart" class="ct-chart"></div>
+        <ba-chartist-chart baChartistChartClass="ct-chart"
+                           baChartistChartType="Line"
+                           [baChartistChartData]="areaLineData"
+                           [baChartistChartOptions]="areaLineOptions">
+        </ba-chartist-chart>
+
         <h5>Bi-polar line chart with area only</h5>
-        <div id="bi-chart" class="ct-chart"></div>
+        <ba-chartist-chart baChartistChartClass="ct-chart"
+                           baChartistChartType="Line"
+                           [baChartistChartData]="biLineData"
+                           [baChartistChartOptions]="biLineOptions">
+        </ba-chartist-chart>
       </ba-card>
     </div>
 
     <div class="col-md-6 ">
       <ba-card title="Bars" baCardClass="with-scroll">
         <h5>Simple bar chart</h5>
-        <div id="simple-bar" class="ct-chart"></div>
+        <ba-chartist-chart baChartistChartClass="ct-chart"
+                           baChartistChartType="Bar"
+                           [baChartistChartData]="simpleBarData"
+                           [baChartistChartOptions]="simpleBarOptions">
+        </ba-chartist-chart>
+
         <h5>Multi-line labels bar chart</h5>
-        <div id="multi-bar" class="ct-chart"></div>
+        <ba-chartist-chart baChartistChartClass="ct-chart"
+                           baChartistChartType="Bar"
+                           [baChartistChartData]="multiBarData"
+                           [baChartistChartOptions]="multiBarOptions"
+                           [baChartistChartResponsive]="multiBarResponsive">
+        </ba-chartist-chart>
+
         <h5>Stacked bar chart</h5>
-        <div id="stacked-bar" class="ct-chart stacked-bar"></div>
+        <ba-chartist-chart baChartistChartClass="ct-chart stacked-bar"
+                           baChartistChartType="Bar"
+                           [baChartistChartData]="stackedBarData"
+                           [baChartistChartOptions]="stackedBarOptions">
+        </ba-chartist-chart>
       </ba-card>
     </div>
   </div>
@@ -28,13 +57,27 @@
       <ba-card title="Pies & Donuts" baCardClass="with-scroll">
         <div class="row">
           <div class="col-md-12 col-lg-4"><h5>Simple Pie</h5>
-            <div id="simple-pie" class="ct-chart"></div>
+            <ba-chartist-chart baChartistChartClass="ct-chart stacked-bar"
+                               baChartistChartType="Pie"
+                               [baChartistChartData]="simplePieData"
+                               [baChartistChartOptions]="simplePieOptions"
+                               [baChartistChartResponsive]="getResponsive(20, 80)">
+            </ba-chartist-chart>
           </div>
           <div class="col-md-12 col-lg-4"><h5>Pie with labels</h5>
-            <div id="label-pie" class="ct-chart"></div>
+            <ba-chartist-chart baChartistChartClass="ct-chart stacked-bar"
+                               baChartistChartType="Pie"
+                               [baChartistChartData]="labelsPieData"
+                               [baChartistChartOptions]="labelsPieOptions">
+            </ba-chartist-chart>
           </div>
           <div class="col-md-12 col-lg-4"><h5>Donut</h5>
-            <div id="donut" class="ct-chart"></div>
+            <ba-chartist-chart baChartistChartClass="ct-chart stacked-bar"
+                               baChartistChartType="Pie"
+                               [baChartistChartData]="simpleDonutData"
+                               [baChartistChartOptions]="simpleDonutOptions"
+                               [baChartistChartResponsive]="getResponsive(5, 40)">
+            </ba-chartist-chart>
           </div>
         </div>
       </ba-card>

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

@@ -0,0 +1,34 @@
+import {Component, ViewEncapsulation, Input, Output, ElementRef, EventEmitter} from '@angular/core';
+
+import './baChartistChart.loader.ts';
+
+@Component({
+  selector: 'ba-chartist-chart',
+  styles: [require('chartist/dist/chartist.css'), require('./baChartistChart.scss')],
+  template: require('./baChartistChart.html'),
+  encapsulation: ViewEncapsulation.None,
+  providers: [],
+})
+export class BaChartistChart {
+
+  @Input() baChartistChartType:string;
+  @Input() baChartistChartData:Object;
+  @Input() baChartistChartOptions:Object;
+  @Input() baChartistChartResponsive:Object;
+  @Input() baChartistChartClass:string;
+  @Output() onChartReady = new EventEmitter<any>();
+
+  constructor (private _elementRef:ElementRef) {
+  }
+
+  ngOnInit() {
+  }
+
+  ngAfterViewInit() {
+    let el = this._elementRef.nativeElement.querySelector('.ba-chartist-chart');
+
+    let chart = new Chartist[this.baChartistChartType](el, this.baChartistChartData, this.baChartistChartOptions, this.baChartistChartResponsive);
+    this.onChartReady.emit(chart);
+  }
+
+}

src/app/theme/components/baChartistChart/baChartistChart.html

@@ -0,0 +1 @@
+<div class="ba-chartist-chart {{baChartistChartClass || ''}}"></div>

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1 @@
+export * from './baChartistChart.component.ts';

src/app/theme/components/index.ts

@@ -4,3 +4,4 @@ export * from './sidebar';
 export * from './contentTop';
 export * from './baCard';
 export * from './baAmChart';
+export * from './baChartistChart';