chartist component

config/webpack.common.js

@@ -231,7 +231,8 @@ module.exports = {
       "window.Tether": "tether",
       "GoogleMapsLoader": "google-maps",
       "L": "leaflet",
-      "Chart": "chart.js"
+      "Chart": "chart.js",
+      "Chartist": "chartist",
     })
   ],
 

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

@@ -3,21 +3,238 @@ import {BaCard} from '../../../../theme';
 
 import {ChartistJsService} from "./chartistJs.service";
 
-require('chartist');
-
 @Component({
   selector: 'chartist-js',
   pipes: [],
   providers: [ChartistJsService],
   encapsulation: ViewEncapsulation.None,
-  styles: [require('./chartistJs.scss')],
+  styles: [require('chartist/dist/chartist.css'), require('./chartistJs.scss')],
   directives: [BaCard],
   template: require('./chartistJs.html'),
 })
 export class ChartistJs {
 
+  private simpleLineOptions = {
+    fullWidth: true,
+    height: "300px",
+    chartPadding: {
+      right: 40
+    }
+  };
 
+  private simpleLineData = {
+    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+    series: [
+      [20, 20, 12, 45, 50],
+      [10, 45, 30, 14, 12],
+      [34, 12, 12, 40, 50],
+      [10, 43, 25, 22, 16],
+      [3, 6, 30, 33, 43]
+    ]
+  };
+
+  private areaLineData = {
+    labels: [1, 2, 3, 4, 5, 6, 7, 8],
+    series: [
+      [5, 9, 7, 8, 5, 3, 5, 4]
+    ]
+  };
+
+  private areaLineOptions = {
+    fullWidth: true,
+    height: "300px",
+    low: 0,
+    showArea: true
+  };
+
+  private biLineData = {
+    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    series: [
+      [1, 2, 3, 1, -2, 0, 1],
+      [-2, -1, -2, -1, -2.5, -1, -2],
+      [0, 0, 0, 1, 2, 2.5, 2],
+      [2.5, 2, 1, 0.5, 1, 0.5, -1]
+    ]
+  };
+
+  private biLineOptions = {
+    height: "300px",
+    high: 3,
+    low: -3,
+    showArea: true,
+    showLine: false,
+    showPoint: false,
+    fullWidth: true,
+    axisX: {
+      showGrid: false
+    }
+  };
+
+  private simpleBarData = {
+    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    series: [
+      [15, 24, 43, 27, 5, 10, 23, 44, 68, 50, 26, 8],
+      [13, 22, 49, 22, 4, 6, 24, 46, 57, 48, 22, 4]
+    ]
+  };
+
+  private simpleBarOptions = {
+    fullWidth: true,
+    height: "300px"
+  };
+
+  private multiBarData = {
+    labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
+    series: [
+      [5, 4, 3, 7],
+      [3, 2, 9, 5],
+      [1, 5, 8, 4],
+      [2, 3, 4, 6],
+      [4, 1, 2, 1]
+    ]
+  };
+
+  private multiBarOptions = {
+    fullWidth: true,
+    height: "300px",
+    stackBars: true,
+    axisX: {
+      labelInterpolationFnc: function (value) {
+        return value.split(/\s+/).map(function (word) {
+          return word[0];
+        }).join('');
+      }
+    },
+    axisY: {
+      offset: 20
+    }
+  };
+
+  private multiBarResponsive = [
+    ['screen and (min-width: 400px)', {
+      reverseData: true,
+      horizontalBars: true,
+      axisX: {
+        labelInterpolationFnc: Chartist.noop
+      },
+      axisY: {
+        offset: 60
+      }
+    }],
+    ['screen and (min-width: 700px)', {
+      stackBars: false,
+      reverseData: false,
+      horizontalBars: false,
+      seriesBarDistance: 15
+    }]
+  ];
+
+  private stackedBarData = {
+    labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
+    series: [
+      [800000, 1200000, 1400000, 1300000],
+      [200000, 400000, 500000, 300000],
+      [100000, 200000, 400000, 600000]
+    ]
+  };
+
+  private stackedBarOptions = {
+    fullWidth: true,
+    height: "300px",
+    stackBars: true,
+    axisY: {
+      labelInterpolationFnc: function (value) {
+        return (value / 1000) + 'k';
+      }
+    }
+  };
+
+  private simplePieData = {
+    series: [5, 3, 4]
+  };
+
+  private simplePieOptions = {
+    fullWidth: true,
+    height: "300px",
+    weight: "300px",
+    labelInterpolationFnc: function (value) {
+      return Math.round(value / 12 * 100) + '%';
+    }
+  };
+
+  private labelsPieData = {
+    labels: ['Bananas', 'Apples', 'Grapes'],
+    series: [20, 15, 40]
+  };
+
+  private labelsPieOptions = {
+    fullWidth: true,
+    height: "300px",
+    weight: "300px",
+    labelDirection: 'explode',
+    labelInterpolationFnc: function (value) {
+      return value[0];
+    }
+  };
+
+  private simpleDonutData = {
+    labels: ['Bananas', 'Apples', 'Grapes'],
+    series: [20, 15, 40]
+  };
+
+  private simpleDonutOptions = {
+    fullWidth: true,
+    donut: true,
+    height: "300px",
+    weight: "300px",
+    labelDirection: 'explode',
+    labelInterpolationFnc: function (value) {
+      return value[0];
+    }
+  };
 
   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 [
+      ['screen and (min-width: 1550px)', {
+        chartPadding: padding,
+        labelOffset: offset,
+        labelDirection: 'explode',
+        labelInterpolationFnc: function (value) {
+          return value;
+        }
+      }],
+      ['screen and (max-width: 1200px)', {
+        chartPadding: padding,
+        labelOffset: offset,
+        labelDirection: 'explode',
+        labelInterpolationFnc: function (value) {
+          return value;
+        }
+      }],
+      ['screen and (max-width: 600px)', {
+        chartPadding: 0,
+        labelOffset: 0,
+        labelInterpolationFnc: function (value) {
+          return value[0];
+        }
+      }]
+    ];
+  }
 }

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

