pieChart component

config/webpack.common.js

@@ -233,6 +233,7 @@ module.exports = {
       "L": "leaflet",
       "Chart": "chart.js",
       "Chartist": "chartist",
+      "EasyPieChart": "easy-pie-chart"
     })
   ],
 

package.json

@@ -61,6 +61,7 @@
     "bootstrap-loader": "^1.0.8",
     "chartist": "^0.9.7",
     "core-js": "^2.2.2",
+    "easy-pie-chart": "^2.1.7",
     "font-awesome": "^4.6.1",
     "font-awesome-sass-loader": "^1.0.1",
     "google-maps": "^3.2.1",

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

@@ -1,13 +1,14 @@
 import {Component, ViewEncapsulation} from 'angular2/core';
 
 import {PopularApp} from './popularApp';
+import {PieChart} from './pieChart';
 import {BaCard} from '../../theme/components';
 
 
 @Component({
   selector: 'dashboard',
   pipes: [],
-  directives: [PopularApp, BaCard],
+  directives: [PopularApp, PieChart, BaCard],
   encapsulation: ViewEncapsulation.None,
   styles: [require('./dashboard.scss')],
   template: require('./dashboard.html')

src/app/pages/dashboard/dashboard.html

@@ -1,3 +1,9 @@
+<div class="row">
+  <div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
+    <pie-chart></pie-chart>
+  </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">

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

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

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

@@ -0,0 +1,79 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+import {BaCard} from '../../../theme/components';
+
+require('easy-pie-chart/dist/jquery.easypiechart.js');
+
+@Component({
+  selector: 'pie-chart',
+  encapsulation: ViewEncapsulation.None,
+  directives: [BaCard],
+  styles: [require('./pieChart.scss')],
+  template: require('./pieChart.html')
+})
+export class PieChart {
+
+  charts = [
+    {
+      color: 'rgba(255,255,255,0.4)',
+      description: 'New Visits',
+      stats: '57,820',
+      icon: 'person',
+    }, {
+      color: 'rgba(255,255,255,0.4)',
+      description: 'Purchases',
+      stats: '$ 89,745',
+      icon: 'money',
+    }, {
+      color: 'rgba(255,255,255,0.4)',
+      description: 'Active Users',
+      stats: '178,391',
+      icon: 'face',
+    }, {
+      color: 'rgba(255,255,255,0.4)',
+      description: 'Returned',
+      stats: '32,592',
+      icon: 'refresh',
+    }
+  ];
+
+  init = false;
+
+  constructor() {
+  }
+
+  ngAfterViewInit() {
+    if (!this.init) {
+      this.loadPieCharts();
+      this.updatePieCharts();
+      this.init = true;
+    }
+  }
+
+  private loadPieCharts() {
+
+    $('.chart').each(function () {
+      $('.chart').easyPieChart({
+        easing: 'easeOutBounce',
+        onStep: function (from, to, percent) {
+          $(this).find('.percent').text(Math.round(percent));
+        },
+        barColor: $(this).attr('data-rel'),
+        trackColor: 'rgba(0,0,0,0)',
+        size: 84,
+        scaleLength: 0,
+        animation: 2000,
+        lineWidth: 9,
+        lineCap: 'round',
+      });
+    });
+  }
+
+  private updatePieCharts() {
+
+    let getRandomArbitrary = (min, max) => { return Math.random() * (max - min) + min };
+
+    $('.pie-charts .chart').each(function(index, chart) {
+      $(chart).data('easyPieChart').update(getRandomArbitrary(55, 90));
+    });
+  }
+}

src/app/pages/dashboard/pieChart/pieChart.html

@@ -0,0 +1,17 @@
+<div class="row pie-charts">
+
+  <ba-card *ngFor="#chart of charts" class="pie-chart-item-container col-xlg-6 col-lg-6 col-md-6 col-sm-12 col-xs-12">
+
+    <div class="pie-chart-item">
+      <div class="chart" [attr.data-rel]="chart.color" data-percent="60">
+        <span class="percent"></span>
+      </div>
+      <div class="description">
+        <div>{{ chart.description }}</div>
+        <div class="description-stats">{{ chart.stats }}</div>
+      </div>
+      <i class="chart-icon i-{{ chart.icon }}"></i>
+    </div>
+
+  </ba-card>
+</div>

src/app/pages/dashboard/pieChart/pieChart.scss

@@ -0,0 +1,74 @@
+@import "../../../theme/sass/conf/conf";
+//@import "../../../theme/sass/bootstrap-overrides/";
+.pie-charts {
+  color: $default-text;
+
+  .pie-chart-item-container {
+    position: relative;
+    padding: 0 15px;
+    float: left;
+    box-sizing: border-box;
+
+    .card {
+      height: 114px;
+    }
+  }
+
+  .pie-chart-item {
+    position: relative;
+    .chart-icon {
+      position: absolute;
+      right: 0;
+      top: 3px;
+    }
+  }
+  @media screen and
+  (min-width: 1325px) and (max-width: 1650px),
+  (min-width: 700px) and (max-width: 830px),
+  (max-width: 400px) {
+    .chart-icon {
+      display: none;
+    }
+  }
+
+  .chart {
+    position: relative;
+    display: inline-block;
+    width: 84px;
+    height: 84px;
+    text-align: center;
+    float: left;
+  }
+  .chart canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .percent {
+    display: inline-block;
+    line-height: 84px;
+    z-index: 2;
+    font-size: 16px;
+  }
+  .percent:after {
+    content: '%';
+    margin-left: 0.1em;
+    font-size: .8em;
+  }
+  .description {
+    display: inline-block;
+    padding: 20px 0 0 20px;
+    font-size: 18px;
+    opacity: 0.9;
+    .description-stats {
+      padding-top: 8px;
+      font-size: 24px;
+    }
+  }
+  .angular {
+    margin-top: 100px;
+  }
+  .angular .chart {
+    margin-top: 0;
+  }
+}