EdgeFunctionTimeSeriesChartCard.tsx78 lines · main

1	import type { ReactNode } from 'react'
2	import type { ChartConfig } from 'ui'
3	import {
4	Chart,
5	ChartCard,
6	ChartContent,
7	ChartHeader,
8	ChartLine,
9	ChartLoadingState,
10	type ChartLineProps,
11	} from 'ui-patterns/Chart'
12
13	import { EdgeFunctionChartEmptyState } from './EdgeFunctionChartEmptyState'
14	import type { EdgeFunctionChartDatum } from './EdgeFunctionOverview.utils'
15
16	interface EdgeFunctionTimeSeriesChartCardProps {
17	data: EdgeFunctionChartDatum[]
18	dateTimeFormat: string
19	isLoading: boolean
20	isError: boolean
21	emptyTitle: string
22	emptyDescription?: string
23	metrics: ReactNode
24	dataKey: string
25	dataKeys?: string[]
26	config: ChartConfig
27	tooltipDetails?: ChartLineProps['tooltipDetails']
28	referenceLines?: ChartLineProps['referenceLines']
29	yAxisProps?: ChartLineProps['YAxisProps']
30	className?: string
31	}
32
33	export const EdgeFunctionTimeSeriesChartCard = ({
34	data,
35	dateTimeFormat,
36	isLoading,
37	isError,
38	emptyTitle,
39	emptyDescription,
40	metrics,
41	dataKey,
42	dataKeys,
43	config,
44	tooltipDetails,
45	referenceLines,
46	yAxisProps,
47	className,
48	}: EdgeFunctionTimeSeriesChartCardProps) => {
49	return (
50	<Chart isLoading={isLoading} className={className}>
51	<ChartCard>
52	<ChartHeader align="start">{metrics}</ChartHeader>
53	<ChartContent
54	isEmpty={isError || data.length === 0}
55	emptyState={
56	<EdgeFunctionChartEmptyState title={emptyTitle} description={emptyDescription} />
57	}
58	loadingState={<ChartLoadingState />}
59	>
60	<div className="h-40">
61	<ChartLine
62	data={data}
63	dataKey={dataKey}
64	dataKeys={dataKeys}
65	DateTimeFormat={dateTimeFormat}
66	isFullHeight
67	showYAxis
68	config={config}
69	tooltipDetails={tooltipDetails}
70	referenceLines={referenceLines}
71	YAxisProps={yAxisProps}
72	/>
73	</div>
74	</ChartContent>
75	</ChartCard>
76	</Chart>
77	)
78	}