-
+
diff --git a/angular-client/src/components/half-gauge/half-gauge.component.ts b/angular-client/src/components/half-gauge/half-gauge.component.ts
index 1d55d927..1f90985f 100644
--- a/angular-client/src/components/half-gauge/half-gauge.component.ts
+++ b/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
| 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(50);
+ min = input(0);
+ max = input(100);
+ unit = input('m/s');
+ color = input('#ff0000');
+ size = input(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 .
+ 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);
}
diff --git a/angular-client/src/pages/lap-timer-page/lap-timer-page.component.css b/angular-client/src/pages/lap-timer-page/lap-timer-page.component.css
new file mode 100644
index 00000000..35b5128e
--- /dev/null
+++ b/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;
+}
diff --git a/angular-client/src/pages/lap-timer-page/lap-timer-page.component.html b/angular-client/src/pages/lap-timer-page/lap-timer-page.component.html
new file mode 100644
index 00000000..c79b1abc
--- /dev/null
+++ b/angular-client/src/pages/lap-timer-page/lap-timer-page.component.html
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @if (timer.laps().length === 0) {
+
+ @if (timer.activeSession()) {
+
+ } @else {
+
+ }
+
+ } @else {
+
+
+
+ | # |
+ Duration |
+ Δ Best |
+ Time of Day |
+ Started At |
+ Run |
+ Avg Speed |
+ Energy |
+ Max Temp |
+
+
+
+
+ | {{ lap.number }} |
+ {{ formatLapMs(lap.durationMs) }} |
+
+ @if (isBestLap(lap)) {
+ flag —
+ } @else {
+ {{ formatLapDelta(lap) }}
+ }
+ |
+ {{ lap.endEpochMs | date: 'HH:mm:ss.SSS' }} |
+ {{ lap.startEpochMs | date: 'HH:mm:ss.SSS' }} |
+ {{ lap.runId ?? '—' }} |
+
+ @if (lap.stats.avgSpeed !== null) {
+ {{ lap.stats.avgSpeed | number: '1.0-0' }} mph
+ } @else {
+ —
+ }
+ |
+
+ @if (lap.stats.energyUsed !== null) {
+ {{ lap.stats.energyUsed | number: '1.2-2' }}%
+ } @else {
+ —
+ }
+ |
+
+ @if (lap.stats.maxMotorTemp !== null) {
+ {{ lap.stats.maxMotorTemp | number: '1.0-0' }}°C
+ } @else {
+ —
+ }
+ |
+
+
+
+ }
+
+
{{ timer.lapCount() }}
+
LAPS
+
+
+ Best
+
+ @if (timer.bestLap(); as best) {
+ {{ formatLapMs(best.durationMs) }}
+ } @else {
+ —
+ }
+
+
+
+ Avg
+
+ @if (timer.lapCount() > 0) {
+ {{ formatLapMs(timer.averageLapTime()) }}
+ } @else {
+ —
+ }
+
+
+
+ Energy
+ {{ timer.totalEnergyUsed() | number: '1.2-2' }}%
+
+
+ Run
+ {{ timer.activeSession()?.runIdAtSessionStart ?? '—' }}
+
+
+
+
+ @if (timer.sessions().length === 0) {
+
+
+
+ } @else {
+
+ }
+
+
TOTAL
+
{{ timer.formattedTotal() }}
+
+
+
LAP {{ timer.lapCount() + 1 }}
+
{{ timer.formattedCurrentLap() }}
+
{{ currentLapDeltaText() }}
+
+
+ @if (!timer.activeSession()) {
+
+ } @else if (timer.isIdle()) {
+
+
+ } @else if (timer.isRunning()) {
+
+
+
+ } @else if (timer.isPaused()) {
+
+
+
+
+ }
+
+