## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
This is a first draft at introducing semantic colours to our
Observability charts. This moves away from just random colours being
assigned to prop after prop. They're only scoped to the Database reports
right now, but if it flows nice, we can open it up to the other reports
too.
This also aims to tone down some of the harsher colours in our charts,
such as the orange which sometimes can look like a warning metric/prop.
| Before | After |
|--------|--------|
| <img width="839" height="336" alt="Screenshot 2026-06-10 at 09 14 56"
src="https://github.com/user-attachments/assets/222747c5-973b-4165-aa53-df7b93412ad3"
/> | <img width="950" height="341" alt="Screenshot 2026-09-14 at 18 14
47"
src="https://github.com/user-attachments/assets/836f3ddd-4a97-4064-b8cf-3a3b435417ac"
/> |
cc @supabase/design for additional thoughts.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added semantic chart color roles with light and dark theme variants
for consistent visualizations.
* Standardized colors and fills across database, networking, storage,
and connection charts.
* Maximum-value lines now use configured chart colors when available.
* Added chart palette reference and stress-test examples.
* Added stacked bar charts, customizable margins, and gradient-filled
line charts.
* Improved multi-series bar chart focus and date-range footer alignment.
* **Documentation**
* Documented the chart palette, theme variants, accessibility guidance,
and usage recommendations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Fixes Edge Function Execution Time chart within our observability
reports time formatting. This also fixes the non-hovered state which
would lose the `ms` formatting.
| Before | After |
|--------|--------|
| <img width="2160" height="652" alt="cleanshot_2026-07-29_at_02 15
53_2x"
src="https://github.com/user-attachments/assets/cfd6dbc2-f283-4379-a133-581c76990cb5"
/> | <img width="797" height="314" alt="Screenshot 2026-07-31 at 14 30
48"
src="https://github.com/user-attachments/assets/f5f1ace5-b6ef-43db-aebd-e10d31631013"
/> |
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Improved execution-time chart formatting with clearer millisecond
values, thousands separators, and configurable precision.
* Chart highlights now support custom value formatting alongside
existing number, percentage, and byte formats.
* **Bug Fixes**
* Non-finite execution-time values now display safely as `0ms`.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Line-style report charts (auth processing time, percentiles, edge
functions, realtime, etc.) hardcoded `stackId="1"` on every `<Area>`, so
recharts summed the series additively instead of overlaying them.
When multiple series share a value (e.g. Max/Min/Avg all `153.98`), they
rendered as three stacked bands at 1x/2x/3x the value, even though the
tooltip showed the true identical values.
## Fix
Default each area to its own `stackId` (its attribute name) so series
overlay, while still honoring an explicit per-attribute `stackId` from
config — matching the existing bar-chart path directly above it.
`normalizeVisibleStackToPercent`, the only flag that would make stacked
areas intentional, is never enabled anywhere.
## Before / after
Before: three equal values drawn at `0→153.98`, `153.98→307.96`,
`307.96→461.94`.
After: all three overlay at `153.98`.
Affects every line-style multi-series report, not just auth.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Bug Fixes**
- Improved stacked chart behavior by consistently applying configured
series stacking settings.
- Ensured area charts can overlay correctly when no explicit stacking
configuration is provided.
- Added safeguards for missing or invalid chart attribute data.
- **Tests**
- Added coverage for configured stack IDs, fallback behavior, empty
values, and invalid inputs.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
In a database report, dragging over a chart to open logs had two bugs.
Clicking a bar instead of dragging produced a zero-width selection (its
=== ite), so the logs view showed no results. Separately, the logs
datepicker crashed with "Invalid time value" because the chart put raw
epoch-ms values into the its/ite URL params, which get parsed with new
Date(string) and yield an Invalid Date that react-day-picker cannot
format.
## Fix
The chart now emits ISO timestamps in the logs URL so its/ite match the
format every other logs consumer already uses, and the datepicker guards
against unparseable values from any source (such as old bookmarked
links). A single click now expands the highlight to the clicked bucket,
from the bar's start to the next bar's start, so the selection, popover,
and logs range all cover the bar the user picked.
## How to test
1. Open a database report with a chart (for example Postgres, project
logs).
2. Drag across the chart, choose "Open in Postgres Logs", then open the
timepicker. Expected: it opens without crashing and shows the selected
range.
3. Go back and single-click one bar instead of dragging. Expected: that
bar's bucket is selected and "Open in Postgres Logs" loads logs for a
real, non-empty range.
4. Run the chart tests, expected all pass: pnpm --filter studio exec
vitest --run components/ui/Charts
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Prevented invalid log date inputs from creating invalid date
selections.
* Improved chart “open logs” links by normalizing the selected time
bounds (now consistently sent as ISO timestamps).
* Refined chart highlight behavior for click-to-advance and more
accurate left/right range selection, supporting both numeric and string
coordinate values.
* Updated the chart highlight dropdown display for clearer formatting of
numeric vs non-numeric dates.
* **Tests**
* Added Vitest coverage for chart highlight click, drag, and left/right
ordering scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Realised that tooltips were not showing up for supavisor charts in
database reports - just needed to flip a boolean
Although - i don't have any projects with supavisor connections data
(even on prod) so I can't visually verify this atm
Also fixes a small issue in which docs url for the chart wasn't showing
if the chart had no data, e.g:
<img width="996" height="311" alt="image"
src="https://github.com/user-attachments/assets/926febe4-9e3d-4975-9278-e7582d6ae12d"
/>
Should have docs button like this
<img width="949" height="351" alt="image"
src="https://github.com/user-attachments/assets/7561c1c5-94ae-405b-bd54-6bc94be0dd0a"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Enabled tooltips for the “Shared Pooler (Supavisor) client
connections” chart so the metric can be inspected directly.
* **UI Improvements**
* Adjusted the tooltip positioning in the chart header for clearer
readability.
* When charts have no data, the “Learn more”/documentation link now
follows the provided docs URL.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ali Waseem <waseema393@gmail.com>
Fixes [DEBUG-94](https://linear.app/supabase/issue/DEBUG-94)
## Summary
- **Min MB units**: Added \`formatBytesMinMB\` helper that always
formats byte values in at least MB. Applied to RAM and swap y-axis tick
formatters, tooltips, and chart headers.
- **Swap chart scale**: Every Supabase compute instance is provisioned
with **1 GB of swap regardless of size** (per
[docs](https://supabase.com/docs/guides/troubleshooting/memory-and-swap-usage-explained-aPNgm0)),
so the swap y-axis always shows at least 0 to 1 GB. Low swap usage no
longer fills the full chart height. Removed the show/hide limit toggle
since the limit is implicit in the y-axis scale.
- **Swap units in header/tooltip**: Fixed all three formatters (initial
header, hover-sync header, tooltip) to use \`formatBytesMinMB\` for swap
so the value always shows a unit like "2.00 MB".
- **Reference-line defensive fix**: Added a \`customValue\` fallback in
\`useAttributeQueries\` so future reference-line attributes that use
\`customValue\` instead of \`value\` are not silently overwritten to 0.
## Test plan
- [ ] Open DB Reports and verify RAM/Swap y-axis labels show MB (or GB
for large values), never KB or bytes
- [ ] Hover a bar in the swap chart and verify tooltip and header show
the same value with a unit (e.g. "2.00 MB")
- [ ] With low or zero swap usage, the chart bars are flat and the
y-axis goes 0 to 1 GB
- [ ] CPU chart limit toggle still renders at 100% (regression check on
the \`useAttributeQueries\` fallback change)
🤖 Generated with [Claude Code](https://claude.ai/claude-code)
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
## Problem
The dashboard's timezone picker (#45517) propagates to log timestamps
and the shared TimestampInfo component, but observability and reports
charts still render their X-axis labels, range labels, and tooltip
headers in the browser's local timezone. The result is jarring once a
user picks a non-local timezone: hover a chart and you get one tz, hover
a log row and you get another.
## Fix
Routes all display-side timestamp formatting in the chart layer through
the existing picker-aware helpers (\`useFormatDateTime\` /
\`formatDateTime\`) so chart UI matches the rest of the dashboard.
- **ComposedChart.utils** \`CustomTooltip\` (the hotspot — drives every
observability dashboard tooltip): reads the active timezone via
\`useTimezone\` for both the header label and the formatted timestamp.
- **AreaChart** / **BarChart**: introduce a \`formatChartDate\` helper
that honours each component's existing \`displayDateInUtc\` prop,
otherwise routes through the picker.
- **ChartBlock**: the two recharts \`labelFormatter\` arrows now close
over \`useFormatDateTime\`.
- **ChartHighlightActions**: range labels in the zoom dropdown migrated
to the same hook.
Intentionally untouched (must stay UTC):
- \`ChartHandler\` / \`ChartBlock\` \`startDate\`/\`endDate\` (API range
params, day boundary).
- \`ChartBlock.tsx:166\` explicit \`.utc()\` data-key normalisation.
- \`useFillTimeseriesSorted\` and friends (range math, no display).
## How to test
- Sign in. Open the avatar dropdown, pick a timezone different from your
browser local (e.g. Asia/Tokyo).
- Visit any project, then \`/project/<ref>/reports/database\` (or any
\`/observability/...\` page).
- Hover any chart series — the tooltip header should display the chosen
IANA name and times in that timezone.
- Click-drag a range on a chart to open the zoom dropdown — start/end
labels in the menu should also be in the chosen timezone.
- Switch back to "Auto detect" and confirm everything reverts to
browser-local.
- For an AreaChart/BarChart that uses \`displayDateInUtc\` (e.g. some
legacy reports), confirm those still render in UTC regardless of picker.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized date/time formatting across charts, tooltips, axis
labels, header/footer labels, and highlight range labels in Reports and
chart components.
* Switched to a shared, timezone-aware formatter that respects UTC
display mode or the selected picker/timezone, ensuring consistent,
human-readable timestamps throughout the UI.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
While trying to update `react` to version `19`, I noticed type related
errors that can be fixed in version `18`, mostly usage of `JSX.Element`
instead of `ReactNode`.
## Solution
- Use `ReactNode` instead of `JSX.Element`
- Fix some invalid usage of `rechart`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **Refactor**
* Standardized React component type annotations across the codebase for
improved type consistency and flexibility.
* Updated component prop types to accept a broader range of renderable
content.
* **Bug Fixes**
* Adjusted chart layout positioning to improve visual alignment.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
The Y axis domain/range was being calculated incorrectly.
Testing this is a bit painful. You need to:
- using tweak-extension or similar overwrite the API response for the
IOPS chart and add a really big value
- reload the page
- the Y axis should adapt to that really big value even if it goes over
the disk max iops
See screenshots below
## before
- big data point wouldn't change the chart range
- Y Axis max is 6k even tho we have a data point over 20k
<img width="1204" height="714" alt="CleanShot 2026-02-25 at 18 47 14@2x"
src="https://github.com/user-attachments/assets/881aff6e-22a2-408d-b2c4-5a27f3fda386"
/>
## after
- the Y axis shows the correct range
<img width="932" height="786" alt="CleanShot 2026-02-25 at 18 47 57@2x"
src="https://github.com/user-attachments/assets/6247c66e-4b3e-49e9-9f6b-086086913fab"
/>
* support total percentage normalization and show idle time in cpu usage chart
* pretier
* improve test
* clarify in comment why new prop is necessary
* fix type error int est
* refactor to use max value instead of idle property, add more tests
* cleanup composed chart
* prettier
* fix tests
* react improvements
* remove unused stacking properties
* remove rest property references as it wont be used
* fix comment and max cpu desc
* test the resolvehighlightedvalue function
* undo unnecessary composedcharthandler change
* remove unnecessary comment
* minor db charts percentage formatting fixes
* move format check
* fix issue with conflict resolution
* feat: setup chart area and tabs
This sets up the area where we can expect the insights chart as well as the tabs mechanism.
* feat: parse pg_stat_monitor logs as json
* feat: create query perf chart utils and move transfrom function
Created a utils file for our QueryPerformanceChart component. This moves the logs to JSON transform function there.
* feat: add timerange to chart
* feat: add date selector to query perf overview
This adds the selector to the top right of the page allowing the user to switch between last hour, 3 hours and 24 hours
* feat: modify chart component to accomodate hiding bits
* feat: add metrics to each tab
* chore: update to 60 min by default and some css
* feat: centralise data parsing for logs
* feat: clean up filters bar
This rewires the export to give you the aggregate pg_stat_monitor data. Also removes unused buttons and filters.
* feat: percentiles for query latency chart
* feat: filter out non evenets from pg_stat_monitor logs
* feat: utils for cache misses and hits
* feat: add selected query to chart on click
* feat: add click through to query panel
* chore: tidy up files
* chore: distinction between selected and open panel
* feat: move query performance fully into reports area
* fix: preserve query params on reports link
* fix: remove right icon syntax in report menu
* chore: remove cache misses from cache chart
* refactor: backwards compatibility for statements if right db version isnt available
* chore: delete randomly generated empty file
* chore: tidy up unused imports and vars
* chore: remove console logs
* chore: remove isMounted from query perf
* fix: cmd k query perf path
* feat: simplify query latency only p50 and p95
This seems to give us a more accurate reading as we can calculate these two
* fix: cache hit rate not showing inside query details
* chore: chart bg colour adjust
So it contrasts a little better on light mode.
* feat: show selected query on other verticals
* feat: bring back symlink in advisors
* wip
* add formatTimestamp for reports
* add tests for formatTimestamp
* fix type err
* rm old chart logic
* do not retry replication sources
* update report config schema
* use report config
* fix charts, simplify config
* sync charts
* rm comment
* usefilltimeseries
* move chart upsell to its own component
* cleanup v2 chart component
* fix chartheader function format bug
* make attributes dynamic
* move types to its own file
* update reportv2chart types
* update reportv2 chart type
* use new edgefn report
* rm mock
* rm old code
* fix type err
* fix type err
* rename hook
* return sql in dataprovider
* add button to open in log explorer in chart header
* fix type
* fix chart type toggle
* fix type error
* export data transformation for testing
* add tests for data transformation
* rm dupped code
* add report settings to edge fn report
* rm mocked data
* rename
* fix type err
* Apply suggestion from @joshenlim
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* rm unnecessary div
* rm unnecessary props from report upsell
* cleaner query keys
* move loadin/error/empty states to inside panel content to prevent layout shift
* use card instead of panel
* use buttontooltip in chartheader
* use buttontooltips in buttons with tooltips
* rm export default
* rm export defualt
* rm i from key
* fix status code transformation
* fix filltimeseries
* add tests for filltimeseries
* fix data transform
* pass xaxis key to chart
* refactor hover state to use timestamp not index
* fix tests
* fix areachart
* fix barchart
* fix chartheader
* fix composedchart
* fix stacked
* fix type missing xaxiskey
* type fix
* Revert "refactor hover state to use timestamp not index"
This reverts commit cfd7886460.
* undo charthover changes, fix data aggregation
* Revert "fix tests"
This reverts commit e5200a2035.
* move transforms to testable functions, add tests
* nit refactors and clean up
* feat: add aws nimbus cloud provider (#38312)
* feat: add aws nimbus cloud provider
* Fix return type of useCustomContent hook
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* add utc plugin to dayjs
* move plugins to vitest setup
* rm customparser plugin
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
* feat: update chart highlight colour
* feat: add handling for dark and light mode
This keeps the highlight area green on light mode still as light mode had no issues. It also modifies the fillOpacity in dark mode to be a bit more balanced.
* fix: little more subtle on darkmode
* release charts to Teams and Enterprise
* update db charts
* clean up chart types and add disk_fs_used_system
* show update data for Disk Size chart
* remove feature flag release
* update PostgREST connections tooltip
* show percentage in tooltip only if value is not percentage itself
* show percentage in tooltip only if value is not percentage itself
* insert disk_fs_used_system
* update db disk size chart
* reorder admin connection
* improve legend items hover
* show yAxis label
* open range in logs explorer
* add provisioned disk size to Memory Usage chart
* temp new charts
* Network Traffic chart
* sync charts marker
* update api types
* fix layout
* add max memory
* add db size
* chore: remove unused properties
* disk_io_usage
* add max db and pooler connections
* chart header tooltip
* clean charts
* add cpu max
* refactor charts and change max color
* reference line on Database Size chart
* reference line text
* reference lines on Database Size chart
* fix aggregation
* legend spacing
* reference line
* add docsUrl
