Uniform die colors

arangates · Sep 29, 2024 · 4917736 · 4917736
1 parent 508bc3c
commit 4917736
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/src/blocks/ResultsDisplay.tsx b/src/blocks/ResultsDisplay.tsx
@@ -7,7 +7,6 @@ import { Label, Pie, PieChart } from "recharts"
 import {
   Card,
   CardContent,
-  CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
@@ -24,22 +23,27 @@ export const description = "Die Yield Results"
 
 const chartData = (results: DieCalculationResults) => [
   { status: "Good", wafers: Math.round((results.yield / 100) * results.goodDevices), fill: "var(--color-good)" },
-  { status: "Partial", wafers: results.excludedDevices, fill: "var(--color-partial)" },
+  { status: "Wasted", wafers: results.excludedDevices, fill: "var(--color-wasted)" },
+  { status: "Partial", wafers: results.partialDevices, fill: "var(--color-partial)" },
   { status: "Defective", wafers: results.goodDevices - Math.round((results.yield / 100) * results.goodDevices), fill: "var(--color-defective)" },
 ]
 
 const chartConfig = {
-  defective: {
-    label: "Defective",
-    color: "hsl(var(--chart-3))",
-  },
   good: {
     label: "Good",
-    color: "hsl(var(--chart-4))",
+    color: "hsl(var(--chart-good))",
+  },
+  wasted: {
+    label: "Wasted",
+    color: "hsl(var(--chart-wasted))",
   },
   partial: {
     label: "Partial",
-    color: "hsl(var(--chart-5))",
+    color: "hsl(var(--chart-partial))",
+  },
+  defective: {
+    label: "Defective",
+    color: "hsl(var(--chart-defective))",
   },
 } satisfies ChartConfig
 

diff --git a/src/index.css b/src/index.css
@@ -23,11 +23,10 @@
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 10% 3.9%;
-    --chart-1: 220 70% 50%;
-    --chart-5: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-2: 340 75% 55%;
+    --chart-good: 220 70% 50%;
+    --chart-wasted: 340 75% 55%;
+    --chart-partial: 30 80% 55%;
+    --chart-defective: 280 65% 60%;
   }
 
   .dark {

diff --git a/src/lib/getDieColor.ts b/src/lib/getDieColor.ts
@@ -1,11 +1,11 @@
 export const getDieColor = (dieInWafer: number) => {
   switch (dieInWafer) {
     case 1:
-      return "rgba(70,200,70,0.8)" // Good dies
+      return "hsl(var(--chart-good))" // Good dies
     case 2:
-      return "rgba(240,70,70,0.8)" // Wasted dies
+      return "hsl(var(--chart-wasted))" // Wasted dies
     case 4:
-      return "rgba(220,210,0,0.8)" // Partial dies
+      return "hsl(var(--chart-partial))" // Partial dies
     default:
       return null // Skip dies outside the wafer
   }