From 12b8b74f3810ef3e7b1e363ef5f1c405483825f0 Mon Sep 17 00:00:00 2001
From: Anton Volnuhin <anton@volnuhin.com>
Date: Fri, 30 Jan 2026 19:01:43 +0300
Subject: [PATCH] Show drilled-down sector name in details header

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>
---
 app.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/app.js b/app.js
index 200373c..3afd415 100644
--- a/app.js
+++ b/app.js
@@ -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">