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

refactor(charts): register custom js-themes for charts

Browse source
This commit is contained in:
Dmitry Nehaychik 2017-07-20 16:38:37 +03:00
parent be69ccc058
commit 33da370ab5
5 changed files with 464 additions and 399 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/app/@theme/theme.module.ts
View file

@ -3,31 +3,22 @@ import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { import {
NgaThemeModule, NgaActionsModule,
NgaCardModule, NgaCardModule,
NgaLayoutModule, NgaLayoutModule,
NgaTabsetModule,
NgaRouteTabsetModule,
NgaSidebarModule,
NgaMenuModule, NgaMenuModule,
NgaUserModule, NgaRouteTabsetModule,
NgaActionsModule,
NgaSearchModule, NgaSearchModule,
NgaSidebarModule,
NgaTabsetModule,
NgaThemeModule,
NgaUserModule,
} from '@akveo/nga-theme'; } from '@akveo/nga-theme';
import { import { FooterComponent, HeaderComponent, SearchInputComponent, TinyMCEComponent } from './components';
HeaderComponent,
FooterComponent,
SearchInputComponent,
TinyMCEComponent,
} from './components';
import { import { CapitalizePipe, PluralPipe, RoundPipe } from './pipes';
CapitalizePipe,
PluralPipe,
RoundPipe,
} from './pipes';
import { OneColumnLayoutComponent } from './layouts'; import { OneColumnLayoutComponent } from './layouts';
@ -64,7 +55,70 @@ const PIPES = [
]; ];
const NGA_THEME_PROVIDERS = [ const NGA_THEME_PROVIDERS = [
...NgaThemeModule.forRoot({ name: 'cosmic' }).providers, ...NgaThemeModule.forRoot({
name: 'cosmic',
},
[
{
name: 'default',
base: 'default',
variables: {
tempColorGreen: '#7bff24',
tempColorLightBlue: '#7bff24',
tempColorBlue: '#7bff24',
tempColorYellow: '#7bff24',
tempColorOrange: '#7bff24',
solarColorDarkGreen: '#7bff24',
solarColorShadow: 'rgba(0, 217, 119, 0.3)',
trafficColorBlack: '#7bff24',
trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
trafficLineBg: 'rgba(146, 141, 255, 0.5)',
trafficShadowLineBg: '#7bff24',
trafficShadowLineDarkBg: '#7bff24',
trafficShadowLineShadow: '#7bff24',
trafficGradFrom: '#7bff24',
trafficGradTo: '#7bff24',
electricityAxisColor: '#7bff24',
electricityLineGradFrom: '#7bff24',
electricityLineGradTo: '#7bff24',
electricityLineShadow: '#7bff24',
electricityAreaGradFrom: '#7bff24',
electricityAreaGradTo: '#7bff24',
},
},
{
name: 'cosmic',
base: 'default',
variables: {
tempColorGreen: '#7bff24',
tempColorLightBlue: '#31ffad',
tempColorBlue: '#2ec7fe',
tempColorYellow: '#fff024',
tempColorOrange: '#f7bd59',
solarColorDarkGreen: '#19977E',
solarColorShadow: 'rgba(0, 217, 119, 0.3)',
trafficColorBlack: '#000000',
trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
trafficLineBg: 'rgba(146, 141, 255, 0.5)',
trafficShadowLineBg: '#bdbaff',
trafficShadowLineDarkBg: '#a695ff',
trafficShadowLineShadow: 'rgba(33, 7, 77, 0.5)',
trafficGradFrom: 'rgba(118, 89, 255, 0.4)',
trafficGradTo: 'rgba(164, 84, 255, 0.5)',
electricityAxisColor: '#a1a1e5',
electricityLineGradFrom: '#00ffaa',
electricityLineGradTo: '#fff835',
electricityLineShadow: 'rgba(14, 16, 48, 0.4)',
electricityAreaGradFrom: 'rgba(188, 92, 255, 0.5)',
electricityAreaGradTo: 'rgba(188, 92, 255, 0)',
},
},
],
).providers,
...NgaSidebarModule.forRoot().providers, ...NgaSidebarModule.forRoot().providers,
...NgaSidebarModule.forRoot().providers, ...NgaSidebarModule.forRoot().providers,
...NgaMenuModule.forRoot().providers, ...NgaMenuModule.forRoot().providers,

44
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts
View file

@ -1,17 +1,21 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
declare const echarts: any;
@Component({ @Component({
selector: 'ngx-electricity-chart', selector: 'ngx-electricity-chart',
styleUrls: ['./electricity-chart.component.scss'], styleUrls: ['./electricity-chart.component.scss'],
template: ` template: `
<div echarts [options]='options' class='echart'></div> <div echarts [options]="option" class="echart"></div>
`, `,
}) })
export class ElectricityChartComponent implements OnInit { export class ElectricityChartComponent {
options: any; option: any;
constructor(private theme: NgaThemeService) {
ngOnInit() {
const points = [490, 490, 495, 500, 505, 510, 520, 530, 550, 580, 630, const points = [490, 490, 495, 500, 505, 510, 520, 530, 550, 580, 630,
720, 800, 840, 860, 870, 870, 860, 840, 800, 720, 200, 145, 130, 130, 720, 800, 840, 860, 870, 870, 860, 840, 800, 720, 200, 145, 130, 130,
145, 200, 570, 635, 660, 670, 670, 660, 630, 580, 460, 380, 350, 340, 145, 200, 570, 635, 660, 670, 670, 660, 630, 580, 460, 380, 350, 340,
@ -22,7 +26,8 @@ export class ElectricityChartComponent implements OnInit {
value: p, value: p,
})); }));
this.options = { this.theme.getJsTheme().subscribe(config => {
this.option = {
grid: { grid: {
left: 0, left: 0,
top: 0, top: 0,
@ -38,11 +43,11 @@ export class ElectricityChartComponent implements OnInit {
}, },
}, },
position: 'top', position: 'top',
backgroundColor: 'rgba(0, 255, 170, 0.35)', backgroundColor: config.trafficTooltipBg,
borderColor: '#00f9a6', borderColor: config.colorSuccess,
borderWidth: 3, borderWidth: 3,
formatter: '{c0} kWh', formatter: '{c0} kWh',
extraCssText: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px;padding: 5px 20px;', extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`,
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
@ -54,13 +59,13 @@ export class ElectricityChartComponent implements OnInit {
}, },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: '#a1a1e5', color: config.electricityAxisColor,
fontSize: 18, fontSize: 18,
}, },
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#a1a1e5', color: config.electricityAxisColor,
opacity: 0.3, opacity: 0.3,
width: '2', width: '2',
}, },
@ -80,7 +85,7 @@ export class ElectricityChartComponent implements OnInit {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#a1a1e5', color: config.electricityAxisColor,
opacity: 0.2, opacity: 0.2,
width: '1', width: '1',
}, },
@ -107,12 +112,12 @@ export class ElectricityChartComponent implements OnInit {
type: 'dotted', type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
color: '#00ffaa', color: config.electricityLineGradFrom,
}, { }, {
offset: 1, offset: 1,
color: '#fff835 ', color: config.electricityLineGradTo,
}]), }]),
shadowColor: 'rgba(14, 16, 48, 0.4)', shadowColor: config.electricityLineShadow,
shadowBlur: 6, shadowBlur: 6,
shadowOffsetY: 12, shadowOffsetY: 12,
}, },
@ -121,10 +126,10 @@ export class ElectricityChartComponent implements OnInit {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
color: 'rgba(188, 92, 255, 0.5)', color: config.electricityAreaGradFrom,
}, { }, {
offset: 1, offset: 1,
color: 'rgba(188, 92, 255, 0)', color: config.electricityAreaGradTo,
}]), }]),
}, },
}, },
@ -141,12 +146,12 @@ export class ElectricityChartComponent implements OnInit {
type: 'dotted', type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
color: '#00ffaa', color: config.electricityLineGradFrom,
}, { }, {
offset: 1, offset: 1,
color: '#fff835 ', color: config.electricityLineGradTo,
}]), }]),
shadowColor: 'rgb(166, 149, 255)', shadowColor: config.trafficShadowLineDarkBg,
shadowBlur: 14, shadowBlur: 14,
}, },
}, },
@ -154,5 +159,6 @@ export class ElectricityChartComponent implements OnInit {
}, },
], ],
}; };
});
} }
} }

