Scatter Chart

1"use client";
2 
3import type * as React from "react";
4import {
5	ScatterChart as RechartsScatterChart,
6	Scatter,
7	XAxis,
8	YAxis,
9} from "recharts";
10import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
11import {
12	type ChartConfig,
13	ChartContainer,
14	ChartTooltip,
15	ChartTooltipContent,
16} from "@/components/ui/chart";
17 
18const CHART_COLORS = ["#00bbff", "#34d399", "#60a5fa", "#f472b6", "#fb923c"];
19 
20function ChartCard({
21	title,
22	description,
23	footer,
24	children,
25	dataPoints = 0,
26}: {
27	title?: string;
28	description?: string;
29	footer?: string;
30	children: React.ReactNode;
31	dataPoints?: number;
32}) {
33	const width =
34		dataPoints > 0 ? Math.min(768, Math.max(300, dataPoints * 80)) : undefined;
35	return (
36		<Card
37			className="max-w-3xl"
38			style={width ? { width } : { width: "100%" }}
39		>
40			{(title || description) && (
41				<CardHeader className="pb-0">
42					{title && (
43						<p className="text-sm font-semibold text-card-foreground">
44							{title}
45						</p>
46					)}
47					{description && (
48						<p className="text-xs text-muted-foreground">{description}</p>
49					)}
50				</CardHeader>
51			)}
52			<CardContent>{children}</CardContent>
53			{footer && (
54				<CardFooter>
55					<p className="text-xs text-muted-foreground">{footer}</p>
56				</CardFooter>
57			)}
58		</Card>
59	);
60}
61 
62export type ScatterChartProps = {
63	data: Array<Record<string, string | number>>;
64	xKey: string;
65	yKey: string;
66	title?: string;
67	description?: string;
68	footer?: string;
69	labelKey?: string;
70};
71 
72export function ScatterChart(props: ScatterChartProps) {
73	const chartConfig: ChartConfig = {
74		scatter: { label: "Data", color: CHART_COLORS[0] },
75	};
76	return (
77		<ChartCard
78			title={props.title}
79			description={props.description}
80			footer={props.footer}
81			dataPoints={props.data.length}
82		>
83			<ChartContainer config={chartConfig} className="h-50 w-full">
84				<RechartsScatterChart>
85					<XAxis
86						dataKey={props.xKey}
87						axisLine={false}
88						tickLine={false}
89						tick={{ fill: "#71717a", fontSize: 11 }}
90					/>
91					<YAxis
92						dataKey={props.yKey}
93						axisLine={false}
94						tickLine={false}
95						tick={{ fill: "#71717a", fontSize: 11 }}
96					/>
97					<ChartTooltip content={<ChartTooltipContent />} />
98					<Scatter data={props.data} fill="var(--color-scatter)" />
99				</RechartsScatterChart>
100			</ChartContainer>
101		</ChartCard>
102	);
103}