+
)
diff --git a/packages/ui-patterns/package.json b/packages/ui-patterns/package.json
index d63410dd7e3..915a6e99e92 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 00000000000..a55bbf7001a
--- /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 (
+
+
+
+
+
+
+
+
+
+