Add Recharts bar charts to Today dashboard summary.

Extend the Today summary API with treatment mix and workflow task breakdowns, and render permission-aware chart cards on the Today page using Recharts. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-11 00:34:38 +03:30
parent 22466490bf
commit 10959e3183
14 changed files with 754 additions and 22 deletions
--- a/frontend/src/components/today/TodayBarChart.tsx
+++ b/frontend/src/components/today/TodayBarChart.tsx
@@ -0,0 +1,83 @@
+'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)}…`;
+}