Angular: quick zoom buttons

ng/src/app/components/server-data-chart/server-data-chart.component.html

@@ -8,15 +8,27 @@
   </div>
   <div class="card-body">
     <span class="d-flex flex-row">
-      <span class="badge bd-gray-100">
+      <div class="badge bd-gray-100">
         <fa-icon [icon]="fa.locationDot" class="pe-1"></fa-icon><fa-icon [icon]="fa.ellipsis" class="pe-1"></fa-icon>
         {{ start | date: 'YYYY-MM-dd HH:mm:ss' }}
-      </span>
-      <span class="flex-fill">&nbsp;</span>
-      <span class="badge bd-gray-100">
+      </div>
+      <div class="flex-fill text-center">
+        <div
+          *ngFor="let zoomRange of zoomRanges; index as i"
+          class="badge bg-secondary pointer"
+          [class.ms-1]="i > 0"
+          [class.active]="selectedZoomRange === zoomRange"
+          (click)="zoomButton(zoomRange)">
+          {{ zoomRange }}
+        </div>
+        <div class="badge bg-secondary ms-1" [class.active]="!zoomRanges.includes(selectedZoomRange)">
+          <fa-icon [icon]="fa.zoomPlus"></fa-icon>
+        </div>
+      </div>
+      <div class="badge bd-gray-100">
         {{ end | date: 'YYYY-MM-dd HH:mm:ss' }}
         <fa-icon [icon]="fa.ellipsis" class="ps-1"></fa-icon><fa-icon [icon]="fa.locationDot" class="ps-1"></fa-icon>
-      </span>
+      </div>
     </span>
     <canvas
       baseChart

ng/src/app/components/server-data-chart/server-data-chart.component.scss

@@ -1,7 +1,16 @@
-.card > .card-body > canvas {
-  cursor: grab;
+.card > .card-body {
+  .badge.bg-secondary {
+    &.active {
+      outline: 1px solid var(--bs-light);
+      color: var(--bs-light);
+    }
+  }
+
+  & > canvas {
+    cursor: grab;
 
-  &.zoom {
-    cursor: zoom-in;
+    &.zoom {
+      cursor: zoom-in;
+    }
   }
 }

ng/src/app/components/server-data-chart/server-data-chart.component.ts

@@ -1,6 +1,7 @@
 import { Component, ElementRef, HostListener, Input, OnInit, ViewChild } from '@angular/core';
-import { faLocationDot, faEllipsis } from '@fortawesome/free-solid-svg-icons';
+import { faLocationDot, faEllipsis, faMagnifyingGlassPlus } from '@fortawesome/free-solid-svg-icons';
 import { ChartData, ChartOptions, TooltipItem } from 'chart.js';
+import * as dateFns from 'date-fns';
 import { debounceTime, throttleTime, Subject } from 'rxjs';
 
 import { BytePipe } from 'src/app/pipes/byte.pipe';
@@ -39,7 +40,10 @@ export class ServerDataChartComponent implements OnInit {
   public end!: Date;
   public data?: ChartData<'line', ServerData[], Date>;
   public options!: ChartOptions<'line'> & any;
-  public fa = { locationDot: faLocationDot, ellipsis: faEllipsis };
+  public fa = { locationDot: faLocationDot, ellipsis: faEllipsis, zoomPlus: faMagnifyingGlassPlus };
+
+  public zoomRanges = ['3M', '1M', '2W', '4D', '1D', '12H', '4H', '1H'];
+  public selectedZoomRange = '4H';
 
   constructor(private apiService: ServerApiService, private bytePipe: BytePipe) {
     this.defaults();
@@ -177,6 +181,7 @@ export class ServerDataChartComponent implements OnInit {
       this.start = new Date(newStartMs);
       this.end = new Date(newEndMs);
 
+      this.selectedZoomRange = '';
       this.updateOptions();
       this.zoomEvent$.next();
     }
@@ -250,4 +255,27 @@ export class ServerDataChartComponent implements OnInit {
     this.updateOptions();
     this.zoomEvent$.next();
   }
+
+  zoomButton(zoomRange: string) {
+    this.selectedZoomRange = zoomRange;
+
+    const m = /^(\d+)(\w)$/.exec(zoomRange);
+    if (!m) return;
+    switch (m[2]) {
+      case 'H':
+        this.start = dateFns.addHours(this.end, -1 * Number(m[1]));
+        break;
+      case 'D':
+        this.start = dateFns.addDays(this.end, -1 * Number(m[1]));
+        break;
+      case 'W':
+        this.start = dateFns.addWeeks(this.end, -1 * Number(m[1]));
+        break;
+      case 'M':
+        this.start = dateFns.addMonths(this.end, -1 * Number(m[1]));
+        break;
+    }
+
+    this.zoomEvent$.next();
+  }
 }

ng/src/styles.scss

@@ -1 +1,5 @@
 @import '../bootstrap-theme/scss/bootstrap.scss';
+
+.pointer {
+  cursor: pointer;
+}