Add lap timer UI controls page

angular-client/src/app/app-nav-bar/app-nav-bar.component.ts

@@ -207,6 +207,12 @@ export class AppNavBarComponent implements OnInit, OnDestroy {
       label: 'Rules',
       onClick: () => this.navigateTo(appRoutes.rulesRoute()),
       icon: 'notifications'
+    },
+    {
+      id: appRoutes.lapTimerRoute(),
+      label: 'Lap Timer',
+      onClick: () => this.navigateTo(appRoutes.lapTimerRoute()),
+      icon: 'timer'
     }
   ];
 

angular-client/src/app/app-routing.module.ts

@@ -10,6 +10,7 @@ import NotificationLogPageComponent from 'src/pages/notification-log-page/notifi
 import FaultPageComponent from 'src/pages/fault-page/fault-page.component';
 import GraphPageComponent from 'src/pages/graph-page/graph-page.component';
 import LandingPageComponent from 'src/pages/landing-page/landing-page.component';
+import LapTimerPageComponent from 'src/pages/lap-timer-page/lap-timer-page.component';
 import MapComponent from 'src/pages/map/map.component';
 import NotificationRulesPageComponent from 'src/pages/notification-rules-page/notification-rules-page.component';
 import { Segment } from 'src/utils/bms.utils';
@@ -27,6 +28,7 @@ const commandsRoute = () => `/commands`;
 const rulesRoute = () => `/rules`;
 const efusesRoute = () => `/efuses`;
 const notificationLogRoute = () => `/notification-log`;