55
src/app/pages/dashboard/solar/solar.component.ts
View file

@ -18,14 +18,19 @@ declare const echarts: any;
}) })
export class SolarComponent { export class SolarComponent {
option: any = {};
@Input('chartValue') @Input('chartValue')
set chartValue (value: number) { set chartValue(value: number) {
this.option.series[0].data[0].value = value; this.option.series[0].data[0].value = value;
this.option.series[0].data[1].value = 100 - value; this.option.series[0].data[1].value = 100 - value;
this.option.series[1].data[0].value = value; this.option.series[1].data[0].value = value;
} }
option: any = { constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.option = Object.assign({}, {
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)', formatter: '{a} <br/>{b} : {c} ({d}%)',
@ -48,7 +53,8 @@ export class SolarComponent {
formatter: '{d}%', formatter: '{d}%',
textStyle: { textStyle: {
fontSize: '22', fontSize: '22',
fontFamily: 'Exo', fontFamily: config.fontSecondary,
color: config.colorFgHeading,
}, },
}, },
}, },
@ -57,14 +63,17 @@ export class SolarComponent {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, offset: 0,
color: '#7bff24', color: config.tempColorGreen,
}, { },
{
offset: 1, offset: 1,
color: '#2ec7fe', color: config.tempColorBlue,
}]), },
shadowColor: '#19977E', ]),
shadowColor: config.solarColorDarkGreen,
shadowBlur: 0, shadowBlur: 0,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 3, shadowOffsetY: 3,
@ -85,7 +94,7 @@ export class SolarComponent {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: 'none', color: config.layoutBg,
}, },
}, },
}, },
@ -113,13 +122,16 @@ export class SolarComponent {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0, offset: 0,
color: '#7bff24', color: config.tempColorGreen,
}, { },
{
offset: 1, offset: 1,
color: '#2ec7fe', color: config.tempColorBlue,
}]), },
]),
shadowColor: 'rgba(0, 217, 119, 0.3)', shadowColor: 'rgba(0, 217, 119, 0.3)',
shadowBlur: 7, shadowBlur: 7,
}, },
@ -146,18 +158,7 @@ export class SolarComponent {
], ],
}, },
], ],
}; });
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
const option = Object.assign({}, this.option);
option.series[0].data[1].itemStyle.normal.color = config.layoutBg;
option.series[0].data[0].label.normal.textStyle.color = config.colorFgHeading;
option.series[0].data[0].label.normal.textStyle.fontFamily = config.fontSecondary;
this.option = option;
}); });
} }
} }

