86 lines
2.0 KiB
TypeScript
86 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useTheme } from "next-themes";
|
|
import { colors } from "@/lib/colors";
|
|
import { useConfig } from "@/hooks/use-config";
|
|
import {
|
|
CartesianGrid,
|
|
Cell,
|
|
XAxis,
|
|
YAxis,
|
|
ResponsiveContainer,
|
|
BarChart,
|
|
Bar,
|
|
Tooltip,
|
|
} from "recharts";
|
|
import { data } from "./data";
|
|
import CustomTooltip from "./custom-tooltip";
|
|
|
|
const getPath = (x: number, y: number, width: number, height: number) => {
|
|
return `M${x},${y + height}C${x + width / 3},${y + height} ${x + width / 2},${y + height / 3
|
|
}
|
|
${x + width / 2}, ${y}
|
|
C${x + width / 2},${y + height / 3} ${x + (2 * width) / 3},${y + height} ${x + width
|
|
}, ${y + height}
|
|
Z`;
|
|
};
|
|
|
|
const TriangleBar = (props: any) => {
|
|
const { fill, x, y, width, height } = props;
|
|
|
|
return <path d={getPath(x, y, width, height)} stroke="none" fill={fill} />;
|
|
};
|
|
|
|
const CustomShape = ({ height = 300 }) => {
|
|
|
|
const { theme: mode } = useTheme();
|
|
|
|
|
|
return (
|
|
<ResponsiveContainer width="100%" height={height}>
|
|
<BarChart height={height} data={data}>
|
|
<CartesianGrid
|
|
stroke='none'
|
|
strokeDasharray="3 3"
|
|
vertical={false}
|
|
/>
|
|
|
|
<XAxis
|
|
dataKey="name"
|
|
tick={{
|
|
fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
|
|
fontSize: "12px",
|
|
}}
|
|
tickLine={false}
|
|
stroke='none'
|
|
axisLine={false}
|
|
/>
|
|
<YAxis
|
|
tick={{
|
|
fill: mode === 'light' ? colors["default-600"] : colors["default-300"],
|
|
fontSize: "12px",
|
|
}}
|
|
tickLine={false}
|
|
stroke='none'
|
|
/>
|
|
<Tooltip content={<CustomTooltip />} />
|
|
<Bar
|
|
dataKey="uv"
|
|
fill="#8884d8"
|
|
shape={<TriangleBar />}
|
|
label={{ position: "top" }}
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell
|
|
key={`cell-${index}`}
|
|
fill={colors.primary}
|
|
/>
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
};
|
|
|
|
export default CustomShape;
|