anton/visual-spending
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix header blinking on hover by tracking section state

Browse Source 
- Set isInsideSection=true for all depth levels (1, 2, and others)
- Only reset to default view if not inside a section
- Prevents mouseout from resetting header when moving between sectors

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Anton Volnuhin 2026-01-30 19:04:15 +03:00
parent 12b8b74f38
commit bd6b73b389
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app.js
View File

@ -1601,6 +1601,7 @@ function setupHoverEvents(sunburstData, contextName = null) {
// Handle subcategory nodes (depth 2): show microcategories and transactions without microcategory
if (depth === 2) {
isInsideSection = true;
console.log('DEBUG: Hovered subcategory node:', params.name, 'Transactions:', params.data.transactions, 'Children:', params.data.children);
const itemColor = params.color || (params.data.itemStyle ? params.data.itemStyle.color : '#cccccc');
updateDetailsHeader(params.name, params.value, itemColor, params.data);
@ -1624,6 +1625,7 @@ function setupHoverEvents(sunburstData, contextName = null) {
}
// Handle category nodes (depth 1): show subcategories and transactions without microcategory
if (depth === 1) {
isInsideSection = true;
const itemColor = params.color || (params.data.itemStyle ? params.data.itemStyle.color : '#cccccc');
updateDetailsHeader(params.name, params.value, itemColor, params.data);
const MAX_DETAIL_ITEMS = 10;
@ -1720,13 +1722,13 @@ function setupHoverEvents(sunburstData, contextName = null) {
// When mouse leaves a section but is still within the chart, we'll handle it with mousemove
myChart.on('mouseout', function(params) {
if (params.data) {
isInsideSection = false;
isOverChartSector = false;
// Hide the floating eye button (unless hovering over it)
hideChartEyeButton();
// Reset details with a small delay to allow eye button mouseenter to fire first
// But only if we're not still inside another section
setTimeout(() => {
if (!isOverEyeButton) {
if (!isOverEyeButton && !isInsideSection) {
showDefaultView();
}
}, 50);
@ -1735,9 +1737,9 @@ function setupHoverEvents(sunburstData, contextName = null) {
// Add back the downplay event handler - this is triggered when sections lose emphasis
myChart.on('downplay', function(params) {
// Reset to default view when a section is no longer emphasized (unless hovering eye button)
// Reset to default view when a section is no longer emphasized (unless hovering eye button or still in section)
setTimeout(() => {
if (!isOverEyeButton) {
if (!isOverEyeButton && !isInsideSection) {
showDefaultView();
}
}, 50);