From 1293bae38fb710ea086de080fe2c8cd0963f6893 Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Fri, 13 May 2016 10:39:59 +0300 Subject: [PATCH] refactoring of chartist js component --- .../chartistJs/chartistJs.component.ts | 215 +----------------- .../components/chartistJs/chartistJs.html | 38 ++-- .../chartistJs/chartistJs.service.ts | 195 ++++++++++++++++ .../baChartistChart.component.ts | 7 +- 4 files changed, 223 insertions(+), 232 deletions(-) diff --git a/src/app/pages/charts/components/chartistJs/chartistJs.component.ts b/src/app/pages/charts/components/chartistJs/chartistJs.component.ts index 923d8797..ad6a21ef 100644 --- a/src/app/pages/charts/components/chartistJs/chartistJs.component.ts +++ b/src/app/pages/charts/components/chartistJs/chartistJs.component.ts @@ -1,230 +1,31 @@ import {Component, ViewEncapsulation} from '@angular/core'; import {BaCard} from '../../../../theme/components'; -import {ChartistJsService} from "./chartistJs.service"; +import {ChartistJsService} from './chartistJs.service'; import {BaChartistChart} from '../../../../theme/components'; @Component({ selector: 'chartist-js', + encapsulation: ViewEncapsulation.None, pipes: [], providers: [ChartistJsService], - encapsulation: ViewEncapsulation.None, - styles: [require('chartist/dist/chartist.css'), require('./chartistJs.scss')], directives: [BaCard, BaChartistChart], + styles: [require('chartist/dist/chartist.css'), require('./chartistJs.scss')], template: require('./chartistJs.html'), }) -// TODO: service for the data 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]; - } - }; + data:any; constructor(private _chartistJsService:ChartistJsService) { } + ngOnInit() { + this.data = this._chartistJsService.getAll(); + } 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]; - } - }] - ]; + return this._chartistJsService.getResponsive(padding, offset); } } diff --git a/src/app/pages/charts/components/chartistJs/chartistJs.html b/src/app/pages/charts/components/chartistJs/chartistJs.html index dc3e8378..4d678f33 100644 --- a/src/app/pages/charts/components/chartistJs/chartistJs.html +++ b/src/app/pages/charts/components/chartistJs/chartistJs.html @@ -5,22 +5,22 @@
Simple line chart
+ [baChartistChartData]="data['simpleLineData']" + [baChartistChartOptions]="data['simpleLineOptions']">
Line chart with area
+ [baChartistChartData]="data['areaLineData']" + [baChartistChartOptions]="data['areaLineOptions']">
Bi-polar line chart with area only
+ [baChartistChartData]="data['biLineData']" + [baChartistChartOptions]="data['biLineOptions']"> @@ -30,23 +30,23 @@
Simple bar chart
+ [baChartistChartData]="data['simpleBarData']" + [baChartistChartOptions]="data['simpleBarOptions']">
Multi-line labels bar chart
+ [baChartistChartData]="data['multiBarData']" + [baChartistChartOptions]="data['multiBarOptions']" + [baChartistChartResponsive]="data['multiBarResponsive']">
Stacked bar chart
+ [baChartistChartData]="data['stackedBarData']" + [baChartistChartOptions]="data['stackedBarOptions']"> @@ -59,23 +59,23 @@
Simple Pie
Pie with labels
+ [baChartistChartData]="data['labelsPieData']" + [baChartistChartOptions]="data['labelsPieOptions']">
Donut
diff --git a/src/app/pages/charts/components/chartistJs/chartistJs.service.ts b/src/app/pages/charts/components/chartistJs/chartistJs.service.ts index cc2f88c4..ec0b4c4f 100644 --- a/src/app/pages/charts/components/chartistJs/chartistJs.service.ts +++ b/src/app/pages/charts/components/chartistJs/chartistJs.service.ts @@ -3,4 +3,199 @@ import {Injectable} from '@angular/core'; @Injectable() export class ChartistJsService { + private _data = { + simpleLineOptions: { + fullWidth: true, + height: "300px", + chartPadding: { + right: 40 + } + }, + 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] + ] + }, + areaLineData: { + labels: [1, 2, 3, 4, 5, 6, 7, 8], + series: [ + [5, 9, 7, 8, 5, 3, 5, 4] + ] + }, + areaLineOptions: { + fullWidth: true, + height: "300px", + low: 0, + showArea: true + }, + 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] + ] + }, + + biLineOptions: { + height: "300px", + high: 3, + low: -3, + showArea: true, + showLine: false, + showPoint: false, + fullWidth: true, + axisX: { + showGrid: false + } + }, + 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] + ] + }, + simpleBarOptions: { + fullWidth: true, + height: "300px" + }, + 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] + ] + }, + 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 + } + }, + 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 + }] + ], + stackedBarData: { + labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'], + series: [ + [800000, 1200000, 1400000, 1300000], + [200000, 400000, 500000, 300000], + [100000, 200000, 400000, 600000] + ] + }, + stackedBarOptions: { + fullWidth: true, + height: "300px", + stackBars: true, + axisY: { + labelInterpolationFnc: function (value) { + return (value / 1000) + 'k'; + } + } + }, + simplePieData: { + series: [5, 3, 4] + }, + simplePieOptions: { + fullWidth: true, + height: "300px", + weight: "300px", + labelInterpolationFnc: function (value) { + return Math.round(value / 12 * 100) + '%'; + } + }, + labelsPieData: { + labels: ['Bananas', 'Apples', 'Grapes'], + series: [20, 15, 40] + }, + labelsPieOptions: { + fullWidth: true, + height: "300px", + weight: "300px", + labelDirection: 'explode', + labelInterpolationFnc: function (value) { + return value[0]; + } + }, + simpleDonutData: { + labels: ['Bananas', 'Apples', 'Grapes'], + series: [20, 15, 40] + }, + simpleDonutOptions: { + fullWidth: true, + donut: true, + height: "300px", + weight: "300px", + labelDirection: 'explode', + labelInterpolationFnc: function (value) { + return value[0]; + } + } + }; + + public getAll() { + return this._data; + } + + public 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/theme/components/baChartistChart/baChartistChart.component.ts b/src/app/theme/components/baChartistChart/baChartistChart.component.ts index eb455616..3ef87dbd 100644 --- a/src/app/theme/components/baChartistChart/baChartistChart.component.ts +++ b/src/app/theme/components/baChartistChart/baChartistChart.component.ts @@ -1,12 +1,10 @@ import {Component, ViewEncapsulation, Input, Output, ElementRef, EventEmitter} from '@angular/core'; -import './baChartistChart.loader.ts'; - @Component({ selector: 'ba-chartist-chart', + encapsulation: ViewEncapsulation.None, styles: [require('chartist/dist/chartist.css'), require('./baChartistChart.scss')], template: require('./baChartistChart.html'), - encapsulation: ViewEncapsulation.None, providers: [], }) export class BaChartistChart { @@ -21,9 +19,6 @@ export class BaChartistChart { constructor (private _elementRef:ElementRef) { } - ngOnInit() { - } - ngAfterViewInit() { let el = this._elementRef.nativeElement.querySelector('.ba-chartist-chart');