Fixed styling on both desktop and mobile

src/app/app.component.html

@@ -6,7 +6,7 @@
         <small class="text-muted ml-2">v{{environment.version}}</small>
     </span>
 </mat-toolbar>
-<mat-drawer-container [hasBackdrop]="false" style="height: calc(100vh - 64px)">
+<mat-drawer-container [hasBackdrop]="false" [ngClass]="{'mobile-height': mobile, 'desktop-height': !mobile}">
     <mat-drawer class="bg-primary" [mode]="mobile ? 'push' : 'side'" [opened]="open" [disableClose]="!mobile" [autoFocus]="false">
         <mat-nav-list class="p-0">
             <mat-divider></mat-divider>

src/app/battery/battery.component.html

@@ -4,26 +4,26 @@
 </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">
-        <h5 class="pl-2">Charge</h5>
         <ngx-charts-bar-vertical #chart1
-            [results]="batteryService.percentageData"
-            [scheme]="airScheme"
-            [xAxis]="true"
-            [yAxis]="true"
-            [yScaleMin]="0"
-            [yScaleMax]="100"
+                                 [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">
-        <h5 class="pl-2">Temperature</h5>
         <ngx-charts-bar-vertical #chart2
-            [results]="batteryService.temperatureData"
-            [scheme]="fireScheme"
-            schemeType="linear"
-            [xAxis]="true"
-            [yAxis]="true"
-            [yScaleMin]="0"
-            [yScaleMax]="100"
+                                 [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>

src/app/battery/battery.component.ts

@@ -1,6 +1,7 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
 import {BatteryService} from './battery.service';
 import {BarVerticalComponent} from '@swimlane/ngx-charts/release/bar-chart';
+import {AppComponent} from '../app.component';
 
 @Component({
     selector: 'app-batterys',
@@ -19,12 +20,12 @@ export class BatteryComponent implements OnInit {
 
     fireScheme = {
         name: 'flame',
-        selectable: false,
+        selectable: true,
         group: 'Continuous',
         domain: ['#00deff', '#3db0ff', '#a274d7', '#c42576', '#9f0000']
     };
 
-    constructor(public batteryService: BatteryService) { }
+    constructor(public app: AppComponent, public batteryService: BatteryService) { }
 
     ngOnInit() {
         setTimeout(() => {

src/styles.scss

@@ -35,6 +35,14 @@ html, body {
     }
 }
 
+.mobile-height{
+    height: calc(100vh - 56px);
+}
+
+.desktop-height{
+    height: calc(100vh - 64px);
+}
+
 .center {
     position: fixed;
     left: 50%;