- Scale chart layers on mobile (≤500px) to fill container while
keeping same hole size as desktop (20%)
- Add resize handler to dynamically update proportions when crossing
500px threshold
- Hide center label at 850px (stacked layout) instead of 500px to
prevent overlap with chart
- Center chart at 50% on mobile since details box is below
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Move center label from ECharts canvas to HTML overlay for better font rendering
- Style ₽ symbol separately with lighter color (#888) and slightly smaller size (20px)
- Use tighter line height (1.0) for center label
- Remove "Детали" heading from details box, use total as header
- Remove top border from details header
- Increase header font sizes to 20px
- Add more whitespace above "Top Items:"
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add formatRUB() helper that formats amounts without decimals and uses
U+202F (narrow no-break space) as thousands separator and before ₽ symbol.
This prevents unwanted line breaks within currency amounts.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Clicking on the already-selected month button now returns to root
view when drilled down, providing a quick way to reset the chart
without using browser back or center click.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Bug A: Center click to go back now works after switching months while
drilled down. Fixed by saving root state BEFORE drilled state in
selectMonth, so historyIndex=0 always points to root.
Bug B: Unknown subcategories (not in December data) now get distinct
colors. Fixed by tracking unknownCount separately and using
(predefinedCount + unknownIndex) % 10 to assign colors starting after
the predefined palette positions.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add subcategoryOrder derived from subcategoryColors
- Add sortBySubcategoryOrder helper function
- Update click handler, transformDrillDownData, and mini-chart gradient
to use fixed order instead of value-based sorting
- Update details box to preserve fixed order for drilled-down views
while keeping value-based sorting for root level categories
This ensures subcategories maintain consistent positions when switching
months, even when their values differ (e.g., "Хобби Залины" always comes
before "Подписки" regardless of which has higher spending that month).
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add fixed subcategory color mapping based on December 2025 data
- Update click handler and transformDrillDownData to use getSubcategoryColor
- Rotate mini-charts 90° clockwise to match main chart orientation
- Change month selector active state from blue to neutral gray (#4a4a4a)
- Ensure colors stay consistent when switching months while drilled down
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add currentDrillPath to track category hierarchy during drill-down
- Mini-charts now update to show the same category breakdown when
drilling into a category on the main chart
- Switching months while drilled down preserves the category path,
navigating to the same category in the new month
- Empty state shown for months that don't have the drilled category
- Browser back/forward navigation syncs mini-charts correctly
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Switch to SF Pro / system font stack for consistent ₽ rendering
- Apply font to both HTML and ECharts center text
- Reset chart highlight and details panel when closing modal
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Keep details panel showing sector info when hovering eye button
- Don't reset details when mouse moves from chart to eye button
- Close modals first when pressing browser back button
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Push drill-down states to browser history via history.pushState()
- Listen for popstate event to handle browser back/forward
- Mouse back/forward buttons and browser buttons now navigate drill-down
- Click center still works (calls history.back())
- Reset details panel when mouse leaves chart sector
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add custom column sorting (click headers to sort, click again to reverse)
- Add row click to open detail modal showing all transaction fields
- Row detail modal uses table layout with labels and values side by side
- Always show scrollbars, reset scroll position when modal opens
- Global escape key handler closes detail modal first, then main modal
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Set isInsideSection=true for all depth levels (1, 2, and others)
- Only reset to default view if not inside a section
- Prevents mouseout from resetting header when moving between sectors
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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>
- Replace "Total" with the current month name (e.g., "Декабрь")
- Add eye icon to header that opens modal with all transactions
- Header eye button is always visible (50% opacity)
- When hovering a sector, header shows sector name with eye button
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Changed inactivity timeout from 1 second to 0.5 seconds
- Added smooth 0.2s ease-out opacity transition for gradual fade
- Switched from display:none to opacity for smoother hide effect
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The floating eye button now only shows while the mouse is actively
moving over a sector. After 1 second of no mouse movement, the button
hides to keep the chart cleaner. The button remains visible when
hovering directly over it.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add eye icon that appears when hovering over chart sectors
- Position button at inner edge for left-side sectors, outer edge for right-side
- Click eye button to open transaction details modal
- Maintain sector highlight and details panel when hovering over button
- Override chart cursor to only show pointer on eye button, not sectors
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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>
Replace dropdown selector with a visual navigator featuring:
- Left/right arrow buttons for month navigation
- Clickable month buttons with mini donut chart previews
- Russian month labels (e.g., "Январь'25")
- Responsive layout for mobile screens
- Arrows disable at navigation boundaries
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
