color matching

Author: colegottdank

web/components/templates/dashboard/panels/modelsByCostPanel.tsx

@@ -1,5 +1,5 @@
 import StyledAreaChart from "../styledAreaChart";
-import { sortAndColorData } from "./utils";
+import { sortAndColorDataByName } from "./utils";
 import { useExpandableBarList } from "./barListPanel";
 
 interface ModelsByCostPanelProps {
@@ -17,12 +17,11 @@ interface ModelsByCostPanelProps {
 const ModelsByCostPanel = (props: ModelsByCostPanelProps) => {
   const { models } = props;
 
-  const modelData = sortAndColorData(
+  const modelData = sortAndColorDataByName(
     models?.data?.map((model) => ({
       name: model.model,
       value: model.cost,
     })),
-    "alt2", // Use alt2 color order
   );
 
   const maxValue = modelData[0]?.value || 1;

web/components/templates/dashboard/panels/modelsPanel.tsx

@@ -1,5 +1,5 @@
 import StyledAreaChart from "../styledAreaChart";
-import { sortAndColorData } from "./utils";
+import { sortAndColorDataByName } from "./utils";
 import { useExpandableBarList } from "./barListPanel";
 
 interface ModelsPanelProps {
@@ -17,12 +17,11 @@ interface ModelsPanelProps {
 const ModelsPanel = (props: ModelsPanelProps) => {
   const { models } = props;
 
-  const modelData = sortAndColorData(
+  const modelData = sortAndColorDataByName(
     models?.data?.map((model) => ({
       name: model.model,
       value: model.total_requests,
     })),
-    "alt1", // Use alt1 color order
   );
 
   const maxValue = modelData[0]?.value || 1;

web/components/templates/dashboard/panels/utils.ts

@@ -15,6 +15,19 @@ const COLOR_ORDERS = {
   alt2: ["green", "orange", "purple", "cyan", "yellow", "blue", "pink"] as ListColor[],
 };
 
+/**
+ * Better hash function (DJB2) to deterministically assign colors based on model name
+ * This provides better distribution to avoid color collisions
+ */
+function hashString(str: string): number {
+  let hash = 5381;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = ((hash << 5) + hash) + char; // hash * 33 + char
+  }
+  return Math.abs(hash);
+}
+
 /**
  * Sorts data by value descending and assigns colors in specified order
  */
@@ -37,3 +50,24 @@ export function sortAndColorData<T extends { name: string; value: number }>(
       color: colors[index % colors.length],
     }));
 }
+
+/**
+ * Sorts data by value descending and assigns colors deterministically based on name
+ * This ensures the same model gets the same color across different charts
+ */
+export function sortAndColorDataByName<T extends { name: string; value: number }>(
+  data: T[] | undefined,
+): DataWithColor[] {
+  if (!data) return [];
+
+  return data
+    .map((item) => ({
+      name: item.name || "n/a",
+      value: item.value,
+    }))
+    .sort((a, b) => b.value - a.value - (b.name === "n/a" ? 1 : 0))
+    .map((item) => ({
+      ...item,
+      color: LIST_COLORS[hashString(item.name) % LIST_COLORS.length],
+    }));
+}