The wafer component library based on Vue 3 provides a versatile and customizable solution for visualizing wafermaps, commonly used in semiconductor manufacturing.
-
Local Storybook
# Clone the repo git clone https://github.com/ttpss930141011/vue-wafer-painter.git # Install dependencies pnpm install # Run Storybook npm run storybook
To use this wafermap component, follow these steps:
-
Install the package using your preferred package manager:
npm install vue-wafer-painter
-
Import CSS in main.js / main.ts:
import { createApp } from 'vue' import './style.css' import 'vue-wafer-painter/dist/style.css' // add this row import App from './App.vue' createApp(App).mount('#app')
-
Import and add the component to your template:
<template> <v-wafermap :width="800" :height="800" :coords="[{...your coords}]" /> </template> <script setup lang="ts"> import { ref } from "vue"; import { VWafermap } from "vue-wafer-painter"; ... </script>
VWafermap
Here's the simplest example of using the VWafermap component:
<template>
<v-wafermap :coords="coords" @onDie="handleDieHover" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { VWafermap } from 'vue-wafer-painter'
const coords = ref([
{ x: -2, y: -2, info: ['1'], dut: 1, color: '#ff8080' },
{ x: 0, y: 1, info: ['2'], dut: 2, color: 'green' },
{ x: 1, y: 0, info: ['4'], dut: 1, color: 'rgb(0, 102, 204)' },
{ x: 2, y: 0, info: ['7', '789'], dut: 1, color: 'red' },
{ x: 2, y: 2, info: ['9'], dut: 3, color: '#b800e6' }
])
const handleDieHover = (event: MouseEvent, dieInfo: any) => {
console.log('Hovered on die:', event, dieInfo)
}
</script>
VWafermap
Name | Type | Default | Required | Description |
---|---|---|---|---|
coords |
Array<Coords> |
[] |
true | The coordinates of the dies on the wafer map. |
width |
Number |
500 |
false | The width of the wafer map. |
height |
Number |
500 |
false | The height of the wafer map. |
fontFamily |
String |
'Arial, Helvetica, sans-serif' |
false | The font family of axis values and die info on the wafer map. |
notch |
'top' | 'bottom' | 'left' | 'right' | 'none' |
'top' |
false | The notch position of the wafer map. |
showGrid |
Boolean |
true |
false | Whether to display grid lines on the wafer map. |
gridColor |
String |
'#f2f2f2' |
false | The grid color of the wafer map. |
showBackground |
Boolean |
true |
false | Whether to display the background on the wafer map. |
backgroundColor |
String |
'#C0C0C0' |
false | The background color of the wafer map. |
showFocus |
Boolean |
true |
false | Whether to show the focus border on hover. |
showTooltip |
Boolean |
true |
false | Whether to show tooltips on hover. |
showAxisValues |
Boolean |
true |
false | Whether to display axis values. |
showDieInfo |
Boolean |
true |
false | Whether to display die information in the tooltip. |
dieinfoColor |
String |
'#000000' |
false | The color of the die information text. |
scaleSize |
Number |
0.7 |
false | The scale factor for the wafer map. |
focusBorderColor |
String |
'#0000ff' |
false | The color of the focus border. |
focusBorderWidth |
Number |
1 |
false | The width of the focus border. |
VWafermap
Name | Type | Description |
---|---|---|
onDie |
Function |
Event emitted when a die is hovered. Provides information about the hovered die. |
VWafermap
File | Summary |
---|---|
index.ts | This code exports a component called VWafermap, which represents a wafermap visualization. |
use-mapinfo.ts | This code defines a custom hook "useMapinfo" that calculates various map calculations for a wafermap component based on its props. It calculates the minimum and maximum coordinates, and the corresponding width and height of each die on the map. It also calculates padding and grid font size for the map. |
wafermap-style.ts | The code defines a function that calculates and returns different styles for a wafermap UI component based on the provided props. These styles include container, background, map, info, grid, axis value, and focus styles. |
use-wafermap.ts | This code defines the most siginicant logic for a wafermap component. It includes functions for drawing the background, wafermap, die information, wafer grid, and axis values based on the data from useMapinfo , and add further handling from the style from useWafermapStyle It also includes functions for handling mouse events such as mouse move, mouse leave, and mouse click. Finally, it will redraw the wafermap when the props change. |
wafermap.ts | This code defines the props and emits for a wafermap component. It allows customization of various visual elements such as size, grid, focus, tooltip, axis values, and die info. Users can also specify the notch position, scale size, focus border color, and width. |
wafermap.vue | This code defines a Vue component for displaying a wafer map. It includes multiple canvas elements for drawing the background, wafer map, information, grid, and axis values. It also includes elements for focus and tooltip functionality. The code handles props, emits, and exposes the current wafer map props and die information. The component's styles are scoped to the component's container. |
- Better TypeScript support
This project is licensed under the MIT License. See the LICENSE file for additional info.