fix: show zero baseline on deployment metrics charts when no data in range#98
Merged
Conversation
When no data exists for the selected time window, Highcharts was hiding both axes entirely. Now the y-axis always starts at 0 (min: 0, showEmpty: true) and the x-axis is pinned to the selected range window so the chart stays visible with a flat 0 baseline. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Deploying deploys-app--console with
|
| Latest commit: |
2638e3e
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://596bc510.deploys-app--console.pages.dev |
| Branch Preview URL: | https://claude-infallible-pike-aa74a.deploys-app--console.pages.dev |
In Svelte 5, $effect only re-runs when its reactive dependencies change. The previous code had `if (!chart) return` before reading `series` or `range`, so on first run (before onMount sets `chart`) Svelte tracked no dependencies — the effect was permanently dead and never fired when data arrived. Reading `series` and `range` first ensures they're tracked even if the effect returns early, so the effect correctly re-runs once onMount has created the chart instance and API data is available. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This reverts commit 2929dd3.
$effect runs before onMount in Svelte 5, so `chart` was undefined on the first execution and the early return meant Svelte never tracked series/range as dependencies — the effect would never fire again, leaving the axes invisible even after data arrived. Using $state.raw() makes the chart variable a reactive signal without deep-proxying the Highcharts instance. When onMount assigns the chart, the effect re-runs automatically, sets xAxis extremes for the selected range, and renders the y-axis from 0 — so empty charts still show axes. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
TypeScript can't narrow a $state.raw variable across a forEach callback boundary, so chart.series and chart.addSeries were flagged as possibly undefined even after the early-return guard. Capturing chart in a local const before the loop resolves the narrowing. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
setExtremes() sets a user zoom and can be silently ignored or reset when
the chart has zero series. xAxis.update({ min, max }) writes directly to
the axis configuration options so Highcharts always honours the selected
time window, even when no series are present.
Also moved the axis range call to after all series add/remove operations
so that clear() + series.remove() cannot race against the extremes write.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ty charts" This reverts commit 56a5002.
When all series lines are empty Highcharts renders no series at all, so even showEmpty:true axes collapse. Fix: after all series operations, if the chart still has zero series, inject an invisible two-point placeholder series at the time-range boundaries with value 0. This anchors the axes to the correct window and shows a 0 baseline. The placeholder is removed as soon as a real series is present. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…nge" This reverts commit 56c4212.
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
1 participant
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.
Summary
Changes
src/lib/components/Chart.svelteyAxis.min: 0+yAxis.showEmpty: true— y-axis always renders from 0, even with no series dataxAxis.showEmpty: true— x-axis renders even when emptyrangeprop +rangeToMs()helper — parses range strings like1h,30dagginto milliseconds and callsxAxis.setExtremes()so the axis spans the selected window regardless of data presencesrc/routes/(auth)/(project)/deployment/(detail)/metrics/+page.svelterange={filter.range}to all four Chart instances (CPU, Memory, Request, Egress)Test plan
🤖 Generated with Claude Code