lineChart component

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

@@ -4,12 +4,13 @@ import {PopularApp} from './popularApp';
 import {PieChart} from './pieChart';
 import {TrafficChart} from './trafficChart';
 import {UsersMap} from './usersMap';
+import {LineChart} from './lineChart';
 import {BaCard} from '../../theme/components';
 
 @Component({
   selector: 'dashboard',
   pipes: [],
-  directives: [PopularApp, PieChart, TrafficChart, UsersMap, BaCard],
+  directives: [PopularApp, PieChart, TrafficChart, UsersMap, LineChart, BaCard],
   encapsulation: ViewEncapsulation.None,
   styles: [require('./dashboard.scss')],
   template: require('./dashboard.html')

src/app/pages/dashboard/dashboard.html

@@ -19,10 +19,28 @@
 <div class="row">
     <div class="col-xlg-9 col-lg-6 col-md-6 col-sm-12 col-xs-12">
         <div class="row">
-            <ba-card class="col-xlg-4 col-lg-12 col-md-12 col-sm-5 col-xs-12"
+
-                 baCardClass="popular-app medium-card">
-                <popular-app></popular-app>
-            </ba-card>
         </div>
     </div>
 </div>
+
+<div class="row">
+  <div class="col-xlg-9 col-lg-6 col-md-6 col-sm-12 col-xs-12">
+    <div class="row">
+      <ba-card class="col-xl-8 col-lg-12 col-md-12 col-sm-7 col-xs-12"
+               title="Revenue" baCardClass="medium-card">
+        <line-chart></line-chart>
+      </ba-card>
+      <ba-card class="col-xlg-4 col-lg-12 col-md-12 col-sm-5 col-xs-12"
+               baCardClass="popular-app medium-card">
+        <popular-app></popular-app>
+      </ba-card>
+    </div>
+  </div>
+  <div class="col-xlg-3 col-lg-6 col-md-6 col-sm-12 col-xs-12"
+       ba-panel
+       ba-panel-title="Feed"
+       ba-panel-class="large-panel with-scroll feed-panel">
+    <blur-feed></blur-feed>
+  </div>
+</div>

src/app/pages/dashboard/lineChart/index.ts

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

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

@@ -0,0 +1,36 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+
+import './lineChart.loader.ts';
+import {LineChartService} from './lineChart.service';
+
+@Component({
+  selector: 'line-chart',
+  encapsulation: ViewEncapsulation.None,
+  providers: [LineChartService],
+  styles: [require('./lineChart.scss')],
+  template: require('./lineChart.html')
+})
+export class LineChart {
+
+  constructor(private _lineChartService:LineChartService) {
+  }
+
+  ngAfterViewInit() {
+    this._loadLineChart();
+  }
+
+  // TODO: load proper AmCharts theme
+  private _loadLineChart() {
+    let chart = AmCharts.makeChart('amchart', this._lineChartService.getData());
+
+    let zoomChart = () => {
+      chart.zoomToDates(new Date(2013, 3), new Date(2014, 0));
+    };
+
+    chart.addListener('rendered', zoomChart);
+    
+    if (chart.zoomChart) {
+      chart.zoomChart();
+    }
+  }
+}

src/app/pages/dashboard/lineChart/lineChart.html

@@ -0,0 +1 @@
+<div id="amchart"></div>

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

@@ -0,0 +1,2 @@
+require('amcharts3');
+require('amcharts3/amcharts/serial.js');

src/app/pages/dashboard/lineChart/lineChart.scss

@@ -0,0 +1,5 @@
+#amchart {
+  width: 100%;
+  height: 350px;
+  margin-top: -20px;
+}

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

@@ -0,0 +1,110 @@
+import {Injectable} from 'angular2/core';
+import {layoutColors, layoutPaths} from '../../../theme';
+
+@Injectable()
+export class LineChartService {
+
+  private _data = {
+    type: 'serial',
+    theme: 'blur',
+    marginTop: 15,
+    marginRight: 15,
+    dataProvider: [
+      { date: new Date(2012, 11), value: 0, value0: 0 },
+      { date: new Date(2013, 0), value: 15000, value0: 19000},
+      { date: new Date(2013, 1), value: 30000, value0: 20000},
+
+
+      { date: new Date(2013, 2), value: 25000, value0: 22000},
+      { date: new Date(2013, 3), value: 21000, value0: 25000},
+      { date: new Date(2013, 4), value: 24000, value0: 29000},
+      { date: new Date(2013, 5), value: 31000, value0: 26000},
+      { date: new Date(2013, 6), value: 40000, value0: 25000},
+      { date: new Date(2013, 7), value: 37000, value0: 20000},
+      { date: new Date(2013, 8), value: 18000, value0: 22000},
+      { date: new Date(2013, 9), value: 5000, value0: 26000},
+      { date: new Date(2013, 10), value: 40000, value0: 30000},
+      { date: new Date(2013, 11), value: 20000, value0: 25000},
+      { date: new Date(2014, 0), value: 5000, value0: 13000},
+
+      { date: new Date(2014, 1), value: 3000, value0: 13000},
+      { date: new Date(2014, 2), value: 1800, value0: 13000},
+      { date: new Date(2014, 3), value: 10400, value0: 13000},
+      { date: new Date(2014, 4), value: 25500, value0: 13000},
+      { date: new Date(2014, 5), value: 2100, value0: 13000},
+      { date: new Date(2014, 6), value: 6500, value0: 13000},
+      { date: new Date(2014, 7), value: 1100, value0: 13000},
+      { date: new Date(2014, 8), value: 17200, value0: 13000},
+      { date: new Date(2014, 9), value: 26900, value0: 13000},
+      { date: new Date(2014, 10), value: 14100, value0: 13000},
+      { date: new Date(2014, 11), value: 35300, value0: 13000},
+      { date: new Date(2015, 0), value: 54800, value0: 13000},
+      { date: new Date(2015, 1), value: 49800, value0: 13000}
+    ],
+    categoryField: 'date',
+    categoryAxis: {
+      parseDates: true,
+      gridAlpha: 0,
+      color: '#FFFFFF',
+      axisColor: '#FFFFFF'
+    },
+    valueAxes: [
+      {
+        minVerticalGap: 50,
+        gridAlpha: 0,
+        color: '#FFFFFF',
+        axisColor: '#FFFFFF'
+      }
+    ],
+    graphs: [
+      {
+        id: 'g0',
+        bullet: 'none',
+        useLineColorForBulletBorder: true,
+        lineColor: 'rgba(0,0,0,0.3)',
+        lineThickness: 1,
+        negativeLineColor: layoutColors.danger,
+        type: 'smoothedLine',
+        valueField: 'value0',
+        fillAlphas: 1,
+        fillColorsField: 'lineColor'
+      },
+      {
+        id: 'g1',
+        bullet: 'none',
+        useLineColorForBulletBorder: true,
+        lineColor: 'rgba(0,0,0,0.4)',
+        lineThickness: 1,
+        negativeLineColor: layoutColors.danger,
+        type: 'smoothedLine',
+        valueField: 'value',
+        fillAlphas: 1,
+        fillColorsField: 'lineColor'
+      }
+    ],
+    chartCursor: {
+      categoryBalloonDateFormat: 'MM YYYY',
+      categoryBalloonColor: '#4285F4',
+      categoryBalloonAlpha: 0.7,
+      cursorAlpha: 0,
+      valueLineEnabled: true,
+      valueLineBalloonEnabled: true,
+      valueLineAlpha: 0.5
+    },
+    dataDateFormat: 'MM YYYY',
+    export: {
+      enabled: true
+    },
+    creditsPosition: 'bottom-right',
+    zoomOutButton: {
+      backgroundColor: '#fff',
+      backgroundAlpha: 0
+    },
+    zoomOutText: '',
+    pathToImages: layoutPaths.images.amChart
+  };
+
+  getData() {
+    return this._data;
+  }
+}