From e1de8880b68f8541abf9d11b06ebf01ad8edad9f Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Mon, 16 May 2016 17:53:52 +0300 Subject: [PATCH] lineChart style fixes --- .../dashboard/lineChart/lineChart.service.ts | 213 +++++++++--------- src/app/theme/theme.constants.ts | 38 ++-- 2 files changed, 128 insertions(+), 123 deletions(-) diff --git a/src/app/pages/dashboard/lineChart/lineChart.service.ts b/src/app/pages/dashboard/lineChart/lineChart.service.ts index 428f75dc..b7184a7a 100644 --- a/src/app/pages/dashboard/lineChart/lineChart.service.ts +++ b/src/app/pages/dashboard/lineChart/lineChart.service.ts @@ -1,113 +1,118 @@ import {Injectable} from '@angular/core'; -import {layoutColors, layoutPaths} from '../../../theme'; +import {BaThemeConfigProvider, colorHelper, layoutPaths} from '../../../theme'; @Injectable() export class LineChartService { - private _data = { - type: 'serial', - theme: 'blur', - marginTop: 15, - marginRight: 15, - responsive: { - 'enabled': true - }, - dataProvider: [ - { date: new Date(2012, 11), value: 0, value0: 0 }, - { date: new Date(2013, 0), value: 15000, value0: 19000}, - { date: new Date(2013, 1), value: 30000, value0: 20000}, - - - { date: new Date(2013, 2), value: 25000, value0: 22000}, - { date: new Date(2013, 3), value: 21000, value0: 25000}, - { date: new Date(2013, 4), value: 24000, value0: 29000}, - { date: new Date(2013, 5), value: 31000, value0: 26000}, - { date: new Date(2013, 6), value: 40000, value0: 25000}, - { date: new Date(2013, 7), value: 37000, value0: 20000}, - { date: new Date(2013, 8), value: 18000, value0: 22000}, - { date: new Date(2013, 9), value: 5000, value0: 26000}, - { date: new Date(2013, 10), value: 40000, value0: 30000}, - { date: new Date(2013, 11), value: 20000, value0: 25000}, - { date: new Date(2014, 0), value: 5000, value0: 13000}, - - { date: new Date(2014, 1), value: 3000, value0: 13000}, - { date: new Date(2014, 2), value: 1800, value0: 13000}, - { date: new Date(2014, 3), value: 10400, value0: 13000}, - { date: new Date(2014, 4), value: 25500, value0: 13000}, - { date: new Date(2014, 5), value: 2100, value0: 13000}, - { date: new Date(2014, 6), value: 6500, value0: 13000}, - { date: new Date(2014, 7), value: 1100, value0: 13000}, - { date: new Date(2014, 8), value: 17200, value0: 13000}, - { date: new Date(2014, 9), value: 26900, value0: 13000}, - { date: new Date(2014, 10), value: 14100, value0: 13000}, - { date: new Date(2014, 11), value: 35300, value0: 13000}, - { date: new Date(2015, 0), value: 54800, value0: 13000}, - { date: new Date(2015, 1), value: 49800, value0: 13000} - ], - categoryField: 'date', - categoryAxis: { - parseDates: true, - gridAlpha: 0, - color: '#FFFFFF', - axisColor: '#FFFFFF' - }, - valueAxes: [ - { - minVerticalGap: 50, - gridAlpha: 0, - color: '#FFFFFF', - axisColor: '#FFFFFF' - } - ], - graphs: [ - { - id: 'g0', - bullet: 'none', - useLineColorForBulletBorder: true, - lineColor: 'rgba(0,0,0,0.15)', - lineThickness: 1, - negativeLineColor: 'rgba(0,0,0,0.15)', - type: 'smoothedLine', - valueField: 'value0', - fillAlphas: 1, - fillColorsField: 'lineColor' - }, - { - id: 'g1', - bullet: 'none', - useLineColorForBulletBorder: true, - lineColor: 'rgba(0,0,0,0.25)', - lineThickness: 1, - negativeLineColor: 'rgba(0,0,0,0.25)', - type: 'smoothedLine', - valueField: 'value', - fillAlphas: 1, - fillColorsField: 'lineColor' - } - ], - chartCursor: { - categoryBalloonDateFormat: 'MM YYYY', - categoryBalloonColor: '#4285F4', - categoryBalloonAlpha: 0.7, - cursorAlpha: 0, - valueLineEnabled: true, - valueLineBalloonEnabled: true, - valueLineAlpha: 0.5 - }, - dataDateFormat: 'MM YYYY', - export: { - enabled: true - }, - creditsPosition: 'bottom-right', - zoomOutButton: { - backgroundColor: '#fff', - backgroundAlpha: 0 - }, - zoomOutText: '', - pathToImages: layoutPaths.images.amChart - }; + constructor(private _baConfig:BaThemeConfigProvider) { + } getData() { - return this._data; + + var layoutColors = this._baConfig.get().colors; + var graphColor = this._baConfig.get().theme.blur ? '#000000' : layoutColors.primary; + + return { + type: 'serial', + theme: 'blur', + marginTop: 15, + marginRight: 15, + responsive: { + 'enabled': true + }, + dataProvider: [ + { date: new Date(2012, 11), value: 0, value0: 0 }, + { date: new Date(2013, 0), value: 15000, value0: 19000}, + { date: new Date(2013, 1), value: 30000, value0: 20000}, + + + { date: new Date(2013, 2), value: 25000, value0: 22000}, + { date: new Date(2013, 3), value: 21000, value0: 25000}, + { date: new Date(2013, 4), value: 24000, value0: 29000}, + { date: new Date(2013, 5), value: 31000, value0: 26000}, + { date: new Date(2013, 6), value: 40000, value0: 25000}, + { date: new Date(2013, 7), value: 37000, value0: 20000}, + { date: new Date(2013, 8), value: 18000, value0: 22000}, + { date: new Date(2013, 9), value: 5000, value0: 26000}, + { date: new Date(2013, 10), value: 40000, value0: 30000}, + { date: new Date(2013, 11), value: 20000, value0: 25000}, + { date: new Date(2014, 0), value: 5000, value0: 13000}, + + { date: new Date(2014, 1), value: 3000, value0: 13000}, + { date: new Date(2014, 2), value: 1800, value0: 13000}, + { date: new Date(2014, 3), value: 10400, value0: 13000}, + { date: new Date(2014, 4), value: 25500, value0: 13000}, + { date: new Date(2014, 5), value: 2100, value0: 13000}, + { date: new Date(2014, 6), value: 6500, value0: 13000}, + { date: new Date(2014, 7), value: 1100, value0: 13000}, + { date: new Date(2014, 8), value: 17200, value0: 13000}, + { date: new Date(2014, 9), value: 26900, value0: 13000}, + { date: new Date(2014, 10), value: 14100, value0: 13000}, + { date: new Date(2014, 11), value: 35300, value0: 13000}, + { date: new Date(2015, 0), value: 54800, value0: 13000}, + { date: new Date(2015, 1), value: 49800, value0: 13000} + ], + categoryField: 'date', + categoryAxis: { + parseDates: true, + gridAlpha: 0, + color: layoutColors.defaultText, + axisColor: layoutColors.defaultText + }, + valueAxes: [ + { + minVerticalGap: 50, + gridAlpha: 0, + color: layoutColors.defaultText, + axisColor: layoutColors.defaultText + } + ], + graphs: [ + { + id: 'g0', + bullet: 'none', + useLineColorForBulletBorder: true, + lineColor: colorHelper.hexToRgbA(graphColor, 0.3), + lineThickness: 1, + negativeLineColor: layoutColors.danger, + type: 'smoothedLine', + valueField: 'value0', + fillAlphas: 1, + fillColorsField: 'lineColor' + }, + { + id: 'g1', + bullet: 'none', + useLineColorForBulletBorder: true, + lineColor: colorHelper.hexToRgbA(graphColor, 0.5), + lineThickness: 1, + negativeLineColor: layoutColors.danger, + type: 'smoothedLine', + valueField: 'value', + fillAlphas: 1, + fillColorsField: 'lineColor' + } + ], + chartCursor: { + categoryBalloonDateFormat: 'MM YYYY', + categoryBalloonColor: '#4285F4', + categoryBalloonAlpha: 0.7, + cursorAlpha: 0, + valueLineEnabled: true, + valueLineBalloonEnabled: true, + valueLineAlpha: 0.5 + }, + dataDateFormat: 'MM YYYY', + export: { + enabled: true + }, + creditsPosition: 'bottom-right', + zoomOutButton: { + backgroundColor: '#fff', + backgroundAlpha: 0 + }, + zoomOutText: '', + pathToImages: layoutPaths.images.amChart + }; } } diff --git a/src/app/theme/theme.constants.ts b/src/app/theme/theme.constants.ts index 26628081..13ed82de 100644 --- a/src/app/theme/theme.constants.ts +++ b/src/app/theme/theme.constants.ts @@ -9,6 +9,19 @@ export class colorHelper { static tint = (color, weight) => { return mix('#ffffff', color, weight); }; + + static 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'); + } } //SASS mix function @@ -33,19 +46,6 @@ export let mix = (color1, color2, weight) => { 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 @@ -116,14 +116,14 @@ let _colorsForChart = [layoutColors.primary, layoutColors.danger, layoutColors.w _colorsForChart.forEach((color) => { _chartColors.push({ - fillColor: hexToRgbA(color, 0.2), - strokeColor: hexToRgbA(color, 1), - pointColor: hexToRgbA(color, 1), + fillColor: colorHelper.hexToRgbA(color, 0.2), + strokeColor: colorHelper.hexToRgbA(color, 1), + pointColor: colorHelper.hexToRgbA(color, 1), pointStrokeColor: color, pointHighlightFill: color, - pointHighlightStroke: hexToRgbA(color, 0.8), - color: hexToRgbA(color, 1), - highlight: hexToRgbA(color, 0.8) + pointHighlightStroke: colorHelper.hexToRgbA(color, 0.8), + color: colorHelper.hexToRgbA(color, 1), + highlight: colorHelper.hexToRgbA(color, 0.8) }); }); export const chartColors = _chartColors;