Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 23:40:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

load theme for amcharts through the amchart component

Browse source
This commit is contained in:
nixa 2016-05-06 16:10:51 +03:00
parent 9ea34a99ca
commit f7c60365f3
3 changed files with 219 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/pages/dashboard/lineChart/lineChart.service.ts
View file

@ -10,7 +10,7 @@ export class LineChartService {
marginTop: 15,
marginRight: 15,
responsive: {
"enabled": true
'enabled': true
},
dataProvider: [
{ date: new Date(2012, 11), value: 0, value0: 0 },

10
src/app/theme/components/baAmChart/baAmChart.component.ts
View file

@ -2,12 +2,14 @@ import {Component, ViewEncapsulation, Input, Output, ElementRef, EventEmitter} f
import './baAmChart.loader.ts';
import {DOM} from "angular2/src/platform/dom/dom_adapter";
import {BaAmChartThemeService} from './baAmChartTheme.service';
@Component({
selector: 'ba-am-chart',
styles: [require('./baAmChart.scss')],
template: require('./baAmChart.html'),
encapsulation: ViewEncapsulation.None
encapsulation: ViewEncapsulation.None,
providers: [BaAmChartThemeService],
})
export class BaAmChart {
@ -15,7 +17,11 @@ export class BaAmChart {
@Input() baAmChartClass:string;
@Output() onChartReady = new EventEmitter<any>();
constructor (private _elementRef:ElementRef) {
constructor (private _elementRef:ElementRef, private _baAmChartThemeService:BaAmChartThemeService) {
}
ngOnInit() {
AmCharts.themes.blur = this._baAmChartThemeService.getTheme();
}
ngAfterViewInit() {

210
src/app/theme/components/baAmChart/baAmChartTheme.service.ts Normal file
View file

@ -0,0 +1,210 @@
import {Injectable} from 'angular2/core';
import {layoutColors} from '../../../theme/theme.constants';
@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"
}
};
getTheme() {
return this.theme;
}
}