- 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 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>
- 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>
- 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>
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>
- 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>
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>
