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'] });
// Update hover events with the new data structure
setupHoverEvents({ total: params.value, data: newData });
// Update hover events with the new data structure, passing the drilled-down name
setupHoverEvents({ total: params.value, data: newData }, params.name);
}
});
@ -1165,7 +1165,7 @@ function adjustChartSize() {
}
// Add mouseover handler to update details box
function setupHoverEvents(sunburstData) {
function setupHoverEvents(sunburstData, contextName = null) {
const topItemsElement = document.getElementById('top-items');
// Create a container for details header with name and amount
@ -1521,9 +1521,10 @@ function setupHoverEvents(sunburstData) {
// Show the default view with top categories
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 monthName = getRussianMonthName(selectedMonth);
const displayName = contextName || monthName;
// Create a virtual "data" object for the total view that contains all transactions
const allTransactions = [];
@ -1532,13 +1533,13 @@ function setupHoverEvents(sunburstData) {
allTransactions.push(...category.transactions);
}
});
const totalData = { name: monthName, transactions: allTransactions };
const totalData = { name: displayName, transactions: allTransactions };
currentHoveredData = totalData;
detailsHeader.innerHTML = `
<span class="hover-name">
<span class="color-circle" style="background-color: #5470c6;"></span>
${monthName}
${displayName}
</span>
<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">