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

Fix sunburst center-click reset showing wrong month data

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Anton Volnuhin 2026-01-30 16:59:56 +03:00
parent 9a0589d3f9
commit 6cf5d30d4d
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app.js
View File

@ -2,6 +2,7 @@
const chartDom = document.getElementById('chart-container'); const chartDom = document.getElementById('chart-container');
const myChart = echarts.init(chartDom); const myChart = echarts.init(chartDom);
let option; let option;
let originalSunburstData = null; // Stores the original data for the current month (for reset on center click)
// Function to parse CSV data // Function to parse CSV data
async function parseCSV(file) { async function parseCSV(file) {
@ -318,8 +319,8 @@ function getRussianMonthName(dateStr) {
function renderChart(data) { function renderChart(data) {
const sunburstData = transformToSunburst(data); const sunburstData = transformToSunburst(data);
// Store the original data for resetting // Store the original data for resetting (module-level variable)
const originalData = JSON.parse(JSON.stringify(sunburstData)); originalSunburstData = JSON.parse(JSON.stringify(sunburstData));
// Get the currently selected month // Get the currently selected month
const selectedMonth = document.getElementById('month-select').value; const selectedMonth = document.getElementById('month-select').value;
@ -798,11 +799,13 @@ function renderChart(data) {
// Check if click is within the center circle // Check if click is within the center circle
const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2)); const distance = Math.sqrt(Math.pow(x - centerX, 2) + Math.pow(y - centerY, 2));
if (distance < innerRadius) { if (distance < innerRadius) {
// Reset to original view // Reset to original view - use module-level originalSunburstData
option.series.data = originalData.data; const currentMonth = document.getElementById('month-select').value;
option.graphic.elements[0].style.text = russianMonth + '\n' + originalData.total.toFixed(0).toLocaleString() + ' ₽'; 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'] }); myChart.setOption(option, { replaceMerge: ['series'] });
setupHoverEvents(originalData); setupHoverEvents(originalSunburstData);
} }
}); });
@ -1040,6 +1043,9 @@ async function selectMonth(index) {
if (option && option.series && option.series.data) { if (option && option.series && option.series.data) {
const sunburstData = transformToSunburst(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 // Update only the series data and preserve layout
const oldData = option.series.data; const oldData = option.series.data;
const newData = sunburstData.data; const newData = sunburstData.data;