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.

Commit
18de01024f2c8df417323dbfb731b7ba51e3ab6b
Author
GPT-5 medium <codex@openai.com>
Author date
Committer
GPT-5 medium <codex@openai.com>
Committer date
Changed files
roles/dashboard/public/js/dashboard/charts.js
index e3cb4a50..c20425e4 100644..100644
@@ -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
index 6ce80004..ab7a3d85 100644..100644
@@ -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 "";