client/stillbox/src/app/charts/charts.component.html

@@ -1 +1,2 @@
 <div class="chart"></div>
+<div class="spinner" *ngIf="loading"><mat-spinner></mat-spinner></div>

client/stillbox/src/app/charts/charts.component.ts

@@ -7,10 +7,7 @@ import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'chart',
-  imports: [
+  imports: [NgIf, MatProgressSpinnerModule],
-    NgIf,
-    MatProgressSpinnerModule,
-  ],
   templateUrl: './charts.component.html',
   styleUrl: './charts.component.scss',
 })
@@ -50,11 +47,15 @@ export class ChartsComponent {
   }
 
   ngOnInit() {
-    this.interval.pipe(switchMap((intv) => {
+    this.interval
+      .pipe(
+        switchMap((intv) => {
+          d3.select(this.elementRef.nativeElement).select('.chart').html('');
           this.loading = true;
           return this.callsSvc.getCallStats(intv);
-  })).
+        }),
-    subscribe((stats) => {
+      )
+      .subscribe((stats) => {
         let cMax = 0;
         var cMin = 0;
         let data = stats.stats.map((rec) => {
@@ -67,14 +68,17 @@ export class ChartsComponent {
           if (rec.count > cMax) {
             cMax = rec.count;
           }
-        return { count: rec.count, time: this.dateFormat(new Date(rec.time), stats.interval) };
+          return {
+            count: rec.count,
+            time: this.dateFormat(new Date(rec.time), stats.interval),
+          };
         });
         // set the dimensions and margins of the graph
         var margin = { top: 30, right: 30, bottom: 70, left: 60 },
           width = 460 - margin.left - margin.right,
           height = 400 - margin.top - margin.bottom;
         // clear the old one
-      d3.select(this.elementRef.nativeElement).select('.chart svg').remove();
+        d3.select(this.elementRef.nativeElement).select('.chart').html('');
         const svg = d3
           .select(this.elementRef.nativeElement)
           .select('.chart')
@@ -82,7 +86,10 @@ export class ChartsComponent {
           .attr('width', width + margin.left + margin.right)
           .attr('height', height + margin.top + margin.bottom)
           .append('g')
-        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
+          .attr(
+            'transform',
+            'translate(' + margin.left + ',' + margin.top + ')',
+          );
         // X axis
         var x = d3
           .scaleBand()

client/stillbox/src/app/home/home.component.html

@@ -1,7 +1,7 @@
 <mat-card class="chart" appearance="outlined">
-  <div class="chartTitle">Calls By</div>
   <form [formGroup]="form">
     <mat-form-field>
+      <label>Calls By</label>
       <mat-select formControlName="callsPer">
         <mat-option value="hour">Hour</mat-option>
         <mat-option value="day">Day</mat-option>
@@ -9,6 +9,6 @@
         <mat-option value="month">Month</mat-option>
       </mat-select>
     </mat-form-field>
-</form>
+  </form>
-  <chart [interval]="callsOb"></chart>
+  <chart #chart [interval]="callsOb"></chart>
 </mat-card>

client/stillbox/src/app/home/home.component.scss

@@ -1,6 +1,6 @@
 mat-card.chart {
   width: 500px;
-  height: 400px;
+  height: 500px;
   margin: 30px 30px 40px 40px;
 }
 

client/stillbox/src/app/home/home.component.ts

@@ -1,15 +1,35 @@
 import { Component, computed, signal, ViewChild } from '@angular/core';
 import { ChartsComponent } from '../charts/charts.component';
 import { MatCardModule } from '@angular/material/card';
-import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {
-import { debounceTime, filter, Observable, startWith, switchAll, switchMap } from 'rxjs';
+  FormControl,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {
+  debounceTime,
+  filter,
+  Observable,
+  startWith,
+  switchAll,
+  switchMap,
+} from 'rxjs';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSelectModule } from '@angular/material/select';
 import { MatInputModule } from '@angular/material/input';
 
 @Component({
   selector: 'app-home',
-  imports: [ChartsComponent, MatCardModule, MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule, ReactiveFormsModule ],
+  imports: [
+    ChartsComponent,
+    MatCardModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    FormsModule,
+    ReactiveFormsModule,
+  ],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
 })
@@ -20,12 +40,11 @@ export class HomeComponent {
   callsOb!: Observable<string>;
 
   ngOnInit() {
-    this.form.controls["callsPer"].setValue("week");
+    this.form.controls['callsPer'].setValue('week');
-    this.callsOb = this.form.controls['callsPer'].valueChanges
+    this.callsOb = this.form.controls['callsPer'].valueChanges.pipe(
-    .pipe(
+      startWith('week'),
-      startWith("week"),
       debounceTime(300),
-      filter(val => val !== null)
+      filter((val) => val !== null),
     );
   }
 }