Skip to content

Feature/bklit#379

Merged
lindesvard merged 6 commits into
mainfrom
feature/bklit
May 29, 2026
Merged

Feature/bklit#379
lindesvard merged 6 commits into
mainfrom
feature/bklit

Conversation

@lindesvard
Copy link
Copy Markdown
Contributor

@lindesvard lindesvard commented May 29, 2026

Summary by CodeRabbit

  • New Features

    • Added animated chart components with smooth transitions and reveal effects.
    • Introduced interactive tooltips with hover-driven positioning and date indicators.
    • Added chart markers and annotations for key events and data points.
    • Implemented referrer spike detection and visualization on analytics charts.
  • Improvements

    • Enhanced chart performance with automatic data decimation for large datasets.
    • Improved hover interactions with optimized re-rendering and spring animations.
    • Updated overview metrics cards and live histogram with new interactive features.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 29, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7a8b7885-4e36-47e8-a88e-f48243cac7e2

📥 Commits

Reviewing files that changed from the base of the PR and between 9a8a3d6 and 0675250.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (79)
  • apps/start/components.json
  • apps/start/package.json
  • apps/start/src/components/charts/animation.ts
  • apps/start/src/components/charts/area-chart.tsx
  • apps/start/src/components/charts/area-gradient-defs.tsx
  • apps/start/src/components/charts/area.tsx
  • apps/start/src/components/charts/bar-chart.tsx
  • apps/start/src/components/charts/bar-x-axis.tsx
  • apps/start/src/components/charts/bar-y-axis.tsx
  • apps/start/src/components/charts/bar.tsx
  • apps/start/src/components/charts/chart-config-context.tsx
  • apps/start/src/components/charts/chart-context.tsx
  • apps/start/src/components/charts/chart-defs.ts
  • apps/start/src/components/charts/chart-formatters.ts
  • apps/start/src/components/charts/chart-reveal-clip.tsx
  • apps/start/src/components/charts/chart-stat-flow.tsx
  • apps/start/src/components/charts/composed-chart.tsx
  • apps/start/src/components/charts/dash-tail-stroke.tsx
  • apps/start/src/components/charts/decimate-time-series.ts
  • apps/start/src/components/charts/fade-edges.ts
  • apps/start/src/components/charts/grid.tsx
  • apps/start/src/components/charts/highlight-segment-bounds.ts
  • apps/start/src/components/charts/highlight-segment.tsx
  • apps/start/src/components/charts/line-chart.tsx
  • apps/start/src/components/charts/line.tsx
  • apps/start/src/components/charts/markers/chart-markers.tsx
  • apps/start/src/components/charts/markers/index.ts
  • apps/start/src/components/charts/markers/marker-group.tsx
  • apps/start/src/components/charts/motion-utils.ts
  • apps/start/src/components/charts/op-dashed-tail.ts
  • apps/start/src/components/charts/op-date-pill.tsx
  • apps/start/src/components/charts/op-hover-probe.tsx
  • apps/start/src/components/charts/op-marker-layer.tsx
  • apps/start/src/components/charts/op-references.tsx
  • apps/start/src/components/charts/op-referrer-spikes.tsx
  • apps/start/src/components/charts/op-series-dots.tsx
  • apps/start/src/components/charts/op-stat-hover-bridge.tsx
  • apps/start/src/components/charts/op-tooltip.tsx
  • apps/start/src/components/charts/path-stroke-utils.ts
  • apps/start/src/components/charts/pattern-area.tsx
  • apps/start/src/components/charts/series-bar-layout.ts
  • apps/start/src/components/charts/series-bar.tsx
  • apps/start/src/components/charts/series-dash-tail-overlay.tsx
  • apps/start/src/components/charts/series-highlight-layer.tsx
  • apps/start/src/components/charts/series-hover-dim.tsx
  • apps/start/src/components/charts/series-markers.tsx
  • apps/start/src/components/charts/series-point-marker.tsx
  • apps/start/src/components/charts/time-series-chart-shell.tsx
  • apps/start/src/components/charts/tooltip/chart-tooltip.tsx
  • apps/start/src/components/charts/tooltip/date-ticker.tsx
  • apps/start/src/components/charts/tooltip/index.ts
  • apps/start/src/components/charts/tooltip/tooltip-box.tsx
  • apps/start/src/components/charts/tooltip/tooltip-content.tsx
  • apps/start/src/components/charts/tooltip/tooltip-dot.tsx
  • apps/start/src/components/charts/tooltip/tooltip-indicator.tsx
  • apps/start/src/components/charts/use-area-segment-highlight.ts
  • apps/start/src/components/charts/use-chart-interaction.ts
  • apps/start/src/components/charts/use-highlight-segment.ts
  • apps/start/src/components/charts/use-line-segment-highlight.ts
  • apps/start/src/components/charts/use-mount-progress.ts
  • apps/start/src/components/charts/use-scheduled-tooltip.ts
  • apps/start/src/components/charts/x-axis.tsx
  • apps/start/src/components/charts/y-axis.tsx
  • apps/start/src/components/overview/overview-line-chart-tooltip.tsx
  • apps/start/src/components/overview/overview-line-chart.tsx
  • apps/start/src/components/overview/overview-live-histogram.tsx
  • apps/start/src/components/overview/overview-metric-card.tsx
  • apps/start/src/components/overview/overview-metrics.tsx
  • apps/start/src/components/overview/overview-top-devices.tsx
  • apps/start/src/components/overview/overview-top-geo.tsx
  • apps/start/src/components/overview/overview-top-sources.tsx
  • apps/start/src/components/report-chart/common/serie-icon.tsx
  • apps/start/src/lib/utils.ts
  • apps/start/src/styles.css
  • bklit-issues.md
  • bklit-upstream-issues.md
  • packages/db/index.ts
  • packages/db/src/services/referrer-spikes.service.ts
  • packages/trpc/src/routers/overview.ts

