refactor(frontend): extract ChartCard into its own component file

Move the ChartCard component out of chartUtils.ts into a dedicated
ChartCard.tsx. This keeps chartUtils.ts as pure (non-React) utilities,
improving Fast Refresh behavior and matching the many-small-files
convention. Updates all import sites in data-explorer and heor.

Author: sudoshi

frontend/src/features/data-explorer/components/charts/ChartCard.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+interface ChartCardProps {
+  title?: string;
+  subtitle?: string;
+  children: ReactNode;
+  className?: string;
+}
+
+export function ChartCard({ title, subtitle, children, className }: ChartCardProps) {
+  return (
+    <div className={`rounded-xl border border-border-default bg-surface-raised p-6 ${className ?? ""}`}>
+      {title && (
+        <h3 className="mb-1 text-sm font-semibold uppercase tracking-wider text-text-muted">
+          {title}
+        </h3>
+      )}
+      {subtitle && (
+        <p className="mb-4 text-xs text-text-ghost">{subtitle}</p>
+      )}
+      {!subtitle && title && <div className="mb-4" />}
+      {children}
+    </div>
+  );
+}

frontend/src/features/data-explorer/components/charts/chartUtils.ts

@@ -1,5 +1,3 @@
-import type { ReactNode } from "react";
-
 // ── Number formatting ────────────────────────────────────────────────────────
 
 /** Format large numbers compactly: 1005787 → "1.0M" */
@@ -107,27 +105,3 @@ export function tableToDomain(table: string): string {
 }
 
 // ── Shared wrapper ───────────────────────────────────────────────────────────
-
-interface ChartCardProps {
-  title?: string;
-  subtitle?: string;
-  children: ReactNode;
-  className?: string;
-}
-
-export function ChartCard({ title, subtitle, children, className }: ChartCardProps) {
-  return (
-    <div className={`rounded-xl border border-border-default bg-surface-raised p-6 ${className ?? ""}`}>
-      {title && (
-        <h3 className="mb-1 text-sm font-semibold uppercase tracking-wider text-text-muted">
-          {title}
-        </h3>
-      )}
-      {subtitle && (
-        <p className="mb-4 text-xs text-text-ghost">{subtitle}</p>
-      )}
-      {!subtitle && title && <div className="mb-4" />}
-      {children}
-    </div>
-  );
-}

frontend/src/features/data-explorer/pages/OverviewTab.tsx

@@ -18,13 +18,13 @@ import {
 } from "../hooks/useAchillesData";
 import {
   formatCompact,
-  ChartCard,
   DOMAIN_COLORS,
   GENDER_COLORS,
   CHART,
   tableToDomain,
   formatTableName,
 } from "../components/charts/chartUtils";
+import { ChartCard } from "../components/charts/ChartCard";
 import { Sparkline } from "../components/charts/Sparkline";
 import { ProportionalBar } from "../components/charts/ProportionalBar";
 import { DemographicsPyramid } from "../components/charts/DemographicsPyramid";

frontend/src/features/heor/components/BudgetImpactChart.tsx

@@ -10,11 +10,11 @@ import {
 } from "recharts";
 import { useTranslation } from "react-i18next";
 import {
-  ChartCard,
   CHART,
   TOOLTIP_CLS,
   formatCompact,
 } from "@/features/data-explorer/components/charts/chartUtils";
+import { ChartCard } from "@/features/data-explorer/components/charts/ChartCard";
 import type { HeorResult } from "../types";
 
 interface Props {

frontend/src/features/heor/components/CostEffectivenessPlane.tsx

@@ -1,6 +1,7 @@
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { ChartCard, CHART, formatCompact } from "@/features/data-explorer/components/charts/chartUtils";
+import { CHART, formatCompact } from "@/features/data-explorer/components/charts/chartUtils";
+import { ChartCard } from "@/features/data-explorer/components/charts/ChartCard";
 import type { HeorResult } from "../types";
 
 interface Props {

frontend/src/features/heor/components/ScenarioComparisonChart.tsx

@@ -9,7 +9,8 @@ import {
   Cell,
 } from "recharts";
 import { useTranslation } from "react-i18next";
-import { ChartCard, CHART, TOOLTIP_CLS, formatCompact } from "@/features/data-explorer/components/charts/chartUtils";
+import { CHART, TOOLTIP_CLS, formatCompact } from "@/features/data-explorer/components/charts/chartUtils";
+import { ChartCard } from "@/features/data-explorer/components/charts/ChartCard";
 import type { HeorResult } from "../types";
 
 interface Props {

frontend/src/features/heor/components/TornadoDiagram.tsx

@@ -10,7 +10,8 @@ import {
   Cell,
 } from "recharts";
 import { useTranslation } from "react-i18next";
-import { ChartCard, CHART, TOOLTIP_CLS, formatCompact } from "@/features/data-explorer/components/charts/chartUtils";
+import { CHART, TOOLTIP_CLS, formatCompact } from "@/features/data-explorer/components/charts/chartUtils";
+import { ChartCard } from "@/features/data-explorer/components/charts/ChartCard";
 import type { TornadoEntry } from "../types";
 import { getHeorParameterTypeLabel } from "../lib/i18n";