@@ -1,31 +1,31 @@
 <section ng-controller="chartistCtrl">
   <div class="row">
     <div class="col-md-6 ">
-      <div ba-panel ba-panel-title="Lines" ba-panel-class="with-scroll ">
+      <ba-card title="Lines" baCardClass="with-scroll ">
         <h5>Simple line chart</h5>
         <div id="line-chart" class="ct-chart"></div>
         <h5>Line chart with area</h5>
         <div id="area-chart" class="ct-chart"></div>
         <h5>Bi-polar line chart with area only</h5>
         <div id="bi-chart" class="ct-chart"></div>
-      </div>
+      </ba-card>
     </div>
 
     <div class="col-md-6 ">
-      <div ba-panel ba-panel-title="Bars" ba-panel-class="with-scroll ">
+      <ba-card title="Bars" baCardClass="with-scroll ">
         <h5>Simple bar chart</h5>
         <div id="simple-bar" class="ct-chart"></div>
         <h5>Multi-line labels bar chart</h5>
         <div id="multi-bar" class="ct-chart"></div>
         <h5>Stacked bar chart</h5>
         <div id="stacked-bar" class="ct-chart stacked-bar"></div>
-      </div>
+      </ba-card>
     </div>
   </div>
 
   <div class="row">
     <div class="col-md-12">
-      <div ba-panel ba-panel-title="Pies & Donuts" ba-panel-class="with-scroll ">
+      <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>
@@ -37,7 +37,7 @@
             <div id="donut" class="ct-chart"></div>
           </div>
         </div>
-      </div>
+      </ba-card>
     </div>
   </div>
 </section>

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

@@ -1,49 +1,56 @@
-.chart-legend,
+@import "../../../../theme/sass/conf/conf";
-.bar-legend,
+
-.line-legend,
+.ct-chart .ct-label{
-.pie-legend,
+  font-size: 1em;
-.radar-legend,
-.polararea-legend,
-.doughnut-legend {
-  list-style-type: none;
-  margin-top: 5px;
-  text-align: center;
-  /* NOTE: Browsers automatically add 40px of padding-left to all lists, so we should offset that, otherwise the legend is off-center */
-  -webkit-padding-start: 0;
-  /* Webkit */
-  -moz-padding-start: 0;
-  /* Mozilla */
-  padding-left: 0;
-  /* IE (handles all cases, really, but we should also include the vendor-specific properties just to be safe) */
 }
-.chart-legend li,
+
-.bar-legend li,
+.ct-chart svg{
-.line-legend li,
+  width: 100%;
-.pie-legend li,
-.radar-legend li,
-.polararea-legend li,
-.doughnut-legend li {
-  display: inline-block;
-  white-space: nowrap;
-  position: relative;
-  margin-bottom: 4px;
-  border-radius: 5px;
-  padding: 2px 8px 2px 28px;
-  font-size: smaller;
-  cursor: default;
-}
-.chart-legend li span,
-.bar-legend li span,
-.line-legend li span,
-.pie-legend li span,
-.radar-legend li span,
-.polararea-legend li span,
-.doughnut-legend li span {
   display: block;
-  position: absolute;
+}
-  left: 0;
+
-  top: 0;
+.ct-series-a {
-  width: 20px;
+  .ct-bar,  .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
-  height: 20px;
+    stroke: $primary;
-  border-radius: 5px;
+  }
+  .ct-slice-pie, .ct-area{
+    fill: $primary;
+  }
+}
+
+.ct-series-b {
+  .ct-bar,  .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
+    stroke: $success;
+  }
+  .ct-slice-pie, .ct-area{
+    fill: $success;
+  }
+}
+
+.ct-series-c {
+  .ct-bar,  .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
+    stroke: $danger;
+  }
+  .ct-slice-pie, .ct-area{
+    fill: $danger;
+  }
+}
+
+.ct-series-d {
+  .ct-bar,  .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
+    stroke: $warning;
+  }
+  .ct-slice-pie, .ct-area{
+    fill: $warning;
+  }
+
+}
+
+.ct-series-e {
+  .ct-bar,  .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie {
+    stroke: $info;
+  }
+  .ct-slice-pie, .ct-area{
+    fill: $info;
+  }
 }

src/custom-typings.d.ts

@@ -34,6 +34,7 @@ declare var GoogleMapsLoader:any;
 declare var L:any;
 declare var AmCharts:any;
 declare var Chart:any;
+declare var Chartist:any;
 
 // Extra variables that live on Global that will be replaced by webpack DefinePlugin
 declare var ENV: string;