📝 Walkthrough

Walkthrough

Migrates charts to a VisX-based system with new contexts, shell, tooltip, series components, and overlays. Refactors overview widgets to these primitives. Adds referrer spikes backend service and TRPC route. Updates dependencies, CSS tokens, and icons.

Changes

VisX charting, overview refactor, and referrer spikes

Layer / File(s) Summary
Dependencies, components registry, CSS tokens, and patch docs
apps/start/components.json, apps/start/package.json, apps/start/src/styles.css, bklit-issues.md, bklit-upstream-issues.md
Adds VisX/motion deps, bklit registry, extends chart CSS tokens, and documents upstream patch notes.
Core chart infrastructure: context, shell utilities, motion, decimation, interactions
`apps/start/src/components/charts/*(context
formatters
Series primitives: Line, Area, markers, grid, highlight/hover
`apps/start/src/components/charts/(line
area
Tooltip system and date ticker
apps/start/src/components/charts/tooltip/*
Adds portal-based tooltip with indicator, dots, content, positioning box, and animated date ticker.
Time-series shell and Line/Area/Composed wrappers
apps/start/src/components/charts/time-series-chart-shell.tsx, line-chart.tsx, area-chart.tsx, composed-chart.tsx
Adds chart shell with reveal clip and wrappers extracting series configs.
Categorical BarChart, Bar series, and axes
`apps/start/src/components/charts/(bar-chart
bar
OP overlays, markers, spikes, and stat components
apps/start/src/components/charts/op-*.tsx, chart-stat-flow.tsx
Adds dashed-tail, date pill, hover bridge, marker layer, references, referrer spikes markers, series dots, and stat flow.
Overview charts refactor to VisX and integrations
apps/start/src/components/overview/*
Refactors overview line chart, live histogram, metric cards, and metrics to new primitives; wires range to children; removes legacy tooltip.
Referrer spikes service and TRPC route
packages/db/src/services/referrer-spikes.service.ts, packages/db/index.ts, packages/trpc/src/routers/overview.ts
Adds referrer spikes computation and exposes it via a new TRPC endpoint.
SerieIcon fill support and utility import style
apps/start/src/components/report-chart/common/serie-icon.tsx, apps/start/src/lib/utils.ts
Adds icon fill rendering option and adjusts import quotes in utils.

Sequence Diagram(s)

sequenceDiagram
  rect rgba(66, 135, 245, 0.5)
  participant OverviewClient
  participant TRPC as TRPC overview.getReferrerSpikes
  participant DBService as getReferrerSpikes
  end
  OverviewClient->>TRPC: query(projectId, filters, interval, tz)
  TRPC->>DBService: getReferrerSpikes(input)
  DBService->>DBService: ClickHouse queries and scoring
  DBService-->>TRPC: ReferrerSpikeCluster[]
  TRPC-->>OverviewClient: clusters (formatted dates)
Loading

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Possibly related PRs

  • Openpanel-dev/openpanel#237: Also changes overview metrics/chart rendering and revenue handling, overlapping in overview chart code paths.

Poem

I hop through grids of teal and light,
Lines ripple, bars take measured flight.
A spike appears—referrers sing—
The tooltip blooms with everything.
New springs, new scales, a brighter sight—
Charts reborn in moonlit byte. 🐇📈

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/bklit

@lindesvard lindesvard merged commit 4ccb796 into main May 29, 2026
11 of 12 checks 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