14
src/app/pages/dashboard/temperature/temperature.component.html
View file

@ -6,7 +6,12 @@
<div class="slider-container"> <div class="slider-container">
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event" <ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
[min]="12" [max]="30" [disableArcColor]="themeConfig.layoutBg" [min]="12" [max]="30" [disableArcColor]="themeConfig.layoutBg"
[fillColors]="['#2ec7fe', '#31ffad', '#7bff24', '#fff024', '#f7bd59']"> [fillColors]="[
themeConfig.tempColorBlue,
themeConfig.tempColorLightBlue,
themeConfig.tempColorGreen,
themeConfig.tempColorYellow,
themeConfig.tempColorOrange]">
<div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }"> <div class="slider-value-container" [ngClass]="{ 'off': temperatureOff }">
<div class="value temperature"> <div class="value temperature">
@ -41,7 +46,12 @@
<div class="slider-container"> <div class="slider-container">
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event" <ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
[min]="0" [max]="100" [disableArcColor]="themeConfig.layoutBg" [min]="0" [max]="100" [disableArcColor]="themeConfig.layoutBg"
[fillColors]="['#fff024', '#7bff24', '#31ffad', '#2ec7fe']"> [fillColors]="[
themeConfig.tempColorBlue,
themeConfig.tempColorLightBlue,
themeConfig.tempColorGreen,
themeConfig.tempColorYellow,
themeConfig.tempColorOrange]">
<div class="slider-value-container" [ngClass]="{ 'off': humidityOff }"> <div class="slider-value-container" [ngClass]="{ 'off': humidityOff }">
<div class="value humidity"> <div class="value humidity">

