Memoize Fluent chart token resolution

frontend/src/components/__tests__/TopCountriesPieChart.test.tsx

@@ -2,6 +2,7 @@ import { describe, it, expect, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import { FluentProvider, webLightTheme } from "@fluentui/react-components";
 import { TopCountriesPieChart } from "../TopCountriesPieChart";
+import * as chartTheme from "../../utils/chartTheme";
 
 vi.mock("recharts", () => ({
   ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
@@ -38,4 +39,24 @@ describe("TopCountriesPieChart", () => {
     );
     expect(screen.getByTestId("pie-chart")).toBeInTheDocument();
   });
+
+  it("memoizes palette token resolution across rerenders", () => {
+    const spy = vi.spyOn(chartTheme, "resolveFluentToken");
+    const props = {
+      countries: { DE: 30, US: 20, CN: 10 },
+      countryNames: { DE: "Germany", US: "United States", CN: "China" },
+    };
+
+    const { rerender } = wrap(<TopCountriesPieChart {...props} />);
+    expect(spy).toHaveBeenCalledTimes(5);
+
+    rerender(
+      <FluentProvider theme={webLightTheme}>
+        <TopCountriesPieChart {...props} />
+      </FluentProvider>,
+    );
+    expect(spy).toHaveBeenCalledTimes(5);
+
+    spy.mockRestore();
+  });
 });