diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index 600c1866..49409782 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -57,12 +57,7 @@
- - Traffic Consumption - - - - +
diff --git a/src/app/pages/dashboard/dashboard.component.scss b/src/app/pages/dashboard/dashboard.component.scss index 930e7dd7..df6a1e19 100644 --- a/src/app/pages/dashboard/dashboard.component.scss +++ b/src/app/pages/dashboard/dashboard.component.scss @@ -5,14 +5,4 @@ border: none; padding-bottom: 0; } - - .traffic-card { - nga-card-header { - border: none; - } - - nga-card-body { - overflow: hidden; - } - } } diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts index b8df874c..53b77f50 100644 --- a/src/app/pages/dashboard/dashboard.module.ts +++ b/src/app/pages/dashboard/dashboard.module.ts @@ -18,6 +18,7 @@ import { WeatherComponent } from './weather/weather.component'; import { SolarComponent } from './solar/solar.component'; import { PlayerComponent } from './player/player.component'; import { TrafficComponent } from './traffic/traffic.component'; +import { TrafficChartComponent } from './traffic/traffic-chart.component'; @NgModule({ imports: [ @@ -42,6 +43,7 @@ import { TrafficComponent } from './traffic/traffic.component'; PlayerComponent, SolarComponent, TrafficComponent, + TrafficChartComponent, ], }) export class DashboardModule { } diff --git a/src/app/pages/dashboard/electricity/electricity.component.html b/src/app/pages/dashboard/electricity/electricity.component.html index 84bd53ff..350d3c62 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.html +++ b/src/app/pages/dashboard/electricity/electricity.component.html @@ -41,15 +41,14 @@ - + diff --git a/src/app/pages/dashboard/electricity/electricity.component.scss b/src/app/pages/dashboard/electricity/electricity.component.scss index 35ae115c..c34d5d92 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.scss +++ b/src/app/pages/dashboard/electricity/electricity.component.scss @@ -1,6 +1,5 @@ @import '../../../@theme/styles/variables'; @import '~@akveo/nga-theme/components/card/card.component.theme'; -@import '~@akveo/nga-theme/styles/global/overrides'; @include nga-install-component() { @@ -171,4 +170,8 @@ font-weight: nga-theme(font-weight-light); } } + + .dropdown { + min-width: 130px; + } } diff --git a/src/app/pages/dashboard/electricity/electricity.component.ts b/src/app/pages/dashboard/electricity/electricity.component.ts index 6c3b26de..c4640d64 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.ts +++ b/src/app/pages/dashboard/electricity/electricity.component.ts @@ -10,6 +10,9 @@ export class ElectricityComponent { data: Array; + type: string = 'week'; + types = ['week', 'month', 'year']; + constructor(private electricityService: ElectricityService) { this.data = electricityService.getData(); } diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss index 03e6b1f3..0ec3e68a 100644 --- a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss +++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss @@ -21,7 +21,6 @@ .cameras-card-title { flex: 1; padding: 1.25rem; - line-height: 1.25rem; } } @@ -30,7 +29,6 @@ a { font-size: 2rem; - line-height: 2rem; padding: 0.75rem 1.5rem; display: flex; flex-direction: column; @@ -73,8 +71,7 @@ color: white; background: rgba(88, 73, 184, 0.5); font-size: 1rem; - line-height: 2.5rem; - padding-left: 1rem; + padding: 0.5rem 1rem; } } diff --git a/src/app/pages/dashboard/traffic/traffic-chart.component.ts b/src/app/pages/dashboard/traffic/traffic-chart.component.ts new file mode 100644 index 00000000..272d81f0 --- /dev/null +++ b/src/app/pages/dashboard/traffic/traffic-chart.component.ts @@ -0,0 +1,138 @@ +import { Component } from '@angular/core'; +import { NgaThemeService } from '@akveo/nga-theme'; + +declare const echarts: any; + +const points = [300, 520, 435, 530, 730, 620, 660, 860]; + +@Component({ + selector: 'ngx-traffic-chart', + styleUrls: ['./traffic.component.scss'], + template: ` +
+ `, +}) +export class TrafficChartComponent { + + type: string = 'month'; + types = ['week', 'month', 'year']; + option: any = {}; + + constructor(private theme: NgaThemeService) { + this.theme.getJsTheme().subscribe(config => { + + this.option = Object.assign({}, { + grid: { + left: 0, + top: 0, + right: 0, + bottom: 0, + }, + xAxis: { + type: 'category', + boundaryGap: false, + data: points, + }, + yAxis: { + boundaryGap: [0, '5%'], + axisLine: { + show: false, + }, + axisLabel: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + color: config.trafficColorBlack, + opacity: 0.06, + width: '1', + }, + }, + }, + tooltip: { + axisPointer: { + type: 'shadow', + }, + position: 'top', + backgroundColor: config.trafficTooltipBg, + borderColor: config.colorSuccess, + borderWidth: 3, + formatter: '{c0} MB', + extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`, + }, + series: [ + { + type: 'line', + symbol: 'circle', + symbolSize: 8, + sampling: 'average', + silent: true, + itemStyle: { + normal: { + color: config.trafficLineBg, + }, + emphasis: { + color: 'rgba(0,0,0,0)', + borderColor: 'rgba(0,0,0,0)', + borderWidth: 0, + }, + }, + lineStyle: { + normal: { + width: 2, + color: config.trafficLineBg, + }, + }, + data: points.map(p => p - 15), + }, + { + type: 'line', + symbol: 'circle', + symbolSize: 6, + sampling: 'average', + itemStyle: { + normal: { + color: config.trafficShadowLineBg, + borderColor: 'white', + borderWidth: 2, + shadowColor: config.trafficShadowLineShadow, + shadowOffsetX: 0, + shadowOffsetY: -3, + shadowBlur: 10, + }, + emphasis: { + color: 'white', + borderColor: 'rgba(0,0,0,0)', + borderWidth: 5, + }, + }, + lineStyle: { + normal: { + width: 2, + color: config.trafficLineBg, + shadowColor: config.trafficShadowLineDarkBg, + shadowBlur: 14, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: config.trafficGradFrom, + }, { + offset: 1, + color: config.trafficGradTo, + }]), + }, + }, + data: points, + }, + ], + }); + }); + } +} diff --git a/src/app/pages/dashboard/traffic/traffic.component.scss b/src/app/pages/dashboard/traffic/traffic.component.scss index f0747d64..92ffb415 100644 --- a/src/app/pages/dashboard/traffic/traffic.component.scss +++ b/src/app/pages/dashboard/traffic/traffic.component.scss @@ -2,9 +2,16 @@ @include nga-install-component() { - ngx-echarts-pie, ngx-echarts-bar, ngx-echarts-line { - display: block; - height: 100%; + nga-card-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.675rem 0.5rem 0.5rem 1.25rem; + border: none; + } + + nga-card-body { + overflow: hidden; } /deep/ canvas { @@ -16,4 +23,8 @@ height: 100%; width: 100%; } + + .dropdown { + min-width: 120px; + } } diff --git a/src/app/pages/dashboard/traffic/traffic.component.ts b/src/app/pages/dashboard/traffic/traffic.component.ts index fb9246a1..9ca56b1d 100644 --- a/src/app/pages/dashboard/traffic/traffic.component.ts +++ b/src/app/pages/dashboard/traffic/traffic.component.ts @@ -1,142 +1,28 @@ -import { Component, Input } from '@angular/core'; -import { NgaThemeService } from '@akveo/nga-theme'; - -declare const echarts: any; - -const points = [300, 520, 435, 530, 730, 620, 660, 860]; - -const data = points.map((p, index) => ({ - label: (index % 3 === 1) ? '${index}' : '', - value: p, -})); +import { Component } from '@angular/core'; @Component({ selector: 'ngx-traffic', styleUrls: ['./traffic.component.scss'], template: ` -
-
+ + + Traffic Consumption +
+ +
    +
  • {{ t }}
    • +
+
+ + + + + `, }) export class TrafficComponent { - - option: any = {}; - - constructor(private theme: NgaThemeService) { - this.theme.getJsTheme().subscribe(config => { - - this.option = Object.assign({}, { - grid: { - left: 0, - top: 0, - right: 0, - bottom: 0, - }, - xAxis: { - type: 'category', - boundaryGap: false, - data: data.map(i => i.label), - }, - yAxis: { - boundaryGap: [0, '5%'], - axisLine: { - show: false, - }, - axisLabel: { - show: false, - }, - axisTick: { - show: false, - }, - splitLine: { - show: true, - lineStyle: { - color: config.trafficColorBlack, - opacity: 0.06, - width: '1', - }, - }, - }, - tooltip: { - axisPointer: { - type: 'shadow', - }, - position: 'top', - backgroundColor: config.trafficTooltipBg, - borderColor: config.colorSuccess, - borderWidth: 3, - formatter: '{c0} MB', - extraCssText: `box-shadow: 0px 2px 46px 0 ${config.trafficTooltipBg};border-radius: 10px;padding: 5px 20px;`, - }, - series: [ - { - type: 'line', - symbol: 'circle', - symbolSize: 8, - sampling: 'average', - silent: true, - itemStyle: { - normal: { - color: config.trafficLineBg, - }, - emphasis: { - color: 'rgba(0,0,0,0)', - borderColor: 'rgba(0,0,0,0)', - borderWidth: 0, - }, - }, - lineStyle: { - normal: { - width: 2, - color: config.trafficLineBg, - }, - }, - data: data.map(i => i.value - 15), - }, - { - type: 'line', - symbol: 'circle', - symbolSize: 6, - sampling: 'average', - itemStyle: { - normal: { - color: config.trafficShadowLineBg, - borderColor: 'white', - borderWidth: 2, - shadowColor: config.trafficShadowLineShadow, - shadowOffsetX: 0, - shadowOffsetY: -3, - shadowBlur: 10, - }, - emphasis: { - color: 'white', - borderColor: 'rgba(0,0,0,0)', - borderWidth: 5, - }, - }, - lineStyle: { - normal: { - width: 2, - color: config.trafficLineBg, - shadowColor: config.trafficShadowLineDarkBg, - shadowBlur: 14, - }, - }, - areaStyle: { - normal: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ - offset: 0, - color: config.trafficGradFrom, - }, { - offset: 1, - color: config.trafficGradTo, - }]), - }, - }, - data: data.map(i => i.value), - }, - ], - }); - }); - } + type: string = 'month'; + types = ['week', 'month', 'year']; } diff --git a/src/app/pages/dashboard/weather/weather.component.scss b/src/app/pages/dashboard/weather/weather.component.scss index 12f0ac2f..911a013b 100644 --- a/src/app/pages/dashboard/weather/weather.component.scss +++ b/src/app/pages/dashboard/weather/weather.component.scss @@ -2,10 +2,13 @@ @include nga-install-component() { + nga-card { + background-image: nga-theme(radial-gradient); + } + nga-card-body { height: 100%; padding: 2rem; - background-image: nga-theme(radial-gradient); color: nga-theme(color-fg); }