84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import {
|
||
|
|
Bar,
|
||
|
|
BarChart,
|
||
|
|
CartesianGrid,
|
||
|
|
Cell,
|
||
|
|
ResponsiveContainer,
|
||
|
|
Tooltip,
|
||
|
|
XAxis,
|
||
|
|
YAxis,
|
||
|
|
} from 'recharts';
|
||
|
|
import type { TodayChartBucket } from '@/types/today';
|
||
|
|
import {
|
||
|
|
TODAY_CHART_AXIS_COLOR,
|
||
|
|
TODAY_CHART_COLORS,
|
||
|
|
TODAY_CHART_GRID_COLOR,
|
||
|
|
TODAY_CHART_TOOLTIP_BG,
|
||
|
|
TODAY_CHART_TOOLTIP_BORDER,
|
||
|
|
} from '@/components/today/chart-theme';
|
||
|
|
|
||
|
|
interface TodayBarChartProps {
|
||
|
|
data: TodayChartBucket[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TodayBarChart({ data }: TodayBarChartProps) {
|
||
|
|
const chartData = data.map((item) => ({
|
||
|
|
...item,
|
||
|
|
shortLabel: truncateLabel(item.label),
|
||
|
|
}));
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ResponsiveContainer width="100%" height={220}>
|
||
|
|
<BarChart
|
||
|
|
data={chartData}
|
||
|
|
margin={{ top: 8, right: 8, left: -12, bottom: 0 }}
|
||
|
|
>
|
||
|
|
<CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
|
||
|
|
<XAxis
|
||
|
|
dataKey="shortLabel"
|
||
|
|
tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
|
||
|
|
axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
|
||
|
|
tickLine={false}
|
||
|
|
interval={0}
|
||
|
|
/>
|
||
|
|
<YAxis
|
||
|
|
allowDecimals={false}
|
||
|
|
tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
|
||
|
|
axisLine={false}
|
||
|
|
tickLine={false}
|
||
|
|
width={32}
|
||
|
|
/>
|
||
|
|
<Tooltip
|
||
|
|
cursor={{ fill: 'rgba(0, 188, 255, 0.08)' }}
|
||
|
|
contentStyle={{
|
||
|
|
backgroundColor: TODAY_CHART_TOOLTIP_BG,
|
||
|
|
border: `1px solid ${TODAY_CHART_TOOLTIP_BORDER}`,
|
||
|
|
borderRadius: '6px',
|
||
|
|
color: '#f5f9ff',
|
||
|
|
fontSize: '12px',
|
||
|
|
}}
|
||
|
|
labelFormatter={(_, payload) => {
|
||
|
|
const row = payload?.[0]?.payload as TodayChartBucket | undefined;
|
||
|
|
return row?.label ?? '';
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Bar dataKey="count" radius={[4, 4, 0, 0]} maxBarSize={48}>
|
||
|
|
{chartData.map((entry, index) => (
|
||
|
|
<Cell
|
||
|
|
key={entry.code}
|
||
|
|
fill={TODAY_CHART_COLORS[index % TODAY_CHART_COLORS.length]}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</Bar>
|
||
|
|
</BarChart>
|
||
|
|
</ResponsiveContainer>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function truncateLabel(label: string, max = 12): string {
|
||
|
|
if (label.length <= max) return label;
|
||
|
|
return `${label.slice(0, max - 1)}…`;
|
||
|
|
}
|