44
src/app/pages/dashboard/traffic/traffic.component.ts
View file

@ -20,7 +20,12 @@ const data = points.map((p, index) => ({
}) })
export class TrafficComponent { export class TrafficComponent {
option = { option: any = {};
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.option = Object.assign({}, {
grid: { grid: {
left: 0, left: 0,
top: 0, top: 0,
@ -46,7 +51,7 @@ export class TrafficComponent {
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: '#000000', color: config.trafficColorBlack,
opacity: 0.06, opacity: 0.06,
width: '1', width: '1',
}, },
@ -57,11 +62,11 @@ export class TrafficComponent {
type: 'shadow', type: 'shadow',
}, },
position: 'top', position: 'top',
backgroundColor: 'rgba(0, 255, 170, 0.35)', backgroundColor: config.trafficTooltipBg,
borderColor: '#00f9a6', borderColor: config.colorSuccess,
borderWidth: 3, borderWidth: 3,
formatter: '{c0} MB', formatter: '{c0} MB',
extraCssText: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35); border-radius: 10px;padding: 5px 20px;', extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`,
}, },
series: [ series: [
{ {
@ -72,7 +77,7 @@ export class TrafficComponent {
silent: true, silent: true,
itemStyle: { itemStyle: {
normal: { normal: {
color: 'rgba(146, 141, 255, 0.5)', color: config.trafficLineBg,
}, },
emphasis: { emphasis: {
color: 'rgba(0,0,0,0)', color: 'rgba(0,0,0,0)',
@ -83,7 +88,7 @@ export class TrafficComponent {
lineStyle: { lineStyle: {
normal: { normal: {
width: 2, width: 2,
color: 'rgba(146, 141, 255, 0.5)', color: config.trafficLineBg,
}, },
}, },
data: data.map(i => i.value - 15), data: data.map(i => i.value - 15),
@ -95,10 +100,10 @@ export class TrafficComponent {
sampling: 'average', sampling: 'average',
itemStyle: { itemStyle: {
normal: { normal: {
color: '#bdbaff', color: config.trafficShadowLineBg,
borderColor: 'white', borderColor: 'white',
borderWidth: 2, borderWidth: 2,
shadowColor: 'rgba(33, 7, 77, 0.5)', shadowColor: config.trafficShadowLineShadow,
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: -3, shadowOffsetY: -3,
shadowBlur: 10, shadowBlur: 10,
@ -112,8 +117,8 @@ export class TrafficComponent {
lineStyle: { lineStyle: {
normal: { normal: {
width: 2, width: 2,
color: '#bdbaff', color: config.trafficLineBg,
shadowColor: 'rgb(166, 149, 255)', shadowColor: config.trafficShadowLineDarkBg,
shadowBlur: 14, shadowBlur: 14,
}, },
}, },
@ -121,28 +126,17 @@ export class TrafficComponent {
normal: { normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, offset: 0,
color: 'rgba(118, 89, 255, 0.4)', color: config.trafficGradFrom,
}, { }, {
offset: 1, offset: 1,
color: 'rgba(164, 84, 255, 0.5)', color: config.trafficGradTo,
}]), }]),
}, },
}, },
data: data.map(i => i.value), data: data.map(i => i.value),
}, },
], ],
}; });
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
// const option = Object.assign({}, this.option);
//
// option.series[0].data[1].itemStyle.normal.color = config.layoutBg;
// option.series[0].data[0].label.normal.textStyle.color = config.colorFgHeading;
// option.series[0].data[0].label.normal.textStyle.fontFamily = config.fontSecondary;
//
// this.option = option;
}); });
} }
} }