({ data })
| 26 | } |
| 27 | |
| 28 | export const ActiveUserChart: FC<ActiveUserChartProps> = ({ data }) => { |
| 29 | return ( |
| 30 | <ChartContainer config={chartConfig} className="aspect-auto h-full"> |
| 31 | <AreaChart |
| 32 | accessibilityLayer |
| 33 | data={data} |
| 34 | margin={{ |
| 35 | top: 10, |
| 36 | left: 0, |
| 37 | right: 0, |
| 38 | }} |
| 39 | > |
| 40 | <CartesianGrid vertical={false} /> |
| 41 | <XAxis |
| 42 | dataKey="date" |
| 43 | tickLine={false} |
| 44 | tickMargin={12} |
| 45 | minTickGap={24} |
| 46 | tickFormatter={(value: string) => |
| 47 | formatDate(new Date(value), { |
| 48 | month: "short", |
| 49 | day: "numeric", |
| 50 | year: undefined, |
| 51 | hour: undefined, |
| 52 | minute: undefined, |
| 53 | second: undefined, |
| 54 | }) |
| 55 | } |
| 56 | /> |
| 57 | <YAxis |
| 58 | dataKey="amount" |
| 59 | tickLine={false} |
| 60 | axisLine={false} |
| 61 | tickMargin={12} |
| 62 | tickFormatter={(value: number) => { |
| 63 | return value === 0 ? "" : value.toLocaleString(); |
| 64 | }} |
| 65 | /> |
| 66 | <ChartTooltip |
| 67 | cursor={false} |
| 68 | content={ |
| 69 | <ChartTooltipContent |
| 70 | className="font-medium text-content-secondary" |
| 71 | labelClassName="text-content-primary" |
| 72 | labelFormatter={(_, p) => { |
| 73 | const item = p[0]; |
| 74 | return `${item.value} active users`; |
| 75 | }} |
| 76 | formatter={(_v, _n, item) => { |
| 77 | const date = new Date(item.payload.date); |
| 78 | return date.toLocaleString(undefined, { |
| 79 | month: "long", |
| 80 | day: "2-digit", |
| 81 | }); |
| 82 | }} |
| 83 | /> |
| 84 | } |
| 85 | /> |
nothing calls this directly
no test coverage detected