diff --git a/src/app/@theme/styles/theme.cosmic.ts b/src/app/@theme/styles/theme.cosmic.ts index f072a245..5497f043 100644 --- a/src/app/@theme/styles/theme.cosmic.ts +++ b/src/app/@theme/styles/theme.cosmic.ts @@ -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', diff --git a/src/app/@theme/styles/theme.default.ts b/src/app/@theme/styles/theme.default.ts index a6eee6ea..5f92e2f9 100644 --- a/src/app/@theme/styles/theme.default.ts +++ b/src/app/@theme/styles/theme.default.ts @@ -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: { diff --git a/src/app/@theme/theme.module.ts b/src/app/@theme/theme.module.ts index 73d6242f..cbb52845 100644 --- a/src/app/@theme/theme.module.ts +++ b/src/app/@theme/theme.module.ts @@ -68,7 +68,6 @@ const NB_THEME_PROVIDERS = [ [DEFAULT_THEME, COSMIC_THEME], ).providers, ...NbSidebarModule.forRoot().providers, - ...NbSidebarModule.forRoot().providers, ...NbMenuModule.forRoot().providers, ]; diff --git a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts index 8474afc1..b6c54494 100644 --- a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts +++ b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts @@ -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;
`, }) -export class ElectricityChartComponent { +export class ElectricityChartComponent implements AfterViewInit { + option: any; + data: Array; 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), - }, - ], - }; + ], + }; }); } } diff --git a/src/app/pages/dashboard/electricity/electricity.component.html b/src/app/pages/dashboard/electricity/electricity.component.html index 5898eb83..6096b706 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.html +++ b/src/app/pages/dashboard/electricity/electricity.component.html @@ -41,7 +41,7 @@ -
+
diff --git a/src/app/pages/dashboard/electricity/electricity.component.scss b/src/app/pages/dashboard/electricity/electricity.component.scss index 8f956a90..bf9d449e 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.scss +++ b/src/app/pages/dashboard/electricity/electricity.component.scss @@ -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; diff --git a/src/app/pages/dashboard/electricity/electricity.component.ts b/src/app/pages/dashboard/electricity/electricity.component.ts index c4640d64..a28f4462 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.ts +++ b/src/app/pages/dashboard/electricity/electricity.component.ts @@ -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; + }); } } diff --git a/src/app/pages/dashboard/status-card/status-card.component.scss b/src/app/pages/dashboard/status-card/status-card.component.scss index 25697104..798d324a 100644 --- a/src/app/pages/dashboard/status-card/status-card.component.scss +++ b/src/app/pages/dashboard/status-card/status-card.component.scss @@ -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; diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss index ed17c6e8..39906ee1 100644 --- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss +++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss @@ -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 { diff --git a/src/app/pages/dashboard/traffic/traffic-chart.component.ts b/src/app/pages/dashboard/traffic/traffic-chart.component.ts index 69706fce..dc7b98de 100644 --- a/src/app/pages/dashboard/traffic/traffic-chart.component.ts +++ b/src/app/pages/dashboard/traffic/traffic-chart.component.ts @@ -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];
`, }) -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;