Added timestamps

src/app/battery/battery.component.html

@@ -19,10 +19,16 @@
                     <h5 class="mb-0">{{battery.name}}</h5>
                 </div>
                 <div class="d-flex flex-grow-1 align-items-center justify-content-center">
-                    <button mat-button (click)="selected = i" [ngClass]="{'text-success': batteryService.charging, 'text-danger': !batteryService.charging}">{{battery.charge | number : '1.1-1'}} V</button>
+                    <button mat-button (click)="selected = i"
+                            [ngClass]="{'selected': selected == i, 'text-success': batteryService.charging, 'text-danger': !batteryService.charging}">
+                        {{battery.charge | number : '1.1-1'}} V
+                    </button>
                 </div>
                 <div class="d-flex flex-grow-1 align-items-center justify-content-end text-muted">
-                    <button mat-button (click)="selected = batteryService.batteries.length + i">{{battery.temp | number : '1.1-1'}} °C</button>
+                    <button mat-button (click)="selected = batteryService.batteries.length + i"
+                            [ngClass]="{'selected': selected == batteryService.batteries.length + i}">
+                        {{battery.temp | number : '1.1-1'}} °C
+                    </button>
                 </div>
             </div>
             <div *ngIf="selected == i" class="w-100" style="height: 200px">
@@ -46,6 +52,8 @@
                                        [yScaleMin]="0"
                                        [yScaleMax]="50"
                                        [yAxisTickFormatting]="tempFormat"
+                                       [xAxis]="true"
+                                       [xAxisTickFormatting]="dateFormat"
                                        [roundDomains]="true"
                 ></ngx-charts-area-chart>
             </div>

src/app/battery/battery.component.ts

@@ -4,7 +4,8 @@ import {AppComponent} from '../app.component';
 
 @Component({
     selector: 'app-batterys',
-    templateUrl: './battery.component.html'
+    templateUrl: './battery.component.html',
+    styles: [`.selected { background-color: rgba(0, 0, 0, 0.1); }`]
 })
 export class BatteryComponent implements OnInit {
 
@@ -15,7 +16,7 @@ export class BatteryComponent implements OnInit {
         group: 'Ordinal',
         domain: ['#2830a8']
     };
-    selected;
+    selected = 0;
 
     constructor(public app: AppComponent, public batteryService: BatteryService) { }
 

src/app/battery/battery.service.ts

@@ -54,7 +54,7 @@ export class BatteryService {
                     chargeHistory: data.modules[key].map((val, i) => ({name: val.timestamp.toDate(), value: val.charge})),
                     name: key,
                     temp: data.modules[key][last].temp,
-                    tempHistory: data.modules[key].map((val, i) => ({name: i, value: val.temp}))
+                    tempHistory: data.modules[key].map((val, i) => ({name: val.timestamp.toDate(), value: val.temp}))
                 }
             });
             this.lastCharge = this.charge;