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

feat(dashboard): improve electricity card styles fot default theme

Browse source
This commit is contained in:
KostyaDanovsky 2017-08-04 15:11:32 +03:00
parent 325dc2a9d7
commit 7bccda807a
10 changed files with 228 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/app/@theme/styles/theme.cosmic.ts
View file

@ -31,10 +31,23 @@ export const COSMIC_THEME = {
electricity: {
tooltipBg: 'rgba(0, 255, 170, 0.35)',
axisColor: '#a1a1e5',
tooltipLineColor: 'rgba(255, 255, 255, 0.1)',
tooltipLineWidth: '1',
tooltipBorderColor: '#00d977',
tooltipExtraCss: 'box-shadow: 0px 2px 46px 0 rgba(0, 255, 170, 0.35);border-radius: 10px;padding: 8px 24px;',
tooltipTextColor: '#ffffff',
xAxisColor: 'rgba(161, 161 ,229, 0.3)',
xAxisTextColor: '#a1a1e5',
yAxisSplitLine: 'rgba(161, 161 ,229, 0.2)',
itemBorderColor: '#ffffff',
lineStyle: 'dotted',
lineWidth: '6',
lineGradFrom: '#00ffaa',
lineGradTo: '#fff835',
lineShadow: 'rgba(14, 16, 48, 0.4)',
areaGradFrom: 'rgba(188, 92, 255, 0.5)',
areaGradTo: 'rgba(188, 92, 255, 0)',
shadowLineDarkBg: '#a695ff',

31
src/app/@theme/styles/theme.default.ts
View file

@ -3,7 +3,7 @@ export const DEFAULT_THEME = {
base: null,
variables: {
temperature: ['#7bff24', '#31ffad', '#2ec7fe', '#fff024', '#f7bd59'],
temperature: ['#42db7d'],
solar: {
color: '#19977E',
@ -24,14 +24,27 @@ export const DEFAULT_THEME = {
},
electricity: {
tooltipBg: 'rgba(0, 255, 170, 0.35)',
axisColor: '#a1a1e5',
lineGradFrom: '#00ffaa',
lineGradTo: '#fff835',
lineShadow: 'rgba(14, 16, 48, 0.4)',
areaGradFrom: 'rgba(188, 92, 255, 0.5)',
areaGradTo: 'rgba(188, 92, 255, 0)',
shadowLineDarkBg: '#a695ff',
tooltipBg: '#ffffff',
tooltipLineColor: 'rgba(0, 0, 0, 0)',
tooltipLineWidth: '0',
tooltipBorderColor: '#ebeef2',
tooltipExtraCss: 'border-radius: 10px;padding: 8px 24px;',
tooltipTextColor: '#222222',
xAxisColor: 'rgba(0, 0, 0, 0)',
xAxisTextColor: '#222222',
yAxisSplitLine: '#ebeef2',
itemBorderColor: '#42db7d',
lineStyle: 'solid',
lineWidth: '4',
lineGradFrom: '#42db7d',
lineGradTo: '#42db7d',
lineShadow: 'rgba(0, 0, 0, 0)',
areaGradFrom: '#ebeef2',
areaGradTo: '#ebeef2',
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
},
bubbleMap: {

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

@ -68,7 +68,6 @@ const NB_THEME_PROVIDERS = [
[DEFAULT_THEME, COSMIC_THEME],
).providers,
...NbSidebarModule.forRoot().providers,
...NbSidebarModule.forRoot().providers,
...NbMenuModule.forRoot().providers,
];

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

@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core';
import { AfterViewInit, Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
declare const echarts: any;
@ -10,9 +10,11 @@ declare const echarts: any;
<div echarts [options]="option" class="echart"></div>
`,
})
export class ElectricityChartComponent {
export class ElectricityChartComponent implements AfterViewInit {
option: any;
data: Array<any>;
constructor(private theme: NbThemeService) {
@ -21,147 +23,164 @@ export class ElectricityChartComponent {
145, 200, 570, 635, 660, 670, 670, 660, 630, 580, 460, 380, 350, 340,
340, 340, 340, 340, 340, 340, 340, 340];
const data = points.map((p, index) => ({
label: (index % 5 === 3) ? `${Math.round(index / 5)}` : '',
// const points = [];
// let pointsCount = 100;
// let min = -3;
// let max = 3;
// let xStep = (max - min) / pointsCount;
//
// for(let x = -3; x <= 3; x += xStep) {
// let res = x**3 - 5*x + 17;
// points.push(Math.round(res * 25));
// }
this.data = points.map((p, index) => ({
label: (index % 3 === 2) ? `${Math.round(index / 3)}` : '',
value: p,
}));
}
this.theme.getJsTheme().subscribe(config => {
ngAfterViewInit(): void {
this.theme.getJsTheme().delay(1).subscribe(config => {
const eTheme: any = config.variables.electricity;
this.option = {
grid: {
left: 0,
top: 0,
right: 0,
bottom: 80,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: 'rgba(255, 255, 255, 0.1)',
grid: {
left: 0,
top: 0,
right: 0,
bottom: 80,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
lineStyle: {
color: eTheme.tooltipLineColor,
width: eTheme.tooltipLineWidth,
},
},
},
position: 'top',
backgroundColor: eTheme.tooltipBg,
borderColor: config.variables.colorSuccess,
borderWidth: 3,
formatter: '{c0} kWh',
extraCssText: `box-shadow: 0px 2px 46px 0 ${eTheme.tooltipBg};border-radius: 10px;padding: 5px 20px;`,
},
xAxis: {
type: 'category',
boundaryGap: false,
offset: 25,
data: data.map(i => i.label),
axisTick: {
show: false,
},
axisLabel: {
textStyle: {
color: eTheme.axisColor,
fontSize: 18,
color: eTheme.tooltipTextColor,
fontSize: 20,
},
position: 'top',
backgroundColor: eTheme.tooltipBg,
borderColor: eTheme.tooltipBorderColor,
borderWidth: 3,
formatter: '{c0} kWh',
extraCssText: eTheme.tooltipExtraCss,
},
axisLine: {
lineStyle: {
color: eTheme.axisColor,
opacity: 0.3,
width: '2',
xAxis: {
type: 'category',
boundaryGap: false,
offset: 25,
data: this.data.map(i => i.label),
axisTick: {
show: false,
},
},
},
yAxis: {
boundaryGap: [0, '5%'],
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: eTheme.axisColor,
opacity: 0.2,
width: '1',
},
},
},
series: [
{
type: 'line',
smooth: true,
symbolSize: 20,
itemStyle: {
normal: {
opacity: 0,
},
emphasis: {
color: 'white',
borderWidth: 0,
opacity: 1,
axisLabel: {
textStyle: {
color: eTheme.xAxisTextColor,
fontSize: 18,
},
},
lineStyle: {
normal: {
width: 6,
type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: eTheme.lineGradFrom,
}, {
offset: 1,
color: eTheme.lineGradTo,
}]),
shadowColor: eTheme.lineShadow,
shadowBlur: 6,
shadowOffsetY: 12,
axisLine: {
lineStyle: {
color: eTheme.xAxisColor,
width: '2',
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: eTheme.areaGradFrom,
}, {
offset: 1,
color: eTheme.areaGradTo,
}]),
},
},
data: data.map(i => i.value),
},
yAxis: {
boundaryGap: [0, '5%'],
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: eTheme.yAxisSplitLine,
width: '1',
},
},
},
series: [
{
type: 'line',
smooth: true,
symbolSize: 20,
itemStyle: {
normal: {
opacity: 0,
},
emphasis: {
color: '#ffffff',
borderColor: eTheme.itemBorderColor,
borderWidth: 2,
opacity: 1,
},
},
lineStyle: {
normal: {
width: eTheme.lineWidth,
type: eTheme.lineStyle,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: eTheme.lineGradFrom,
}, {
offset: 1,
color: eTheme.lineGradTo,
}]),
shadowColor: eTheme.lineShadow,
shadowBlur: 6,
shadowOffsetY: 12,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: eTheme.areaGradFrom,
}, {
offset: 1,
color: eTheme.areaGradTo,
}]),
},
},
data: this.data.map(i => i.value),
},
{
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
normal: {
width: 6,
type: 'dotted',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: eTheme.lineGradFrom,
}, {
offset: 1,
color: eTheme.lineGradTo,
}]),
shadowColor: eTheme.shadowLineDarkBg,
shadowBlur: 14,
{
type: 'line',
smooth: true,
symbol: 'none',
lineStyle: {
normal: {
width: eTheme.lineWidth,
type: eTheme.lineStyle,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: eTheme.lineGradFrom,
}, {
offset: 1,
color: eTheme.lineGradTo,
}]),
shadowColor: eTheme.shadowLineDarkBg,
shadowBlur: 14,
opacity: 1,
},
},
data: this.data.map(i => i.value),
},
data: data.map(i => i.value),
},
],
};
],
};
});
}
}

2
src/app/pages/dashboard/electricity/electricity.component.html
View file

@ -41,7 +41,7 @@
</div>
</div>
<div ngbDropdown>
<div ngbDropdown [ngClass]="{'ghost-dropdown': currentTheme == 'default'}">
<button type="button" class="btn btn-primary" ngbDropdownToggle>
{{ type }}
</button>

27
src/app/pages/dashboard/electricity/electricity.component.scss
View file

@ -47,8 +47,20 @@
}
ul li.active {
background-color: nb-theme(color-primary);
border-radius: nb-theme(radius);
position: relative;
background-color: nb-theme(layout-bg);
border-radius: nb-theme(radius) nb-theme(radius) 0 0;
&::before {
position: absolute;
content: '';
width: 100%;
height: 0.25rem;
border-radius: 0.125rem;
bottom: 0;
left: 0;
background: nb-theme(color-success);
}
a {
font-size: 1.5rem;
@ -64,6 +76,17 @@
}
}
@include nb-for-theme(cosmic) {
nb-tabset /deep/ ul li.active {
background-color: nb-theme(color-primary);
border-radius: nb-theme(radius);
&::before {
display: none;
}
}
}
.stats-month {
display: flex;
align-items: center;

12
src/app/pages/dashboard/electricity/electricity.component.ts
View file

@ -1,4 +1,6 @@
import { Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
import { ElectricityService } from '../../../@core/data/electricity.service';
@Component({
@ -13,7 +15,13 @@ export class ElectricityComponent {
type: string = 'week';
types = ['week', 'month', 'year'];
constructor(private electricityService: ElectricityService) {
this.data = electricityService.getData();
currentTheme: string;
constructor(private eService: ElectricityService, private themeService: NbThemeService) {
this.data = eService.getData();
this.themeService.getJsTheme().subscribe(theme => {
this.currentTheme = theme.name;
});
}
}

2
src/app/pages/dashboard/status-card/status-card.component.scss
View file

@ -9,7 +9,7 @@
overflow: visible;
$bevel: btn-hero-bevel(nb-theme(card-bg));
$shadow: btn-hero-shadow();
$shadow: nb-theme(btn-hero-shadow);
box-shadow: $bevel, $shadow;
transition: all 0.1s ease-out;

7
src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
View file

@ -18,7 +18,6 @@
height: 88%;
top: 13%;
left: 6%;
background-color: lighten(nb-theme(layout-bg), 2%);
border-radius: 50%;
z-index: 1;
@ -26,6 +25,12 @@
flex-direction: column;
align-items: center;
justify-content: center;
border: 2px solid nb-theme(separator);
@include nb-for-theme(cosmic) {
background-color: lighten(nb-theme(layout-bg), 2%);
border: none;
}
}
.power-bg {

9
src/app/pages/dashboard/traffic/traffic-chart.component.ts
View file

@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { AfterViewInit, Component } from '@angular/core';
import { NbThemeService } from '@nebular/theme';
declare const echarts: any;
@ -12,14 +12,17 @@ const points = [300, 520, 435, 530, 730, 620, 660, 860];
<div echarts [options]="option" class="echart"></div>
`,
})
export class TrafficChartComponent {
export class TrafficChartComponent implements AfterViewInit {
type: string = 'month';
types = ['week', 'month', 'year'];
option: any = {};
constructor(private theme: NbThemeService) {
this.theme.getJsTheme().subscribe(config => {
}
ngAfterViewInit() {
this.theme.getJsTheme().delay(1).subscribe(config => {
const trafficTheme: any = config.variables.traffic;