More styling

src/app/app.component.html

@@ -25,7 +25,7 @@
         </mat-nav-list>
     </mat-drawer>
     <mat-drawer-content class="bg-secondary text-white" [ngClass]="{'p-4': !hide}" (click)="open = (mobile && open) ? false : open" style="position: relative">
-        <main class="d-flex flex-column justify-content-center h-100" [@routerTransition]="getState(o)">
+        <main class="h-100" [@routerTransition]="getState(o)">
             <router-outlet #o="outlet"></router-outlet>
         </main>
     </mat-drawer-content>

src/app/battery/battery.component.html

@@ -1,26 +1,23 @@
-<div class="nav-fix"></div>
 <h1>POWER WALL:
     <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 mb-3">
-    <div style="overflow: auto">
+    <div class="flex-grow-1 flex-basis-0" style="overflow: hidden; height: 400px">
-        <ngx-charts-bar-vertical
+        <ngx-charts-bar-vertical #chart1
             [results]="batteryService.percentageData"
             [scheme]="airScheme"
-            [view]="[400, 200]"
             [xAxis]="true"
             [yAxis]="true"
             [yScaleMin]="0"
             [yScaleMax]="100"
         ></ngx-charts-bar-vertical>
     </div>
-    <div style="overflow: auto">
+    <div class="flex-grow-1 flex-basis-0" style="overflow: hidden; height: 400px">
-        <ngx-charts-bar-vertical
+        <ngx-charts-bar-vertical #chart2
             [results]="batteryService.temperatureData"
             [scheme]="fireScheme"
             schemeType="linear"
-            [view]="[400, 200]"
             [xAxis]="true"
             [yAxis]="true"
             [yScaleMin]="0"
@@ -29,7 +26,7 @@
     </div>
 </div>
 <mat-card *ngFor="let b of batteryService.batteries" class="mb-3">
-    <h3>{{b.name}}</h3>
+    <h5>{{b.name}}</h5>
     {{b.history[0].percentage * 100}}%
     <br>
     {{round(b.history[0].temp)}} °C

src/app/battery/battery.component.ts

@@ -1,11 +1,14 @@
-import {Component} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {BatteryService} from './battery.service';
+import {BarVerticalComponent} from '@swimlane/ngx-charts/release/bar-chart';
 
 @Component({
     selector: 'app-batterys',
     templateUrl: './battery.component.html'
 })
-export class BatteryComponent {
+export class BatteryComponent implements OnInit {
+    @ViewChild('chart1') chart1: BarVerticalComponent;
+    @ViewChild('chart2') chart2: BarVerticalComponent;
 
     airScheme = {
         name: 'air',
@@ -23,6 +26,13 @@ export class BatteryComponent {
 
     constructor(public batteryService: BatteryService) { }
 
+    ngOnInit() {
+        setTimeout(() => {
+            this.chart1.update();
+            this.chart2.update();
+        }, 1000);
+    }
+
     round(num: number) {
         return Math.round(num * 10) / 10;
     }

src/app/login/login.component.html

@@ -9,5 +9,5 @@
     </div>
 </div>
 <div class="off-center" [@expandDown]="true">
-    <button mat-stroked-button class="mt-5" style="width: 150px; opacity: 0" (click)="login()" [disabled]="loading">Login With Google</button>
+    <button mat-stroked-button class="mt-5" style="width: 150px" (click)="login()" [disabled]="loading">Login With Google</button>
 </div>

src/styles.scss

@@ -35,11 +35,6 @@ html, body {
     }
 }
 
-.nav-fix {
-    width: 100%;
-    height: 64px;
-}
-
 .center {
     position: fixed;
     left: 50%;
@@ -125,3 +120,11 @@ html, body {
 .flex-grow-3 {
     flex-grow: 3;
 }
+
+.flex-basis-0 {
+    flex-basis: 0;
+}
+
+.flex-basis-auto {
+    flex-basis: auto;
+}