[Perl] DAQ system for the FAPG.
style make chart tooltips less invasive
Remove title, reduce opacity, shrink padding and font size. Tooltips now show only the value in a compact semi-transparent pill.
Changed files
roles/dashboard/public/js/dashboard/charts.js
@@ -224,16 +224,18 @@
224
224
xAlign: "left",
225
225
yAlign: "top",
226
226
caretSize: 0,
227
Added:
backgroundColor: "rgba(30, 41, 59, 0.7)",
228
Added:
titleFont: { size: 11, weight: "normal" },
229
Added:
bodyFont: { size: 12 },
230
Added:
padding: { x: 8, y: 5 },
231
Added:
cornerRadius: 4,
232
Added:
displayColors: false,
227
233
filter: item => item.datasetIndex === 2,
228
234
callbacks: {
229
Removed:
title: items => {
230
Removed:
const item = items[0];
231
Removed:
const timestamp = item?.chart.data.timestamps?.[item.dataIndex];
232
Removed:
return timestamp ? formatDateTime(timestamp) : "";
233
Removed:
},
235
Added:
title: () => "",
234
236
label: context => {
235
237
const unit = context.dataset.tooltipUnit;
236
Removed:
return `Trend: ${context.formattedValue}${unit ? ` ${unit}` : ""}`;
238
Added:
return `${context.formattedValue}${unit ? ` ${unit}` : ""}`;
237
239
}
238
240
}
239
241
}
roles/dashboard/public/js/dashboard/insights.js
@@ -120,12 +120,13 @@
120
120
xAlign: "left",
121
121
yAlign: "top",
122
122
caretSize: 0,
123
Added:
backgroundColor: "rgba(30, 41, 59, 0.7)",
124
Added:
titleFont: { size: 11, weight: "normal" },
125
Added:
bodyFont: { size: 12 },
126
Added:
padding: { x: 8, y: 5 },
127
Added:
cornerRadius: 4,
123
128
callbacks: {
124
Removed:
title: items => {
125
Removed:
const item = items[0];
126
Removed:
const timestamp = item?.chart.data.timestamps?.[item.dataIndex];
127
Removed:
return timestamp ? formatDateTime(timestamp) : "";
128
Removed:
}
129
Added:
title: () => ""
129
130
}
130
131
}
131
132
}
@@ -182,12 +183,13 @@
182
183
xAlign: "left",
183
184
yAlign: "top",
184
185
caretSize: 0,
186
Added:
backgroundColor: "rgba(30, 41, 59, 0.7)",
187
Added:
titleFont: { size: 11, weight: "normal" },
188
Added:
bodyFont: { size: 12 },
189
Added:
padding: { x: 8, y: 5 },
190
Added:
cornerRadius: 4,
185
191
callbacks: {
186
Removed:
title: items => {
187
Removed:
const item = items[0];
188
Removed:
const timestamp = item?.chart.data.timestamps?.[item.dataIndex];
189
Removed:
return timestamp ? formatDateTime(timestamp) : "";
190
Removed:
},
192
Added:
title: () => "",
191
193
label: context => {
192
194
const value = context.parsed.y;
193
195
if (value === null) return "";