117 lines
2.8 KiB
TypeScript
117 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useTheme } from "next-themes";
|
|
import { colors } from "@/lib/colors";
|
|
import { useConfig } from "@/hooks/use-config";
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
CartesianGrid,
|
|
XAxis,
|
|
YAxis,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from "recharts";
|
|
import CustomTooltip from "./custom-tooltip";
|
|
|
|
const ConnectNulls = ({ height = 300 }) => {
|
|
|
|
const { theme: mode } = useTheme();
|
|
|
|
|
|
const data = [
|
|
{ name: "Page A", uv: 4000 },
|
|
{ name: "Page B", uv: 3000 },
|
|
{ name: "Page C", uv: 2000 },
|
|
{ name: "Page D" },
|
|
{ name: "Page E", uv: 1890 },
|
|
{ name: "Page F", uv: 2390 },
|
|
{ name: "Page G", uv: 3490 },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<ResponsiveContainer height={height}>
|
|
<LineChart height={height} data={data}>
|
|
<CartesianGrid
|
|
stroke='none'
|
|
strokeDasharray="1 1"
|
|
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 />
|
|
<Line
|
|
type="monotone"
|
|
dataKey="uv"
|
|
dot={{
|
|
stroke: colors.primary,
|
|
strokeWidth: 2,
|
|
}}
|
|
stroke={colors.warning}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
<div className="mt-4"></div>
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<LineChart width={500} height={200} data={data}>
|
|
<CartesianGrid
|
|
stroke='none'
|
|
strokeDasharray="1 1"
|
|
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 />
|
|
<Line
|
|
connectNulls
|
|
type="monotone"
|
|
dataKey="uv"
|
|
dot={{
|
|
stroke: colors.primary,
|
|
strokeWidth: 2,
|
|
}}
|
|
stroke={colors.warning}
|
|
fill={colors.warning}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default ConnectNulls;
|