Skip to content

feat: revamp line charts with premium visuals#206

Merged
vide merged 1 commit intomainfrom
feat/line-chart-visual-revamp
Mar 20, 2026
Merged

feat: revamp line charts with premium visuals#206
vide merged 1 commit intomainfrom
feat/line-chart-visual-revamp

Conversation

@vide
Copy link
Owner

@vide vide commented Mar 20, 2026

Summary

Visual overhaul of all line charts across the app (ChargeDetail, DriveDetail, CurrentCharge screens) to look premium and modern, inspired by Robinhood/Tesla/Home Assistant chart designs.

Visual enhancements

  • Smooth cubic Bezier curves — monotone interpolation (Fritsch-Carlson method) replaces jagged lineTo() segments, with guaranteed no-overshoot
  • Gradient fill under each line (color → transparent), with lower alpha for dual-axis charts to avoid occlusion
  • Dashed vertical crosshair on point selection
  • Subtle dashed grid lines — 3 interior lines at 15% opacity (was 5 solid lines at 30%)
  • Glowing data point indicator — 3-layer glow replaces basic bullseye
  • Animated line drawing — 800ms ease-out entrance animation on first appearance
  • Theme-aware tooltipsinverseSurface/inverseOnSurface with shadow, replaces hardcoded dark gray
  • Dual-axis tooltip — colored dot prefixes per series with time label

Code improvements

  • Extracted shared utilities to ChartDrawUtils.kt (LTTB downsampling, monotone cubic path builder, grid/label/chip/crosshair/indicator drawing)
  • Unified duplicated LTTB algorithm between single and dual-axis charts
  • Removed unused Vico dependency (vico-compose-m3 beta)
  • Fixed AAPT error in ic_launcher_accent.xml (?attr/colorPrimary → hardcoded color)

Unchanged

  • Cross-chart synchronization via sharedXFraction
  • Fullscreen landscape mode
  • LTTB downsampling (150 point cap)
  • Y-axis (4 labels) and X-axis (5 labels) layout
  • All screen-level code (no API changes)

Test plan

  • ChargeDetailScreen: verify smooth curves, gradient fill, crosshair, synced tooltips across all 5 charts
  • DriveDetailScreen: verify power chart zero-line still renders correctly with gradient, all 4 charts sync
  • CurrentChargeScreen: verify dual-axis (Voltage+Current) gradient fills don't occlude, colored dot tooltip
  • Fullscreen: tap expand icon on any chart — landscape mode works, chart fills screen
  • Scroll performance: no jank when scrolling through multiple charts
  • Entrance animation: line draws in from left over ~800ms when navigating to detail screens

🤖 Generated with Claude Code

…isuals

- Replace straight lineTo() with monotone cubic Bezier interpolation
  (Fritsch-Carlson method, no overshoot)
- Add gradient fill under lines (verticalGradient, color -> transparent)
- Add dashed vertical crosshair on point selection
- Replace solid grid lines with subtle dashed lines (3 interior only)
- Replace bullseye indicator with 3-layer glow indicator
- Add animated line drawing entrance (800ms ease-out)
- Theme-aware tooltips (inverseSurface/inverseOnSurface + shadow)
- Dual-axis tooltip with colored dot prefixes per series
- Extract shared utilities to ChartDrawUtils.kt (LTTB, path builder,
  grid/label/chip/crosshair/indicator drawing)
- Remove unused Vico dependency
- Fix AAPT error in ic_launcher_accent.xml (attr/colorPrimary)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vide vide merged commit 98d8ce8 into main Mar 20, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant