starting with charts

config/webpack.common.js

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

package.json

@@ -65,6 +65,7 @@
     "google-maps": "^3.2.1",
     "jquery": "^2.2.3",
     "leaflet-map": "^0.2.1",
+    "ng2-charts": "^1.0.3",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.2",
     "tether": "^1.2.4",

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

@@ -0,0 +1,29 @@
+import {Component} from 'angular2/core';
+import {RouteConfig} from 'angular2/router';
+
+import {ChartJs} from "./components/chartJs";
+
+@Component({
+  selector: 'maps',
+  pipes: [],
+  providers: [],
+  styles: [],
+  template: `<router-outlet></router-outlet>`
+})
+@RouteConfig([
+  {
+    name: 'ChartJs',
+    component: ChartJs,
+    path: '/chart-js',
+    useAsDefault: true
+  }
+])
+export class Charts {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -0,0 +1,46 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+import {BaCard} from '../../../../theme';
+
+import {ChartJsService} from "./chartJs.service";
+
+import {CHART_DIRECTIVES} from 'ng2-charts';
+import {chartColors} from "../../../../theme/theme.constants";
+
+@Component({
+  selector: 'chart-js',
+  pipes: [],
+  providers: [ChartJsService],
+  encapsulation: ViewEncapsulation.None,
+  styles: [require('./chartJs.scss')],
+  directives: [BaCard, CHART_DIRECTIVES],
+  template: require('./chartJs.html'),
+})
+export class ChartJs {
+  public pieLabels = ["Sleeping", "Designing", "Coding", "Cycling"];
+  public pieChartType = 'Pie';
+  public pieData = [20, 40, 5, 35];
+  public pieColours = chartColors;
+  public pieOptions = {
+    segmentShowStroke : false,
+    // responsive: true,
+    scaleFontColor: "rgba(255,255,255,.7)",
+    scaleLineColor: "rgba(255,255,255,.7)",
+    pointLabelFontColor: "rgba(255,255,255,.7)"
+  };
+
+  constructor(private _chartJsService:ChartJsService) {
+  }
+
+  ngAfterViewInit() {
+
+  }
+
+  pieChangeData () {
+    let shuffle = (o) => {
+      for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x){}
+      return o;
+    };
+
+    this.pieData = shuffle(this.pieData);
+  }
+}

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

@@ -0,0 +1,9 @@
+<div class="row">
+  <div class="col-md-4">
+    <div ba-panel ba-panel-title="Pie">
+      <base-chart class="chart chart-pie"
+              [legend]="true" [colours]="pieColours" [options]="pieOptions" [data]="pieData" [chartType]="pieChartType" [labels]="pieLabels" (chartClick)="pieChangeData($event)">
+      </base-chart>
+    </div>
+  </div>
+</div>

src/app/pages/charts/components/chartJs/chartJs.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/chartJs/chartJs.service.ts

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

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

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

src/app/pages/charts/index.ts

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

src/app/pages/pages.component.ts

@@ -5,6 +5,7 @@ import {PageTop, ContentTop, Sidebar} from '../theme';
 import {Dashboard} from './dashboard';
 import {Ui} from './ui';
 import {Maps} from './maps';
+import {Charts} from './charts';
 
 @Component({
   selector: 'pages',
@@ -38,6 +39,11 @@ import {Maps} from './maps';
     component: Maps,
     path: '/maps/...',
   },
+  {
+    name: 'Charts',
+    component: Charts,
+    path: '/charts/...',
+  },
 ])
 export class Pages {
 

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

@@ -52,6 +52,20 @@ export class SidebarService {
         }
       ]
     },
+    {
+      title: 'Charts',
+      name: 'Charts',
+      icon: 'ion-stats-bars',
+      selected: false,
+      expanded: false,
+      order: 400,
+      subMenu: [
+        {
+          title: 'Chart Js',
+          name: 'ChartJs',
+        },
+      ]
+    },
     {
       title: 'Pages',
       icon: 'ion-document',

src/app/theme/theme.constants.ts

@@ -1,5 +1,47 @@
 export const IMAGES_ROOT = 'assets/img/';
 
+export let shade = (color, weight) => {
+  return mix('#000000', color, weight);
+};
+
+export let tint = (color, weight) => {
+  return mix('#ffffff', color, weight);
+};
+
+//SASS mix function
+export let mix = (color1, color2, weight) => {
+  // convert a decimal value to hex
+  function d2h(d) {
+    return d.toString(16);
+  }
+  // convert a hex value to decimal
+  function h2d(h) {
+    return parseInt(h, 16);
+  }
+
+  let result = "#";
+  for(let i = 1; i < 7; i += 2) {
+    let color1Part = h2d(color1.substr(i, 2));
+    let color2Part = h2d(color2.substr(i, 2));
+    let resultPart = d2h(Math.floor(color2Part + (color1Part - color2Part) * (weight / 100.0)));
+    result += ('0' + resultPart).slice(-2);
+  }
+  return result;
+};
+
+export let hexToRgbA = (hex, alpha) => {
+  var c;
+  if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
+    c= hex.substring(1).split('');
+    if(c.length== 3){
+      c= [c[0], c[0], c[1], c[1], c[2], c[2]];
+    }
+    c= '0x'+c.join('');
+    return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + alpha + ')';
+  }
+  throw new Error('Bad Hex');
+};
+
 export const layoutSizes = {
   resWidthCollapseSidebar: 1200,
   resWidthHideSidebar: 500
@@ -64,6 +106,23 @@ export const layoutColors = {
   }
 };
 
+let _chartColors = [];
+let _colorsForChart = [ layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.successDark, layoutColors.warningLight, layoutColors.successLight, layoutColors.successBg];
+
+_colorsForChart.forEach((color) => {
+  _chartColors.push({
+    fillColor: hexToRgbA(color, 0.2),
+    strokeColor: hexToRgbA(color, 1),
+    pointColor: hexToRgbA(color, 1),
+    pointStrokeColor: color,
+    pointHighlightFill: color,
+    pointHighlightStroke: hexToRgbA(color, 0.8),
+    color: hexToRgbA(color, 1),
+    highlight: hexToRgbA(color, 0.8)
+  });
+});
+export const chartColors = _chartColors;
+
 export const layoutPaths = {
   images: {
     root: IMAGES_ROOT,
@@ -72,32 +131,3 @@ export const layoutPaths = {
     amChart: 'assets/img/theme/vendor/amcharts/dist/amcharts/images/'
   }
 };
-
-function shade(color, weight) {
-  return mix('#000000', color, weight);
-}
-
-function tint(color, weight) {
-  return mix('#ffffff', color, weight);
-}
-
-//SASS mix function
-function mix(color1, color2, weight) {
-  // convert a decimal value to hex
-  function d2h(d) {
-    return d.toString(16);
-  }
-  // convert a hex value to decimal
-  function h2d(h) {
-    return parseInt(h, 16);
-  }
-
-  var result = "#";
-  for(var i = 1; i < 7; i += 2) {
-    var color1Part = h2d(color1.substr(i, 2));
-    var color2Part = h2d(color2.substr(i, 2));
-    var resultPart = d2h(Math.floor(color2Part + (color1Part - color2Part) * (weight / 100.0)));
-    result += ('0' + resultPart).slice(-2);
-  }
-  return result;
-}

src/custom-typings.d.ts

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