From 67115d817d3f35e6c2cd1ec76d7d9cf6191dde30 Mon Sep 17 00:00:00 2001 From: nixa <4dmitr@gmail.com> Date: Tue, 17 May 2016 12:23:33 +0300 Subject: [PATCH] amchart style fixes --- .../baAmChart/baAmChartTheme.service.ts | 399 +++++++++--------- 1 file changed, 201 insertions(+), 198 deletions(-) diff --git a/src/app/theme/components/baAmChart/baAmChartTheme.service.ts b/src/app/theme/components/baAmChart/baAmChartTheme.service.ts index 3a33503d..a865282d 100644 --- a/src/app/theme/components/baAmChart/baAmChartTheme.service.ts +++ b/src/app/theme/components/baAmChart/baAmChartTheme.service.ts @@ -1,210 +1,213 @@ import {Injectable} from '@angular/core'; -import {layoutColors} from '../../../theme/theme.constants'; +import {BaThemeConfigProvider} from '../../../theme'; @Injectable() export class BaAmChartThemeService { - theme = { - - themeName: "blur", - - AmChart: { - color: layoutColors.defaultText, - backgroundColor: "#FFFFFF" - }, - - AmCoordinateChart: { - colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg] - }, - - AmStockChart: { - colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg] - }, - - AmSlicedChart: { - colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.default, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.successBg], - labelTickColor: "#FFFFFF", - labelTickAlpha: 0.3 - }, - - AmRectangularChart: { - zoomOutButtonColor: '#FFFFFF', - zoomOutButtonRollOverAlpha: 0.15, - zoomOutButtonImage: "lens.png" - }, - - AxisBase: { - axisColor: "#FFFFFF", - axisAlpha: 0.3, - gridAlpha: 0.1, - gridColor: "#FFFFFF" - }, - - ChartScrollbar: { - backgroundColor: "#FFFFFF", - backgroundAlpha: 0.12, - graphFillAlpha: 0.5, - graphLineAlpha: 0, - selectedBackgroundColor: "#FFFFFF", - selectedBackgroundAlpha: 0.4, - gridAlpha: 0.15 - }, - - ChartCursor: { - cursorColor: layoutColors.primary, - color: "#FFFFFF", - cursorAlpha: 0.5 - }, - - AmLegend: { - color: "#FFFFFF" - }, - - AmGraph: { - lineAlpha: 0.9 - }, - GaugeArrow: { - color: "#FFFFFF", - alpha: 0.8, - nailAlpha: 0, - innerRadius: "40%", - nailRadius: 15, - startWidth: 15, - borderAlpha: 0.8, - nailBorderAlpha: 0 - }, - - GaugeAxis: { - tickColor: "#FFFFFF", - tickAlpha: 1, - tickLength: 15, - minorTickLength: 8, - axisThickness: 3, - axisColor: '#FFFFFF', - axisAlpha: 1, - bandAlpha: 0.8 - }, - - TrendLine: { - lineColor: '#FFFFFF', - lineAlpha: 0.8 - }, - - // ammap - AreasSettings: { - alpha: 0.8, - color: layoutColors.info, - colorSolid: layoutColors.primaryDark, - unlistedAreasAlpha: 0.4, - unlistedAreasColor: "#FFFFFF", - outlineColor: "#FFFFFF", - outlineAlpha: 0.5, - outlineThickness: 0.5, - rollOverColor: layoutColors.primary, - rollOverOutlineColor: "#FFFFFF", - selectedOutlineColor: "#FFFFFF", - selectedColor: "#f15135", - unlistedAreasOutlineColor: "#FFFFFF", - unlistedAreasOutlineAlpha: 0.5 - }, - - LinesSettings: { - color: "#FFFFFF", - alpha: 0.8 - }, - - ImagesSettings: { - alpha: 0.8, - labelColor: "#FFFFFF", - color: "#FFFFFF", - labelRollOverColor: layoutColors.primaryDark - }, - - ZoomControl: { - buttonFillAlpha: 0.8, - buttonIconColor: layoutColors.default, - buttonRollOverColor: layoutColors.danger, - buttonFillColor: layoutColors.primaryDark, - buttonBorderColor: layoutColors.primaryDark, - buttonBorderAlpha: 0, - buttonCornerRadius: 0, - gridColor: "#FFFFFF", - gridBackgroundColor: "#FFFFFF", - buttonIconAlpha: 0.6, - gridAlpha: 0.6, - buttonSize: 20 - }, - - SmallMap: { - mapColor: "#000000", - rectangleColor: layoutColors.danger, - backgroundColor: "#FFFFFF", - backgroundAlpha: 0.7, - borderThickness: 1, - borderAlpha: 0.8 - }, - - // the defaults below are set using CSS syntax, you can use any existing css property - // if you don't use Stock chart, you can delete lines below - PeriodSelector: { - color: "#FFFFFF" - }, - - PeriodButton: { - color: "#FFFFFF", - background: "transparent", - opacity: 0.7, - border: "1px solid rgba(0, 0, 0, .3)", - MozBorderRadius: "5px", - borderRadius: "5px", - margin: "1px", - outline: "none", - boxSizing: "border-box" - }, - - PeriodButtonSelected: { - color: "#FFFFFF", - backgroundColor: "#b9cdf5", - border: "1px solid rgba(0, 0, 0, .3)", - MozBorderRadius: "5px", - borderRadius: "5px", - margin: "1px", - outline: "none", - opacity: 1, - boxSizing: "border-box" - }, - - PeriodInputField: { - color: "#FFFFFF", - background: "transparent", - border: "1px solid rgba(0, 0, 0, .3)", - outline: "none" - }, - - DataSetSelector: { - color: "#FFFFFF", - selectedBackgroundColor: "#b9cdf5", - rollOverBackgroundColor: "#a8b0e4" - }, - - DataSetCompareList: { - color: "#FFFFFF", - lineHeight: "100%", - boxSizing: "initial", - webkitBoxSizing: "initial", - border: "1px solid rgba(0, 0, 0, .3)" - }, - - DataSetSelect: { - border: "1px solid rgba(0, 0, 0, .3)", - outline: "none" - } - }; + constructor(private _baConfig:BaThemeConfigProvider) { + } getTheme() { - return this.theme; + let layoutColors = this._baConfig.get().colors; + + return { + + themeName: "blur", + + AmChart: { + color: layoutColors.defaultText, + backgroundColor: "#FFFFFF" + }, + + AmCoordinateChart: { + colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.primaryLight, layoutColors.warningDark] + }, + + AmStockChart: { + colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.primaryLight, layoutColors.warningDark] + }, + + AmSlicedChart: { + colors: [layoutColors.primary, layoutColors.danger, layoutColors.warning, layoutColors.success, layoutColors.info, layoutColors.primaryDark, layoutColors.warningLight, layoutColors.successDark, layoutColors.successLight, layoutColors.primaryLight, layoutColors.warningDark], + labelTickColor: "#FFFFFF", + labelTickAlpha: 0.3 + }, + + AmRectangularChart: { + zoomOutButtonColor: '#FFFFFF', + zoomOutButtonRollOverAlpha: 0.15, + zoomOutButtonImage: "lens.png" + }, + + AxisBase: { + axisColor: "#FFFFFF", + axisAlpha: 0.3, + gridAlpha: 0.1, + gridColor: "#FFFFFF" + }, + + ChartScrollbar: { + backgroundColor: "#FFFFFF", + backgroundAlpha: 0.12, + graphFillAlpha: 0.5, + graphLineAlpha: 0, + selectedBackgroundColor: "#FFFFFF", + selectedBackgroundAlpha: 0.4, + gridAlpha: 0.15 + }, + + ChartCursor: { + cursorColor: layoutColors.primary, + color: "#FFFFFF", + cursorAlpha: 0.5 + }, + + AmLegend: { + color: "#FFFFFF" + }, + + AmGraph: { + lineAlpha: 0.9 + }, + GaugeArrow: { + color: "#FFFFFF", + alpha: 0.8, + nailAlpha: 0, + innerRadius: "40%", + nailRadius: 15, + startWidth: 15, + borderAlpha: 0.8, + nailBorderAlpha: 0 + }, + + GaugeAxis: { + tickColor: "#FFFFFF", + tickAlpha: 1, + tickLength: 15, + minorTickLength: 8, + axisThickness: 3, + axisColor: '#FFFFFF', + axisAlpha: 1, + bandAlpha: 0.8 + }, + + TrendLine: { + lineColor: layoutColors.danger, + lineAlpha: 0.8 + }, + + // ammap + AreasSettings: { + alpha: 0.8, + color: layoutColors.info, + colorSolid: layoutColors.primaryDark, + unlistedAreasAlpha: 0.4, + unlistedAreasColor: "#FFFFFF", + outlineColor: "#FFFFFF", + outlineAlpha: 0.5, + outlineThickness: 0.5, + rollOverColor: layoutColors.primary, + rollOverOutlineColor: "#FFFFFF", + selectedOutlineColor: "#FFFFFF", + selectedColor: "#f15135", + unlistedAreasOutlineColor: "#FFFFFF", + unlistedAreasOutlineAlpha: 0.5 + }, + + LinesSettings: { + color: "#FFFFFF", + alpha: 0.8 + }, + + ImagesSettings: { + alpha: 0.8, + labelColor: "#FFFFFF", + color: "#FFFFFF", + labelRollOverColor: layoutColors.primaryDark + }, + + ZoomControl: { + buttonFillAlpha: 0.8, + buttonIconColor: layoutColors.default, + buttonRollOverColor: layoutColors.danger, + buttonFillColor: layoutColors.primaryDark, + buttonBorderColor: layoutColors.primaryDark, + buttonBorderAlpha: 0, + buttonCornerRadius: 0, + gridColor: "#FFFFFF", + gridBackgroundColor: "#FFFFFF", + buttonIconAlpha: 0.6, + gridAlpha: 0.6, + buttonSize: 20 + }, + + SmallMap: { + mapColor: "#000000", + rectangleColor: layoutColors.danger, + backgroundColor: "#FFFFFF", + backgroundAlpha: 0.7, + borderThickness: 1, + borderAlpha: 0.8 + }, + + // the defaults below are set using CSS syntax, you can use any existing css property + // if you don't use Stock chart, you can delete lines below + PeriodSelector: { + color: "#FFFFFF" + }, + + PeriodButton: { + color: "#FFFFFF", + background: "transparent", + opacity: 0.7, + border: "1px solid rgba(0, 0, 0, .3)", + MozBorderRadius: "5px", + borderRadius: "5px", + margin: "1px", + outline: "none", + boxSizing: "border-box" + }, + + PeriodButtonSelected: { + color: "#FFFFFF", + backgroundColor: "#b9cdf5", + border: "1px solid rgba(0, 0, 0, .3)", + MozBorderRadius: "5px", + borderRadius: "5px", + margin: "1px", + outline: "none", + opacity: 1, + boxSizing: "border-box" + }, + + PeriodInputField: { + color: "#FFFFFF", + background: "transparent", + border: "1px solid rgba(0, 0, 0, .3)", + outline: "none" + }, + + DataSetSelector: { + color: "#FFFFFF", + selectedBackgroundColor: "#b9cdf5", + rollOverBackgroundColor: "#a8b0e4" + }, + + DataSetCompareList: { + color: "#FFFFFF", + lineHeight: "100%", + boxSizing: "initial", + webkitBoxSizing: "initial", + border: "1px solid rgba(0, 0, 0, .3)" + }, + + DataSetSelect: { + border: "1px solid rgba(0, 0, 0, .3)", + outline: "none" + } + }; } }