144 lines
2.8 KiB
TypeScript
144 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useTheme } from "next-themes";
|
|
import { colors } from "@/lib/colors";
|
|
import { useConfig } from "@/hooks/use-config";
|
|
import {
|
|
CartesianGrid,
|
|
XAxis,
|
|
YAxis,
|
|
ResponsiveContainer,
|
|
AreaChart,
|
|
Area,
|
|
} from "recharts";
|
|
|
|
const PercentReAreaChart = ({ height = 300 }) => {
|
|
|
|
const { theme: mode } = useTheme();
|
|
|
|
|
|
const data = [
|
|
{
|
|
month: "2015.01",
|
|
a: 4000,
|
|
b: 2400,
|
|
c: 2400,
|
|
},
|
|
{
|
|
month: "2015.02",
|
|
a: 3000,
|
|
b: 1398,
|
|
c: 2210,
|
|
},
|
|
{
|
|
month: "2015.03",
|
|
a: 2000,
|
|
b: 9800,
|
|
c: 2290,
|
|
},
|
|
{
|
|
month: "2015.04",
|
|
a: 2780,
|
|
b: 3908,
|
|
c: 2000,
|
|
},
|
|
{
|
|
month: "2015.05",
|
|
a: 1890,
|
|
b: 4800,
|
|
c: 2181,
|
|
},
|
|
{
|
|
month: "2015.06",
|
|
a: 2390,
|
|
b: 3800,
|
|
c: 2500,
|
|
},
|
|
{
|
|
month: "2015.07",
|
|
a: 3490,
|
|
b: 4300,
|
|
c: 2100,
|
|
},
|
|
];
|
|
|
|
const toPercent = (decimal: number, fixed = 0) =>
|
|
`${(decimal * 100).toFixed(fixed)}%`;
|
|
|
|
const getPercent = (value: number, total: number) => {
|
|
const ratio = total > 0 ? value / total : 0;
|
|
|
|
return toPercent(ratio, 2);
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
<ResponsiveContainer height={height}>
|
|
<AreaChart width={600} height={300} data={data} stackOffset="expand">
|
|
<CartesianGrid
|
|
stroke='none'
|
|
strokeDasharray="1 1"
|
|
vertical={false}
|
|
/>
|
|
<XAxis
|
|
dataKey="month"
|
|
tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
|
|
tickLine={false}
|
|
stroke='none'
|
|
axisLine={false}
|
|
/>
|
|
<YAxis
|
|
tickFormatter={toPercent}
|
|
tick={{ fill: mode === 'light' ? colors["default-600"] : colors["default-300"], fontSize: 12 }}
|
|
tickLine={false}
|
|
stroke='none'
|
|
axisLine={false}
|
|
/>
|
|
|
|
<Area
|
|
type="monotone"
|
|
dataKey="a"
|
|
stackId="1"
|
|
stroke={colors.warning}
|
|
dot={true}
|
|
strokeWidth={2}
|
|
fill={colors.warning}
|
|
style={{
|
|
opacity: 0.5,
|
|
|
|
} as React.CSSProperties}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="b"
|
|
stackId="1"
|
|
stroke={colors.success}
|
|
dot={true}
|
|
strokeWidth={2}
|
|
fill={colors.success}
|
|
style={{
|
|
opacity: 0.5,
|
|
|
|
} as React.CSSProperties}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="c"
|
|
stroke={colors.primary}
|
|
dot={true}
|
|
strokeWidth={2}
|
|
fill={colors.primary}
|
|
style={{
|
|
opacity: 0.5,
|
|
|
|
|
|
} as React.CSSProperties}
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
};
|
|
|
|
export default PercentReAreaChart;
|