From 6cf5d30d4d92bbb430f8c07caa59c5c55a151546 Mon Sep 17 00:00:00 2001 From: Anton Volnuhin Date: Fri, 30 Jan 2026 16:59:56 +0300 Subject: [PATCH] Fix sunburst center-click reset showing wrong month data The center-click handler used closure-captured variables (russianMonth and originalData) from the initial renderChart call. When switching months via selectMonth, these values were never updated, causing clicks on the center to always restore December's data. Changed originalData from a local variable to a module-level variable (originalSunburstData) that gets updated when months change. Co-Authored-By: Claude Opus 4.5 --- app.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/app.js b/app.js index 7493418..f145f90 100644 --- a/app.js +++ b/app.js @@ -2,6 +2,7 @@ const chartDom = document.getElementById('chart-container'); const myChart = echarts.init(chartDom); let option; +let originalSunburstData = null; // Stores the original data for the current month (for reset on center click) // Function to parse CSV data async function parseCSV(file) { @@ -317,9 +318,9 @@ function getRussianMonthName(dateStr) { // Function to render the chart function renderChart(data) { const sunburstData = transformToSunburst(data); - - // Store the original data for resetting - const originalData = JSON.parse(JSON.stringify(sunburstData)); + + // Store the original data for resetting (module-level variable) + originalSunburstData = JSON.parse(JSON.stringify(sunburstData)); // Get the currently selected month const selectedMonth = document.getElementById('month-select').value; @@ -798,11 +799,13 @@ function renderChart(data) { // Check if click is within the center circle const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2)); if (distance < innerRadius) { - // Reset to original view - option.series.data = originalData.data; - option.graphic.elements[0].style.text = russianMonth + '\n' + originalData.total.toFixed(0).toLocaleString() + ' ₽'; + // Reset to original view - use module-level originalSunburstData + const currentMonth = document.getElementById('month-select').value; + const currentRussianMonth = getRussianMonthName(currentMonth); + option.series.data = originalSunburstData.data; + option.graphic.elements[0].style.text = currentRussianMonth + '\n' + originalSunburstData.total.toFixed(0).toLocaleString() + ' ₽'; myChart.setOption(option, { replaceMerge: ['series'] }); - setupHoverEvents(originalData); + setupHoverEvents(originalSunburstData); } }); @@ -1040,6 +1043,9 @@ async function selectMonth(index) { if (option && option.series && option.series.data) { const sunburstData = transformToSunburst(data); + // Update the module-level original data for center-click reset + originalSunburstData = JSON.parse(JSON.stringify(sunburstData)); + // Update only the series data and preserve layout const oldData = option.series.data; const newData = sunburstData.data;