QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-05-07 12:54:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix budget donut chart hiding center content on segment hover (#1551)

Browse Source 
* Fix budget donut chart hiding center content on segment hover

* Preserve segment hover in center unless leaving the unused arc

The unused arc has no interactive link in its center template, so
moving from it into the center content should restore default content(including the Edit Budget link) immediately. All other segments have a DS::Link in their center template that must remain clickable after the cursor moves from the arc into the center.

Pass the D3 datum into the mouseleave handler to read d.data.id, then clear hover when either (a) the departing segment is the unused arc, or (b) the cursor is not heading into contentContainerTarget.
This commit is contained in:
Xing Hong
2026-04-26 16:32:20 +09:00
committed by GitHub
parent 162caf0e9f
commit 9d10ab3309
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/javascript/controllers/donut_chart_controller.js
View File

@@ -26,12 +26,14 @@ export default class extends Controller {
this.#draw();
document.addEventListener("turbo:load", this.#redraw);
this.element.addEventListener("mouseleave", this.#clearSegmentHover);
this.contentContainerTarget.addEventListener("mouseleave", this.#clearSegmentHover);
}
disconnect() {
this.#teardown();
document.removeEventListener("turbo:load", this.#redraw);
this.element.removeEventListener("mouseleave", this.#clearSegmentHover);
this.contentContainerTarget.removeEventListener("mouseleave", this.#clearSegmentHover);
}
get #data() {
@@ -151,8 +153,12 @@ export default class extends Controller {
this.#handleSegmentHover(event);
}, 10);
})
.on("mouseleave", () => {
.on("mouseleave", (event, d) => {
clearTimeout(hoverTimeout);
const leavingUnused = d.data.id === this.unusedSegmentIdValue;
if (leavingUnused || !this.contentContainerTarget.contains(event.relatedTarget)) {
this.#clearSegmentHover();
}
})
.on("click", (event, d) => {
if (this.enableClickValue) {