diff --git a/src/app/pages/dashboard/pieChart/index.ts b/src/app/pages/dashboard/pieChart/index.ts
new file mode 100644
index 00000000..d36f7d62
--- /dev/null
+++ b/src/app/pages/dashboard/pieChart/index.ts
@@ -0,0 +1 @@
+export * from './pieChart.component';
diff --git a/src/app/pages/dashboard/pieChart/pieChart.component.ts b/src/app/pages/dashboard/pieChart/pieChart.component.ts
new file mode 100644
index 00000000..ced146e6
--- /dev/null
+++ b/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));
+ });
+ }
+}
diff --git a/src/app/pages/dashboard/pieChart/pieChart.html b/src/app/pages/dashboard/pieChart/pieChart.html
new file mode 100644
index 00000000..ae8ac3a9
--- /dev/null
+++ b/src/app/pages/dashboard/pieChart/pieChart.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+
+
{{ chart.description }}
+
{{ chart.stats }}
+
+
+
+
diff --git a/src/app/pages/dashboard/pieChart/pieChart.scss b/src/app/pages/dashboard/pieChart/pieChart.scss
new file mode 100644
index 00000000..dd58af99
--- /dev/null
+++ b/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;
+ }
+}