Wafer Map.
COMMUNITY웨이퍼 위의 die 좌표별 상태와 측정값을 보여줍니다.
LIVE EXAMPLE
Bin 분류
차트를 조작하면 선택·범위 변경 결과가 여기에 표시됩니다.
옵션변경 사항이 미리보기와 코드에 반영됩니다.
표현과 스타일11
범례와 상호작용7
제목과 크기3
칩 좌표와 bin으로 웨이퍼의 불량 분포를 봅니다. 모든 값은 예시 데이터입니다.
코드 보기
현재 미리보기
<div id="chart-container" style="width: 100%; min-width: 0;"></div>
<script type="module">
import { defineCustomElement as define0 } from '@syidax/advanced/components/sy-wafer-map.js';
define0();
const specs = [
{
"id": "example-chart",
"tag": "sy-wafer-map",
"props": {
"engine": "standard",
"values": [
{
"col": -6,
"row": -6,
"bin": 2,
"value": 95
},
{
"col": -5,
"row": -6,
"bin": 1,
"value": 96.93
},
{
"col": -4,
"row": -6,
"bin": 1,
"value": 97.96
},
{
"col": -3,
"row": -6,
"bin": 1,
"value": 97.59
},
{
"col": -2,
"row": -6,
"bin": 1,
"value": 96
},
{
"col": -1,
"row": -6,
"bin": 1,
"value": 93.95
},
{
"col": 0,
"row": -6,
"bin": 1,
"value": 92.39
},
{
"col": 1,
"row": -6,
"bin": 1,
"value": 92.05
},
{
"col": 2,
"row": -6,
"bin": 1,
"value": 93.11
},
{
"col": 3,
"row": -6,
"bin": 1,
"value": 95.05
},
{
"col": 4,
"row": -6,
"bin": 1,
"value": 96.97
},
{
"col": 5,
"row": -6,
"bin": 1,
"value": 97.96
},
{
"col": 6,
"row": -6,
"bin": 1,
"value": 97.56
},
{
"col": -6,
"row": -5,
"bin": 1,
"value": 95.96
},
{
"col": -5,
"row": -5,
"bin": 1,
"value": 93.9
},
{
"col": -4,
"row": -5,
"bin": 1,
"value": 92.36
},
{
"col": -3,
"row": -5,
"bin": 1,
"value": 92.06
},
{
"col": -2,
"row": -5,
"bin": 2,
"value": 93.15
},
{
"col": -1,
"row": -5,
"bin": 1,
"value": 95.1
},
{
"col": 0,
"row": -5,
"bin": 1,
"value": 97.01
},
{
"col": 1,
"row": -5,
"bin": 1,
"value": 97.97
},
{
"col": 2,
"row": -5,
"bin": 1,
"value": 97.54
},
{
"col": 3,
"row": -5,
"bin": 1,
"value": 95.91
},
{
"col": 4,
"row": -5,
"bin": 1,
"value": 93.85
},
{
"col": 5,
"row": -5,
"bin": 1,
"value": 92.34
},
{
"col": 6,
"row": -5,
"bin": 1,
"value": 92.07
},
{
"col": -6,
"row": -4,
"bin": 1,
"value": 93.19
},
{
"col": -5,
"row": -4,
"bin": 1,
"value": 95.15
},
{
"col": -4,
"row": -4,
"bin": 1,
"value": 97.05
},
{
"col": -3,
"row": -4,
"bin": 1,
"value": 97.98
},
{
"col": -2,
"row": -4,
"bin": 1,
"value": 97.51
},
{
"col": -1,
"row": -4,
"bin": 1,
"value": 95.86
},
{
"col": 0,
"row": -4,
"bin": 1,
"value": 93.81
},
{
"col": 1,
"row": -4,
"bin": 1,
"value": 92.31
},
{
"col": 2,
"row": -4,
"bin": 2,
"value": 92.08
},
{
"col": 3,
"row": -4,
"bin": 1,
"value": 93.23
},
{
"col": 4,
"row": -4,
"bin": 1,
"value": 95.2
},
{
"col": 5,
"row": -4,
"bin": 1,
"value": 97.08
},
{
"col": 6,
"row": -4,
"bin": 1,
"value": 97.98
},
{
"col": -6,
"row": -3,
"bin": 1,
"value": 97.48
},
{
"col": -5,
"row": -3,
"bin": 1,
"value": 95.81
},
{
"col": -4,
"row": -3,
"bin": 1,
"value": 93.76
},
{
"col": -3,
"row": -3,
"bin": 1,
"value": 92.29
},
{
"col": -2,
"row": -3,
"bin": 1,
"value": 92.1
},
{
"col": -1,
"row": -3,
"bin": 1,
"value": 93.27
},
{
"col": 0,
"row": -3,
"bin": 1,
"value": 95.25
},
{
"col": 1,
"row": -3,
"bin": 1,
"value": 97.12
},
{
"col": 2,
"row": -3,
"bin": 1,
"value": 97.99
},
{
"col": 3,
"row": -3,
"bin": 1,
"value": 97.45
},
{
"col": 4,
"row": -3,
"bin": 1,
"value": 95.76
},
{
"col": 5,
"row": -3,
"bin": 1,
"value": 93.72
},
{
"col": 6,
"row": -3,
"bin": 2,
"value": 92.27
},
{
"col": -6,
"row": -2,
"bin": 1,
"value": 92.11
},
{
"col": -5,
"row": -2,
"bin": 1,
"value": 93.31
},
{
"col": -4,
"row": -2,
"bin": 1,
"value": 95.3
},
{
"col": -3,
"row": -2,
"bin": 1,
"value": 97.15
},
{
"col": -2,
"row": -2,
"bin": 1,
"value": 97.99
},
{
"col": -1,
"row": -2,
"bin": 1,
"value": 97.42
},
{
"col": 0,
"row": -2,
"bin": 1,
"value": 95.72
},
{
"col": 1,
"row": -2,
"bin": 1,
"value": 93.67
},
{
"col": 2,
"row": -2,
"bin": 1,
"value": 92.25
},
{
"col": 3,
"row": -2,
"bin": 1,
"value": 92.12
},
{
"col": 4,
"row": -2,
"bin": 1,
"value": 93.35
},
{
"col": 5,
"row": -2,
"bin": 1,
"value": 95.35
},
{
"col": 6,
"row": -2,
"bin": 1,
"value": 97.19
},
{
"col": -6,
"row": -1,
"bin": 1,
"value": 98
},
{
"col": -5,
"row": -1,
"bin": 1,
"value": 97.39
},
{
"col": -4,
"row": -1,
"bin": 1,
"value": 95.67
},
{
"col": -3,
"row": -1,
"bin": 2,
"value": 93.63
},
{
"col": -2,
"row": -1,
"bin": 1,
"value": 92.23
},
{
"col": -1,
"row": -1,
"bin": 1,
"value": 92.14
},
{
"col": 0,
"row": -1,
"bin": 1,
"value": 93.39
},
{
"col": 1,
"row": -1,
"bin": 1,
"value": 95.4
},
{
"col": 2,
"row": -1,
"bin": 1,
"value": 97.22
},
{
"col": 3,
"row": -1,
"bin": 1,
"value": 98
},
{
"col": 4,
"row": -1,
"bin": 1,
"value": 97.36
},
{
"col": 5,
"row": -1,
"bin": 1,
"value": 95.62
},
{
"col": 6,
"row": -1,
"bin": 1,
"value": 93.58
},
{
"col": -6,
"row": 0,
"bin": 1,
"value": 92.21
},
{
"col": -5,
"row": 0,
"bin": 1,
"value": 92.15
},
{
"col": -4,
"row": 0,
"bin": 1,
"value": 93.44
},
{
"col": -3,
"row": 0,
"bin": 1,
"value": 95.45
},
{
"col": -2,
"row": 0,
"bin": 1,
"value": 97.26
},
{
"col": -1,
"row": 0,
"bin": 1,
"value": 98
},
{
"col": 0,
"row": 0,
"bin": 1,
"value": 97.33
},
{
"col": 1,
"row": 0,
"bin": 2,
"value": 95.57
},
{
"col": 2,
"row": 0,
"bin": 1,
"value": 93.54
},
{
"col": 3,
"row": 0,
"bin": 1,
"value": 92.19
},
{
"col": 4,
"row": 0,
"bin": 1,
"value": 92.17
},
{
"col": 5,
"row": 0,
"bin": 1,
"value": 93.48
},
{
"col": 6,
"row": 0,
"bin": 1,
"value": 95.5
},
{
"col": -6,
"row": 1,
"bin": 1,
"value": 97.29
},
{
"col": -5,
"row": 1,
"bin": 1,
"value": 98
},
{
"col": -4,
"row": 1,
"bin": 1,
"value": 97.3
},
{
"col": -3,
"row": 1,
"bin": 1,
"value": 95.52
},
{
"col": -2,
"row": 1,
"bin": 1,
"value": 93.49
},
{
"col": -1,
"row": 1,
"bin": 1,
"value": 92.18
},
{
"col": 0,
"row": 1,
"bin": 1,
"value": 92.19
},
{
"col": 1,
"row": 1,
"bin": 1,
"value": 93.52
},
{
"col": 2,
"row": 1,
"bin": 1,
"value": 95.55
},
{
"col": 3,
"row": 1,
"bin": 1,
"value": 97.32
},
{
"col": 4,
"row": 1,
"bin": 1,
"value": 98
},
{
"col": 5,
"row": 1,
"bin": 2,
"value": 97.27
},
{
"col": 6,
"row": 1,
"bin": 1,
"value": 95.47
},
{
"col": -6,
"row": 2,
"bin": 1,
"value": 93.45
},
{
"col": -5,
"row": 2,
"bin": 1,
"value": 92.16
},
{
"col": -4,
"row": 2,
"bin": 1,
"value": 92.21
},
{
"col": -3,
"row": 2,
"bin": 1,
"value": 93.57
},
{
"col": -2,
"row": 2,
"bin": 1,
"value": 95.6
},
{
"col": -1,
"row": 2,
"bin": 1,
"value": 97.35
},
{
"col": 0,
"row": 2,
"bin": 1,
"value": 98
},
{
"col": 1,
"row": 2,
"bin": 1,
"value": 97.23
},
{
"col": 2,
"row": 2,
"bin": 1,
"value": 95.42
},
{
"col": 3,
"row": 2,
"bin": 1,
"value": 93.41
},
{
"col": 4,
"row": 2,
"bin": 1,
"value": 92.14
},
{
"col": 5,
"row": 2,
"bin": 1,
"value": 92.22
},
{
"col": 6,
"row": 2,
"bin": 1,
"value": 93.61
},
{
"col": -6,
"row": 3,
"bin": 1,
"value": 95.65
},
{
"col": -5,
"row": 3,
"bin": 1,
"value": 97.38
},
{
"col": -4,
"row": 3,
"bin": 2,
"value": 98
},
{
"col": -3,
"row": 3,
"bin": 1,
"value": 97.2
},
{
"col": -2,
"row": 3,
"bin": 1,
"value": 95.37
},
{
"col": -1,
"row": 3,
"bin": 1,
"value": 93.36
},
{
"col": 0,
"row": 3,
"bin": 1,
"value": 92.13
},
{
"col": 1,
"row": 3,
"bin": 1,
"value": 92.24
},
{
"col": 2,
"row": 3,
"bin": 1,
"value": 93.66
},
{
"col": 3,
"row": 3,
"bin": 1,
"value": 95.7
},
{
"col": 4,
"row": 3,
"bin": 1,
"value": 97.41
},
{
"col": 5,
"row": 3,
"bin": 1,
"value": 97.99
},
{
"col": 6,
"row": 3,
"bin": 1,
"value": 97.16
},
{
"col": -6,
"row": 4,
"bin": 1,
"value": 95.32
},
{
"col": -5,
"row": 4,
"bin": 1,
"value": 93.32
},
{
"col": -4,
"row": 4,
"bin": 1,
"value": 92.11
},
{
"col": -3,
"row": 4,
"bin": 1,
"value": 92.26
},
{
"col": -2,
"row": 4,
"bin": 1,
"value": 93.7
},
{
"col": -1,
"row": 4,
"bin": 1,
"value": 95.75
},
{
"col": 0,
"row": 4,
"bin": 2,
"value": 97.44
},
{
"col": 1,
"row": 4,
"bin": 1,
"value": 97.99
},
{
"col": 2,
"row": 4,
"bin": 1,
"value": 97.13
},
{
"col": 3,
"row": 4,
"bin": 1,
"value": 95.27
},
{
"col": 4,
"row": 4,
"bin": 1,
"value": 93.28
},
{
"col": 5,
"row": 4,
"bin": 1,
"value": 92.1
},
{
"col": 6,
"row": 4,
"bin": 1,
"value": 92.29
},
{
"col": -6,
"row": 5,
"bin": 1,
"value": 93.75
},
{
"col": -5,
"row": 5,
"bin": 1,
"value": 95.8
},
{
"col": -4,
"row": 5,
"bin": 1,
"value": 97.47
},
{
"col": -3,
"row": 5,
"bin": 1,
"value": 97.99
},
{
"col": -2,
"row": 5,
"bin": 1,
"value": 97.09
},
{
"col": -1,
"row": 5,
"bin": 1,
"value": 95.22
},
{
"col": 0,
"row": 5,
"bin": 1,
"value": 93.24
},
{
"col": 1,
"row": 5,
"bin": 1,
"value": 92.09
},
{
"col": 2,
"row": 5,
"bin": 1,
"value": 92.31
},
{
"col": 3,
"row": 5,
"bin": 1,
"value": 93.79
},
{
"col": 4,
"row": 5,
"bin": 2,
"value": 95.85
},
{
"col": 5,
"row": 5,
"bin": 1,
"value": 97.5
},
{
"col": 6,
"row": 5,
"bin": 1,
"value": 97.98
},
{
"col": -6,
"row": 6,
"bin": 1,
"value": 97.06
},
{
"col": -5,
"row": 6,
"bin": 1,
"value": 95.17
},
{
"col": -4,
"row": 6,
"bin": 1,
"value": 93.2
},
{
"col": -3,
"row": 6,
"bin": 1,
"value": 92.08
},
{
"col": -2,
"row": 6,
"bin": 1,
"value": 92.33
},
{
"col": -1,
"row": 6,
"bin": 1,
"value": 93.84
},
{
"col": 0,
"row": 6,
"bin": 1,
"value": 95.89
},
{
"col": 1,
"row": 6,
"bin": 1,
"value": 97.53
},
{
"col": 2,
"row": 6,
"bin": 1,
"value": 97.97
},
{
"col": 3,
"row": 6,
"bin": 1,
"value": 97.02
},
{
"col": 4,
"row": 6,
"bin": 1,
"value": 95.12
},
{
"col": 5,
"row": 6,
"bin": 1,
"value": 93.16
},
{
"col": 6,
"row": 6,
"bin": 1,
"value": 92.07
}
],
"diameter": 150,
"dieWidth": 10,
"dieHeight": 10,
"mode": "bin",
"passBin": 1,
"width": 640,
"height": 420,
"brandPosition": "bottom-right",
"brandLogo": ""
}
}
];
const container = document.querySelector('#chart-container');
const elements = specs.map(({ tag, id, props }) => {
const element = document.createElement(tag);
element.id = id;
Object.assign(element, props);
element.setAttribute('aria-label', 'wafer-map 예제 차트');
return element;
});
container.replaceChildren(...elements);
const chart = elements.at(-1);
const onEvent = event => {
console.log('dieClick', event.detail);
};
chart.addEventListener('dieClick', onEvent);
const observer = new ResizeObserver(([entry]) => {
const width = Math.max(160, Math.floor(entry.contentRect.width));
elements.forEach(element => { element.width = width; });
});
observer.observe(container);
// SPA에서는 화면이 해제될 때 이 함수를 호출하세요.
function disposeChart() {
observer.disconnect();
chart.removeEventListener('dieClick', onEvent);
container.replaceChildren();
}
</script>사용과 데이터
#bin·수율·파라미터의 공간 패턴을 확인하세요.
diameter·dieWidth·dieHeight와 좌표 원점을 실제 측정 체계에 맞추세요. 비어 있는 die를 합격으로 간주하지 마세요.
데이터 계약
| 프로퍼티 | 입력 형식 |
|---|---|
values | { col, row, bin?, value? } die 배열입니다. |
mode | grid·bin·binary·value로 표현을 선택합니다. |
passBin | 합격으로 해석할 bin입니다. |
데이터를 갱신할 때
배열 안의 값을 직접 바꾸기보다 새 배열·객체를 프로퍼티에 할당하세요. 차트의 이벤트는 event.detail로 선택 결과를 전달합니다. 화면을 해제할 때 ResizeObserver와 앱에서 등록한 이벤트 리스너를 정리하세요.
기능별 예제
#16개의 기능 예제를 직접 조작하고 코드를 확인하세요. ‘미리보기에서 편집’을 누르면 위 설정 패널에서 옵션을 더 조합할 수 있습니다.
웨이퍼 방향
기준 방향을 돌려 같은 die 분포를 확인합니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
가장자리 제외
가장자리 제외 영역과 집계 결과를 함께 표시합니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
드래그 확대와 이동
드래그로 확대하고 Shift를 누른 채 이동합니다. Ctrl + 휠로 확대하거나 축소할 수 있습니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
애니메이션 재생
같은 예제를 다시 그려 초기 표시 애니메이션을 확인합니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
애니메이션
애니메이션의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
범례
범례의 2가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
대용량 데이터
대용량 데이터의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
크기
크기의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
툴팁
툴팁의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
데이터 입력
데이터 입력의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
확대와 이동
확대와 이동의 6가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
컨텍스트 메뉴
컨텍스트 메뉴의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
데이터 컨텍스트 메뉴
데이터 컨텍스트 메뉴의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
좌표와 데이터 조회
좌표와 데이터 조회의 1가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
Overview
Overview의 10가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
Streaming · 실시간 데이터 추가와 갱신PRO
실시간 데이터 추가와 갱신의 4가지 예제를 비교합니다. 예제 안의 버튼과 아래 옵션을 조작하면 실행 결과와 적용 코드가 함께 바뀝니다.
차트를 조작하면 결과 값이 여기에 표시됩니다.
코드 보기
화면에 적용하기
#미리보기 아래 코드 탭에서 현재 예제의 전체 데이터, 옵션, 이벤트 연결과 반응형 크기 처리를 확인하고 복사할 수 있습니다. 설치된 패키지를 해석할 수 있는 Vite 등의 앱 프로젝트에서 사용하세요.
API 레퍼런스
#sy-wafer-map의 전체 공개 API입니다. 객체와 배열은 JavaScript 프로퍼티로 전달하세요. 이름을 선택하면 적용 코드와 타입 계약을 확인할 수 있습니다.
주요 속성
| 속성 / 프로퍼티 | 타입 / 기본값 | 설명 |
|---|---|---|
number기본값 520 | 차트의 너비(px). 컨테이너가 바뀌면 ResizeObserver로 갱신합니다. | |
number기본값 500 | 차트의 높이(px). | |
| brandLogo | string기본값 undefined | 기본값은 Syidax 로고입니다. Pro의 chart.branding 권한으로 none 또는 PNG·JPEG·WebP data URL을 사용할 수 있습니다. |
| brandPosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'기본값 'bottom-right' | 로고를 고정할 코너입니다. Community·Pro, 화면과 이미지 내보내기에 동일하게 적용됩니다. |
| edgeExclusion | number기본값 3 | Unusable edge band in mm (default 3). |
WaferIndicator기본값 'notch' | Orientation-mark kind: `notch` (300 mm standard) / `flat` (legacy) / `none`. | |
WaferOrientation기본값 'down' | Where the mark points (fab standard: `down`). | |
| scribeX | number기본값 0.2 | Scribe-street widths in mm (defaults 0.2). |
| scribeY | number기본값 0.2 | HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number. |
WaferMapData기본값 undefined | { col, row, bin?, value? } die 배열입니다. | |
WaferMapMode기본값 'grid' | grid·bin·binary·value로 표현을 선택합니다. | |
| passBin | number | string기본값 1 | 합격으로 해석할 bin입니다. |
| showStats | boolean기본값 true | Show the min/mean/σ/median statistics line under the value legend. |
| binLegend | boolean기본값 true | Show the bin legend under the wafer (bin mode). |
| legendPosition | WaferMapLegendPosition기본값 'bottom' | 범례를 배치할 위치입니다. |
| showPartial | boolean기본값 true | Draw edge (partial) dies. |
| showExclusion | boolean기본값 true | Draw the dashed edge-exclusion ring. |
| showDieIndex | boolean기본값 false | Print `ix,iy` inside each die (auto-hides when dies get too small). |
| chartTitle | string기본값 undefined | 차트 내부 제목입니다. 데이터의 단위와 의미를 함께 설명하세요. |
| chartSubtitle | string기본값 undefined | 차트 내부 부제목입니다. |
| tooltipShow | boolean기본값 true | 내장 툴팁 표시 여부입니다. |
CartesianZoomInput기본값 undefined | 확대·축소와 표시 범위의 동작 설정입니다. | |
| animated | boolean기본값 false | 초기 표시와 데이터 변경의 애니메이션 사용 여부입니다. |
| animationDuration | number기본값 600 | 애니메이션 지속 시간(ms). |
| animationEasing | WaferMapEasing기본값 'ease-out' | 허용값: linear, ease-out, ease-in, ease-in-out. 기본값: 'ease-out'. |
| animationType | WaferMapAnimationType기본값 undefined | `initial` = the reveal only; `update` = the change morph only; unset = both. |
나머지 속성 38
| 속성 / 프로퍼티 | 타입 / 기본값 | 설명 |
|---|---|---|
number기본값 300 | Wafer diameter in mm (default 300). | |
| flatLength | number기본값 undefined | Flat chord length in mm (default diameter × 0.2). |
| notchDepth | number기본값 undefined | Notch depth in mm (default 2.5). |
| dieWidth | number기본값 10 | Die size in mm (defaults 10 × 10). |
| dieHeight | number기본값 10 | HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number. |
| offsetX | number기본값 0 | Grid shift in mm relative to the centred lattice. |
| offsetY | number기본값 0 | HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number. |
| binColors | Readonly<Record<string, string>>기본값 undefined | Explicit per-bin colours (`{ [bin]: colour }`) — bin mode only. |
| passColor | string기본값 '#16a34a' | Pass-bin fill. |
| failColor | string기본값 '#dc2626' | Fail fill (`mode="binary"` — every non-pass bin). |
| colorAxis | WaferValueAxisInput기본값 'auto' | Value-axis config for `mode="value"`: `auto` (data extent, blues) or `{min, max, scheme, minColor, maxColor, stops, center}` — a diverging scheme name (rdbu, spectral, …) anchors its midpoint on `center`. |
'none' | 'defect'기본값 'none' | Overlay layer on top of any mode: `none` / `defect`. | |
'die' | 'shot'기본값 'die' | Grid chrome: `die` (scribe streets only) or `shot` (+ reticle boundaries). | |
| shotCols | number기본값 3 | Dies per exposure shot (defaults 3 × 2). |
| shotRows | number기본값 2 | HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number. |
| shotOffsetX | number기본값 0 | Shot-grid alignment shift in whole dies. |
| shotOffsetY | number기본값 0 | HTML attribute 또는 JavaScript 프로퍼티로 설정합니다. 타입: number. |
| shotColor | string기본값 '#334155' | Shot boundary stroke. |
WaferDefectData기본값 undefined | Inspection defects (`{x, y, class?, size?}`, wafer mm, notch frame). | |
| defectColor | string기본값 '#0f172a' | Dot colour for unclassified defects (classes cycle the palette). |
keyof typeof categorical기본값 'tableau10' | Categorical palette cycled over fail bins (sorted order). | |
| legendFloatAlign | 'start' | 'center' | 'end'기본값 'end' | `legend-position="float"`: the overlay's horizontal anchor inside the drawing rectangle. |
| legendFloatVerticalAlign | 'top' | 'middle' | 'bottom'기본값 'top' | `legend-position="float"`: the overlay's vertical anchor inside the drawing rectangle. |
| legendDraggable | boolean기본값 false | `legend-position="float"`: the floating legend can be dragged inside the chart bounds. |
| dieIndexOrigin | DieIndexOrigin기본값 'top-left' | Die-index convention (fab map formats): `top-left` counts from the lattice bounding-box corner, `center` keeps signed notch-frame coordinates. Indices are notch-frame-stable — the view `orientation` never renumbers a die. |
| dieIndexBase | number기본값 0 | First index value (0 or 1). |
| waferColor | string | ReadonlyArray<string>기본값 '#eef2f7' | Substrate disc fill. |
| dieColor | string | ReadonlyArray<string>기본값 '#cbd5e1' | Full (probeable) die fill. |
| partialColor | string | ReadonlyArray<string>기본값 '#e2e8f0' | Edge (partial) die fill. |
| dataColor | string | ReadonlyArray<string>기본값 '#2563eb' | Fill for dies that carry data (until the mode days colour by it). |
| edgeColor | string기본값 'rgba(255,255,255,0.9)' | Scribe-street stroke between dies. |
| outlineColor | string기본값 '#64748b' | Wafer outline stroke. |
| tooltipFormat | (detail: WaferDieEventDetail) => string기본값 undefined | Custom tooltip text (return a string; default: index · bin/value · shot). |
| streamSource | WaferMapStreamSource기본값 undefined | 실시간 데이터를 전달하는 스트림 소스입니다. 해당 타입의 계약을 확인하세요. |
| streamMax | number기본값 undefined | 보관할 스트리밍 데이터의 최대 수입니다. |
| streamWindow | number기본값 undefined | 화면에 유지할 스트리밍 데이터 구간입니다. |
WaferMapEngineMode기본값 'auto' | auto·standard·pro 렌더러 선택입니다. 엔진 선택은 차트 종류의 Pro 사용 권한과 별개입니다. | |
WaferMapUnavailableBehaviour기본값 'fallback' | 허용값: fallback, error, throw. 기본값: 'fallback'. |
이벤트 12
| 이벤트 | detail 타입 | 설명 |
|---|---|---|
WaferMapRenderResult & { tier: WaferMapEngineTier } | 차트 그리기가 완료되면 렌더링 결과를 detail로 전달합니다. | |
WaferDieEventDetail | null | Pointer entered/left a die (`null` on leave). | |
WaferDieEventDetail | A die was clicked. | |
WaferDieEventDetail | null | Selection changed (click toggles; `null` when cleared). | |
ChartPointContextMenuEventDetail<WaferDieEventDetail> | A die was right-clicked (the shared point context-menu detail: the die + the pointer's local / viewport position). | |
{ count: number } | Dies streamed in (`appendPoint` / `appendDie` / `appendBatch` / `updateDie`): the dies the ring stored. | |
{ dropped: number } | The oldest streamed dies left the ring (`stream-max`) or were shifted out — they revert to the base map. | |
void | CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다. | |
void | CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다. | |
void | CustomEvent.detail 타입: void. 이벤트 이름은 대소문자를 구분합니다. | |
{
col: number; row: number; ix: number; iy: number;
previousBin: number | string; bin: number | string;
} | An upsert CHANGED an already-probed die's bin (a re-test flipping the verdict) — the signal a live yield display keys on. | |
CartesianZoomChangeEventDetail | Storybook parity (2026-09-10) — fired after every zoom change (drag / pan / wheel / pinch / keyboard / api / reset) with the new state. |
메서드 32
Stencil 메서드는 Promise를 반환합니다. async 함수에서 await로 결과를 받으세요.
| 메서드 / 인수 | 반환 타입 | 설명 |
|---|---|---|
Promise<{ total: number; offWafer: number; byClass: Array<{ key: string; count: number }> }> | Per-class defect counts over the on-wafer points (`overlay="defect"`). | |
| col: number, row: number | Promise<{ shotCol: number; shotRow: number }> | Shot (reticle exposure) coordinate of a lattice cell. |
| cssX: number, cssY: number | Promise<WaferDieEventDetail | null> | Die under a component-local CSS point, or null (streets, off-wafer). |
| col: number, row: number | Promise<WaferDieEventDetail | null> | Select a die programmatically (null-safe no-op off the lattice). |
Promise<void> | 비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요. | |
Promise<WaferDieEventDetail | null> | The current selection (null when none). | |
| request: CartesianZoomRequest | Promise<CartesianZoomChangeEventDetail | null> | Zoom to explicit windows of the drawing (`x` / `y` as `{ min, max }` or `[min, max]` fractions 0 … 1; `null` clears that orientation). |
| factor: number, anchorFraction?: number | Promise<CartesianZoomChangeEventDetail | null> | Scale the current windows by `factor` (< 1 zooms in) around `anchorFraction` (0..1, default centre). |
| delta: { x?: number; y?: number } | Promise<CartesianZoomChangeEventDetail | null> | Slide the zoomed windows by fractions of the drawing (`{ x?, y? }`); a no-op at the full extent. |
Promise<CartesianZoomChangeEventDetail | null> | Back to the full drawing. | |
Promise<CartesianZoomState | null> | The current zoom state (`null` = the full drawing). | |
| request?: CartesianZoomExtentRequest | Promise<CartesianZoomExtentDetail | null> | The full extent of the viewport axes (`[0, 1]` each, key `'0'`). |
| values: WaferMapData | Promise<void> | Replace the die data set (facade `setData` route) — the base map; the streamed dies stay on top of it. |
| datum: WaferDieDatum | Promise<void> | Stream one probe result in: an upsert by cell into the die ring (a re-probed die replaces its result and moves to the newest position; when its BIN changes, `binChanged` carries the previous verdict). The universal name of the stream surface — `appendDie` is the wafer's own alias of it. |
| datum: WaferDieDatum | Promise<void> | 비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요. |
| data: WaferMapData | Promise<void> | Stream a batch of probe results (one repaint, one `appended`). |
| count: number | Promise<void> | Drop the `count` oldest streamed dies (`windowSlid`); they revert to the base map. Without `chart.streaming` there is no streamed set apart from the base, and the base never leaves: nothing is dropped. |
| data: WaferMapData | Promise<void> | Swap the streamed set (`replace([])` clears it); the base `values` never leave. Without `chart.streaming` the dies upsert into the base like a batch (quietly: no `appended`, no `binChanged`, as a ring replace). |
Promise<WaferMapStreamSource | undefined> | The die ring in use: the bound `stream-source`, else the internal one (undefined before the first push, and without `chart.streaming`). | |
| col: number, row: number, patch: { bin?: number | string; value?: number } | Promise<WaferDieEventDetail | null> | Patch an existing die's data (creates the cell when absent — a late probe log is still a probe log): the merged result streams in through the ring. Returns the resulting detail. |
| options: { duration?: number; easing?: WaferMapEasing; enabled?: boolean; type?: WaferMapAnimationType } | Promise<void> | 비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요. |
Promise<void> | 비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요. | |
Promise<void> | 비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요. | |
Promise<void> | Run the reveal again. | |
Promise<{ dies: number; fullDies: number; partialDies: number }> | Layout + grid summary for tooling/specs. | |
Promise<BinarySummary> | Pass/fail/yield summary over the probed dies (any mode). | |
Promise<WaferValueStats> | Descriptive statistics over the measured on-wafer values (any mode). | |
| col: number, row: number | Promise<DieIndexEntry | null> | Map index of a notch-frame lattice cell, or null when off the wafer. |
| ix: number, iy: number | Promise<DieIndexEntry | null> | Die entry addressed by its map index, or null. |
Promise<WaferMapEngineTier> | 비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요. | |
Promise<WaferMapRenderResult> | 비동기 메서드입니다. 아래 인수 타입과 반환 타입을 확인하세요. | |
Promise<ChartEngineStatus> | Requested engine vs what runs, and why (CHART-ADD-08): always Standard (this type has no WebGPU renderer); read without side effects, never consults the license. |
일치하는 API가 없습니다.