Shitty gadgets removed. Some useful gadgets added.

frontend/src/components/today/TodayAreaChart.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import type { TodayChartBucket } from '@/types/today';
+import {
+  TODAY_CHART_AXIS_COLOR,
+  TODAY_CHART_GRID_COLOR,
+  TODAY_CHART_PRIMARY_COLOR,
+  TODAY_CHART_TOOLTIP_STYLE,
+} from '@/components/today/chart-theme';
+
+interface TodayAreaChartProps {
+  data: TodayChartBucket[];
+}
+
+export function TodayAreaChart({ data }: TodayAreaChartProps) {
+  return (
+    <ResponsiveContainer width="100%" height={220}>
+      <AreaChart data={data} margin={{ top: 8, right: 8, left: -12, bottom: 0 }}>
+        <defs>
+          <linearGradient id="todayAreaFill" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor={TODAY_CHART_PRIMARY_COLOR} stopOpacity={0.45} />
+            <stop offset="100%" stopColor={TODAY_CHART_PRIMARY_COLOR} stopOpacity={0.05} />
+          </linearGradient>
+        </defs>
+        <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
+        <XAxis
+          dataKey="label"
+          tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
+          axisLine={{ stroke: TODAY_CHART_GRID_COLOR }}
+          tickLine={false}
+          interval={1}
+        />
+        <YAxis
+          allowDecimals={false}
+          tick={{ fill: TODAY_CHART_AXIS_COLOR, fontSize: 11 }}
+          axisLine={false}
+          tickLine={false}
+          width={32}
+        />
+        <Tooltip
+          cursor={{ stroke: 'rgba(0, 188, 255, 0.25)' }}
+          contentStyle={TODAY_CHART_TOOLTIP_STYLE}
+          labelFormatter={(label) => String(label)}
+        />
+        <Area
+          type="monotone"
+          dataKey="count"
+          stroke={TODAY_CHART_PRIMARY_COLOR}
+          strokeWidth={2}
+          fill="url(#todayAreaFill)"
+          dot={{ r: 3, fill: TODAY_CHART_PRIMARY_COLOR, strokeWidth: 0 }}
+          activeDot={{ r: 5, fill: TODAY_CHART_PRIMARY_COLOR }}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}