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

20
app.js
View File

@ -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;