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');