dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(design-system): first pass at db report chart colours (#46787)

Browse Source 
## 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>
This commit is contained in:
kemal.earthClaude Opus 4.8Gildas Garcia
 authored and GitHub committed 2026-09-16 09:18:40 +01:00
1 parent 92fdb1d3c5
commit 7fce0a12d9
26 files changed
+540 -219
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/studio/data/reports/database-charts.ts
+81 -10
View File
@@ -75,6 +75,8 @@ export const getReportAttributesV2: (
attribute: 'ram_usage_used',
provider: 'infra-monitoring',
label: 'Used',
color: 'var(--chart-1)',
fill: 'var(--chart-1-fill)',
tooltip:
'RAM in use by Postgres and the operating system. Sustained high usage may indicate memory pressure',
},
@@ -82,6 +84,8 @@ export const getReportAttributesV2: (
attribute: 'ram_usage_cache_and_buffers',
provider: 'infra-monitoring',
label: 'Cache + Buffers',
color: 'var(--chart-2)',
fill: 'var(--chart-2-fill)',
tooltip:
'RAM used by the operating system page cache and PostgreSQL buffers to accelerate disk reads/writes',
},
@@ -89,6 +93,8 @@ export const getReportAttributesV2: (
attribute: 'ram_usage_free',
provider: 'infra-monitoring',
label: 'Free',
color: 'var(--chart-muted)',
fill: 'var(--chart-muted-fill)',
tooltip:
'Unallocated memory available for use. A small portion is always reserved by the operating system',
},
@@ -105,6 +111,7 @@ export const getReportAttributesV2: (
provider: 'infra-monitoring',
label: 'Swap',
omitFromTotal: true,
color: 'var(--chart-3)',
tooltip:
'Swap space in use by the operating system. Sustained swap usage indicates memory pressure and may degrade database performance',
},
@@ -132,6 +139,8 @@ export const getReportAttributesV2: (
attribute: 'ram_commit_used',
provider: 'infra-monitoring',
label: 'Committed',
color: 'var(--chart-1)',
fill: 'var(--chart-1-fill)',
tooltip:
'Total memory the kernel has promised to processes (RAM plus swap). Sustained values near or above the commit limit indicate overcommitment and a high risk of out-of-memory failures',
},
@@ -139,6 +148,7 @@ export const getReportAttributesV2: (
attribute: 'ram_commit_limit',
provider: 'infra-monitoring',
label: 'Commit limit',
color: 'var(--chart-reference)',
isMaxValue: true,
omitFromTotal: true,
tooltip:
@@ -201,8 +211,8 @@ export const getReportAttributesV2: (
provider: 'infra-monitoring',
label: 'System',
format: '%',
color: { light: '#EDC35E', dark: '#EDD35E' },
fill: { light: '#F6D99F', dark: '#5C5230' },
color: 'var(--chart-2)',
fill: 'var(--chart-2-fill)',
tooltip:
'CPU time spent on kernel operations (e.g., process scheduling, memory management). High values may indicate system overhead',
},
@@ -211,8 +221,8 @@ export const getReportAttributesV2: (
provider: 'infra-monitoring',
label: 'User',
format: '%',
color: { light: '#0063E8', dark: '#65BCD9' },
fill: { light: '#80B1F4', dark: '#2A3D45' },
color: 'var(--chart-1)',
fill: 'var(--chart-1-fill)',
tooltip:
'CPU time used by database queries and user-space processes. High values may suggest CPU-intensive queries',
},
@@ -221,8 +231,8 @@ export const getReportAttributesV2: (
provider: 'infra-monitoring',
label: 'IOwait',
format: '%',
color: { light: '#DB3A34', dark: '#FF6B6B' },
fill: { light: '#F2A7A3', dark: '#5C2A2A' },
color: 'var(--chart-3)',
fill: 'var(--chart-3-fill)',
tooltip:
'CPU time waiting for disk or network I/O. High values may indicate disk bottlenecks',
},
@@ -231,8 +241,8 @@ export const getReportAttributesV2: (
provider: 'infra-monitoring',
label: 'IRQs',
format: '%',
color: { light: '#DA760B', dark: '#DA760B' },
fill: { light: '#FFB885', dark: '#5C3D0A' },
color: 'var(--chart-4)',
fill: 'var(--chart-4-fill)',
tooltip: 'CPU time handling hardware interrupt requests (IRQ)',
},
{
@@ -240,11 +250,30 @@ export const getReportAttributesV2: (
provider: 'infra-monitoring',
label: 'Other',
format: '%',
color: { light: '#B616A6', dark: '#DB8DF9' },
fill: { light: '#DB8BD3', dark: '#4A3D5C' },
color: 'var(--chart-5)',
fill: 'var(--chart-5-fill)',
tooltip:
'CPU time spent on other tasks (e.g., background processes, software interrupts)',
},
{
attribute: 'cpu_usage_busy_idle',
provider: 'infra-monitoring',
label: 'Idle',
format: '%',
omitFromTotal: true,
color: 'var(--chart-muted)',
fill: 'var(--chart-muted-fill)',
tooltip: 'CPU time spent idle and available for new work',
},
{
attribute: 'cpu_usage_max',
provider: 'reference-line',
label: 'Max',
value: 100,
color: 'var(--chart-reference)',
tooltip: 'Max CPU usage',
isMaxValue: true,
},
],
},
{
@@ -269,12 +298,16 @@ export const getReportAttributesV2: (
attribute: 'network_receive_bytes',
provider: 'infra-monitoring',
label: 'Network in',
color: 'var(--chart-in)',
fill: 'var(--chart-in-fill)',
tooltip: 'Inbound network throughput (bytes per second)',
},
{
attribute: 'network_transmit_bytes',
provider: 'infra-monitoring',
label: 'Network out',
color: 'var(--chart-out)',
fill: 'var(--chart-out-fill)',
tooltip: 'Outbound network throughput (bytes per second)',
},
],
@@ -301,6 +334,8 @@ export const getReportAttributesV2: (
attribute: 'disk_iops_write',
provider: 'infra-monitoring',
label: 'Write IOPS',
color: 'var(--chart-out)',
fill: 'var(--chart-out-fill)',
tooltip:
'Number of write operations per second. High values indicate frequent data writes, logging, or transaction activity',
},
@@ -308,6 +343,8 @@ export const getReportAttributesV2: (
attribute: 'disk_iops_read',
provider: 'infra-monitoring',
label: 'Read IOPS',
color: 'var(--chart-in)',
fill: 'var(--chart-in-fill)',
tooltip:
'Number of read operations per second. High values suggest frequent disk reads due to queries or poor caching',
},
@@ -315,6 +352,7 @@ export const getReportAttributesV2: (
attribute: 'disk_iops_max',
provider: 'reference-line',
label: 'Max IOPS',
color: 'var(--chart-reference)',
value: effectiveMaxIops,
tooltip:
'Effective maximum IOPS for your current compute and disk configuration. Equal to the lower of the compute IOPS limit and the provisioned disk IOPS',
@@ -345,18 +383,23 @@ export const getReportAttributesV2: (
attribute: 'disk_bytes_read',
provider: 'infra-monitoring',
label: 'Read throughput',
color: 'var(--chart-in)',
fill: 'var(--chart-in-fill)',
tooltip: 'Disk read throughput (bytes per second)',
},
{
attribute: 'disk_bytes_written',
provider: 'infra-monitoring',
label: 'Write throughput',
color: 'var(--chart-out)',
fill: 'var(--chart-out-fill)',
tooltip: 'Disk write throughput (bytes per second)',
},
{
attribute: 'disk_throughput_max',
provider: 'reference-line',
label: 'Max throughput',
color: 'var(--chart-reference)',
value:
diskConfig?.attributes?.type === 'gp3' &&
typeof diskConfig.attributes.throughput_mbps === 'number'
@@ -418,12 +461,15 @@ export const getReportAttributesV2: (
attribute: 'pg_stat_database_num_backends',
provider: 'infra-monitoring',
label: 'Total connections',
color: 'var(--chart-1)',
fill: 'var(--chart-1-fill)',
tooltip: 'Total number of active database connections',
},
{
attribute: 'max_db_connections',
provider: 'reference-line',
label: 'Max connections',
color: 'var(--chart-reference)',
value: maxConnections?.maxConnections,
tooltip: 'Max available connections for your current compute size',
isMaxValue: true,
@@ -452,6 +498,8 @@ export const getReportAttributesV2: (
attribute: 'client_connections_postgres',
provider: 'infra-monitoring',
label: 'Postgres',
color: 'var(--chart-1)',
fill: 'var(--chart-1-fill)',
tooltip:
'Direct connections to the Postgres database from your application and external clients',
},
@@ -459,12 +507,16 @@ export const getReportAttributesV2: (
attribute: 'client_connections_authenticator',
provider: 'infra-monitoring',
label: 'PostgREST',
color: 'var(--chart-2)',
fill: 'var(--chart-2-fill)',
tooltip: 'Connection pool managed by PostgREST',
},
{
attribute: 'client_connections_supabase_admin',
provider: 'infra-monitoring',
label: 'Reserved',
color: 'var(--chart-3)',
fill: 'var(--chart-3-fill)',
tooltip:
'Administrative connections used by various Supabase services for internal operations and maintenance tasks',
},
@@ -472,24 +524,31 @@ export const getReportAttributesV2: (
attribute: 'client_connections_supabase_auth_admin',
provider: 'infra-monitoring',
label: 'Auth',
color: 'var(--chart-4)',
fill: 'var(--chart-4-fill)',
tooltip: 'Connection pool managed by Supabase Auth',
},
{
attribute: 'client_connections_supabase_storage_admin',
provider: 'infra-monitoring',
label: 'Storage',
color: 'var(--chart-5)',
fill: 'var(--chart-5-fill)',
tooltip: 'Connection pool managed by Supabase Storage',
},
{
attribute: 'client_connections_other',
provider: 'infra-monitoring',
label: 'Other roles',
color: 'var(--chart-6)',
fill: 'var(--chart-6-fill)',
tooltip: "Miscellaneous database connections that don't fall into other categories.",
},
{
attribute: 'max_db_connections',
provider: 'reference-line',
label: 'Max connections',
color: 'var(--chart-reference)',
value: maxConnections?.maxConnections,
tooltip: 'Max available connections for your current compute size',
isMaxValue: true,
@@ -522,12 +581,15 @@ export const getReportAttributesV2: (
attribute: 'client_connections_pgbouncer',
provider: 'infra-monitoring',
label: isHighAvailability ? 'multipooler' : 'pgbouncer',
color: 'var(--chart-1)',
fill: 'var(--chart-1-fill)',
tooltip: isHighAvailability ? 'Multipooler connections' : 'PgBouncer connections',
},
{
attribute: 'pg_pooler_max_connections',
provider: 'reference-line',
label: 'Max pooler connections',
color: 'var(--chart-reference)',
value: pgBouncerMaxConnections,
tooltip: 'Maximum allowed pooler connections for your current compute size',
isMaxValue: true,
@@ -555,6 +617,8 @@ export const getReportAttributesV2: (
attribute: 'supavisor_connections_active',
provider: 'infra-monitoring',
label: 'supavisor',
color: 'var(--chart-1)',
fill: 'var(--chart-1-fill)',
tooltip: 'Supavisor connections',
},
],
@@ -582,6 +646,8 @@ export const getReportAttributesV2: (
provider: 'infra-monitoring',
format: 'bytes',
label: 'System',
color: 'var(--chart-3)',
fill: 'var(--chart-3-fill)',
tooltip: 'Reserved space for the system to ensure your database runs smoothly',
},
{
@@ -589,6 +655,8 @@ export const getReportAttributesV2: (
provider: 'infra-monitoring',
format: 'bytes',
label: 'WAL',
color: 'var(--chart-2)',
fill: 'var(--chart-2-fill)',
tooltip:
'Disk usage by the write-ahead log. The usage depends on your WAL settings and the amount of data being written to the database',
},
@@ -597,6 +665,8 @@ export const getReportAttributesV2: (
provider: 'infra-monitoring',
format: 'bytes',
label: 'Database',
color: 'var(--chart-1)',
fill: 'var(--chart-1-fill)',
tooltip: 'Disk usage by your database (tables, indexes, data, ...)',
},
{
@@ -605,6 +675,7 @@ export const getReportAttributesV2: (
isMaxValue: true,
format: 'bytes',
label: 'Disk Size',
color: 'var(--chart-reference)',
tooltip: 'Disk Size refers to the total space your project occupies on disk',
},
entitledFeatures.includes('database') &&