Memoize Fluent chart token resolution

frontend/src/components/BanTrendChart.tsx

@@ -4,6 +4,7 @@
  * Calls `useBanTrend` internally and handles loading, error, and empty states.
  */
 
+import { useMemo } from "react";
 import {
   Area,
   AreaChart,
@@ -134,8 +135,14 @@ function buildEntries(
 // Custom tooltip
 // ---------------------------------------------------------------------------
 
-function TrendTooltip(props: TooltipContentProps): React.JSX.Element | null {
-  const { active, payload } = props;
+interface TrendTooltipProps extends Partial<TooltipContentProps> {
+  backgroundColor: string;
+  borderColor: string;
+  textColor: string;
+}
+
+function TrendTooltip(props: TrendTooltipProps): React.JSX.Element | null {
+  const { active, payload = [], backgroundColor, borderColor, textColor } = props;
   if (!active || payload.length === 0) return null;
   const entry = payload[0];
   if (entry == null) return null;
@@ -154,11 +161,11 @@ function TrendTooltip(props: TooltipContentProps): React.JSX.Element | null {
   return (
     <div
       style={{
-        backgroundColor: resolveFluentToken(tokens.colorNeutralBackground1),
-        border: `1px solid ${resolveFluentToken(tokens.colorNeutralStroke2)}`,
+        backgroundColor,
+        border: `1px solid ${borderColor}`,
         borderRadius: "4px",
         padding: "8px 12px",
-        color: resolveFluentToken(tokens.colorNeutralForeground1),
+        color: textColor,
         fontSize: "13px",
       }}
     >
@@ -197,11 +204,27 @@ export function BanTrendChart({
 
   const isEmpty = buckets.every((b) => b.count === 0);
   const entries = buildEntries(buckets, timeRange);
-  const primaryColour = resolveFluentToken(CHART_PALETTE[0] ?? "");
-  const axisColour = resolveFluentToken(CHART_AXIS_TEXT_TOKEN);
-  const gridColour = resolveFluentToken(CHART_GRID_LINE_TOKEN);
+  const { primaryColour, axisColour, gridColour } = useMemo(
+    () => ({
+      primaryColour: resolveFluentToken(CHART_PALETTE[0] ?? ""),
+      axisColour: resolveFluentToken(CHART_AXIS_TEXT_TOKEN),
+      gridColour: resolveFluentToken(CHART_GRID_LINE_TOKEN),
+    }),
+    [],
+  );
   const tickInterval = TICK_INTERVAL[timeRange];
 
+  const tooltipContent = useMemo(
+    () => (
+      <TrendTooltip
+        backgroundColor={resolveFluentToken(tokens.colorNeutralBackground1)}
+        borderColor={resolveFluentToken(tokens.colorNeutralStroke2)}
+        textColor={resolveFluentToken(tokens.colorNeutralForeground1)}
+      />
+    ),
+    [],
+  );
+
   return (
     <ChartStateWrapper
       isLoading={isLoading}
@@ -233,7 +256,7 @@ export function BanTrendChart({
               tickLine={false}
               axisLine={false}
             />
-            <Tooltip content={TrendTooltip} />
+            <Tooltip content={tooltipContent} />
             <Area
               type="monotone"
               dataKey="count"