feat(errors): scope the occurrences chart with a date range picker - #195
Merged
Conversation
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
marked this pull request as ready for review
September 5, 2026 08:10
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What changed
The error issue detail page (
/errors/:id) now scopes its Occurrences chartwith a date range picker, and its bars render at a uniform width.
<.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, andcustom). The picked range persists in the URL asoccurrences-date-range/occurrences-start-date/occurrences-end-date,which matches the query-string layout the port of
TuistWeb.Helpers.DatePickeralready speaks.
mount/3and intohandle_params/3sothe chart re-runs when the picker updates the URL, without a full page load.
occurrences_period_changedhandler that patches the URL for bothpreset and custom ranges (mirroring the pattern in
errors_live/index.ex).bar_width={16}on the chart so every bucket renders at the samenarrow 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.
last-30-daysas the picker's default preset, and added an explicitempty 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 inon 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.DatePickerfor the control itself.HiveWeb.Helpers.DatePicker.date_picker_params/3to translate URL paramsinto a
{preset, {from, to}}tuple, using a newdefault_preset: "last-30-days"option (the helper already supports it).card's<:actions>slot for placement, so the picker sitsnext to the "Occurrences" title and clearly scopes only that card, not
the whole page.
chartalready surfacesbar_width,which maps to echarts'
barWidth. Picked 16 px because it stays legibleat both ends of the range (2 buckets with a 1-hour window, 30 buckets
with 30 days).
I considered
barMaxWidthvia a per-series pass-through, but a fixedbar_widthkeeps every window looking the same and doesn't require reachinginto echarts option shapes.
Impact
page, matching the ergonomics of the errors list.
window will land on the same window.
Hive.Errorscontext; theunderlying
Errors.issue_occurrences/3query is unchanged.Validation
mix deps.getmix compile --warnings-as-errorsMIX_ENV=test mix compile --warnings-as-errorsmix format --check-formattedmix credo lib/hive_web/live/errors_live/show.exAll clean. No test file targets
HiveWeb.ErrorsLive.Showdirectly today, sono 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