mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-02-22 16:04:08 +01:00
amchart style fixes
This commit is contained in:
nixa
parent
de6c8de610
commit
67115d817d
1 changed files with 201 additions and 198 deletions
|
|
@ -1,210 +1,213 @@
|
||||||
import {Injectable} from '@angular/core';
|
import {Injectable} from '@angular/core';
|
||||||
|
|
||||||
import {layoutColors} from '../../../theme/theme.constants';
|
import {BaThemeConfigProvider} from '../../../theme';
|
||||||
|
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class BaAmChartThemeService {
|
export class BaAmChartThemeService {
|
||||||
|
|
||||||
theme = {
|
constructor(private _baConfig:BaThemeConfigProvider) {
|
||||||
|
}
|
||||||
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"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
getTheme() {
|
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"
|
||||||
|
}
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue