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

fix(dashboard): add electricity chart

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-14 18:55:38 +03:00
parent f3217ae80d
commit 93e567c46a
10 changed files with 295 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/@core/data/data.module.ts
View file

@ -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({

67
src/app/@core/data/electricity.service.ts Normal file
View file

@ -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;
}
}

2
src/app/pages/dashboard/dashboard.module.ts
View file

@ -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,

11
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss Normal file
View file

@ -0,0 +1,11 @@
@import '../../../../@theme/styles/variables';
@include nga-install-component() {
display: block;
flex: 1;
.echart {
height: 100%;
}
}

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

@ -0,0 +1,148 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'ngx-electricity-chart',
styleUrls: ['./electricity-chart.component.scss'],
template: `
<div echarts [options]='options' class='echart'></div>
`,
})
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),
},
],
};
}
}

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

@ -20,6 +20,26 @@
</nga-tabset>
</div>
<div class="chart">
<div class="chart-container">
<div class="chart-header">
<div class="header-block">
<div class="subtitle">Consumed</div>
<div>
<span class="value">816</span>
<span class="unit">kWh</span>
</div>
</div>
<div class="header-block">
<div class="subtitle">Value</div>
<div>
<span class="value dollar">$</span>
<span class="value">91</span>
<span class="unit">USD</span>
</div>
</div>
</div>
<ngx-electricity-chart></ngx-electricity-chart>
</div>
</nga-card>

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

@ -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);
}
}
}

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

@ -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<any>;
constructor(private electricityService: ElectricityService) {
this.data = electricityService.getData();
}
}

2
src/app/pages/dashboard/temperature/temperature.component.ts
View file

@ -8,7 +8,7 @@ import { NgaThemeService } from '@akveo/nga-theme';
})
export class TemperatureComponent {
temperature: number = 28;
temperature: number = 24;
temperatureOff: boolean = false;
temperatureMode = 'cool';

2
src/typings.d.ts vendored
View file

@ -11,3 +11,5 @@ interface NodeModule {
}
declare var tinymce: any;
declare var echarts: any;