diff --git a/config/webpack.common.js b/config/webpack.common.js index 22ce1eb5..3416a2fd 100644 --- a/config/webpack.common.js +++ b/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" }) ], diff --git a/package.json b/package.json index 925a150f..d2ef23bd 100644 --- a/package.json +++ b/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", diff --git a/src/app/pages/charts/charts.component.ts b/src/app/pages/charts/charts.component.ts new file mode 100644 index 00000000..a167324a --- /dev/null +++ b/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: `` +}) +@RouteConfig([ + { + name: 'ChartJs', + component: ChartJs, + path: '/chart-js', + useAsDefault: true + } +]) +export class Charts { + + constructor() { + } + + ngOnInit() { + } + +} diff --git a/src/app/pages/charts/components/chartJs/chartJs.component.ts b/src/app/pages/charts/components/chartJs/chartJs.component.ts new file mode 100644 index 00000000..dc38ffd2 --- /dev/null +++ b/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); + } +} diff --git a/src/app/pages/charts/components/chartJs/chartJs.html b/src/app/pages/charts/components/chartJs/chartJs.html new file mode 100644 index 00000000..daf9a249 --- /dev/null +++ b/src/app/pages/charts/components/chartJs/chartJs.html @@ -0,0 +1,9 @@ +
+
+
+ + +
+
+
diff --git a/src/app/pages/charts/components/chartJs/chartJs.scss b/src/app/pages/charts/components/chartJs/chartJs.scss new file mode 100644 index 00000000..e6598ee4 --- /dev/null +++ b/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; +} diff --git a/src/app/pages/charts/components/chartJs/chartJs.service.ts b/src/app/pages/charts/components/chartJs/chartJs.service.ts new file mode 100644 index 00000000..f90c570d --- /dev/null +++ b/src/app/pages/charts/components/chartJs/chartJs.service.ts @@ -0,0 +1,6 @@ +import {Injectable} from 'angular2/core'; + +@Injectable() +export class ChartJsService { + +} diff --git a/src/app/pages/charts/components/chartJs/index.ts b/src/app/pages/charts/components/chartJs/index.ts new file mode 100644 index 00000000..c0eb3ccc --- /dev/null +++ b/src/app/pages/charts/components/chartJs/index.ts @@ -0,0 +1 @@ +export * from './chartJs.component'; diff --git a/src/app/pages/charts/index.ts b/src/app/pages/charts/index.ts new file mode 100644 index 00000000..e86d1674 --- /dev/null +++ b/src/app/pages/charts/index.ts @@ -0,0 +1 @@ +export * from './charts.component'; diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index dda1b975..f94a71ae 100644 --- a/src/app/pages/pages.component.ts +++ b/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 { diff --git a/src/app/theme/sidebar/sidebar.service.ts b/src/app/theme/sidebar/sidebar.service.ts index be666c5f..c63981f8 100644 --- a/src/app/theme/sidebar/sidebar.service.ts +++ b/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', diff --git a/src/app/theme/theme.constants.ts b/src/app/theme/theme.constants.ts index 9b21442f..5895e8df 100644 --- a/src/app/theme/theme.constants.ts +++ b/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; -} diff --git a/src/custom-typings.d.ts b/src/custom-typings.d.ts index af1a8139..32af2652 100644 --- a/src/custom-typings.d.ts +++ b/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;