103 lines
2.6 KiB
TypeScript
103 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useTheme } from "next-themes";
|
|
import { colors } from "@/lib/colors";
|
|
import { useConfig } from "@/hooks/use-config";
|
|
import {
|
|
CartesianGrid,
|
|
XAxis,
|
|
YAxis,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
AreaChart,
|
|
Area,
|
|
} from "recharts";
|
|
import { curveCardinal } from "d3-shape";
|
|
|
|
|
|
const CustomTooltip = ({ active, payload }: any) => {
|
|
if (active && payload && payload.length > 0) {
|
|
return (
|
|
<div className="bg-slate-900 text-primary-foreground p-3 rounded-md gap-2">
|
|
<span>{`${payload[0].name}`}</span>
|
|
<span>:</span>
|
|
<span>{`${payload[0].value}%`}</span>
|
|
</div>
|
|
);
|
|
}
|
|
return null;
|
|
};
|
|
|
|
|
|
|
|
const CardinalAreaChart = ({ height = 300 }) => {
|
|
|
|
const { theme: mode } = useTheme();
|
|
|
|
const cardinal = curveCardinal.tension(0.2);
|
|
|
|
const data = [
|
|
{ name: "Page A", uv: 4000, pv: 2400, amt: 2400 },
|
|
{ name: "Page B", uv: 3000, pv: 1398, amt: 2210 },
|
|
{ name: "Page C", uv: 2000, pv: 9800, amt: 2290 },
|
|
{ name: "Page D", uv: 2780, pv: 3908, amt: 2000 },
|
|
{ name: "Page E", uv: 1890, pv: 4800, amt: 2181 },
|
|
{ name: "Page F", uv: 2390, pv: 3800, amt: 2500 },
|
|
{ name: "Page G", uv: 3490, pv: 4300, amt: 2100 },
|
|
];
|
|
|
|
return (
|
|
<ResponsiveContainer height={height}>
|
|
<AreaChart width={600} height={300} data={data}>
|
|
<CartesianGrid
|
|
stroke='none'
|
|
strokeDasharray="1 1"
|
|
vertical={false}
|
|
/>
|
|
<XAxis
|
|
dataKey="name"
|
|
tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
|
|
tickLine={false}
|
|
stroke='none'
|
|
axisLine={false}
|
|
/>
|
|
<YAxis
|
|
tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
|
|
tickLine={false}
|
|
stroke='none'
|
|
axisLine={false}
|
|
/>
|
|
<Tooltip content={<CustomTooltip />} />
|
|
<Area
|
|
type="monotone"
|
|
dataKey="uv"
|
|
stackId="1"
|
|
stroke={colors.warning}
|
|
dot={true}
|
|
strokeWidth={2}
|
|
fill={colors.warning}
|
|
style={{
|
|
opacity: 0.5,
|
|
"--theme-warning": colors.warning,
|
|
} as React.CSSProperties}
|
|
/>
|
|
<Area
|
|
type={cardinal}
|
|
dataKey="uv"
|
|
stackId="1"
|
|
stroke={colors.success}
|
|
dot={true}
|
|
strokeWidth={2}
|
|
fill={colors.success}
|
|
style={{
|
|
opacity: 0.5,
|
|
"--theme-success": colors.success,
|
|
} as React.CSSProperties}
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
};
|
|
|
|
export default CardinalAreaChart;
|