QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-06-06 03:09:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(charts): drop the color dot from sankey tooltip context

Browse Source 
The hover highlight on the diagram already identifies the ribbon; the
swatch repeated it inside the card. Names alone keep the context line
quieter.
This commit is contained in:
Guillem Arias
2026-06-05 09:43:35 +02:00
parent 1011db2883
commit 10b9291221
1 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/javascript/controllers/sankey_chart_controller.js
View File

@@ -452,7 +452,6 @@ export default class extends Controller {
d.value,
d.percentage,
this.#tooltipContext(
d.source.color,
`${this.#esc(d.source.name)} → ${this.#esc(d.target.name)}`,
),
);
@@ -480,7 +479,7 @@ export default class extends Controller {
event,
d.value,
d.percentage,
this.#tooltipContext(d.color, this.#esc(d.name)),
this.#tooltipContext(this.#esc(d.name)),
);
})
.on("mousemove", (event) => this.#updateTooltipPosition(event))
@@ -509,7 +508,7 @@ export default class extends Controller {
event,
d.value,
d.percentage,
this.#tooltipContext(d.color, this.#esc(d.name)),
this.#tooltipContext(this.#esc(d.name)),
);
})
.on("mousemove", (event) => this.#updateTooltipPosition(event))
@@ -547,11 +546,11 @@ export default class extends Controller {
);
}
// Context line shared by node and link tooltips: a swatch dot tying the
// card to the hovered ribbon/node color, plus the (escaped) name(s).
#tooltipContext(color, label) {
const dot = `<span class="inline-block shrink-0 rounded-full" style="width: 8px; height: 8px; background: ${this.#esc(color || "var(--color-gray-400)")};"></span>`;
return `<div class="flex items-center gap-1.5 text-xs text-secondary mb-1">${dot}<span class="min-w-0 truncate">${label}</span></div>`;
// Context line shared by node and link tooltips: the (escaped) name(s) of
// what's hovered. No color swatch — the hover highlight on the diagram
// itself already says which ribbon the card belongs to.
#tooltipContext(label) {
return `<div class="text-xs text-secondary mb-1 truncate">${label}</div>`;
}
#showTooltip(event, value, percentage, contextHtml = null) {