+const lapTimerRoute = () => `/lap-timer`;
 
 export const appRoutes = {
   landingRoute,
@@ -41,7 +43,8 @@ export const appRoutes = {
   commandsRoute,
   rulesRoute,
   efusesRoute,
-  notificationLogRoute
+  notificationLogRoute,
+  lapTimerRoute
 };
 
 // Routes should be defined carefully in accordance with the appRoutes
@@ -60,7 +63,8 @@ const routes: Routes = [
   { path: 'commands', component: CarCommandComponent },
   { path: 'rules', component: NotificationRulesPageComponent },
   { path: 'efuses', component: EfusesPageComponent },
-  { path: 'notification-log', component: NotificationLogPageComponent }
+  { path: 'notification-log', component: NotificationLogPageComponent },
+  { path: 'lap-timer', component: LapTimerPageComponent }
 ];
 
 @NgModule({

angular-client/src/components/gauge-stat/gauge-stat.component.css

@@ -0,0 +1,18 @@
+.gauge-stat {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 4px;
+  padding: 8px 0;
+}
+.gauge-value {
+  font-family: var(--font-family);
+  font-variant-numeric: tabular-nums;
+  font-size: var(--font-size-xxl);
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+.gauge-unit {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}

angular-client/src/components/gauge-stat/gauge-stat.component.html

@@ -0,0 +1,4 @@
+<div class="gauge-stat">
+  <span class="gauge-value" [style.color]="color()">{{ value() | number: digitsInfo() }}</span>
+  <span class="gauge-unit">{{ unit() }}</span>
+</div>

angular-client/src/components/gauge-stat/gauge-stat.component.ts

@@ -0,0 +1,19 @@
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { DecimalPipe } from '@angular/common';
+
+@Component({
+  selector: 'gauge-stat',
+  templateUrl: './gauge-stat.component.html',
+  styleUrl: './gauge-stat.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [DecimalPipe]
+})
+export class GaugeStatComponent {
+  value = input.required<number>();
+  unit = input<string>('');
+  /** Optional color for the value; falls back to CSS default when empty. */
+  color = input<string>('');
+  precision = input<number>(0);
+
+  digitsInfo = computed(() => `1.0-${this.precision()}`);
+}

angular-client/src/components/half-gauge/half-gauge.component.css

@@ -1,5 +1,32 @@
 .gauge-container {
+  position: relative;
+  display: flex;
   align-items: center;
-  background-color: #2c2c2c;
-  border-radius: 10px;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.gauge-svg {
+  width: 100%;
+  height: 100%;
+}
+
+.gauge-track {
+  stroke: #1d1d1d;
+}
+
+.gauge-arc {
+  /* Smooth the arc between value updates without re-rendering the chart. */
+  transition: stroke-dashoffset 0.1s linear;
+}
+
+.gauge-value {
+  position: absolute;
+  bottom: 12%;
+  left: 50%;
+  transform: translateX(-50%);
+  font-weight: 300;
+  color: #fafafa;
+  pointer-events: none;
 }

angular-client/src/components/half-gauge/half-gauge.component.html

@@ -1,11 +1,16 @@
-<div class="gauge-container" [ngStyle]="{ width: widthpx, height: heightpx }">
-  <apx-chart
-    [series]="chartOptions.series"
-    [colors]="chartOptions.colors"
-    [stroke]="chartOptions.stroke"
-    [chart]="chartOptions.chart"
-    [plotOptions]="chartOptions.plotOptions"
-    [labels]="chartOptions.labels"
-    [fill]="chartOptions.fill"
-  />
+<div class="gauge-container">
+  <svg class="gauge-svg" [attr.viewBox]="viewBox()" preserveAspectRatio="xMidYMid meet">
+    <path class="gauge-track" [attr.d]="arcPath()" [attr.stroke-width]="stroke()" fill="none" stroke-linecap="round" />
+    <path
+      class="gauge-arc"
+      [attr.d]="arcPath()"
+      [attr.stroke]="color()"
+      [attr.stroke-width]="stroke()"
+      [attr.stroke-dasharray]="arcLength()"
+      [attr.stroke-dashoffset]="dashOffset()"
+      fill="none"
+      stroke-linecap="butt"
+    />
+  </svg>
+  <span class="gauge-value" [style.font-size.px]="fontSizePx()">{{ label() }}</span>
 </div>

angular-client/src/components/half-gauge/half-gauge.component.ts

@@ -1,99 +1,50 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-import { ApexNonAxisChartSeries, ApexPlotOptions, ApexChart, ApexFill, NgApexchartsModule } from 'ng-apexcharts';
-import { NgStyle } from '@angular/common';
-
-export type ChartOptions = {
-  series: ApexNonAxisChartSeries;
-  chart: ApexChart;
-  labels: string[];
-  plotOptions: ApexPlotOptions;
-  fill: ApexFill;
-};
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 @Component({
   selector: 'half-gauge',
-  templateUrl: 'half-gauge.component.html',
-  styleUrls: ['half-gauge.component.css'],
-  standalone: true,
-  imports: [NgStyle, NgApexchartsModule]
+  templateUrl: './half-gauge.component.html',
+  styleUrls: ['./half-gauge.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export default class HalfGaugeComponent implements OnInit {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  public chartOptions!: Partial<ChartOptions> | any;
-  @Input() current: number = 50;
-  @Input() min: number = 0;
-  @Input() max: number = 100;
-  @Input() unit: string = 'm/s';
-  @Input() color: string = '#ff0000';
-  @Input() size: number = 200;
+export default class HalfGaugeComponent {
+  current = input<number>(50);
+  min = input<number>(0);
+  max = input<number>(100);
+  unit = input<string>('m/s');
+  color = input<string>('#ff0000');
+  size = input<number>(200);
+
+  // Stroke thickness as a fraction of width, matching the old radialBar look.
+  private readonly strokeWidth = computed(() => this.size() * 0.1);
+  private readonly radius = computed(() => (this.size() - this.strokeWidth()) / 2);
+  // Baseline y of the semicircle (its flat edge sits at the bottom).
+  private readonly centerY = computed(() => this.radius() + this.strokeWidth() / 2);
+
+  protected readonly stroke = computed(() => this.strokeWidth());
+  // Half-circle footprint: width = size, height = size / 2 (matches the old gauge).
+  protected readonly heightPx = computed(() => this.size() / 2);
+  protected readonly fontSizePx = computed(() => this.size() / 10);
+  protected readonly viewBox = computed(() => `0 0 ${this.size()} ${this.heightPx()}`);
 
-  widthpx: string = '200px';
-  heightpx: string = '200px';
-  paddingTop: string = '20px';
-  label: string = 'm/s';
-  percentage: number = 50;
-  fontsize: string = '50px';
+  // Top semicircle from the left edge to the right edge.
+  protected readonly arcPath = computed(() => {
+    const s = this.strokeWidth() / 2;
+    const cy = this.centerY();
+    return `M ${s} ${cy} A ${this.radius()} ${this.radius()} 0 0 1 ${this.size() - s} ${cy}`;
+  });
+  protected readonly arcLength = computed(() => Math.PI * this.radius());
 
-  ngOnInit() {
-    this.widthpx = this.size + 'px';
-    this.heightpx = this.size * 0.5 + 'px';
-    this.paddingTop = '';
-    this.label = this.current + this.unit;
-    this.percentage = ((this.current - this.min) / (this.max - this.min)) * 100;
-    this.fontsize = this.size / 10 + 'px';
+  protected readonly percentage = computed(() => {
+    const pct = ((this.current() - this.min()) / (this.max() - this.min())) * 100;
+    return Math.max(0, Math.min(100, pct));
+  });
+
+  // The only value that changes per tick: a single attribute on one <path>.
+  protected readonly dashOffset = computed(() => this.arcLength() * (1 - this.percentage() / 100));
+
+  protected readonly label = computed(() => formatGaugeValue(this.current()) + this.unit());
+}
 
-    // apex radial charts are hard coded to work with percentages, so converting to percentage to
-    // accurately represent min and max in chart and then using actual value and unit as label
-    this.chartOptions = {
-      series: [this.percentage],
-      chart: {
-        type: 'radialBar',
-        foreColor: '#eeeeee', // text color
-        redrawOnParentResize: true,
-        offsetY: -100
-      },
-      plotOptions: {
-        radialBar: {
-          startAngle: -90,
-          endAngle: 90,
-          offsetY: 100,
-          hollow: {
-            margin: 10,
-            size: '60%'
-          },
-          track: {
-            background: '#1d1d1d',
-            strokeWidth: '97%',
-            margin: 5, // margin is in pixels
-            dropShadow: {
-              enabled: false,
-              top: 2,
-              left: 0,
-              opacity: 0,
-              blur: 2
-            }
-          },
-          dataLabels: {
-            name: {
-              show: true,
-              color: '#fafafa',
-              fontSize: this.fontsize,
-              fontFamily: undefined,
-              fontWeight: 300,
-              offsetY: -5
-            },
-            value: {
-              show: false
-            }
-          }
-        }
-      },
-      fill: {
-        type: 'solid',
-        colors: [this.color]
-      },
-      labels: [this.label]
-    };
-  }
+function formatGaugeValue(n: number): string {
+  return (Math.round(n * 100) / 100).toFixed(2);
 }

angular-client/src/pages/lap-timer-page/lap-timer-page.component.css

@@ -0,0 +1,12 @@
+.page-grid {
+  margin: 0 16px;
+}
+
+.gauge-wrap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}

angular-client/src/pages/lap-timer-page/lap-timer-page.component.html

@@ -0,0 +1,42 @@
+<div class="page-grid">
+  <p-toast position="top-right" />
+  <p-confirmDialog />
+
+  <mat-grid-list cols="6" gutterSize="15px" rowHeight="1.5rem">
+    <mat-grid-tile [colspan]="6" [rowspan]="8">
+      <sessions-panel />
+    </mat-grid-tile>
+
+    <mat-grid-tile [colspan]="3" [rowspan]="9">
+      <timer-hero />
+    </mat-grid-tile>
+
+    <mat-grid-tile [colspan]="1" [rowspan]="9">
+      <session-summary />
+    </mat-grid-tile>
+
+    <mat-grid-tile [colspan]="2" [rowspan]="5">
+      <info-background svgIcon="speed" title="Speed" style="width: 100%; height: 100%">
+        <div class="gauge-wrap">
+          <half-gauge [current]="liveSpeed()" [max]="100" [min]="0" unit="mph" [color]="speedGaugeColor()" [size]="320" />
+        </div>
+      </info-background>
+    </mat-grid-tile>
+
+    <mat-grid-tile [colspan]="1" [rowspan]="4">
+      <info-background title="Battery" style="width: 100%; height: 100%">
+        <gauge-stat [value]="liveSoc()" unit="%" [color]="socColor()" />
+      </info-background>
+    </mat-grid-tile>
+
+    <mat-grid-tile [colspan]="1" [rowspan]="4">
+      <info-background title="Motor" style="width: 100%; height: 100%">
+        <gauge-stat [value]="liveMotorTemp()" unit="°C" [color]="motorTempColor()" />
+      </info-background>
+    </mat-grid-tile>
+
+    <mat-grid-tile [colspan]="6" [rowspan]="22">
+      <laps-table />
+    </mat-grid-tile>
+  </mat-grid-list>
+</div>