starting with charts

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;
-}