ztimson/homefront
ztimson/homefront
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

Area chart revision

Browse Source
This commit is contained in:
Zakary Timson 2018-11-16 12:27:05 -05:00
parent 70be7d7a29
commit 5f97bf627e
3 changed files with 37 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/app/battery/battery.component.html
View File

@ -1,37 +1,30 @@
<h1>Powerwall: <h1 class="mb-3">
<mat-icon>{{batteryService.icon}}</mat-icon>
Powerwall:
<span *ngIf="batteryService.batteries.length" class="text-muted">{{batteryService.average * 100}}%</span> <span *ngIf="batteryService.batteries.length" class="text-muted">{{batteryService.average * 100}}%</span>
<span *ngIf="!batteryService.batteries.length" class="text-muted">UNKNOWN</span> <span *ngIf="!batteryService.batteries.length" class="text-muted">UNKNOWN</span>
</h1> </h1>
<div class="d-flex flex-column flex-md-row" style="min-height: 400px"> <div class="w-100 mb-5" style="min-height: 400px">
<div class="flex-grow-1 flex-basis-0 mb-3" style="overflow: hidden; height: 400px"> <ngx-charts-area-chart #chart1
<ngx-charts-bar-vertical #chart1
[results]="batteryService.percentageData" [results]="batteryService.percentageData"
[scheme]="airScheme" [scheme]="airScheme"
[xAxis]="true"
[yAxis]="true" [yAxis]="true"
[yScaleMin]="0" [yScaleMin]="0"
[yScaleMax]="100" [yScaleMax]="100"
></ngx-charts-bar-vertical> legendTitle="Charge"
</div> [legend]="!app.mobile"
<div class="flex-grow-1 flex-basis-0 mb-3" style="overflow: hidden; height: 400px"> [roundDomains]="true"
<ngx-charts-bar-vertical #chart2 ></ngx-charts-area-chart>
</div>
<div class="w-100 pt-5" style="min-height: 400px">
<ngx-charts-area-chart #chart2
[results]="batteryService.temperatureData" [results]="batteryService.temperatureData"
[scheme]="fireScheme" [scheme]="airScheme"
schemeType="linear"
[xAxis]="true"
[yAxis]="true" [yAxis]="true"
[yScaleMin]="0" [yScaleMin]="0"
[yScaleMax]="100" [yScaleMax]="100"
legendTitle="Temperature" legendTitle="Temperature"
[legend]="!app.mobile" [legend]="!app.mobile"
></ngx-charts-bar-vertical> [roundDomains]="true"
</div> ></ngx-charts-area-chart>
</div> </div>
<mat-card *ngFor="let b of batteryService.batteries" class="mb-3">
<h5>{{b.name}}</h5>
{{b.history[0].percentage * 100}}%
<br>
{{round(b.history[0].temp)}} °C
<br>
Charging: {{b.history[0].charging}}
</mat-card>

6
src/app/battery/battery.service.ts
View File

@ -20,10 +20,10 @@ export class BatteryService {
this.last = new Date(); this.last = new Date();
let data = snap.data(); let data = snap.data();
this.batteries = Object.keys(data).map(key => ({name: key, history: data[key].reverse()})); this.batteries = Object.keys(data).map(key => ({name: key, history: data[key]}));
this.average = this.batteries.reduce((acc, battery) => acc + battery.history[0].percentage, 0) / this.batteries.length; this.average = this.batteries.reduce((acc, battery) => acc + battery.history[0].percentage, 0) / this.batteries.length;
this.percentageData = this.batteries.map(battery => ({name: battery.name, value: battery.history[0].percentage * 100})); this.percentageData = this.batteries.map(battery => ({name: battery.name, series: battery.history.map((history, i) => ({name: i, value: history.percentage * 100}))}));
this.temperatureData = this.batteries.map(battery => ({name: battery.name, value: Math.round(battery.history[0].temp * 10) / 10})); this.temperatureData = this.batteries.map(battery => ({name: battery.name, series: battery.history.map((history, i) => ({name: i, value: Math.round(history.temp * 10) / 10}))}));
}); });
} }

8
src/styles.scss
View File

@ -129,6 +129,14 @@ html, body {
flex-grow: 3; flex-grow: 3;
} }
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-shrink-1 {
flex-shrink: 1;
}
.flex-basis-0 { .flex-basis-0 {
flex-basis: 0; flex-basis: 0;
} }