Shitty gadgets removed. Some useful gadgets added.

frontend/src/components/today/TodayRadialGaugeChart.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { RadialBar, RadialBarChart, ResponsiveContainer } from 'recharts';
+
+import { TODAY_CHART_PRIMARY_COLOR } from '@/components/today/chart-theme';
+
+interface TodayRadialGaugeChartProps {
+  percent: number;
+  completed: number;
+  total: number;
+  percentLabel: string;
+  tasksLabel: string;
+}
+
+export function TodayRadialGaugeChart({
+  percent,
+  completed,
+  total,
+  percentLabel,
+  tasksLabel,
+}: TodayRadialGaugeChartProps) {
+  const clamped = Math.max(0, Math.min(100, percent));
+  const data = [{ name: 'completion', value: clamped, fill: TODAY_CHART_PRIMARY_COLOR }];
+
+  return (
+    <div className="relative h-[240px] w-full">
+      <ResponsiveContainer width="100%" height="100%">
+        <RadialBarChart
+          cx="50%"
+          cy="50%"
+          innerRadius="68%"
+          outerRadius="100%"
+          barSize={14}
+          data={data}
+          startAngle={90}
+          endAngle={-270}
+        >
+          <RadialBar
+            background={{ fill: 'rgba(41, 69, 106, 0.55)' }}
+            dataKey="value"
+            cornerRadius={8}
+          />
+        </RadialBarChart>
+      </ResponsiveContainer>
+      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center">
+        <span className="text-3xl font-semibold text-text-primary">{percentLabel}</span>
+        <span className="mt-1 text-xs text-text-muted">{tasksLabel}</span>
+        {total > 0 ? (
+          <span className="mt-0.5 text-[11px] text-text-secondary">
+            {completed}/{total}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+}