@xchart/wafer-map

WaferMap chart.

WaferMap 图表组件，支持 define map 、 wafer 和 heat map 三种模式

Usage

pnpm add @xchart/wafer-map
# or
yarn add @xchart/wafer-map

// 1. prepare dataset
const points = [
    {
        id: '1',
        x: 1,
        y: 1,
        bin: 1,
    },
];

// 2. new wafermap
const map = new NormalMap({
    container: container.value!,
    data: points,
    type: isHeatMap.value ? IWaferMapType.HEATMAP : IWaferMapType.NORMAL,
    config: {
        style: {
            fill: fillColor,
            strokeWidth: stroke_width,
            stroke: stroke_color,
            dieSize: {
                width: default_dieSize.w,
                height: default_dieSize.h,
            },
        },
        showColorMap: isHeatMap.value && !props.binCode,
    },
});

// 3. rerender it when needed
map.rerender({
    data: newPoints,
});

API

DIFINITION

import { DefinitionMap } from '@xchart/wafer-map'

DefinitionMap({ container, type , config = {} }: IWaferMap)

Attributes

| 属性 | 描述 | 类型 | 是否必填 | 默认值 | | --------- | -------- | --------------- | -------- | ---------------------- | | container | 图表容器 | HTMLElement | ✅ | - | | type | 图表宽度 | IWaferMapType | ✅ | IWaferMapType.Normal | | config | 图表配置 | IWaferConfig | - | - |

IWaferMapType

| 值 | 描述 | | ------------ | ------------ | | NORMAL | wafer | | HEATMAP | 热力图 wafer | | DIFINITION | 定义图 wafer |

IWaferConfig

| 属性 | 描述 | 默认值 | 是否可选 | | ---------------------- | ---------------------- | --------------- | -------- | | width | 图表宽度 | 100% | ✔️ | | height | 图表高度 | 100% | ✔️ | | rotate | 旋转角度 | 0 | ✔️ | | coordinate | coordinate 位置 | "top-left" | ✔️ | | flip | 水平、垂直是否镜像反转 | [false,false] | ✔️ | | dieRows | die rows | 100 | ✔️ | | dieCols | die columns | 100 | ✔️ | | dieOriginX | die origin x | 0 | ✔️ | | dieOriginY | die origin y | 0 | ✔️ | | reticle | die reticle | false | ✔️ | | reticleX | die reticle x | 2 | ✔️ | | reticleY | die reticle y | 2 | ✔️ | | reticleOriginX | die reticle origin x | 0 | ✔️ | | reticleOriginY | die reticle origin y | 0 | ✔️ | | notch | notch | "down" | ✔️ | | style.circleFill | circle fill | | ✔️ | | style.fill | die fill | | ✔️ | | style.stroke | die stroke | | ✔️ | | style.strokeWidth | die stroke width | | ✔️ | | style.dieSize.width | die size width | | ✔️ | | style.dieSize.height | die size height | | ✔️ |

NORMAL | HEATMAP

import { NormalMap } from '@xchart/wafer-map'

NormalMap({ container, type , config = {} }: IWaferMap)

Attributes

| 属性 | 描述 | 类型 | 是否必填 | 默认值 | | --------- | -------- | ------------------------------- | -------- | ---------------------- | | container | 图表容器 | HTMLElement | ✅ | - | | data | 图表宽度 | IDieWithBin | IDieWithHeat | ✅ | - | | type | 图表宽度 | IWaferMapType | ✅ | IWaferMapType.Normal | | config | 图表配置 | IWaferConfig | - | - |

IWaferMapType

| 值 | 描述 | | ------------ | ------------ | | NORMAL | wafer | | HEATMAP | 热力图 wafer | | DIFINITION | 定义图 wafer |

Data

interface IDieWithBin {
    x: number;
    y: number;
    hard_bin: number | string;
    soft_bin: number | string;
}

interface IDieWithHeat {
    x: number;
    y: number;
    average: number;
    max: number;
    median: number;
    min: number;
}

IWaferConfigNormal

interface IWaferConfigNormal extends IWaferConfig {
    /**
     * 是否显示Notch
     */
    showNotch?: boolean;
    /**
     * 是否要显示热力图
     */
    showColorMap?: boolean;
    /**
     * 热力图的key
     */
    heatMapKey?: keyof HeatMapKeyTypes;
}

interface HeatMapKeyTypes {
    average: number;
    max: number;
    median: number;
    min: number;
}

IWaferConfig

| 属性 | 描述 | 默认值 | 是否可选 | | ---------------------- | ---------------------- | --------------- | -------- | | width | 图表宽度 | 100% | ✔️ | | height | 图表高度 | 100% | ✔️ | | rotate | 旋转角度 | 0 | ✔️ | | coordinate | coordinate 位置 | "top-left" | ✔️ | | flip | 水平、垂直是否镜像反转 | [false,false] | ✔️ | | dieRows | die rows | 100 | ✔️ | | dieCols | die columns | 100 | ✔️ | | dieOriginX | die origin x | 0 | ✔️ | | dieOriginY | die origin y | 0 | ✔️ | | reticle | die reticle | false | ✔️ | | reticleX | die reticle x | 2 | ✔️ | | reticleY | die reticle y | 2 | ✔️ | | reticleOriginX | die reticle origin x | 0 | ✔️ | | reticleOriginY | die reticle origin y | 0 | ✔️ | | notch | notch | "down" | ✔️ | | style.circleFill | circle fill | | ✔️ | | style.fill | die fill | | ✔️ | | style.stroke | die stroke | | ✔️ | | style.strokeWidth | die stroke width | | ✔️ | | style.dieSize.width | die size width | | ✔️ | | style.dieSize.height | die size height | | ✔️ |

Event

公共方法

| 方法名 | 描述 | 参数说明 | | ----------------- | ------------------------------------ | ----------------------- | | rotate(angle) | 以给定角度旋转元素。 | angle 旋转角度 number | | flip(direction) | 水平或垂直翻转元素。 h: 水平 v: 垂直 | direction string | | translate(x, y) | 沿着 x 和 y 轴平移元素一定距离。 | x: number, y: number | | reset() | 将所有变换重置为默认值。 | - |

NORMAL方法

| 方法名 | 描述 | 参数说明 | | ------------ | ------------ | -------- | | brushed | 开启选区数据 | - | | clearBrush | 清空选区数据 | - |