[Perl] DAQ system for the FAPG.
feat show period in probe variation label
The percentage change now reads e.g. "+2.4% over last 1 week" instead of just "+2.4%".
roles/dashboard/public/js/dashboard/charts.js
@@ -7,6 +7,7 @@
7
7
TRANSPARENT_CHART_COLOR
8
8
} from "./constants.js";
9
9
import { ageMs, formatAge, formatChartTime, formatDateTime, replaceChildren } from "./format.js";
10
Added:
import { timeframeRangeLabel } from "./timeframe.js";
10
11
11
12
function chartElement(probe) {
12
13
return document.getElementById(`chart-${probe}`);
@@ -120,7 +121,7 @@
120
121
}));
121
122
}
122
123
123
Removed:
function renderVariation(probe, trend) {
124
Added:
function renderVariation(probe, trend, timeframeLabel) {
124
125
const element = document.querySelector(`[data-variation="${probe}"]`);
125
126
if (!element) return;
126
127
@@ -141,10 +142,11 @@
141
142
const percent = ((last - first) / Math.abs(first)) * 100;
142
143
const sign = percent >= 0 ? "+" : "";
143
144
const color = percent > 0 ? "text-success" : percent < 0 ? "text-danger" : "text-body-secondary";
145
Added:
const periodText = timeframeLabel ? ` over last ${timeframeLabel}` : "";
144
146
145
147
element.className = `small fw-normal ${color}`;
146
Removed:
element.textContent = `${sign}${percent.toFixed(1)}%`;
147
Removed:
element.setAttribute("aria-label", `${sign}${percent.toFixed(1)} percent change over period`);
148
Added:
element.textContent = `${sign}${percent.toFixed(1)}%${periodText}`;
149
Added:
element.setAttribute("aria-label", `${sign}${percent.toFixed(1)} percent change${periodText}`);
148
150
}
149
151
150
152
function registerTopLeftTooltipPositioner() {
@@ -300,7 +302,7 @@
300
302
? `Latest: ${latest.value} ${latest.unit || ""} at ${formatDateTime(latest.timestamp)} (${formatAge(ageMs(latest.timestamp))})`
301
303
: "No readings found for this probe yet.";
302
304
}
303
Removed:
renderVariation(probe, series.trend);
305
Added:
renderVariation(probe, series.trend, timeframeRangeLabel(timeframe.selected(), timeframe.range()));
304
306
renderMessageTable(probe, data.readings);
305
307
} catch (error) {
306
308
if (error.name === "AbortError") return;