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

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 {
NgaThemeModule,
NgaActionsModule,
NgaCardModule,
NgaLayoutModule,
NgaTabsetModule,
NgaRouteTabsetModule,
NgaSidebarModule,
NgaMenuModule,
NgaUserModule,
NgaActionsModule,
NgaRouteTabsetModule,
NgaSearchModule,
NgaSidebarModule,
NgaTabsetModule,
NgaThemeModule,
NgaUserModule,
} from '@akveo/nga-theme';
import {
HeaderComponent,
FooterComponent,
SearchInputComponent,
TinyMCEComponent,
} from './components';
import { FooterComponent, HeaderComponent, SearchInputComponent, TinyMCEComponent } from './components';
import {
CapitalizePipe,
PluralPipe,
RoundPipe,
} from './pipes';
import { CapitalizePipe, PluralPipe, RoundPipe } from './pipes';
import { OneColumnLayoutComponent } from './layouts';
@ -64,7 +55,70 @@ const PIPES = [
];
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,
...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 { NgaThemeService } from '@akveo/nga-theme';
declare const echarts: any;
@Component({
selector: 'ngx-electricity-chart',
styleUrls: ['./electricity-chart.component.scss'],
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,
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,
@ -22,7 +26,8 @@ export class ElectricityChartComponent implements OnInit {
value: p,
}));
this.options = {
this.theme.getJsTheme().subscribe(config => {
this.option = {
grid: {
left: 0,
top: 0,
@ -38,11 +43,11 @@ export class ElectricityChartComponent implements OnInit {
},
},
position: 'top',
backgroundColor: 'rgba(0, 255, 170, 0.35)',
borderColor: '#00f9a6',
backgroundColor: config.trafficTooltipBg,
borderColor: config.colorSuccess,
borderWidth: 3,
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: {
type: 'category',
@ -54,13 +59,13 @@ export class ElectricityChartComponent implements OnInit {
},
axisLabel: {
textStyle: {
color: '#a1a1e5',
color: config.electricityAxisColor,
fontSize: 18,
},
},
axisLine: {
lineStyle: {
color: '#a1a1e5',
color: config.electricityAxisColor,
opacity: 0.3,
width: '2',
},
@ -80,7 +85,7 @@ export class ElectricityChartComponent implements OnInit {
splitLine: {
show: true,
lineStyle: {
color: '#a1a1e5',
color: config.electricityAxisColor,
opacity: 0.2,
width: '1',
},
@ -107,12 +112,12 @@ export class ElectricityChartComponent implements OnInit {
type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00ffaa',
color: config.electricityLineGradFrom,
}, {
offset: 1,
color: '#fff835 ',
color: config.electricityLineGradTo,
}]),
shadowColor: 'rgba(14, 16, 48, 0.4)',
shadowColor: config.electricityLineShadow,
shadowBlur: 6,
shadowOffsetY: 12,
},
@ -121,10 +126,10 @@ export class ElectricityChartComponent implements OnInit {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(188, 92, 255, 0.5)',
color: config.electricityAreaGradFrom,
}, {
offset: 1,
color: 'rgba(188, 92, 255, 0)',
color: config.electricityAreaGradTo,
}]),
},
},
@ -141,12 +146,12 @@ export class ElectricityChartComponent implements OnInit {
type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#00ffaa',
color: config.electricityLineGradFrom,
}, {
offset: 1,
color: '#fff835 ',
color: config.electricityLineGradTo,
}]),
shadowColor: 'rgb(166, 149, 255)',
shadowColor: config.trafficShadowLineDarkBg,
shadowBlur: 14,
},
},
@ -154,5 +159,6 @@ export class ElectricityChartComponent implements OnInit {
},
],
};
});
}
}

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

