@xchart/wafer-map
TypeScript icon, indicating that this package has built-in type declarations

1.0.6 • Public • Published

@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 清空选区数据 -

Readme

Keywords

Package Sidebar

Install

npm i @xchart/wafer-map

Weekly Downloads

0

Version

1.0.6

License

MIT

Unpacked Size

101 kB

Total Files

14

Last publish

Collaborators

  • cyrilluce
  • haibins
  • yugasun