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

Show drilled-down sector name in details header

Browse Source 
When clicking into a sector to drill down, the details header now shows
the sector name instead of the month name. The contextName parameter is
passed from the click handler to setupHoverEvents.

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

13
app.js
View File

@ -784,8 +784,8 @@ function renderChart(data) {
myChart.setOption(option, { replaceMerge: ['series'] }); myChart.setOption(option, { replaceMerge: ['series'] });
// Update hover events with the new data structure // Update hover events with the new data structure, passing the drilled-down name
setupHoverEvents({ total: params.value, data: newData }); setupHoverEvents({ total: params.value, data: newData }, params.name);
} }
}); });
@ -1165,7 +1165,7 @@ function adjustChartSize() {
} }
// Add mouseover handler to update details box // Add mouseover handler to update details box
function setupHoverEvents(sunburstData) { function setupHoverEvents(sunburstData, contextName = null) {
const topItemsElement = document.getElementById('top-items'); const topItemsElement = document.getElementById('top-items');
// Create a container for details header with name and amount // Create a container for details header with name and amount
@ -1521,9 +1521,10 @@ function setupHoverEvents(sunburstData) {
// Show the default view with top categories // Show the default view with top categories
function showDefaultView() { function showDefaultView() {
// Use month name instead of "Total" // Use context name (drilled-down sector) if provided, otherwise use month name
const selectedMonth = document.getElementById('month-select').value; const selectedMonth = document.getElementById('month-select').value;
const monthName = getRussianMonthName(selectedMonth); const monthName = getRussianMonthName(selectedMonth);
const displayName = contextName || monthName;
// Create a virtual "data" object for the total view that contains all transactions // Create a virtual "data" object for the total view that contains all transactions
const allTransactions = []; const allTransactions = [];
@ -1532,13 +1533,13 @@ function setupHoverEvents(sunburstData) {
allTransactions.push(...category.transactions); allTransactions.push(...category.transactions);
} }
}); });
const totalData = { name: monthName, transactions: allTransactions }; const totalData = { name: displayName, transactions: allTransactions };
currentHoveredData = totalData; currentHoveredData = totalData;
detailsHeader.innerHTML = ` detailsHeader.innerHTML = `
<span class="hover-name"> <span class="hover-name">
<span class="color-circle" style="background-color: #5470c6;"></span> <span class="color-circle" style="background-color: #5470c6;"></span>
${monthName} ${displayName}
</span> </span>
<button class="eye-btn header-eye-btn" title="View all transactions"> <button class="eye-btn header-eye-btn" title="View all transactions">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">