+
)
diff --git a/apps/docs/content/troubleshooting/realtime-debugging-with-logger.mdx b/apps/docs/content/troubleshooting/realtime-debugging-with-logger.mdx
index c41e43d897894..34b07c2d6baab 100644
--- a/apps/docs/content/troubleshooting/realtime-debugging-with-logger.mdx
+++ b/apps/docs/content/troubleshooting/realtime-debugging-with-logger.mdx
@@ -1,10 +1,8 @@
---
title = "Debug Realtime with Logger and Log Levels"
-github_url = ""
date_created = "2025-11-28T00:00:00+00:00"
topics = [ "realtime" ]
keywords = [ "debug", "logger", "log_level", "troubleshooting", "diagnostics" ]
-database_id = ""
---
## What are logger and log_level parameters?
diff --git a/apps/docs/content/troubleshooting/realtime-heartbeat-messages.mdx b/apps/docs/content/troubleshooting/realtime-heartbeat-messages.mdx
index eb121cab7a301..6ebf1fe579df6 100644
--- a/apps/docs/content/troubleshooting/realtime-heartbeat-messages.mdx
+++ b/apps/docs/content/troubleshooting/realtime-heartbeat-messages.mdx
@@ -1,10 +1,8 @@
---
title = "Understanding and Monitoring Realtime Heartbeats"
-github_url = ""
date_created = "2025-11-28T00:00:00+00:00"
topics = [ "realtime" ]
keywords = [ "heartbeat", "connection", "websocket", "keep-alive", "timeout", "onHeartbeat", "heartbeatCallback", "reconnect" ]
-database_id = ""
---
## What are heartbeat messages?
diff --git a/apps/docs/content/troubleshooting/realtime-too-many-channels-error.mdx b/apps/docs/content/troubleshooting/realtime-too-many-channels-error.mdx
index af7bcdb05439f..ad1848d23e89f 100644
--- a/apps/docs/content/troubleshooting/realtime-too-many-channels-error.mdx
+++ b/apps/docs/content/troubleshooting/realtime-too-many-channels-error.mdx
@@ -1,10 +1,8 @@
---
title = "Fixing the TooManyChannels Error"
-github_url = ""
date_created = "2025-11-28T00:00:00+00:00"
topics = [ "realtime" ]
keywords = [ "channels", "useEffect", "react", "memory leak", "quota", "TooManyChannels", "ChannelRateLimitReached", "unsubscribe", "cleanup" ]
-database_id = ""
---
{/* supa-mdx-lint-disable Rule003Spelling */}
diff --git a/apps/docs/features/directives/CodeSample.test.ts b/apps/docs/features/directives/CodeSample.test.ts
index 3c8e83df2fb3f..459927fbd5e92 100644
--- a/apps/docs/features/directives/CodeSample.test.ts
+++ b/apps/docs/features/directives/CodeSample.test.ts
@@ -1,4 +1,4 @@
-import { afterAll, beforeAll, describe, it, expect, vi } from 'vitest'
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
import { stripIndent } from 'common-tags'
import { fromMarkdown } from 'mdast-util-from-markdown'
@@ -593,35 +593,35 @@ Some more text.
const users = [
{ id: 1, name: 'John', email: 'john@example.com' },
{ id: 2, name: 'Jane' },
- ];
+ ]
function getUserById(id) {
- return users.find((user) => user.id === id);
+ return users.find((user) => user.id === id)
}
function createUser(name, email) {
- const newId = Math.max(...users.map((u) => u.id)) + 1;
- const newUser = { id: newId, name };
+ const newId = Math.max(...users.map((u) => u.id)) + 1
+ const newUser = { id: newId, name }
if (email) {
- newUser.email = email;
+ newUser.email = email
}
- users.push(newUser);
- return newUser;
+ users.push(newUser)
+ return newUser
}
class UserManager {
- users = [];
+ users = []
constructor(initialUsers = []) {
- this.users = initialUsers;
+ this.users = initialUsers
}
addUser(user) {
- this.users.push(user);
+ this.users.push(user)
}
getUsers() {
- return [...this.users];
+ return [...this.users]
}
}
\`\`\`
@@ -698,33 +698,33 @@ Some more text.
const users = [
{ id: 1, name: 'John', email: 'john@example.com' },
{ id: 2, name: 'Jane' },
- ];
+ ]
// ...
function createUser(name, email) {
- const newId = Math.max(...users.map((u) => u.id)) + 1;
- const newUser = { id: newId, name };
+ const newId = Math.max(...users.map((u) => u.id)) + 1
+ const newUser = { id: newId, name }
if (email) {
- newUser.email = email;
+ newUser.email = email
}
- users.push(newUser);
- return newUser;
+ users.push(newUser)
+ return newUser
}
class UserManager {
- users = [];
+ users = []
constructor(initialUsers = []) {
- this.users = initialUsers;
+ this.users = initialUsers
}
addUser(user) {
- this.users.push(user);
+ this.users.push(user)
}
getUsers() {
- return [...this.users];
+ return [...this.users]
}
}
\`\`\`
diff --git a/apps/docs/features/directives/CodeSample.ts b/apps/docs/features/directives/CodeSample.ts
index dc505c0bda1ba..04242278d6d41 100644
--- a/apps/docs/features/directives/CodeSample.ts
+++ b/apps/docs/features/directives/CodeSample.ts
@@ -33,12 +33,13 @@
import * as acorn from 'acorn'
import tsPlugin from 'acorn-typescript'
-import { type DefinitionContent, type BlockContent, type Code, type Root } from 'mdast'
+import amaro from 'amaro'
+import { type BlockContent, type Code, type DefinitionContent, type Root } from 'mdast'
import type { MdxJsxAttributeValueExpression, MdxJsxFlowElement } from 'mdast-util-mdx-jsx'
import assert from 'node:assert'
import { readFile } from 'node:fs/promises'
import { join } from 'node:path'
-import { removeTypes } from 'remove-types'
+import prettier from 'prettier'
import { type Parent } from 'unist'
import { visitParents } from 'unist-util-visit-parents'
import { z, type SafeParseError } from 'zod'
@@ -260,7 +261,11 @@ async function rewriteNodes(contentMap: Map
{
})
const formId = 'project-postgres-config'
- const hiddenSchema = ['auth', 'pgbouncer', 'hooks', 'extensions']
+ const hiddenSchema = [
+ 'auth',
+ 'pgbouncer',
+ 'hooks',
+ 'extensions',
+ 'vault',
+ 'storage',
+ 'realtime',
+ 'pgsodium',
+ 'pgsodium_masks',
+ ]
const { can: canUpdatePostgrestConfig, isSuccess: isPermissionsLoaded } =
useAsyncCheckPermissions(PermissionAction.UPDATE, 'custom_config_postgrest')
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
index 2dd441c345d6f..273e3315df8f1 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx
@@ -77,7 +77,7 @@ export const ForeignKeySelector = ({
includeColumns: false,
})
- const { data: selectedTable, isPending: isLoadingSelectedTable } = useTableQuery(
+ const { data: selectedTable, isLoading: isLoadingSelectedTable } = useTableQuery(
{
projectRef: project?.ref,
connectionString: project?.connectionString,
diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml
index b23ac13078d36..302e884e8a481 100644
--- a/docker/docker-compose.yml
+++ b/docker/docker-compose.yml
@@ -11,7 +11,7 @@ services:
studio:
container_name: supabase-studio
- image: supabase/studio:2025.11.26-sha-8f096b5
+ image: supabase/studio:2025.12.09-sha-434634f
restart: unless-stopped
healthcheck:
test:
@@ -173,7 +173,7 @@ services:
rest:
container_name: supabase-rest
- image: postgrest/postgrest:v13.0.7
+ image: postgrest/postgrest:v14.1
restart: unless-stopped
depends_on:
db:
@@ -197,7 +197,7 @@ services:
realtime:
# This container name looks inconsistent but is correct because realtime constructs tenant id by parsing the subdomain
container_name: realtime-dev.supabase-realtime
- image: supabase/realtime:v2.65.3
+ image: supabase/realtime:v2.68.0
restart: unless-stopped
depends_on:
db:
@@ -235,7 +235,7 @@ services:
# To use S3 backed storage: docker compose -f docker-compose.yml -f docker-compose.s3.yml up
storage:
container_name: supabase-storage
- image: supabase/storage-api:v1.32.0
+ image: supabase/storage-api:v1.33.0
restart: unless-stopped
volumes:
- ./volumes/storage:/var/lib/storage:z
@@ -320,7 +320,7 @@ services:
functions:
container_name: supabase-edge-functions
- image: supabase/edge-runtime:v1.69.25
+ image: supabase/edge-runtime:v1.69.28
restart: unless-stopped
volumes:
- ./volumes/functions:/home/deno/functions:Z
@@ -344,7 +344,7 @@ services:
analytics:
container_name: supabase-analytics
- image: supabase/logflare:1.26.13
+ image: supabase/logflare:1.26.25
restart: unless-stopped
ports:
- 4000:4000
diff --git a/e2e/studio/playwright.config.ts b/e2e/studio/playwright.config.ts
index 8573e988dfe72..d8d2677353e87 100644
--- a/e2e/studio/playwright.config.ts
+++ b/e2e/studio/playwright.config.ts
@@ -41,7 +41,7 @@ export default defineConfig({
maxFailures: 3,
// Due to rate API rate limits run tests in serial mode on platform.
fullyParallel: !env.IS_PLATFORM,
- workers: env.IS_PLATFORM ? 1 : 5,
+ workers: env.IS_PLATFORM ? 1 : 3,
use: {
baseURL: env.STUDIO_URL,
screenshot: 'off',
diff --git a/packages/pg-meta/src/pg-format/reserved.ts b/packages/pg-meta/src/pg-format/reserved.ts
index 42e45df2e5a5a..bb639661b9161 100644
--- a/packages/pg-meta/src/pg-format/reserved.ts
+++ b/packages/pg-meta/src/pg-format/reserved.ts
@@ -33,7 +33,9 @@ export const POSTGRESQL_RESERVED_WORDS = new Set([
'CHECK',
'COALESCE',
'COLLATE',
+ 'COLLATION',
'COLUMN',
+ 'CONCURRENTLY',
'CONSTRAINT',
'CREATE',
'CREDENTIALS',
@@ -41,16 +43,18 @@ export const POSTGRESQL_RESERVED_WORDS = new Set([
'CURRENT_CATALOG',
'CURRENT_DATE',
'CURRENT_ROLE',
+ 'CURRENT_SCHEMA',
'CURRENT_TIME',
'CURRENT_TIMESTAMP',
- 'CURRENT_USER',
'CURRENT_USER_ID',
+ 'CURRENT_USER',
'DEC',
'DECIMAL',
'DEFAULT',
'DEFERRABLE',
'DEFLATE',
'DEFRAG',
+ 'DELETE',
'DELTA',
'DELTA32K',
'DESC',
@@ -91,6 +95,7 @@ export const POSTGRESQL_RESERVED_WORDS = new Set([
'INITIALLY',
'INNER',
'INOUT',
+ 'INSERT',
'INT',
'INTEGER',
'INTERSECT',
@@ -99,7 +104,6 @@ export const POSTGRESQL_RESERVED_WORDS = new Set([
'IS',
'ISNULL',
'JOIN',
- 'JSON',
'JSON_ARRAY',
'JSON_ARRAYAGG',
'JSON_EXISTS',
@@ -110,6 +114,7 @@ export const POSTGRESQL_RESERVED_WORDS = new Set([
'JSON_SERIALIZE',
'JSON_TABLE',
'JSON_VALUE',
+ 'JSON',
'LATERAL',
'LEADING',
'LEAST',
@@ -179,9 +184,10 @@ export const POSTGRESQL_RESERVED_WORDS = new Set([
'SUBSTRING',
'SYMMETRIC',
'SYSDATE',
- 'SYSTEM',
'SYSTEM_USER',
+ 'SYSTEM',
'TABLE',
+ 'TABLESAMPLE',
'TAG',
'TDES',
'TEXT255',
@@ -198,6 +204,7 @@ export const POSTGRESQL_RESERVED_WORDS = new Set([
'TRUNCATECOLUMNS',
'UNION',
'UNIQUE',
+ 'UPDATE',
'USER',
'USING',
'VALUES',
diff --git a/packages/pg-meta/test/pg-format.test.ts b/packages/pg-meta/test/pg-format.test.ts
new file mode 100644
index 0000000000000..23eca848f267a
--- /dev/null
+++ b/packages/pg-meta/test/pg-format.test.ts
@@ -0,0 +1,141 @@
+import { describe, expect, test } from 'vitest'
+import { ident, literal } from '../src/pg-format'
+
+describe('pg-format', () => {
+ describe('ident', () => {
+ describe('reserved keywords', () => {
+ test('should quote "collation" reserved keyword', () => {
+ expect(ident('collation')).toBe('"collation"')
+ expect(ident('COLLATION')).toBe('"COLLATION"')
+ expect(ident('Collation')).toBe('"Collation"')
+ })
+
+ test('should quote other reserved keywords', () => {
+ expect(ident('select')).toBe('"select"')
+ expect(ident('from')).toBe('"from"')
+ expect(ident('where')).toBe('"where"')
+ expect(ident('order')).toBe('"order"')
+ expect(ident('group')).toBe('"group"')
+ expect(ident('table')).toBe('"table"')
+ expect(ident('column')).toBe('"column"')
+ expect(ident('create')).toBe('"create"')
+ expect(ident('insert')).toBe('"insert"')
+ expect(ident('update')).toBe('"update"')
+ expect(ident('delete')).toBe('"delete"')
+ })
+
+ test('should not quote non-reserved identifiers', () => {
+ expect(ident('normal_column')).toBe('normal_column')
+ expect(ident('my_table')).toBe('my_table')
+ expect(ident('user_id')).toBe('user_id')
+ expect(ident('_private')).toBe('_private')
+ expect(ident('col1')).toBe('col1')
+ })
+
+ test('should quote identifiers with special characters', () => {
+ expect(ident('column with spaces')).toBe('"column with spaces"')
+ expect(ident('column-with-dashes')).toBe('"column-with-dashes"')
+ expect(ident('column.with.dots')).toBe('"column.with.dots"')
+ expect(ident('column$with$dollar')).toBe('column$with$dollar')
+ })
+
+ test('should handle double quotes in identifiers', () => {
+ expect(ident('quoted"column')).toBe('"quoted""column"')
+ expect(ident('"already quoted"')).toBe('"""already quoted"""')
+ })
+
+ test('should handle camelCase identifiers', () => {
+ expect(ident('camelCaseColumn')).toBe('"camelCaseColumn"')
+ expect(ident('PascalCase')).toBe('"PascalCase"')
+ })
+
+ test('should handle identifiers starting with numbers', () => {
+ expect(ident('123column')).toBe('"123column"')
+ expect(ident('1st_column')).toBe('"1st_column"')
+ })
+ })
+
+ describe('edge cases', () => {
+ test('should throw error for null or undefined', () => {
+ expect(() => ident(null)).toThrow('SQL identifier cannot be null or undefined')
+ expect(() => ident(undefined)).toThrow('SQL identifier cannot be null or undefined')
+ })
+
+ test('should handle boolean values', () => {
+ expect(ident(true)).toBe('"t"')
+ expect(ident(false)).toBe('"f"')
+ })
+
+ test('should handle arrays', () => {
+ expect(ident(['col1', 'col2'])).toBe('col1,col2')
+ expect(ident(['collation', 'select'])).toBe('"collation","select"')
+ })
+
+ test('should throw error for nested arrays', () => {
+ expect(() => ident([['col1']])).toThrow(
+ 'Nested array to grouped list conversion is not supported for SQL identifier'
+ )
+ })
+
+ test('should throw error for objects', () => {
+ expect(() => ident({ name: 'test' })).toThrow('SQL identifier cannot be an object')
+ })
+ })
+ })
+
+ describe('literal', () => {
+ test('should handle null and undefined', () => {
+ expect(literal(null)).toBe('NULL')
+ expect(literal(undefined)).toBe('NULL')
+ })
+
+ test('should handle strings', () => {
+ expect(literal('simple string')).toBe("'simple string'")
+ expect(literal("string with 'quotes'")).toBe("'string with ''quotes'''")
+ expect(literal('string with "double quotes"')).toBe('\'string with "double quotes"\'')
+ })
+
+ test('should handle numbers', () => {
+ expect(literal(123)).toBe('123')
+ expect(literal(0)).toBe('0')
+ expect(literal(-42)).toBe('-42')
+ expect(literal(3.14)).toBe('3.14')
+ })
+
+ test('should handle booleans', () => {
+ expect(literal(true)).toBe("'t'")
+ expect(literal(false)).toBe("'f'")
+ })
+
+ test('should handle special number values', () => {
+ expect(literal(Number.POSITIVE_INFINITY)).toBe("'Infinity'")
+ expect(literal(Number.NEGATIVE_INFINITY)).toBe("'-Infinity'")
+ expect(literal(Number.NaN)).toBe("'NaN'")
+ })
+
+ test('should handle bigint', () => {
+ expect(literal(BigInt(123))).toBe('123')
+ expect(literal(BigInt('9007199254740991'))).toBe('9007199254740991')
+ })
+
+ test('should handle dates', () => {
+ const date = new Date('2024-01-01T00:00:00Z')
+ expect(literal(date)).toBe("'2024-01-01 00:00:00.000+00'")
+ })
+
+ test('should handle arrays', () => {
+ expect(literal([1, 2, 3])).toBe('1,2,3')
+ expect(literal(['a', 'b', 'c'])).toBe("'a','b','c'")
+ })
+
+ test('should handle objects as JSON', () => {
+ expect(literal({ name: 'test' })).toBe('\'{"name":"test"}\'::jsonb')
+ expect(literal({ id: 1, name: 'test' })).toBe('\'{"id":1,"name":"test"}\'::jsonb')
+ })
+
+ test('should handle strings with backslashes', () => {
+ expect(literal('path\\to\\file')).toBe("E'path\\\\to\\\\file'")
+ expect(literal('C:\\Users\\test')).toBe("E'C:\\\\Users\\\\test'")
+ })
+ })
+})
diff --git a/packages/pg-meta/test/query/table-row-query.test.ts b/packages/pg-meta/test/query/table-row-query.test.ts
index 8a48b97539122..3d6b55e837e30 100644
--- a/packages/pg-meta/test/query/table-row-query.test.ts
+++ b/packages/pg-meta/test/query/table-row-query.test.ts
@@ -1752,4 +1752,98 @@ describe('Table Row Query', () => {
expect(largeRowCustom.PPG).toHaveLength(10) // multi-dimentional array are truncated
expect(largeRowCustom.ACC).toHaveLength(10)
})
+
+ withTestDatabase('should handle reserved keyword "collation" as column name', async (db) => {
+ // Create a table with a column named "collation" (a PostgreSQL reserved keyword)
+ await db.executeQuery(`
+ CREATE TABLE IF NOT EXISTS "public"."test" (
+ id SERIAL PRIMARY KEY,
+ "collation" TEXT
+ );
+
+ DELETE FROM "public"."test";
+ INSERT INTO "public"."test" ("collation")
+ VALUES
+ ('value1'),
+ ('value2'),
+ ('value3');
+ `)
+
+ // Get table metadata
+ const { sql: tablesSql, zod: tablesZod } = pgMeta.tables.list()
+ const tables = tablesZod.parse(await db.executeQuery(tablesSql))
+ const testTable = tables.find((table) => table.name === 'test')
+
+ expect(testTable).toBeDefined()
+
+ // Generate SQL - this should properly quote the "collation" column name
+ const sql = getTableRowsSql({
+ table: testTable!,
+ page: 1,
+ limit: 100,
+ })
+
+ // Verify SQL generation - the "collation" column should be properly quoted
+ expect(sql).toMatchInlineSnapshot(`
+ "with _base_query as (select * from public.test order by test.id asc nulls last limit 100 offset 0)
+ select id,case
+ when octet_length("collation"::text) > 10240
+ then left("collation"::text, 10240) || '...'
+ else "collation"::text
+ end as "collation" from _base_query;"
+ `)
+
+ // Execute the generated SQL and verify the results
+ const queryResult = await db.executeQuery(sql)
+ expect(queryResult.length).toBe(3)
+ expect(queryResult[0].collation).toBe('value1')
+ expect(queryResult[1].collation).toBe('value2')
+ expect(queryResult[2].collation).toBe('value3')
+
+ // Test with ORDER BY on the collation column
+ const sqlWithOrder = getTableRowsSql({
+ table: testTable!,
+ page: 1,
+ limit: 100,
+ sorts: [{ table: 'test', column: 'collation', ascending: true, nullsFirst: false }],
+ })
+
+ // Verify the ORDER BY clause properly quotes the collation column
+ expect(sqlWithOrder).toMatchInlineSnapshot(`
+ "with _base_query as (select * from public.test order by test."collation" asc nulls last limit 100 offset 0)
+ select id,case
+ when octet_length("collation"::text) > 10240
+ then left("collation"::text, 10240) || '...'
+ else "collation"::text
+ end as "collation" from _base_query;"
+ `)
+
+ const queryResultWithOrder = await db.executeQuery(sqlWithOrder)
+ expect(queryResultWithOrder.length).toBe(3)
+ expect(queryResultWithOrder[0].collation).toBe('value1')
+ expect(queryResultWithOrder[1].collation).toBe('value2')
+ expect(queryResultWithOrder[2].collation).toBe('value3')
+
+ // Test with FILTER on the collation column
+ const sqlWithFilter = getTableRowsSql({
+ table: testTable!,
+ page: 1,
+ limit: 100,
+ filters: [{ column: 'collation', operator: '=', value: 'value2' }],
+ })
+
+ // Verify the WHERE clause properly quotes the collation column
+ expect(sqlWithFilter).toMatchInlineSnapshot(`
+ "with _base_query as (select * from public.test where "collation" = 'value2' order by test.id asc nulls last limit 100 offset 0)
+ select id,case
+ when octet_length("collation"::text) > 10240
+ then left("collation"::text, 10240) || '...'
+ else "collation"::text
+ end as "collation" from _base_query;"
+ `)
+
+ const queryResultWithFilter = await db.executeQuery(sqlWithFilter)
+ expect(queryResultWithFilter.length).toBe(1)
+ expect(queryResultWithFilter[0].collation).toBe('value2')
+ })
})
diff --git a/packages/ui-patterns/package.json b/packages/ui-patterns/package.json
index d63410dd7e3b1..915a6e99e924c 100644
--- a/packages/ui-patterns/package.json
+++ b/packages/ui-patterns/package.json
@@ -605,11 +605,16 @@
"./MetricCard": {
"import": "./src/MetricCard/index.tsx",
"types": "./src/MetricCard/index.tsx"
+ },
+ "./Chart": {
+ "import": "./src/Chart/index.tsx",
+ "types": "./src/Chart/index.tsx"
}
},
"dependencies": {
"@hookform/resolvers": "^3.1.1",
"@monaco-editor/react": "^4.6.0",
+ "@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-visually-hidden": "^1.1.3",
"@std/toml": "jsr:^1.0.11",
"@supabase/sql-to-rest": "^0.1.6",
diff --git a/packages/ui-patterns/src/Chart/charts/chart-bar.tsx b/packages/ui-patterns/src/Chart/charts/chart-bar.tsx
new file mode 100644
index 0000000000000..a55bbf7001a3d
--- /dev/null
+++ b/packages/ui-patterns/src/Chart/charts/chart-bar.tsx
@@ -0,0 +1,230 @@
+'use client'
+
+import { useState, ReactNode } from 'react'
+import {
+ Bar,
+ Cell,
+ BarChart as RechartBarChart,
+ XAxis,
+ YAxis,
+ ReferenceArea,
+ CartesianGrid,
+} from 'recharts'
+import type { CategoricalChartState } from 'recharts/types/chart/types'
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, cn } from 'ui'
+import dayjs from 'dayjs'
+import { useTheme } from 'next-themes'
+
+const CHART_COLORS = {
+ TICK: 'hsl(var(--background-overlay-hover))',
+ AXIS: 'hsl(var(--background-overlay-hover))',
+ BRAND: 'hsl(var(--brand-default))',
+ BRAND_HOVER: 'hsl(var(--brand-500))',
+}
+
+export type ChartBarTick = {
+ timestamp: string
+ [key: string]: string | number
+}
+
+export type ChartHighlight = {
+ handleMouseDown: (e: { activeLabel?: string; coordinates?: string }) => void
+ handleMouseMove: (e: { activeLabel?: string; coordinates?: string }) => void
+ handleMouseUp: (e: { chartX?: number; chartY?: number }) => void
+ coordinates: { left?: string; right?: string }
+ clearHighlight?: () => void
+}
+
+export type ChartHighlightAction = {
+ id: string
+ label: string | ((ctx: { start: string; end: string; clear: () => void }) => string)
+ icon?: ReactNode
+ isDisabled?: (ctx: { start: string; end: string; clear: () => void }) => boolean
+ onSelect: (ctx: { start: string; end: string; clear: () => void }) => void
+}
+
+export interface ChartBarProps {
+ data: ChartBarTick[]
+ dataKey: string
+ config?: ChartConfig
+ onBarClick?: (datum: ChartBarTick, tooltipData?: CategoricalChartState) => void
+ DateTimeFormat?: string
+ isFullHeight?: boolean
+ className?: string
+ color?: string
+ hoverColor?: string
+ chartHighlight?: ChartHighlight
+ updateDateRange?: (from: string, to: string) => void
+ highlightActions?: ChartHighlightAction[]
+ syncId?: string
+ showHighlightArea?: boolean
+ cursor?: string
+ showGrid?: boolean
+ showYAxis?: boolean
+ YAxisProps?: {
+ tick?: boolean
+ tickFormatter?: (value: any) => string
+ width?: number
+ [key: string]: any
+ }
+}
+
+export const ChartBar = ({
+ data,
+ dataKey,
+ config,
+ onBarClick,
+ DateTimeFormat = 'MMM D, YYYY, hh:mma',
+ isFullHeight = false,
+ className,
+ color = CHART_COLORS.BRAND,
+ hoverColor = CHART_COLORS.BRAND_HOVER,
+ chartHighlight,
+ updateDateRange,
+ highlightActions,
+ syncId,
+ showHighlightArea = true,
+ cursor,
+ showGrid = false,
+ showYAxis = false,
+ YAxisProps,
+}: ChartBarProps) => {
+ const [focusDataIndex, setFocusDataIndex] = useState(null)
+ const { resolvedTheme } = useTheme()
+ const isDarkMode = resolvedTheme?.includes('dark')
+
+ if (data.length === 0) {
+ return null
+ }
+
+ const chartConfig: ChartConfig = config || {
+ [dataKey]: {
+ label: dataKey,
+ },
+ }
+
+ const showHighlightActions =
+ showHighlightArea &&
+ chartHighlight?.coordinates.left &&
+ chartHighlight?.coordinates.right &&
+ chartHighlight?.coordinates.left !== chartHighlight?.coordinates.right
+
+ const chartCursor = cursor || (chartHighlight ? 'crosshair' : 'default')
+
+ const yAxisConfig = {
+ tick: showYAxis,
+ hide: !showYAxis,
+ tickMargin: showYAxis ? YAxisProps?.tickMargin ?? 4 : 0,
+ width: showYAxis ? YAxisProps?.width ?? undefined : 0,
+ axisLine: { stroke: CHART_COLORS.AXIS },
+ tickLine: { stroke: CHART_COLORS.AXIS },
+ ...YAxisProps,
+ }
+
+ const margin = {
+ top: 0,
+ right: 0,
+ left: showYAxis ? -40 : 0,
+ bottom: 0,
+ }
+
+ return (
+
+
+ {
+ if (e.activeTooltipIndex !== focusDataIndex) {
+ setFocusDataIndex(e.activeTooltipIndex)
+ }
+
+ if (chartHighlight) {
+ const activeTimestamp = data[e.activeTooltipIndex]?.timestamp
+ chartHighlight.handleMouseMove({
+ activeLabel: activeTimestamp?.toString(),
+ coordinates: e.activeLabel,
+ })
+ }
+ }}
+ onMouseDown={(e: any) => {
+ if (chartHighlight && e.activeTooltipIndex !== undefined) {
+ const activeTimestamp = data[e.activeTooltipIndex]?.timestamp
+ chartHighlight.handleMouseDown({
+ activeLabel: activeTimestamp?.toString(),
+ coordinates: e.activeLabel,
+ })
+ }
+ }}
+ onMouseUp={(e: any) => {
+ if (chartHighlight) {
+ chartHighlight.handleMouseUp({
+ chartX: e?.chartX,
+ chartY: e?.chartY,
+ })
+ }
+ }}
+ onMouseLeave={() => {
+ setFocusDataIndex(null)
+ if (chartHighlight?.clearHighlight) {
+ chartHighlight.clearHighlight()
+ }
+ }}
+ onClick={(tooltipData) => {
+ const datum = tooltipData?.activePayload?.[0]?.payload
+ if (onBarClick) onBarClick(datum, tooltipData)
+ }}
+ >
+ {showGrid && dayjs(v).format(DateTimeFormat)}
+ />
+ }
+ />
+ {/* Selection highlight area */}
+ {showHighlightActions && (
+
+ {data?.map((_entry: ChartBarTick, index: number) => (
+ |
+ ))}
+
+
+
+ {data && data.length > 0 && (
+
+ {dayjs(data[0]['timestamp']).format(DateTimeFormat)}
+ {dayjs(data[data.length - 1]?.['timestamp']).format(DateTimeFormat)}
+
+ )}
+
(null)
+ const { resolvedTheme } = useTheme()
+ const isDarkMode = resolvedTheme?.includes('dark')
+
+ if (data.length === 0) {
+ return null
+ }
+
+ const chartConfig: ChartConfig = config || {
+ [dataKey]: {
+ label: dataKey,
+ },
+ }
+
+ const showHighlightActions =
+ showHighlightArea &&
+ chartHighlight?.coordinates.left &&
+ chartHighlight?.coordinates.right &&
+ chartHighlight?.coordinates.left !== chartHighlight?.coordinates.right
+
+ const chartCursor = cursor || (chartHighlight ? 'crosshair' : 'default')
+
+ const yAxisConfig = {
+ tick: showYAxis,
+ hide: !showYAxis,
+ tickMargin: showYAxis ? YAxisProps?.tickMargin ?? 4 : 0,
+ width: showYAxis ? YAxisProps?.width ?? undefined : 0,
+ axisLine: { stroke: CHART_COLORS.AXIS },
+ tickLine: { stroke: CHART_COLORS.AXIS },
+ ...YAxisProps,
+ }
+
+ const margin = {
+ top: 0,
+ right: 0,
+ left: showYAxis ? -40 : 0,
+ bottom: 0,
+ }
+
+ return (
+
+
+ {
+ if (e.activeTooltipIndex !== focusDataIndex) {
+ setFocusDataIndex(e.activeTooltipIndex)
+ }
+
+ if (chartHighlight) {
+ const activeTimestamp = data[e.activeTooltipIndex]?.timestamp
+ chartHighlight.handleMouseMove({
+ activeLabel: activeTimestamp?.toString(),
+ coordinates: e.activeLabel,
+ })
+ }
+ }}
+ onMouseDown={(e: any) => {
+ if (chartHighlight && e.activeTooltipIndex !== undefined) {
+ const activeTimestamp = data[e.activeTooltipIndex]?.timestamp
+ chartHighlight.handleMouseDown({
+ activeLabel: activeTimestamp?.toString(),
+ coordinates: e.activeLabel,
+ })
+ }
+ }}
+ onMouseUp={(e: any) => {
+ if (chartHighlight) {
+ chartHighlight.handleMouseUp({
+ chartX: e?.chartX,
+ chartY: e?.chartY,
+ })
+ }
+ }}
+ onMouseLeave={() => {
+ setFocusDataIndex(null)
+ if (chartHighlight?.clearHighlight) {
+ chartHighlight.clearHighlight()
+ }
+ }}
+ onClick={(tooltipData) => {
+ const datum = tooltipData?.activePayload?.[0]?.payload
+ if (onLineClick) onLineClick(datum, tooltipData)
+ }}
+ >
+ {showGrid && dayjs(v).format(DateTimeFormat)}
+ />
+ }
+ />
+ {/* Selection highlight area */}
+ {showHighlightActions && (
+
+
+ {data && data.length > 0 && (
+
+ {dayjs(data[0]['timestamp']).format(DateTimeFormat)}
+ {dayjs(data[data.length - 1]?.['timestamp']).format(DateTimeFormat)}
+
+ )}
+
({
+ isLoading: false,
+ isDisabled: false,
+})
+
+export const useChart = () => {
+ return useContext(ChartContext)
+}
+
+/* Chart Base */
+interface ChartProps extends React.HTMLAttributes {
+ children: React.ReactNode
+ isLoading?: boolean
+ isDisabled?: boolean
+ className?: string
+}
+
+const Chart = React.forwardRef(
+ ({ children, isLoading = false, isDisabled = false, className, ...props }, ref) => {
+ return (
+
+
+ {children}
+
+
+ )
+ }
+)
+Chart.displayName = 'Chart'
+
+/* Chart Card */
+interface ChartCardProps extends React.HTMLAttributes {
+ asChild?: boolean
+ children: React.ReactNode
+ className?: string
+}
+
+const ChartCard = React.forwardRef(
+ ({ children, className, asChild, ...props }, ref) => {
+ const Comp = asChild ? Slot : Card
+ return (
+
+ {children}
+
+ )
+ }
+)
+ChartCard.displayName = 'ChartCard'
+
+/* Chart Header Components */
+interface ChartHeaderProps extends React.HTMLAttributes {
+ align?: 'start' | 'center'
+ children: React.ReactNode
+}
+
+const ChartHeader = React.forwardRef(
+ ({ children, className, align = 'center', ...props }, ref) => {
+ return (
+
+ {children}
+
+ )
+ }
+)
+ChartHeader.displayName = 'ChartHeader'
+
+interface ChartTitleProps extends React.HTMLAttributes {
+ children: React.ReactNode
+ tooltip?: string
+}
+
+const ChartTitle = React.forwardRef(
+ ({ children, className, tooltip, ...props }, ref) => {
+ return (
+
+ {children}
+ {tooltip && (
+
+
+
+ {tooltip}
+
+ )}
+
+ )
+ }
+)
+ChartTitle.displayName = 'ChartTitle'
+
+export type ChartAction = {
+ label: string
+ icon?: React.ReactNode
+ onClick?: () => void
+ href?: string
+ type?: 'button' | 'link'
+ className?: string
+}
+
+interface ChartActionsProps extends React.HTMLAttributes {
+ actions?: ChartAction[]
+ children?: React.ReactNode
+}
+
+const ChartActions = React.forwardRef(
+ ({ actions, children, className, ...props }, ref) => {
+ if (children) {
+ return (
+
+ {children}
+
+ )
+ }
+
+ if (actions && actions.length > 0) {
+ return (
+
+ {actions.map((action, index) => {
+ const isLink = !!action.href
+
+ return (
+
+
+
+ {isLink ? (
+ {action.label}
+
+ ) : (
+ <>
+ {action.icon}
+ {action.label}
+
+ )}
+
+
+ {action.label}
+
+ )
+ })}
+
+ )
+ }
+
+ return null
+ }
+)
+ChartActions.displayName = 'ChartActions'
+
+/* Chart Metric */
+interface ChartMetricProps extends React.HTMLAttributes {
+ label: string
+ value: string | number | null | undefined
+ diffValue?: string | number | null | undefined
+ status?: 'positive' | 'negative' | 'warning' | 'default'
+ align?: 'start' | 'end'
+ tooltip?: string
+ className?: string
+}
+
+const ChartMetric = React.forwardRef(
+ ({ label, value, diffValue, className, status, align = 'start', tooltip, ...props }, ref) => {
+ const { isLoading } = useChart()
+
+ const { variant, formattedDiffValue } = useMemo(() => {
+ if (diffValue === null || diffValue === undefined) {
+ return { variant: 'default' as const, formattedDiffValue: null }
+ }
+
+ const numValue = typeof diffValue === 'string' ? parseFloat(diffValue) : diffValue
+
+ if (isNaN(numValue)) {
+ return { variant: 'default' as const, formattedDiffValue: String(diffValue) }
+ }
+
+ const variant: 'positive' | 'negative' | 'default' =
+ numValue > 0 ? 'positive' : numValue < 0 ? 'negative' : 'default'
+
+ const formattedDiffValue = numValue > 0 ? `+${diffValue}` : String(diffValue)
+
+ return { variant, formattedDiffValue }
+ }, [diffValue])
+
+ return (
+
+
+ {status && (
+
+ {label}
+ {tooltip && (
+
+
+
+ {tooltip}
+
+ )}
+
+
+
+ {isLoading ?
+ {diffValue !== null && diffValue !== undefined && !isLoading && (
+
{formattedDiffValue}
+ )}
+
{
+ children: React.ReactNode
+ className?: string
+ isEmpty?: boolean
+ emptyState?: React.ReactNode
+ loadingState?: React.ReactNode
+ disabledState?: React.ReactNode
+ disabledActions?: ChartAction[]
+}
+
+const ChartContent = React.forwardRef(
+ (
+ {
+ children,
+ className,
+ isEmpty = false,
+ emptyState,
+ loadingState,
+ disabledState,
+ disabledActions,
+ ...props
+ },
+ ref
+ ) => {
+ const { isLoading, isDisabled } = useChart()
+ let content: React.ReactNode
+
+ if (isDisabled) {
+ content = disabledState
+ } else if (isLoading) {
+ content = loadingState
+ } else if (isEmpty) {
+ content = emptyState
+ } else {
+ content = children
+ }
+
+ return (
+
+ {content}
+
+ )
+ }
+)
+ChartContent.displayName = 'ChartContent'
+
+/* Chart Empty State */
+interface ChartEmptyStateProps extends React.HTMLAttributes {
+ className?: string
+ icon?: React.ReactNode
+ title: string
+ description: string
+}
+
+const ChartEmptyState = React.forwardRef(
+ ({ className, icon, title, description, ...props }, ref) => {
+ return (
+
+ {icon && (
+
+ {icon}
+
+ )}
+
{title}
+
{description}
+
+
+ )
+}
+ChartLoadingState.displayName = 'ChartLoadingState'
+
+/* Chart Disabled State */
+type ChartDisabledStateActions = {
+ icon?: React.ReactNode
+ label: string
+ href?: string
+ onClick?: () => void
+ type?: 'button' | 'link'
+ className?: string
+}
+interface ChartDisabledStateProps extends React.HTMLAttributes {
+ icon?: React.ReactNode
+ label: string
+ description: string
+ actions?: ChartDisabledStateActions[]
+}
+
+const ChartDisabledState = ({ icon, label, description, actions }: ChartDisabledStateProps) => {
+ const [isHoveringButton, setIsHoveringButton] = useState(false)
+ const startDate = '2025-01-01'
+
+ const getExpDemoChartData = useMemo(() => {
+ return new Array(20).fill(0).map((_, index) => ({
+ period_start: new Date(startDate).getTime() + index * 1000,
+ demo: Math.floor(Math.pow(1.25, index) * 10),
+ max_demo: 1000,
+ }))
+ }, [])
+
+ const getDemoChartData = useRef(
+ new Array(20).fill(0).map((_, index) => ({
+ period_start: new Date(startDate).getTime() + index * 1000,
+ demo: Math.floor(Math.random() * 10) + 1,
+ max_demo: 1000,
+ }))
+ )
+
+ const demoData = isHoveringButton ? getExpDemoChartData : getDemoChartData.current
+
+ return (
+ <>
+
+
+
+
+
+
+
+ {icon && (
+
+ {icon}
+
+ )}
+
{label}
+
{description}
+ {actions && actions.length > 0 && (
+
+ {actions.map((action, index) => (
+ setIsHoveringButton(true)}
+ onMouseLeave={() => setIsHoveringButton(false)}
+ >
+ {action.href ?
+ ))}
+
+ )}
+
{
+ children: React.ReactNode
+}
+
+const ChartFooter = React.forwardRef(
+ ({ children, className, ...props }, ref) => {
+ return (
+
+ {children}
+
+ )
+ }
+)
+ChartFooter.displayName = 'ChartFooter'
+
+/* Metric Chart Components */
+interface ChartValueDifferentialProps extends React.HTMLAttributes {
+ variant?: 'positive' | 'negative' | 'default'
+}
+
+const ChartValueDifferential = React.forwardRef(
+ ({ className, variant = 'default', ...props }, ref) => {
+ const { isLoading } = useChart()
+
+ if (isLoading) {
+ return ) => {
+ if (!active || !payload || !payload.length) return null
+
+ const formatTimestamp = (timestamp: string) => {
+ const date = dayjs(timestamp)
+ const hour = date.hour()
+ const period = hour >= 12 ? 'pm' : 'am'
+ const displayHour = hour % 12 || 12
+
+ return `${date.format('MMM D')}, ${displayHour}${period}`
+ }
+
+ return (
+
+ {label && (
+
+ {formatTimestamp(payload[0].payload.timestamp)}
+
+ )}
+
{payload[0].value.toLocaleString(undefined, { maximumFractionDigits: 0 })}
+
{
+ data?: Array<{ value: number; [key: string]: any }>
+ dataKey?: string
+ className?: string
+}
+
+const ChartSparkline = React.forwardRef(
+ ({ className, data, dataKey, ...props }, ref) => {
+ if (!data || data.length === 0) {
+ return null
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+