Add Die yield results pie chart

src/blocks/ResultsDisplay.tsx

@@ -1,27 +1,116 @@
-import React from "react"
-import type { DieCalculationParameters, DieCalculationResults } from "@/types"
+"use client"
+
+import * as React from "react"
+import { TrendingUp } from "lucide-react"
+import { Label, Pie, PieChart } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart"
+import { DieCalculationParameters, DieCalculationResults } from "@/types"
+
+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: "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))",
+  },
+  partial: {
+    label: "Partial",
+    color: "hsl(var(--chart-5))",
+  },
+} satisfies ChartConfig
 
 export const ResultsDisplay: React.FC<{
-  results: DieCalculationResults
   parameters: DieCalculationParameters
-}> = ({ results, parameters }) => (
-  <div className="space-y-2 text-sm">
-    <p className="text-green-500">
-      Defect Density {parameters.defectDensity} #/sq.cm
-    </p>
-    <p className="text-green-500">Fabrication Yield = {results.yield}%</p>
-    <p className="text-red-500">Wasted Dies #{results.excludedDevices}</p>
-    <p className="text-gray-500">
-      Defective Dies #
-      {results.goodDevices -
-        Math.round((results.yield / 100) * results.goodDevices)}
-    </p>
-    <p className="text-green-500">
-      Good Dies #{Math.round((results.yield / 100) * results.goodDevices)}
-    </p>
-    <p className="text-yellow-500">Partial Dies #{results.partialDevices}</p>
-    <p className="font-semibold text-black">
-      Max Dies Per Wafer (without defect) #{results.goodDevices}
-    </p>
-  </div>
-)
+  results: DieCalculationResults
+}> = ({ parameters, results }) => {
+  const totalDevices = results.goodDevices + results.partialDevices + results.excludedDevices
+  return (
+    <Card className="flex flex-col">
+      <CardHeader className="items-center pb-0">
+        <CardTitle>Die Yield Results</CardTitle>
+      </CardHeader>
+      <CardContent className="flex-1 pb-0">
+        <ChartContainer
+          config={chartConfig}
+          className="mx-auto aspect-square max-h-[250px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={chartData(results)}
+              dataKey="wafers"
+              nameKey="status"
+              innerRadius={60}
+              strokeWidth={5}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold"
+                        >
+                          {totalDevices.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Dies
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col gap-2 text-sm">
+        <div className="flex items-center gap-2 font-medium leading-none">
+          Defect density {parameters.defectDensity} #/sq.cm<TrendingUp className="h-4 w-4" />
+        </div>
+        <div className="leading-none text-muted-foreground">
+          Fabrication yield {results.yield}%
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}

src/index.css

@@ -1,3 +1,59 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --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%;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.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%;
+    }
+}

src/pages/DieYield/constants.ts

@@ -8,7 +8,7 @@ export const INITIAL_PARAMETERS: DieCalculationParameters = {
   dieSpacing: { horizontal: 0.2, vertical: 0.2 },
   waferDiameter: 100,
   edgeLoss: 5.0,
-  defectDensity: 0.1,
+  defectDensity: 5,
   dieCentering: true,
   verticalShift: 0,
   horizontalShift: 0,