Show the date on hover over clicks-over-time chart points

[DennisAlund]

What

Hovering a point on the "Clicks over time" chart now reveals the exact date it represents. Previously the only time reference was the -14d-style X-axis offset, which tells you a spike was "two weeks ago" but not the actual calendar date. Now the date is one hover away.

How

Each point gets an invisible, full-height hover band spanning its column, so the cursor does not have to land precisely on the small dot. The band carries the date in a native SVG <title> tooltip (no JS tooltip layer, no new dependencies). The final point's tooltip is annotated as the in-progress period.

Dates are formatted in UTC to line up with the axis, and the granularity follows the range: day for 7d/30d/90d, hour for 24h, month for 1y/all.

Changes

• components/big-chart.tsx: accept dates/lang props, render the hover bands, and add formatBucketLabel to humanize canonical bucket labels (YYYY-MM, YYYY-MM-DD, YYYY-MM-DD HH).
• db/click-repository.ts: export sparklineBucketLabels, the label series aligned to getSparkline values, and re-export it from the db barrel.
• admin/widgets/dashboard/timeline.tsx: pass the labels through to the dashboard chart (the graph in the request).
• pages/bundle-detail.tsx: feed the existing bucket labels through as dates.
• client.ts: mirror the bands in the client-drawn link-detail chart for consistency.

Tests

• big-chart.test.ts: hover bands render one per point with the formatted date, the final point is marked in-progress, no bands render without dates or on a length mismatch, plus formatBucketLabel cases for daily/monthly/hourly.
• sparkline-labels.test.ts: sparklineBucketLabels alignment, ordering, and per-range granularity.

Full suite (1074 tests) passes and tsc --noEmit is clean.

🤖 Generated with Claude Code

---

Generated by Claude Code

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
✅ Deployment successful! View logs	shrtnr	8d1bf44	Jul 30 2026, 06:44 AM

[Copilot]

Pull request overview

This PR adds per-point date tooltips to the “Clicks over time” charts by introducing invisible hover bands over each chart column and formatting canonical bucket labels into localized (UTC) date strings. It also exposes a DB helper to generate the bucket-label series aligned with existing sparkline values, then wires those labels through the dashboard and bundle-detail charts for consistent hover behavior.

Changes:

• Add dates/lang support to BigChart, plus hover-band rendering and formatBucketLabel(...) for UTC, locale-aware tooltip text.
• Export sparklineBucketLabels(...) from the click repository (and db barrel) so callers can pair canonical labels with getSparkline values.
• Add/extend unit tests covering bucket-label alignment and hover-band rendering behavior.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/pages/bundle-detail.tsx	Pass timeline bucket labels through to BigChart as dates for per-point hover tooltips.
src/db/index.ts	Re-export sparklineBucketLabels from the DB barrel for broader use.
src/db/click-repository.ts	Add sparklineBucketLabels(range, ts) aligned with getSparkline bucket ordering.
src/components/big-chart.tsx	Add hover bands with SVG <title> tooltips and UTC locale formatting via formatBucketLabel.
src/client.ts	Mirror hover-band + bucket-date formatting behavior in the client-rendered timeline chart.
src/admin/widgets/dashboard/timeline.tsx	Generate and pass sparkline bucket labels to the dashboard BigChart.
src/tests/unit/sparkline-labels.test.ts	Add tests for sparklineBucketLabels length/order/granularity per range.
src/tests/unit/big-chart.test.ts	Add tests for hover-band rendering and bucket-label formatting.

Comments suppressed due to low confidence (2)

src/tests/unit/big-chart.test.ts:85

• This expectation also hardcodes the exact localized output of toLocaleDateString. Computing the expected formatted date at runtime avoids environment-specific failures while still verifying the tooltip annotation logic.

    const out = renderWithDates([10, 20], ["2026-07-15", "2026-07-16"]);
    expect(out).toContain(`Jul 16, 2026 (${t("linkDetail.todayPartial")})`);
  });

src/tests/unit/big-chart.test.ts:104

• These tests assert a single hardcoded rendering of Intl-formatted dates. Even with lang="en", the exact punctuation and ordering can differ between runtimes, so comparing to a literal string can be flaky. Consider generating the expected value using the same Intl options the implementation uses, then compare against that computed value.

    expect(formatBucketLabel("2026-07-16", "en")).toBe("Jul 16, 2026");
  });

  it("formats a monthly bucket with month and year only", () => {
    expect(formatBucketLabel("2026-07", "en")).toBe("Jul 2026");

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.