[Perl] DAQ system for the FAPG.
fix simplify graph tooltips
Show only the full timestamp and trend value in chart tooltips. Hide raw percentile and variability values.
roles/dashboard/public/js/dashboard/charts.js
@@ -35,17 +35,19 @@
35
35
}
36
36
37
37
function chartSeries(rows, timeframe) {
38
Removed:
const series = { labels: [], lower: [], upper: [], trend: [] };
38
Added:
const series = { labels: [], timestamps: [], lower: [], upper: [], trend: [] };
39
39
40
40
rows.forEach(row => {
41
41
if (row.gap && series.labels.length) {
42
42
series.labels.push("");
43
Added:
series.timestamps.push(null);
43
44
series.lower.push(null);
44
45
series.upper.push(null);
45
46
series.trend.push(null);
46
47
}
47
48
48
49
series.labels.push(formatChartTime(row.timestamp, timeframe));
50
Added:
series.timestamps.push(row.timestamp);
49
51
series.lower.push(row.lower === null ? null : Number(row.lower));
50
52
series.upper.push(row.upper === null ? null : Number(row.upper));
51
53
series.trend.push(row.value === null ? null : Number(row.value));
@@ -99,13 +101,14 @@
99
101
};
100
102
}
101
103
102
Removed:
function createChart(canvas, series, trendLabel, yBounds, timeframe) {
104
Added:
function createChart(canvas, series, trendLabel, trendUnit, yBounds, timeframe) {
103
105
registerTopLeftTooltipPositioner();
104
106
105
107
return new Chart(canvas, {
106
108
type: "line",
107
109
data: {
108
110
labels: series.labels,
111
Added:
timestamps: series.timestamps,
109
112
datasets: [
110
113
{
111
114
label: "Raw lower percentile",
@@ -132,7 +135,8 @@
132
135
backgroundColor: PRIMARY_CHART_COLOR,
133
136
pointBackgroundColor: PRIMARY_CHART_COLOR,
134
137
pointRadius: 0,
135
Removed:
pointHoverRadius: 0
138
Added:
pointHoverRadius: 0,
139
Added:
tooltipUnit: trendUnit
136
140
}
137
141
]
138
142
},
@@ -152,7 +156,19 @@
152
156
position: "dashboardTopLeft",
153
157
xAlign: "left",
154
158
yAlign: "top",
155
Removed:
caretSize: 0
159
Added:
caretSize: 0,
160
Added:
filter: item => item.datasetIndex === 2,
161
Added:
callbacks: {
162
Added:
title: items => {
163
Added:
const item = items[0];
164
Added:
const timestamp = item?.chart.data.timestamps?.[item.dataIndex];
165
Added:
return timestamp ? formatDateTime(timestamp) : "";
166
Added:
},
167
Added:
label: context => {
168
Added:
const unit = context.dataset.tooltipUnit;
169
Added:
return `Trend: ${context.formattedValue}${unit ? ` ${unit}` : ""}`;
170
Added:
}
171
Added:
}
156
172
}
157
173
}
158
174
}
@@ -179,14 +195,16 @@
179
195
const trendLabel = `${probe} ${unit ? `(${unit})` : ""} trend`;
180
196
181
197
if (!charts.has(probe)) {
182
Removed:
charts.set(probe, createChart(canvas, series, trendLabel, yBounds, timeframe.selected()));
198
Added:
charts.set(probe, createChart(canvas, series, trendLabel, unit, yBounds, timeframe.selected()));
183
199
} else {
184
200
const chart = charts.get(probe);
185
201
chart.data.labels = series.labels;
202
Added:
chart.data.timestamps = series.timestamps;
186
203
chart.data.datasets[0].data = series.lower;
187
204
chart.data.datasets[1].data = series.upper;
188
205
chart.data.datasets[2].data = series.trend;
189
206
chart.data.datasets[2].label = trendLabel;
207
Added:
chart.data.datasets[2].tooltipUnit = unit;
190
208
chart.options.scales.x.ticks.maxTicksLimit = TIMEFRAMES[timeframe.selected()].ticks;
191
209
chart.options.scales.y.min = yBounds.min;
192
210
chart.options.scales.y.max = yBounds.max;