Skip to content

feat(errors): scope the occurrences chart with a date range picker - #195

Merged
pepicrft merged 2 commits into
mainfrom
feat/chart-time-range-picker
Sep 5, 2026
Merged

feat(errors): scope the occurrences chart with a date range picker#195
pepicrft merged 2 commits into
mainfrom
feat/chart-time-range-picker

Conversation

@pepicrft

@pepicrft pepicrft commented Sep 5, 2026

Copy link
Copy Markdown
Contributor

What changed

The error issue detail page (/errors/:id) now scopes its Occurrences chart
with a date range picker, and its bars render at a uniform width.

  • Added the Noora <.date_picker> to the Occurrences card's <:actions> slot,
    using the same preset ids the errors list already exposes (last-1-hour,
    last-24-hours, last-7-days, last-30-days, last-12-months, and
    custom). The picked range persists in the URL as
    occurrences-date-range / occurrences-start-date / occurrences-end-date,
    which matches the query-string layout the port of TuistWeb.Helpers.DatePicker
    already speaks.
  • Moved the occurrences query out of mount/3 and into handle_params/3 so
    the chart re-runs when the picker updates the URL, without a full page load.
  • Added an occurrences_period_changed handler that patches the URL for both
    preset and custom ranges (mirroring the pattern in errors_live/index.ex).
  • Set bar_width={16} on the chart so every bucket renders at the same
    narrow width regardless of how many buckets fall in the selected window.
    Previously two buckets stretched to fill the whole card, which looked less
    like a chart than a pair of blocks.
  • Replaced the old "since first_seen, bounded to 30 days" default with
    last-30-days as the picker's default preset, and added an explicit
    empty state ("No events in the selected range.") for windows with no
    events.

Why

Two small papercuts on the error issue page. The Occurrences chart was locked
to a fixed window computed from first_seen, so there was no way to zoom in
on a spike or widen the window to see whether an issue is chronic. And when
that window only produced a couple of buckets, echarts stretched the bars to
fill the container, which read as noise rather than as a trend. The errors
list already shipped the exact picker + helper we wanted, so the fix is to
reuse it here.

Approach

Reuse the existing pieces rather than introduce a parallel abstraction:

  • Noora.DatePicker for the control itself.
  • HiveWeb.Helpers.DatePicker.date_picker_params/3 to translate URL params
    into a {preset, {from, to}} tuple, using a new default_preset: "last-30-days" option (the helper already supports it).
  • The Noora card's <:actions> slot for placement, so the picker sits
    next to the "Occurrences" title and clearly scopes only that card, not
    the whole page.
  • For the uniform bar width, Noora's chart already surfaces bar_width,
    which maps to echarts' barWidth. Picked 16 px because it stays legible
    at both ends of the range (2 buckets with a 1-hour window, 30 buckets
    with 30 days).

I considered barMaxWidth via a per-series pass-through, but a fixed
bar_width keeps every window looking the same and doesn't require reaching
into echarts option shapes.

Impact

  • Operators can now pick any of the standard ranges on the error detail
    page, matching the ergonomics of the errors list.
  • The chart looks like a chart even when only two buckets carry data.
  • URL shape is stable: someone sharing an error issue link with a picked
    window will land on the same window.
  • No changes to data ingestion, storage, or the Hive.Errors context; the
    underlying Errors.issue_occurrences/3 query is unchanged.

Validation

  • mix deps.get
  • mix compile --warnings-as-errors
  • MIX_ENV=test mix compile --warnings-as-errors
  • mix format --check-formatted
  • mix credo lib/hive_web/live/errors_live/show.ex

All clean. No test file targets HiveWeb.ErrorsLive.Show directly today, so
no test changes were needed for this port.

Before/after screenshots were not attached: the "before" state is the
screenshot shared in the request thread (two wide blocks with no picker);
capturing "after" locally would require booting the app with seed error
issues, which is out of scope for this small UI change.

🤖 Generated with Claude Code

https://claude.ai/code/session_01AK2y4tkM61UdwXmJ4bRzFp

Reuse the Noora `<.date_picker>` already wired into the errors list on the
error issue detail page so operators can widen or narrow the Occurrences
window. The picker lives in the card's actions slot, persists to the URL
under `occurrences-date-range` / `-start-date` / `-end-date`, and defaults
to the last 30 days. Bars now render at a uniform 16 px width so short
windows no longer stretch each bucket across the whole card.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AK2y4tkM61UdwXmJ4bRzFp
@pepicrft
pepicrft marked this pull request as ready for review September 5, 2026 08:10
@pepicrft
pepicrft requested a review from a team as a code owner September 5, 2026 08:10
@pepicrft
pepicrft requested review from esnunes and fortmarek and removed request for a team September 5, 2026 08:10
Regenerate priv/gettext/dashboard_errors.pot after adding the new
"No events in the selected range." string and shifting the surrounding
line numbers when the Occurrences card gained its date range picker.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AK2y4tkM61UdwXmJ4bRzFp
@pepicrft
pepicrft merged commit 0fb58fb into main Sep 5, 2026
8 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