diff --git a/src/app/@core/data/data.module.ts b/src/app/@core/data/data.module.ts index 0dd85a63..0c6d774d 100644 --- a/src/app/@core/data/data.module.ts +++ b/src/app/@core/data/data.module.ts @@ -2,9 +2,11 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { UserService } from './users.service'; +import { ElectricityService } from './electricity.service'; const SERVICES = [ UserService, + ElectricityService, ]; @NgModule({ diff --git a/src/app/@core/data/electricity.service.ts b/src/app/@core/data/electricity.service.ts new file mode 100644 index 00000000..e578f80e --- /dev/null +++ b/src/app/@core/data/electricity.service.ts @@ -0,0 +1,67 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class ElectricityService { + + private data = [ + { + title: '2015', + months: [ + { month: 'Jan', delta: '0.97', down: true, kWatts: '816', cost: '97' }, + { month: 'Feb', delta: '1.83', down: true, kWatts: '806', cost: '95' }, + { month: 'Mar', delta: '0.64', down: true, kWatts: '803', cost: '94' }, + { month: 'Apr', delta: '2.17', down: false, kWatts: '818', cost: '98' }, + { month: 'May', delta: '1.32', down: true, kWatts: '809', cost: '96' }, + { month: 'Jun', delta: '0.05', down: true, kWatts: '808', cost: '96' }, + { month: 'Jul', delta: '1.39', down: false, kWatts: '815', cost: '97' }, + { month: 'Aug', delta: '0.73', down: true, kWatts: '807', cost: '95' }, + { month: 'Sept', delta: '2.61', down: true, kWatts: '792', cost: '92' }, + { month: 'Oct', delta: '0.16', down: true, kWatts: '791', cost: '92' }, + { month: 'Nov', delta: '1.71', down: true, kWatts: '786', cost: '89' }, + { month: 'Dec', delta: '0.37', down: false, kWatts: '789', cost: '91' }, + ], + }, + { + title: '2016', + active: true, + months: [ + { month: 'Jan', delta: '1.56', down: true, kWatts: '789', cost: '91' }, + { month: 'Feb', delta: '0.33', down: false, kWatts: '791', cost: '92' }, + { month: 'Mar', delta: '0.62', down: true, kWatts: '790', cost: '92' }, + { month: 'Apr', delta: '1.93', down: true, kWatts: '783', cost: '87' }, + { month: 'May', delta: '2.52', down: true, kWatts: '771', cost: '83' }, + { month: 'Jun', delta: '0.39', down: false, kWatts: '774', cost: '85' }, + { month: 'Jul', delta: '1.61', down: true, kWatts: '767', cost: '81' }, + { month: 'Aug', delta: '1.41', down: true, kWatts: '759', cost: '76' }, + { month: 'Sept', delta: '1.03', down: true, kWatts: '752', cost: '74' }, + { month: 'Oct', delta: '2.94', down: false, kWatts: '769', cost: '82' }, + { month: 'Nov', delta: '0.26', down: true, kWatts: '767', cost: '81' }, + { month: 'Dec', delta: '1.62', down: true, kWatts: '760', cost: '76' }, + ], + }, + { + title: '2017', + months: [ + { month: 'Jan', delta: '1.34', down: false, kWatts: '789', cost: '91' }, + { month: 'Feb', delta: '0.95', down: false, kWatts: '793', cost: '93' }, + { month: 'Mar', delta: '0.25', down: true, kWatts: '791', cost: '92' }, + { month: 'Apr', delta: '1.72', down: false, kWatts: '797', cost: '95' }, + { month: 'May', delta: '2.62', down: true, kWatts: '786', cost: '90' }, + { month: 'Jun', delta: '0.72', down: false, kWatts: '789', cost: '91' }, + { month: 'Jul', delta: '0.78', down: true, kWatts: '784', cost: '89' }, + { month: 'Aug', delta: '0.36', down: true, kWatts: '782', cost: '88' }, + { month: 'Sept', delta: '0.55', down: false, kWatts: '787', cost: '90' }, + { month: 'Oct', delta: '1.81', down: true, kWatts: '779', cost: '86' }, + { month: 'Nov', delta: '1.12', down: true, kWatts: '774', cost: '84' }, + { month: 'Dec', delta: '0.52', down: false, kWatts: '776', cost: '95' }, + ], + }, + ]; + + constructor() { + } + + getData() { + return this.data; + } +} diff --git a/src/app/pages/dashboard/dashboard.module.ts b/src/app/pages/dashboard/dashboard.module.ts index 26b43ca3..84d44537 100644 --- a/src/app/pages/dashboard/dashboard.module.ts +++ b/src/app/pages/dashboard/dashboard.module.ts @@ -13,6 +13,7 @@ import { TemperatureDraggerComponent } from './temperature/temperature-dragger/t import { TeamComponent } from './team/team.component'; import { SecurityCamerasComponent } from './security-cameras/security-cameras.component'; import { ElectricityComponent } from './electricity/electricity.component'; +import { ElectricityChartComponent } from './electricity/electricity-chart/electricity-chart.component'; import { WeatherComponent } from './weather/weather.component'; import { SolarComponent } from './solar/solar.component'; import { PlayerComponent } from './player/player.component'; @@ -35,6 +36,7 @@ import { PlayerComponent } from './player/player.component'; TeamComponent, SecurityCamerasComponent, ElectricityComponent, + ElectricityChartComponent, WeatherComponent, PlayerComponent, SolarComponent, diff --git a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss new file mode 100644 index 00000000..194c69da --- /dev/null +++ b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss @@ -0,0 +1,11 @@ +@import '../../../../@theme/styles/variables'; + +@include nga-install-component() { + + display: block; + flex: 1; + + .echart { + height: 100%; + } +} 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 new file mode 100644 index 00000000..bd4f7cfe --- /dev/null +++ b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts @@ -0,0 +1,148 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'ngx-electricity-chart', + styleUrls: ['./electricity-chart.component.scss'], + template: ` +
+ `, +}) +export class ElectricityChartComponent implements OnInit { + + options: any; + + 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, + 340, 340, 340, 340, 340, 340, 340, 340]; + + const data = points.map((p, index) => ({ + label: (index % 5 === 3) ? `${Math.round(index / 5)}` : '', + value: p, + })); + + this.options = { + grid: { + left: 0, + top: 0, + right: 0, + bottom: 80, + }, + tooltip: { + trigger: 'axis', + }, + xAxis: { + type: 'category', + boundaryGap: false, + offset: 25, + data: data.map(i => i.label), + axisTick: { + show: false, + }, + axisLabel: { + textStyle: { + color: '#a1a1e5', + fontSize: 18, + }, + }, + axisLine: { + lineStyle: { + color: '#a1a1e5', + opacity: 0.3, + width: '2', + }, + }, + }, + yAxis: { + boundaryGap: [0, '5%'], + axisLine: { + show: false, + }, + axisLabel: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + color: '#a1a1e5', + opacity: 0.2, + width: '1', + }, + }, + }, + series: [ + { + type: 'line', + smooth: true, + symbol: 'none', + sampling: 'average', + itemStyle: { + normal: { + color: '#2ec7fe', + }, + }, + lineStyle: { + normal: { + width: 6, + type: 'dotted', + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: '#00ffaa', + }, { + offset: 1, + color: '#fff835 ', + }]), + shadowColor: 'rgba(14, 16, 48, 0.4)', + shadowBlur: 6, + shadowOffsetY: 12, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: 'rgba(188, 92, 255, 0.5)', + }, { + offset: 1, + color: 'rgba(188, 92, 255, 0)', + }]), + }, + }, + data: data.map(i => i.value), + }, + + { + type: 'line', + smooth: true, + symbol: 'none', + sampling: 'average', + itemStyle: { + normal: { + color: '#2ec7fe', + }, + }, + lineStyle: { + normal: { + width: 6, + type: 'dotted', + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ + offset: 0, + color: '#00ffaa', + }, { + offset: 1, + color: '#fff835 ', + }]), + shadowColor: 'rgb(166, 149, 255)', + shadowBlur: 14, + }, + }, + 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 47bd4d3d..a16a525c 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.html +++ b/src/app/pages/dashboard/electricity/electricity.component.html @@ -20,6 +20,26 @@ -
+
+
+
+
Consumed
+
+ 816 + kWh +
+
+ +
+
Value
+
+ $ + 91 + USD +
+
+ +
+
diff --git a/src/app/pages/dashboard/electricity/electricity.component.scss b/src/app/pages/dashboard/electricity/electricity.component.scss index 55a7117d..6a503f82 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.scss +++ b/src/app/pages/dashboard/electricity/electricity.component.scss @@ -128,9 +128,43 @@ } } - .chart { + .chart-container { flex: 1; height: 100%; background-image: nga-theme(radial-gradient); + display: flex; + flex-direction: column; + } + + .chart-header { + display: flex; + align-items: center; + padding: 1rem 2rem; + } + + .header-block { + margin-right: 3rem; + + .subtitle { + font-size: 1.125rem; + font-weight: nga-theme(font-weight-light); + } + + .value { + font-family: nga-theme(font-secondary); + font-size: 2rem; + font-weight: nga-theme(font-weight-bolder); + color: nga-theme(color-fg-heading); + + &.dollar { + color: nga-theme(color-fg-highlight); + } + } + + .unit { + font-family: nga-theme(font-secondary); + font-size: 1.25rem; + font-weight: nga-theme(font-weight-light); + } } } diff --git a/src/app/pages/dashboard/electricity/electricity.component.ts b/src/app/pages/dashboard/electricity/electricity.component.ts index 175201b8..6c3b26de 100644 --- a/src/app/pages/dashboard/electricity/electricity.component.ts +++ b/src/app/pages/dashboard/electricity/electricity.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { ElectricityService } from '../../../@core/data/electricity.service'; @Component({ selector: 'ngx-electricity', @@ -7,58 +8,9 @@ import { Component } from '@angular/core'; }) export class ElectricityComponent { - data = [ - { - title: '2015', - months: [ - { month: 'Jan', delta: '0.97', down: true, kWatts: '816', cost: '97' }, - { month: 'Feb', delta: '1.83', down: true, kWatts: '806', cost: '95' }, - { month: 'Mar', delta: '0.64', down: true, kWatts: '803', cost: '94' }, - { month: 'Apr', delta: '2.17', down: false, kWatts: '818', cost: '98' }, - { month: 'May', delta: '1.32', down: true, kWatts: '809', cost: '96' }, - { month: 'Jun', delta: '0.05', down: true, kWatts: '808', cost: '96' }, - { month: 'Jul', delta: '1.39', down: false, kWatts: '815', cost: '97' }, - { month: 'Aug', delta: '0.73', down: true, kWatts: '807', cost: '95' }, - { month: 'Sept', delta: '2.61', down: true, kWatts: '792', cost: '92' }, - { month: 'Oct', delta: '0.16', down: true, kWatts: '791', cost: '92' }, - { month: 'Nov', delta: '1.71', down: true, kWatts: '786', cost: '89' }, - { month: 'Dec', delta: '0.37', down: false, kWatts: '789', cost: '91' }, - ], - }, - { - title: '2016', - active: true, - months: [ - { month: 'Jan', delta: '1.56', down: true, kWatts: '789', cost: '91' }, - { month: 'Feb', delta: '0.33', down: false, kWatts: '791', cost: '92' }, - { month: 'Mar', delta: '0.62', down: true, kWatts: '790', cost: '92' }, - { month: 'Apr', delta: '1.93', down: true, kWatts: '783', cost: '87' }, - { month: 'May', delta: '2.52', down: true, kWatts: '771', cost: '83' }, - { month: 'Jun', delta: '0.39', down: false, kWatts: '774', cost: '85' }, - { month: 'Jul', delta: '1.61', down: true, kWatts: '767', cost: '81' }, - { month: 'Aug', delta: '1.41', down: true, kWatts: '759', cost: '76' }, - { month: 'Sept', delta: '1.03', down: true, kWatts: '752', cost: '74' }, - { month: 'Oct', delta: '2.94', down: false, kWatts: '769', cost: '82' }, - { month: 'Nov', delta: '0.26', down: true, kWatts: '767', cost: '81' }, - { month: 'Dec', delta: '1.62', down: true, kWatts: '760', cost: '76' }, - ], - }, - { - title: '2017', - months: [ - { month: 'Jan', delta: '1.34', down: false, kWatts: '789', cost: '91' }, - { month: 'Feb', delta: '0.95', down: false, kWatts: '793', cost: '93' }, - { month: 'Mar', delta: '0.25', down: true, kWatts: '791', cost: '92' }, - { month: 'Apr', delta: '1.72', down: false, kWatts: '797', cost: '95' }, - { month: 'May', delta: '2.62', down: true, kWatts: '786', cost: '90' }, - { month: 'Jun', delta: '0.72', down: false, kWatts: '789', cost: '91' }, - { month: 'Jul', delta: '0.78', down: true, kWatts: '784', cost: '89' }, - { month: 'Aug', delta: '0.36', down: true, kWatts: '782', cost: '88' }, - { month: 'Sept', delta: '0.55', down: false, kWatts: '787', cost: '90' }, - { month: 'Oct', delta: '1.81', down: true, kWatts: '779', cost: '86' }, - { month: 'Nov', delta: '1.12', down: true, kWatts: '774', cost: '84' }, - { month: 'Dec', delta: '0.52', down: false, kWatts: '776', cost: '95' }, - ], - }, - ]; + data: Array; + + constructor(private electricityService: ElectricityService) { + this.data = electricityService.getData(); + } } diff --git a/src/app/pages/dashboard/temperature/temperature.component.ts b/src/app/pages/dashboard/temperature/temperature.component.ts index 6a611c10..b2504433 100644 --- a/src/app/pages/dashboard/temperature/temperature.component.ts +++ b/src/app/pages/dashboard/temperature/temperature.component.ts @@ -8,7 +8,7 @@ import { NgaThemeService } from '@akveo/nga-theme'; }) export class TemperatureComponent { - temperature: number = 28; + temperature: number = 24; temperatureOff: boolean = false; temperatureMode = 'cool'; diff --git a/src/typings.d.ts b/src/typings.d.ts index 10c254e5..03eef4f3 100644 --- a/src/typings.d.ts +++ b/src/typings.d.ts @@ -11,3 +11,5 @@ interface NodeModule { } declare var tinymce: any; + +declare var echarts: any;