@ -18,6 +18,8 @@ declare const echarts: any;
})
export class SolarComponent {
option: any = {};
@Input('chartValue')
set chartValue(value: number) {
this.option.series[0].data[0].value = value;
@ -25,7 +27,10 @@ export class SolarComponent {
this.option.series[1].data[0].value = value;
}
option: any = {
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.option = Object.assign({}, {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
@ -48,7 +53,8 @@ export class SolarComponent {
formatter: '{d}%',
textStyle: {
fontSize: '22',
fontFamily: 'Exo',
fontFamily: config.fontSecondary,
color: config.colorFgHeading,
},
},
},
@ -57,14 +63,17 @@ export class SolarComponent {
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#7bff24',
}, {
color: config.tempColorGreen,
},
{
offset: 1,
color: '#2ec7fe',
}]),
shadowColor: '#19977E',
color: config.tempColorBlue,
},
]),
shadowColor: config.solarColorDarkGreen,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 3,
@ -85,7 +94,7 @@ export class SolarComponent {
},
itemStyle: {
normal: {
color: 'none',
color: config.layoutBg,
},
},
},
@ -113,13 +122,16 @@ export class SolarComponent {
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#7bff24',
}, {
color: config.tempColorGreen,
},
{
offset: 1,
color: '#2ec7fe',
}]),
color: config.tempColorBlue,
},
]),
shadowColor: 'rgba(0, 217, 119, 0.3)',
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">
<ngx-temperature-dragger [(value)]="temperature" (power)="temperatureOff = !$event"
[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="value temperature">
@ -41,7 +46,12 @@
<div class="slider-container">
<ngx-temperature-dragger [(value)]="humidity" (power)="humidityOff = !$event"
[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="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 {
option = {
option: any = {};
constructor(private theme: NgaThemeService) {
this.theme.getJsTheme().subscribe(config => {
this.option = Object.assign({}, {
grid: {
left: 0,
top: 0,
@ -46,7 +51,7 @@ export class TrafficComponent {
splitLine: {
show: true,
lineStyle: {
color: '#000000',
color: config.trafficColorBlack,
opacity: 0.06,
width: '1',
},
@ -57,11 +62,11 @@ export class TrafficComponent {
type: 'shadow',
},
position: 'top',
backgroundColor: 'rgba(0, 255, 170, 0.35)',
borderColor: '#00f9a6',
backgroundColor: config.trafficTooltipBg,
borderColor: config.colorSuccess,
borderWidth: 3,
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: [
{
@ -72,7 +77,7 @@ export class TrafficComponent {
silent: true,
itemStyle: {
normal: {
color: 'rgba(146, 141, 255, 0.5)',
color: config.trafficLineBg,
},
emphasis: {
color: 'rgba(0,0,0,0)',
@ -83,7 +88,7 @@ export class TrafficComponent {
lineStyle: {
normal: {
width: 2,
color: 'rgba(146, 141, 255, 0.5)',
color: config.trafficLineBg,
},
},
data: data.map(i => i.value - 15),
@ -95,10 +100,10 @@ export class TrafficComponent {
sampling: 'average',
itemStyle: {
normal: {
color: '#bdbaff',
color: config.trafficShadowLineBg,
borderColor: 'white',
borderWidth: 2,
shadowColor: 'rgba(33, 7, 77, 0.5)',
shadowColor: config.trafficShadowLineShadow,
shadowOffsetX: 0,
shadowOffsetY: -3,
shadowBlur: 10,
@ -112,8 +117,8 @@ export class TrafficComponent {
lineStyle: {
normal: {
width: 2,
color: '#bdbaff',
shadowColor: 'rgb(166, 149, 255)',
color: config.trafficLineBg,
shadowColor: config.trafficShadowLineDarkBg,
shadowBlur: 14,
},
},
@ -121,28 +126,17 @@ export class TrafficComponent {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(118, 89, 255, 0.4)',
color: config.trafficGradFrom,
}, {
offset: 1,
color: 'rgba(164, 84, 255, 0.5)',
color: config.trafficGradTo,
}]),
},
},
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;
});
});
}
}