mirror of
https://github.com/hanzoai/sign.git
synced 2026-10-21 01:21:51 +00:00
zeekayandHanzo Dev
869197b3b3
recharts went from 2 to 3. A custom tooltip's props are now TooltipContentProps — TooltipProps no longer carries payload or label — and a Bar's `label` no longer takes a string. The tooltips take Partial<TooltipContentProps>: each is rendered as <CustomTooltip /> with no props, and recharts clones it with the tooltip's. The three string labels go. recharts 3 renders a label only for true, an element, a function or an object, and returns null for anything else, as 2 did, so those strings never drew anything. Co-authored-by: Hanzo Dev <[email protected]>
89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import { DateTime } from 'luxon';
|
|
import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
|
|
import type { TooltipContentProps } from 'recharts';
|
|
import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
|
|
|
|
import type { GetUserWithDocumentMonthlyGrowth } from '@hanzo/esign-lib/server-only/admin/get-users-stats';
|
|
|
|
export type AdminStatsUsersWithDocumentsChartProps = {
|
|
className?: string;
|
|
title: string;
|
|
data: GetUserWithDocumentMonthlyGrowth;
|
|
completed?: boolean;
|
|
tooltip?: string;
|
|
};
|
|
|
|
// Rendered as <CustomTooltip />, which recharts clones with the tooltip's props.
|
|
const CustomTooltip = ({
|
|
active,
|
|
payload,
|
|
label,
|
|
tooltip,
|
|
}: Partial<TooltipContentProps<ValueType, NameType>> & { tooltip?: string }) => {
|
|
if (active && payload && payload.length) {
|
|
return (
|
|
<div className="z-100 w-60 space-y-1 rounded-md border border-solid bg-white p-2 px-3">
|
|
<p className="">{label}</p>
|
|
<p className="text-sign">
|
|
{`${tooltip} : `}
|
|
<span className="text-black">{payload[0].value}</span>
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
export const AdminStatsUsersWithDocumentsChart = ({
|
|
className,
|
|
data,
|
|
title,
|
|
completed = false,
|
|
tooltip,
|
|
}: AdminStatsUsersWithDocumentsChartProps) => {
|
|
const formattedData = (data: GetUserWithDocumentMonthlyGrowth, completed: boolean) => {
|
|
return [...data].reverse().map(({ month, count, signed_count }) => {
|
|
const formattedMonth = DateTime.fromFormat(month, 'yyyy-MM').toFormat('LLL');
|
|
if (completed) {
|
|
return {
|
|
month: formattedMonth,
|
|
count: Number(signed_count),
|
|
};
|
|
} else {
|
|
return {
|
|
month: formattedMonth,
|
|
count: Number(count),
|
|
};
|
|
}
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className={className}>
|
|
<div className="border-border flex flex-1 flex-col justify-center rounded-2xl border p-6 pl-2">
|
|
<div className="mb-6 flex h-12 px-4">
|
|
<h3 className="text-lg font-semibold">{title}</h3>
|
|
</div>
|
|
|
|
<ResponsiveContainer width="100%" height={400}>
|
|
<BarChart data={formattedData(data, completed)}>
|
|
<XAxis dataKey="month" />
|
|
<YAxis />
|
|
|
|
<Tooltip
|
|
content={<CustomTooltip tooltip={tooltip} />}
|
|
labelStyle={{
|
|
color: 'hsl(var(--primary-foreground))',
|
|
}}
|
|
cursor={{ fill: 'hsl(var(--primary) / 10%)' }}
|
|
/>
|
|
|
|
<Bar dataKey="count" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} maxBarSize={60} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|