fix(dashboard): memoize rpc chart

Author: gregfromstl

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/RpcMethodBarChartCard/RpcMethodBarChartCardUI.tsx

@@ -30,49 +30,50 @@ export function RpcMethodBarChartCardUI({
     [rawData],
   );
 
-  const data = useMemo(
-    () =>
-      uniqueDates.map((date) => {
-        const dateData: { [key: string]: string | number } = { date };
-        for (const method of uniqueMethods) {
-          const methodData = rawData.find(
-            (d) => d.date === date && d.evmMethod === method,
-          );
-          dateData[method] = methodData?.count ?? 0;
-        }
+  const data = useMemo(() => {
+    return uniqueDates.map((date) => {
+      const dateData: { [key: string]: string | number } = { date };
+      for (const method of uniqueMethods) {
+        const methodData = rawData.find(
+          (d) => d.date === date && d.evmMethod === method,
+        );
+        dateData[method] = methodData?.count ?? 0;
+      }
 
-        // If we have too many methods to display well, add "other" and group the lowest keys for each time period
-        if (uniqueMethods.length > 5) {
-          // If we haven't added "other" as a key yet, add it
-          if (!uniqueMethods.includes("Other")) {
-            uniqueMethods.push("Other");
-          }
+      // If we have too many methods to display well, add "other" and group the lowest keys for each time period
+      if (uniqueMethods.length > 5) {
+        // If we haven't added "other" as a key yet, add it
+        if (!uniqueMethods.includes("Other")) {
+          uniqueMethods.push("Other");
+        }
 
-          // Sort the methods by their count for the time period
-          const sortedMethods = uniqueMethods
-            .filter((m) => m !== "Other")
-            .sort(
-              (a, b) =>
-                ((dateData[b] as number) ?? 0) - ((dateData[a] as number) ?? 0),
-            );
+        // Sort the methods by their count for the time period
+        const sortedMethods = uniqueMethods
+          .filter((m) => m !== "Other")
+          .sort(
+            (a, b) =>
+              ((dateData[b] as number) ?? 0) - ((dateData[a] as number) ?? 0),
+          );
 
-          dateData.Other = 0;
-          for (const method of sortedMethods.slice(5, sortedMethods.length)) {
-            dateData.Other += (dateData[method] as number) ?? 0;
-            delete dateData[method];
-          }
+        dateData.Other = 0;
+        for (const method of sortedMethods.slice(5, sortedMethods.length)) {
+          dateData.Other += (dateData[method] as number) ?? 0;
+          delete dateData[method];
         }
-        return dateData;
-      }),
-    [uniqueDates, uniqueMethods, rawData],
-  );
+      }
+      return dateData;
+    });
+  }, [uniqueDates, uniqueMethods, rawData]);
 
-  const config: ChartConfig = {};
-  for (const method of uniqueMethods) {
-    config[method] = {
-      label: method,
-    };
-  }
+  const config: ChartConfig = useMemo(() => {
+    const config: ChartConfig = {};
+    for (const method of uniqueMethods) {
+      config[method] = {
+        label: method,
+      };
+    }
+    return config;
+  }, [uniqueMethods]);
 
   if (
     data.length === 0 ||