Support DATA_DIR env var for configurable CSV directory,
add docker-compose.yml and .dockerignore for containerized hosting.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Support 3-level drill: category → subcategory → microcategory
- Integrate browser back/forward with drill path and legend selection state
- Cmd-click isolates single series, Opt-click toggles series off
- Dynamic total labels update to reflect only visible series
- Add "Очистить" reset button when series are filtered
- Click month labels to switch to that month's donut view
- Persist timeline drill path in localStorage across reloads
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Move legend from bottom to vertical top-right box with background
- Highlight hovered category in legend (bold text, others dimmed)
- Dim legend color swatches to 0.15 opacity for non-hovered items
- Make drill-down title larger (22px bold centered)
- Reserve right margin (180px) for legend, free up bottom space
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add drill-down into subcategories when clicking a category bar
- Use native ECharts emphasis/blur for category highlighting (focus: series)
- Show per-category labels on all bars via dispatchAction highlight
- Display total sum labels (к) above bars, ₽ on y-axis only
- Add color legend at bottom of chart
- Increase font sizes and angle x-axis labels for readability
- Remove details panel from timeline mode
- Clean up label management: no manual setOption race conditions
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Adds a second visualization mode showing spending across all months
as a stacked bar chart, with a месяц/таймлайн switcher in the header.
Includes side panel with category breakdowns, bar click-to-drill,
and localStorage persistence of the selected view.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Cmd/Ctrl+click: toggle individual months in/out of selection
- Shift+click: select contiguous interval from current to clicked month
This matches standard selection behavior in file managers and lists.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Hold Shift and click months to select multiple, showing aggregated
spending data. Normal click resets to single month selection.
Cannot deselect the last remaining month.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Home icon only appears on narrow screens (≤850px), not desktop
- Added white circular background with subtle shadow for readability
- Icon is larger (28px + padding) for easier touch targeting
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Home icon appears in center only when at least one level deep
- Clicking the icon navigates back to root view
- On narrow screens (≤850px), shows only the home icon (label hidden)
- Black/white styling with hover effect
- Works on both desktop and mobile/touch devices
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Use !important to ensure chart eye btn is hidden on narrow (≤850px)
- Always show eye buttons in details panel on narrow layouts (opacity 0.5)
- Touch devices don't have hover, so eyes need to be visible by default
- Desktop (>850px) retains hover behavior for eye icons
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Smaller font sizes on mobile (10px/9px vs 13px/11px on desktop)
- Bolder font weight on mobile (600) for better readability
- Hide chart eye icon on narrow/stacked layouts (≤850px)
- Center chart at 50% when layout is stacked (≤850px)
- Dynamic font size/weight updates on resize
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- 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>
- Hide center label on screens ≤500px (redundant with details box)
- Increase chart height to 95vw (500px) and 98vw (400px)
- Reduce container padding to minimize white space
- Adjust details box margin and max-height calculation
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add 500px breakpoint: smaller fonts, tighter spacing, smaller
month buttons and previews, center label adjustments
- Add 400px breakpoint for iPhone 13 (390px): even smaller fonts,
reduced padding, compact details box styling
- Title now fits on one line at all mobile sizes
- Month navigator buttons all visible without cutoff
- Center label scales appropriately for small screens
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Use calc() to set details box max-height based on remaining viewport
space after chart (90lvw) and header (~140px). This prevents page
scrolling when hovering items with many subcategories - the details
box scrolls internally instead.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Allow details box to show all categories instead of being cut off
at 300px height on mobile/narrow screens.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
At 1200px and below, reduce chart width to 60% and increase details
box width to 38% (min 340px) to prevent amounts from being truncated.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added chart-wrapper div to contain both chart-container and center-label,
allowing the center-label to be positioned relative to the chart area
regardless of the overall layout (side-by-side or stacked).
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>
Changed from always visible (50% opacity) to hover-only behavior,
matching the eye buttons in the items list below.
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>
- Remove inline display:none from HTML (was overriding opacity)
- Set initial pointer-events:none in CSS to prevent blocking clicks
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>
