Aktueller Stand

src/app/app.component.html

@@ -1,17 +1,20 @@
 <main class="main">
+  <div class="row row-cols-auto">
+    <div class="col">
       <div ngbDropdown class="d-inline-block" #houseDrop="ngbDropdown">
-    Haushalt: 
         <button type="button" class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
-      {{getHouseName()}}
+          Haushalt: {{getHouseName()}}
         </button>
         <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
           <button ngbDropdownItem (click)="$event.stopPropagation(); houseId=1;">Kerpen</button>
           <button ngbDropdownItem (click)="$event.stopPropagation(); houseId=2;">Rommerskirchen</button>
         </div>
       </div>
+      </div>
+    <div class="col">
       <div ngbDropdown class="d-inline-block">
         <button type="button" class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>
-      Zeitraum
+          Zeitraum: {{getDurationName()}}
         </button>
         <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
           <button ngbDropdownItem (click)="$event.stopPropagation(); duration=120;">letzte 2 Stunden</button>
@@ -19,6 +22,8 @@
           <button ngbDropdownItem (click)="$event.stopPropagation(); duration=1440;">letzte 24 Stunden</button>
         </div>
       </div>
+      </div>
+  </div>
   <div ngbAccordion>
     <div ngbAccordionItem>
       <h2 ngbAccordionHeader>

src/app/app.component.ts

@@ -39,6 +39,16 @@ export class AppComponent implements OnInit, OnChanges {
     }
   }
 
+  getDurationName(): string {
+    var hours: number;
+    if (this.duration) {
+      hours = this.duration / 60;
+      return 'letzte ' + hours + ' Stunden';
+    } else {
+      return 'Unbekannt';
+    }
+  }
+
   houseId: number | undefined = undefined;
   duration: number | undefined = undefined;
 }

src/app/chart/chart.component.html

@@ -1,3 +1,3 @@
-<div style="border: 1px solid blueviolet;display: block; width: 100%; height: 400px;">
+<div style="border: 1px solid blueviolet;display: block; width: 100%; height: 70%;">
   <canvas id="canvas"></canvas>
 </div>