chartist component basics

package.json

@@ -59,6 +59,7 @@
     "angular2": "2.0.0-beta.15",
     "bootstrap": "^4.0.0-alpha.2",
     "bootstrap-loader": "^1.0.8",
+    "chartist": "^0.9.7",
     "core-js": "^2.2.2",
     "font-awesome": "^4.6.1",
     "font-awesome-sass-loader": "^1.0.1",

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

@@ -2,6 +2,7 @@ import {Component} from 'angular2/core';
 import {RouteConfig} from 'angular2/router';
 
 import {ChartJs} from "./components/chartJs";
+import {ChartistJs} from "./components/chartistJs/chartistJs.component";
 
 @Component({
   selector: 'maps',
@@ -15,7 +16,12 @@ import {ChartJs} from "./components/chartJs";
     name: 'ChartJs',
     component: ChartJs,
     path: '/chart-js',
-    useAsDefault: true
+    useAsDefault: true,
+  },
+  {
+    name: 'ChartistJs',
+    component: ChartistJs,
+    path: '/chartist-js',
   }
 ])
 export class Charts {

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

@@ -0,0 +1,23 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+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')],
+  directives: [BaCard],
+  template: require('./chartistJs.html'),
+})
+export class ChartistJs {
+
+
+
+  constructor(private _chartistJsService:ChartistJsService) {
+  }
+}

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

@@ -0,0 +1,43 @@
+<section ng-controller="chartistCtrl">
+  <div class="row">
+    <div class="col-md-6 ">
+      <div ba-panel ba-panel-title="Lines" ba-panel-class="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>
+    </div>
+
+    <div class="col-md-6 ">
+      <div ba-panel ba-panel-title="Bars" ba-panel-class="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>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-12">
+      <div ba-panel ba-panel-title="Pies & Donuts" ba-panel-class="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>
+          </div>
+          <div class="col-md-12 col-lg-4"><h5>Pie with labels</h5>
+            <div id="label-pie" class="ct-chart"></div>
+          </div>
+          <div class="col-md-12 col-lg-4"><h5>Donut</h5>
+            <div id="donut" class="ct-chart"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,49 @@
+.chart-legend,
+.bar-legend,
+.line-legend,
+.pie-legend,
+.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,
+.line-legend li,
+.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;
+  width: 20px;
+  height: 20px;
+  border-radius: 5px;
+}

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

@@ -0,0 +1,6 @@
+import {Injectable} from 'angular2/core';
+
+@Injectable()
+export class ChartistJsService {
+
+}

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

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

src/app/theme/sidebar/sidebar.service.ts

@@ -64,6 +64,10 @@ export class SidebarService {
           title: 'Chart Js',
           name: 'ChartJs',
         },
+        {
+          title: 'ChartistJs',
+          name: 'ChartistJs',
+        },
       ]
     },
     {