Some functionality added to dashboard gadgets.

frontend/src/components/today/TodayRadialGaugeChart.tsx

@@ -18,6 +18,12 @@ interface TodayRadialGaugeChartProps {
   size?: 'sm' | 'md';
   fillColor?: string;
   showRatio?: boolean;
+  /** Override ring hole size (e.g. "72%" leaves more room for center labels). */
+  innerRadius?: string | number;
+  /** Override compact chart wrapper height class when size is "sm". */
+  compactClassName?: string;
+  /** Ring thickness when size is "sm". */
+  compactBarSize?: number;
 }
 
 export function TodayRadialGaugeChart({
@@ -29,20 +35,28 @@ export function TodayRadialGaugeChart({
   size = 'md',
   fillColor = TODAY_CHART_PRIMARY_COLOR,
   showRatio = true,
+  innerRadius,
+  compactClassName,
+  compactBarSize,
 }: TodayRadialGaugeChartProps) {
   const isCompact = size === 'sm';
   const clamped = Math.max(0, Math.min(100, percent));
   const data = [{ name: 'progress', value: clamped, fill: fillColor }];
+  const resolvedInnerRadius = innerRadius ?? (isCompact ? '62%' : '68%');
+  const resolvedBarSize = isCompact ? (compactBarSize ?? 9) : 14;
+  const wrapperClass = isCompact
+    ? compactClassName ?? 'h-[108px]'
+    : 'h-full min-h-0 flex-1';
 
   return (
-    <div className={`relative w-full ${isCompact ? 'h-[108px]' : 'h-full min-h-0 flex-1'}`}>
+    <div className={`relative w-full ${wrapperClass}`}>
       <ResponsiveContainer width="100%" height="100%">
         <RadialBarChart
           cx="50%"
           cy="50%"
-          innerRadius={isCompact ? '62%' : '68%'}
+          innerRadius={resolvedInnerRadius}
           outerRadius="100%"
-          barSize={isCompact ? 9 : 14}
+          barSize={resolvedBarSize}
           data={data}
           startAngle={90}
           endAngle={-270}
@@ -55,7 +69,11 @@ export function TodayRadialGaugeChart({
           />
         </RadialBarChart>
       </ResponsiveContainer>
-      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center px-1">
+      <div
+        className={`pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center ${
+          innerRadius != null && isCompact ? 'px-2.5' : 'px-1'
+        }`}
+      >
         <span
           className={`font-semibold text-text-primary ${isCompact ? 'text-base leading-tight' : 'text-3xl'}`}
         >