From 5f97bf627e8093c8f647956dc8600d688783eba9 Mon Sep 17 00:00:00 2001
From: Zak Timson <zaktimson@gmail.com>
Date: Fri, 16 Nov 2018 12:27:05 -0500
Subject: [PATCH] Area chart revision

---
 src/app/battery/battery.component.html | 59 ++++++++++++--------------
 src/app/battery/battery.service.ts     |  6 +--
 src/styles.scss                        |  8 ++++
 3 files changed, 37 insertions(+), 36 deletions(-)

diff --git a/src/app/battery/battery.component.html b/src/app/battery/battery.component.html
index d4017df..822265d 100644
--- a/src/app/battery/battery.component.html
+++ b/src/app/battery/battery.component.html
@@ -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">UNKNOWN</span>
 </h1>
-<div class="d-flex flex-column flex-md-row" style="min-height: 400px">
-    <div class="flex-grow-1 flex-basis-0 mb-3" style="overflow: hidden; height: 400px">
-        <ngx-charts-bar-vertical #chart1
-                                 [results]="batteryService.percentageData"
-                                 [scheme]="airScheme"
-                                 [xAxis]="true"
-                                 [yAxis]="true"
-                                 [yScaleMin]="0"
-                                 [yScaleMax]="100"
-        ></ngx-charts-bar-vertical>
-    </div>
-    <div class="flex-grow-1 flex-basis-0 mb-3" style="overflow: hidden; height: 400px">
-        <ngx-charts-bar-vertical #chart2
-                                 [results]="batteryService.temperatureData"
-                                 [scheme]="fireScheme"
-                                 schemeType="linear"
-                                 [xAxis]="true"
-                                 [yAxis]="true"
-                                 [yScaleMin]="0"
-                                 [yScaleMax]="100"
-                                 legendTitle="Temperature"
-                                 [legend]="!app.mobile"
-        ></ngx-charts-bar-vertical>
-    </div>
+<div class="w-100 mb-5" style="min-height: 400px">
+    <ngx-charts-area-chart #chart1
+                           [results]="batteryService.percentageData"
+                           [scheme]="airScheme"
+                           [yAxis]="true"
+                           [yScaleMin]="0"
+                           [yScaleMax]="100"
+                           legendTitle="Charge"
+                           [legend]="!app.mobile"
+                           [roundDomains]="true"
+    ></ngx-charts-area-chart>
+</div>
+<div class="w-100 pt-5" style="min-height: 400px">
+    <ngx-charts-area-chart #chart2
+                           [results]="batteryService.temperatureData"
+                           [scheme]="airScheme"
+                           [yAxis]="true"
+                           [yScaleMin]="0"
+                           [yScaleMax]="100"
+                           legendTitle="Temperature"
+                           [legend]="!app.mobile"
+                           [roundDomains]="true"
+    ></ngx-charts-area-chart>
 </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>
diff --git a/src/app/battery/battery.service.ts b/src/app/battery/battery.service.ts
index b24c78c..c3d7959 100644
--- a/src/app/battery/battery.service.ts
+++ b/src/app/battery/battery.service.ts
@@ -20,10 +20,10 @@ export class BatteryService {
             this.last = new Date();
 
             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.percentageData = this.batteries.map(battery => ({name: battery.name, value: battery.history[0].percentage * 100}));
-            this.temperatureData = this.batteries.map(battery => ({name: battery.name, value: Math.round(battery.history[0].temp * 10) / 10}));
+            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, series: battery.history.map((history, i) => ({name: i, value: Math.round(history.temp * 10) / 10}))}));
         });
     }
 
diff --git a/src/styles.scss b/src/styles.scss
index 3e12b85..890406f 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -129,6 +129,14 @@ html, body {
     flex-grow: 3;
 }
 
+.flex-shrink-0 {
+    flex-shrink: 0;
+}
+
+.flex-shrink-1 {
+    flex-shrink: 1;
+}
+
 .flex-basis-0 {
     flex-basis: 0;
 }