fix(hl-frontends): collapse redundant fee/volume panels, use chart range tabs

benchmarks/hyperliquid-frontends.yml

@@ -905,31 +905,11 @@ providers:
 # All five metrics come from the local hl-node harness and update at the
 # same sub-minute cadence as the main headline.
 metric_panels:
-  - id: fees_7d
-    label: Fees 7d
-    metric: hl_frontend_fees_usd_7d_v2
-    unit: usd
-    description: "Total builder fees collected over the rolling 7 day window in USD per Hyperliquid frontend."
-  - id: fees_30d
-    label: Fees 30d
-    metric: hl_frontend_fees_usd_30d_v2
-    unit: usd
-    description: "Total builder fees collected over the rolling 30 day window in USD."
-  - id: volume_24h
-    label: Volume 24h
+  - id: volume
+    label: Volume routed
     metric: hl_frontend_volume_usd_24h_v2
     unit: usd
-    description: "Notional USD routed through this frontend over the last 24 hours."
-  - id: volume_7d
-    label: Volume 7d
-    metric: hl_frontend_volume_usd_7d_v2
-    unit: usd
-    description: "Notional USD routed over the last 7 days."
-  - id: volume_30d
-    label: Volume 30d
-    metric: hl_frontend_volume_usd_30d_v2
-    unit: usd
-    description: "Notional USD routed over the last 30 days."
+    description: "Notional USD routed through this frontend in the last 24 hours. Use the chart range tabs (1h, 6h, 24h, 7d, 30d) to see the trend over longer windows."
   - id: users
     label: Users 24h
     metric: hl_frontend_users_24h_v2

src/components/distribution-chart.tsx

@@ -51,7 +51,10 @@
   onToggleExclude,
   onResetExcluded,
   topNControl,
+<<<<<<< HEAD
+=======
   disableTopN,
+>>>>>>> origin/dev
   headerActions,
 }: {
   benchmark: Benchmark;
@@ -64,7 +67,10 @@
    *  the card corner or eating a footer row of its own. */
   headerActions?: ReactNode;
   topNControl?: { topN: number | null; setTopN: (n: number | null) => void };
+<<<<<<< HEAD
+=======
   disableTopN?: boolean;
+>>>>>>> origin/dev
 }) {
   const { results, unit, higherIsBetter } = benchmark;
   const { excluded, toggle, reset } = useChartExclusion(
@@ -90,7 +96,11 @@
   );
   // Top-N selector — shared shape with the other chart views so the
   // reader can focus on the top tail without losing the option to widen.
+<<<<<<< HEAD
+  const { topN, setTopN, topNOptions } = useTopN(sortedAll.length, { external: topNControl });
+=======
   const { topN, setTopN, topNOptions } = useTopN(sortedAll.length, { external: topNControl, disabled: disableTopN });
+>>>>>>> origin/dev
   const sorted = useMemo(
     () => (topN == null ? sortedAll : sortedAll.slice(0, topN)),
     [sortedAll, topN],

src/components/donut-chart.tsx

@@ -39,15 +39,21 @@
   excluded: controlledExcluded,
   onToggleExclude,
   topNControl,
+<<<<<<< HEAD
+=======
   disableTopN,
+>>>>>>> origin/dev
   headerActions,
 }: {
   benchmark: Benchmark;
   excluded?: Set<string>;
   onToggleExclude?: (slug: string) => void;
   headerActions?: ReactNode;
   topNControl?: { topN: number | null; setTopN: (n: number | null) => void };
+<<<<<<< HEAD
+=======
   disableTopN?: boolean;
+>>>>>>> origin/dev
 }) {
   const { results } = benchmark;
   const { excluded, toggle } = useChartExclusion(
@@ -62,7 +68,11 @@
   // Top-N selector — clip the cohort BEFORE applying exclusion so the
   // "top N" semantic matches what every other view shows. Sized off
   // the live provider count via the shared `useTopN` hook.
+<<<<<<< HEAD
+  const { topN, setTopN, topNOptions } = useTopN(liveAll.length, { external: topNControl });
+=======
   const { topN, setTopN, topNOptions } = useTopN(liveAll.length, { external: topNControl, disabled: disableTopN });
+>>>>>>> origin/dev
   const liveClipped = useMemo(
     () =>
       topN == null