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): add solar component

Browse source
This commit is contained in:
Dmitry Nehaychik 2017-07-14 17:11:26 +03:00
parent d398290df2
commit f3217ae80d
4 changed files with 202 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/pages/dashboard/dashboard.component.html
View file

@ -48,7 +48,9 @@
<div class="col-lg-3">
<nga-card size="xsmall">
<nga-card-header>Solar Energy Consumption</nga-card-header>
<nga-card-body></nga-card-body>
<nga-card-body>
<ngx-solar [chartValue]="72"></ngx-solar>
</nga-card-body>
</nga-card>
<ngx-team></ngx-team>

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

@ -1,5 +1,6 @@
import { NgModule } from '@angular/core';
import { NgaTabsetModule, NgaUserModule } from '@akveo/nga-theme';
import { AngularEchartsModule } from 'ngx-echarts';
import { SharedModule } from '../../shared.module';
import { DashboardComponent } from './dashboard.component';
@ -13,6 +14,7 @@ import { TeamComponent } from './team/team.component';
import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
import { ElectricityComponent } from './electricity/electricity.component';
import { WeatherComponent } from './weather/weather.component';
import { SolarComponent } from './solar/solar.component';
import { PlayerComponent } from './player/player.component';
@NgModule({
@ -20,6 +22,7 @@ import { PlayerComponent } from './player/player.component';
NgaTabsetModule,
NgaUserModule,
SharedModule,
AngularEchartsModule,
],
declarations: [
DashboardComponent,
@ -34,6 +37,7 @@ import { PlayerComponent } from './player/player.component';
ElectricityComponent,
WeatherComponent,
PlayerComponent,
SolarComponent,
],
})
export class DashboardModule { }

30
src/app/pages/dashboard/solar/solar.component.scss Normal file
View file

@ -0,0 +1,30 @@
@import '../../../@theme/styles/variables';
@include nga-install-component() {
display: flex;
height: 100%;
width: 100%;
ngx-echarts-pie, ngx-echarts-bar, ngx-echarts-line {
display: block;
height: 100%;
}
.echart {
flex: 1;
height: 100%;
width: 40%;
}
.text-hint {
font-size: 1rem;
}
.info {
display: flex;
flex-direction: column;
flex: 1;
align-self: center;
}
}

165
src/app/pages/dashboard/solar/solar.component.ts Normal file
View file

@ -0,0 +1,165 @@
import { Component, Input } from '@angular/core';
import { NgaThemeService } from '@akveo/nga-theme';
declare const echarts: any;
@Component({
selector: 'ngx-solar',
styleUrls: ['./solar.component.scss'],
template: `
<div echarts [options]="option" class="echart">
</div>
<div class="info">
<h5 class="mb-3">June 7, 2017</h5>
<h2 class="text-success">6. 421 kWh</h2>
<h5><span class="text-hint">out of</span> 8.421 kWh</h5>
</div>
`,
})
export class SolarComponent {
@Input('chartValue')
set chartValue (value: number) {
this.option.series[0].data[0].value = value;
this.option.series[0].data[1].value = 100 - value;
this.option.series[1].data[0].value = value;
}
option: any = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)',
},
series: [
{
name: ' ',
clockWise: true,
hoverAnimation: false,
type: 'pie',
center: ['35%', '50%'],
radius: ['70%', '90%'],
data: [
{
value: 72,
name: ' ',
label: {
normal: {
position: 'center',
formatter: '{d}%',
textStyle: {
fontSize: '20',
fontWeight: 'bold',
color: 'red',
fontFamily: 'Exo',
},
},
},
tooltip: {
show: false,
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#7bff24',
}, {
offset: 1,
color: '#2ec7fe',
}]),
shadowColor: '#19977E',
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 3,
},
},
hoverAnimation: false,
},
{
value: 28,
name: ' ',
tooltip: {
show: false,
},
label: {
normal: {
position: 'inner',
},
},
itemStyle: {
normal: {
color: 'none',
},
},
},
],
},
{
name: ' ',
clockWise: true,
hoverAnimation: false,
type: 'pie',
center: ['35%', '50%'],
radius: ['70%', '90%'],
data: [
{
value: 72,
name: ' ',
label: {
normal: {
position: 'inner',
show: false,
},
},
tooltip: {
show: false,
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#7bff24',
}, {
offset: 1,
color: '#2ec7fe',
}]),
shadowColor: 'rgba(0, 217, 119, 0.3)',
shadowBlur: 7,
},
},
hoverAnimation: false,
},
{
value: 28,
name: ' ',
tooltip: {
show: false,
},
label: {
normal: {
position: 'inner',
},
},
itemStyle: {
normal: {
color: 'none',
},
},
},
],
},
],
};
constructor(private theme: NgaThemeService) {
this.theme.getConfig().subscribe(config => {
const option = Object.assign({}, this.option);
option.series[0].data[1].itemStyle.normal.color = config.layoutBg;
option.series[0].data[0].label.normal.textStyle.color = config.colorFgHeading;
option.series[0].data[0].label.normal.textStyle.fontFamily = config.fontSecondary;
this.option = option;
});
}
}