Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: arangates/die-wise
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v1.0.0
Choose a base ref
...
head repository: arangates/die-wise
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: main
Choose a head ref
  • 3 commits
  • 6 files changed
  • 1 contributor

Commits on Sep 29, 2024

  1. Add Die yield results pie chart

    arangates committed Sep 29, 2024
    Copy the full SHA
    508bc3c View commit details
  2. Uniform die colors

    arangates committed Sep 29, 2024
    Copy the full SHA
    4917736 View commit details
  3. code refactor

    arangates committed Sep 29, 2024
    Copy the full SHA
    0077d0b View commit details
Showing with 198 additions and 30 deletions.
  1. +137 −24 src/blocks/ResultsDisplay.tsx
  2. +1 −1 src/blocks/WaferMap.tsx
  3. +1 −1 src/blocks/YieldControls.tsx
  4. +55 −0 src/index.css
  5. +3 −3 src/lib/getDieColor.ts
  6. +1 −1 src/pages/DieYield/constants.ts
161 changes: 137 additions & 24 deletions src/blocks/ResultsDisplay.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,140 @@
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,
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: "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 = {
good: {
label: "Good",
color: "hsl(var(--chart-good))",
},
wasted: {
label: "Wasted",
color: "hsl(var(--chart-wasted))",
},
partial: {
label: "Partial",
color: "hsl(var(--chart-partial))",
},
defective: {
label: "Defective",
color: "hsl(var(--chart-defective))",
},
} 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="text-muted-foreground leading-none">
Fabrication yield {results.yield}%
</div>
</CardFooter>
</Card>
)
}
2 changes: 1 addition & 1 deletion src/blocks/WaferMap.tsx
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@ export const WaferMap = ({
const size = 900
const centerX = size / 2
const centerY = size / 2
const radius = size / 2
const radius = size / 2
const exclusionRadius =
radius * (1 - parameters.edgeLoss / parameters.waferDiameter)

2 changes: 1 addition & 1 deletion src/blocks/YieldControls.tsx
Original file line number Diff line number Diff line change
@@ -63,4 +63,4 @@ const YieldControls: React.FC = () => {
)
}

export { YieldControls}
export { YieldControls }
55 changes: 55 additions & 0 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,58 @@
@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-good: 220 70% 50%;
--chart-wasted: 340 75% 55%;
--chart-partial: 30 80% 55%;
--chart-defective: 280 65% 60%;
}

.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%;
}
}
6 changes: 3 additions & 3 deletions src/lib/getDieColor.ts
Original file line number Diff line number Diff line change
@@ -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
}
2 changes: 1 addition & 1 deletion src/pages/DieYield/constants.ts
Original file line number Diff line number Diff line change
@@ -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,