diff --git a/config/webpack.common.js b/config/webpack.common.js index 3416a2fd..b68aef5b 100644 --- a/config/webpack.common.js +++ b/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", }) ], diff --git a/src/app/pages/charts/components/chartistJs/chartistJs.component.ts b/src/app/pages/charts/components/chartistJs/chartistJs.component.ts index 23b93dfe..aaa3417f 100644 --- a/src/app/pages/charts/components/chartistJs/chartistJs.component.ts +++ b/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]; + } + }] + ]; + } } diff --git a/src/app/pages/charts/components/chartistJs/chartistJs.html b/src/app/pages/charts/components/chartistJs/chartistJs.html index 9811f560..66700208 100644 --- a/src/app/pages/charts/components/chartistJs/chartistJs.html +++ b/src/app/pages/charts/components/chartistJs/chartistJs.html @@ -1,31 +1,31 @@
-
+
Simple line chart
Line chart with area
Bi-polar line chart with area only
-
+
-
+
Simple bar chart
Multi-line labels bar chart
Stacked bar chart
-
+
-
+
Simple Pie
@@ -37,7 +37,7 @@
-
+
diff --git a/src/app/pages/charts/components/chartistJs/chartistJs.scss b/src/app/pages/charts/components/chartistJs/chartistJs.scss index e6598ee4..64279db1 100644 --- a/src/app/pages/charts/components/chartistJs/chartistJs.scss +++ b/src/app/pages/charts/components/chartistJs/chartistJs.scss @@ -1,49 +1,56 @@ -.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) */ +@import "../../../../theme/sass/conf/conf"; + +.ct-chart .ct-label{ + font-size: 1em; } -.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 { + +.ct-chart svg{ + width: 100%; display: block; - position: absolute; - left: 0; - top: 0; - width: 20px; - height: 20px; - border-radius: 5px; +} + +.ct-series-a { + .ct-bar, .ct-line, .ct-point, .ct-slice-donut, .ct-slice-pie { + stroke: $primary; + } + .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; + } } diff --git a/src/custom-typings.d.ts b/src/custom-typings.d.ts index 32af2652..772f1988 100644 --- a/src/custom-typings.d.ts +++ b/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;