traffic chart loader & service

src/app/pages/dashboard/trafficChart/trafficChart.component.ts

@@ -1,70 +1,33 @@
 import {Component, ViewEncapsulation, ElementRef} from 'angular2/core';
-import {layoutColors} from "../../../theme";
+
-import {DOM} from "angular2/src/platform/dom/dom_adapter";
+import './trafficChart.loader.ts';
+import {TrafficChartService} from './trafficChart.service';
 
 @Component({
   selector: 'traffic-chart',
   encapsulation: ViewEncapsulation.None,
+  providers: [TrafficChartService],
   styles: [require('./trafficChart.scss')],
   template: require('./trafficChart.html')
 })
 export class TrafficChart {
 
-  palette = layoutColors.bgColorPalette;
+  public doughnutData: Array<Object>;
-  doughnutData = [
-    {
-      value: 2000,
-      color: this.palette.white,
-      highlight: this.palette.whiteDark,
-      label: 'Ad Campaigns',
-      percentage: 87,
-      order: 0,
-    },
-    {
-      value: 400,
-      color: this.palette.gossip,
-      highlight: this.palette.gossipDark,
-      label: 'Other',
-      percentage: 17,
-      order: 1,
-    },
-    {
-      value: 1200,
-      color: this.palette.silverTree,
-      highlight: this.palette.silverTreeDark,
-      label: 'Direct Traffic',
-      percentage: 38,
-      order: 2,
-    },
-    {
-      value: 1000,
-      color: this.palette.surfieGreen,
-      highlight: this.palette.surfieGreenDark,
-      label: 'Referral Traffic',
-      percentage: 70,
-      order: 3,
-    },
-    {
-      value: 1500,
-      color: this.palette.blueStone,
-      highlight: this.palette.blueStoneDark,
-      label: 'Search engines',
-      percentage: 22,
-      order: 4,
-    }
-  ];
 
-
+  constructor(private trafficChartService:TrafficChartService) {
-  constructor(private _elementRef:ElementRef) {
+    this.doughnutData = trafficChartService.getData();
   }
 
   ngAfterViewInit() {
-    let el = DOM.querySelector(this._elementRef.nativeElement, '.chart-area');
+    this._loadDoughnutCharts();
+  }
+
+  private _loadDoughnutCharts() {
+    let el = $('.chart-area').get(0);
     new Chart(el.getContext('2d')).Doughnut(this.doughnutData, {
       segmentShowStroke: false,
       percentageInnerCutout : 64,
       responsive: true
     });
   }
-
 }

src/app/pages/dashboard/trafficChart/trafficChart.loader.ts

@@ -0,0 +1 @@
+require('chart.js');

src/app/pages/dashboard/trafficChart/trafficChart.service.ts

@@ -0,0 +1,54 @@
+import {Injectable} from 'angular2/core';
+import {layoutColors} from '../../../theme';
+
+@Injectable()
+export class TrafficChartService {
+
+  private _palette = layoutColors.bgColorPalette;
+  private _data = [
+    {
+      value: 2000,
+      color: this._palette.white,
+      highlight: this._palette.whiteDark,
+      label: 'Ad Campaigns',
+      percentage: 87,
+      order: 0,
+    },
+    {
+      value: 400,
+      color: this._palette.gossip,
+      highlight: this._palette.gossipDark,
+      label: 'Other',
+      percentage: 17,
+      order: 1,
+    },
+    {
+      value: 1200,
+      color: this._palette.silverTree,
+      highlight: this._palette.silverTreeDark,
+      label: 'Direct Traffic',
+      percentage: 38,
+      order: 2,
+    },
+    {
+      value: 1000,
+      color: this._palette.surfieGreen,
+      highlight: this._palette.surfieGreenDark,
+      label: 'Referral Traffic',
+      percentage: 70,
+      order: 3,
+    },
+    {
+      value: 1500,
+      color: this._palette.blueStone,
+      highlight: this._palette.blueStoneDark,
+      label: 'Search engines',
+      percentage: 22,
+      order: 4,
+    }
+  ];
+
+  getData() {
+    return this._data;
+  }
+}