feat(stats): Trends dashboard overhaul — title visibility, ranking modes, calendar-accurate windows, tooltips (#140)

stats/src/components/trends/DateRangeSelector.tsx

@@ -3,8 +3,10 @@ import type { TimeRange, GroupBy } from '../../hooks/useTrends';
 interface DateRangeSelectorProps {
   range: TimeRange;
   groupBy: GroupBy;
+  fillEmpty: boolean;
   onRangeChange: (r: TimeRange) => void;
   onGroupByChange: (g: GroupBy) => void;
+  onFillEmptyChange: (fillEmpty: boolean) => void;
 }
 
 function SegmentedControl<T extends string>({
@@ -46,11 +48,13 @@ function SegmentedControl<T extends string>({
 export function DateRangeSelector({
   range,
   groupBy,
+  fillEmpty,
   onRangeChange,
   onGroupByChange,
+  onFillEmptyChange,
 }: DateRangeSelectorProps) {
   return (
-    <div className="flex items-center gap-4 text-sm">
+    <div className="flex flex-wrap items-center gap-4 text-sm">
       <SegmentedControl
         label="Range"
         options={['7d', '30d', '90d', '365d', 'all'] as TimeRange[]}
@@ -65,6 +69,13 @@ export function DateRangeSelector({
         onChange={onGroupByChange}
         formatLabel={(g) => g.charAt(0).toUpperCase() + g.slice(1)}
       />
+      <SegmentedControl
+        label="Empty days"
+        options={['show', 'hide']}
+        value={fillEmpty ? 'show' : 'hide'}
+        onChange={(v) => onFillEmptyChange(v === 'show')}
+        formatLabel={(v) => (v === 'show' ? 'Show' : 'Hide')}
+      />
     </div>
   );
 }