mirror of
https://github.com/hanzoai/sign.git
synced 2026-10-30 14:57:59 +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]>
76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import { DateTime } from 'luxon';
|
|
import type { TooltipContentProps } from 'recharts';
|
|
import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
|
|
import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
|
|
|
|
import type { GetMonthlyActiveUsersResult } from '@hanzo/esign-lib/server-only/admin/get-users-stats';
|
|
|
|
export type MonthlyActiveUsersChartProps = {
|
|
className?: string;
|
|
title: string;
|
|
cummulative?: boolean;
|
|
data: GetMonthlyActiveUsersResult;
|
|
};
|
|
|
|
// Rendered as <CustomTooltip />, which recharts clones with the tooltip's props.
|
|
const CustomTooltip = ({
|
|
active,
|
|
payload,
|
|
label,
|
|
}: Partial<TooltipContentProps<ValueType, NameType>>) => {
|
|
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>{label}</p>
|
|
<p className="text-sign">
|
|
{payload[0].name === 'cume_count' ? 'Cumulative MAU' : 'Monthly Active Users'}:{' '}
|
|
<span className="text-black">{Number(payload[0].value).toLocaleString('en-US')}</span>
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
export const MonthlyActiveUsersChart = ({
|
|
className,
|
|
data,
|
|
title,
|
|
cummulative = false,
|
|
}: MonthlyActiveUsersChartProps) => {
|
|
const formattedData = [...data].reverse().map(({ month, count, cume_count }) => {
|
|
return {
|
|
month: DateTime.fromFormat(month, 'yyyy-MM').toFormat('MMM yyyy'),
|
|
count: Number(count),
|
|
cume_count: Number(cume_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 px-4">
|
|
<h3 className="text-lg font-semibold">{title}</h3>
|
|
</div>
|
|
|
|
<ResponsiveContainer width="100%" height={400}>
|
|
<BarChart data={formattedData}>
|
|
<XAxis dataKey="month" />
|
|
<YAxis />
|
|
|
|
<Tooltip content={<CustomTooltip />} cursor={{ fill: 'hsl(var(--primary) / 10%)' }} />
|
|
|
|
<Bar
|
|
dataKey={cummulative ? 'cume_count' : 'count'}
|
|
fill="hsl(var(--primary))"
|
|
radius={[4, 4, 0, 0]}
|
|
maxBarSize={60}
|
|
/>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|