diff --git a/change/@ni-nimble-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json b/change/@ni-nimble-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json new file mode 100644 index 0000000000..6e7045c938 --- /dev/null +++ b/change/@ni-nimble-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Finished first iteration of the waferMap component and its storybook", + "packageName": "@ni/nimble-components", + "email": "35329597+DStavilaNI@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/nimble-components/src/wafer-map/template.ts b/packages/nimble-components/src/wafer-map/template.ts index 006c6f23ee..6b7ab3d91b 100644 --- a/packages/nimble-components/src/wafer-map/template.ts +++ b/packages/nimble-components/src/wafer-map/template.ts @@ -1,4 +1,18 @@ -import { html } from '@microsoft/fast-element'; +import { html, repeat } from '@microsoft/fast-element'; import type { WaferMap } from '.'; +import type { WaferMapDie } from './types'; -export const template = html``; +// prettier-ignore +export const template = html` +
+
    + ${repeat( + x => x.dies, + html`
  • + ${x => html`dieX: ${x.x}, dieY: ${x.y}, value: + ${x.value}%`} +
    • ` + )} +
+
+`; diff --git a/packages/nimble-components/src/wafer-map/tests/sets.ts b/packages/nimble-components/src/wafer-map/tests/sets.ts new file mode 100644 index 0000000000..e23f116325 --- /dev/null +++ b/packages/nimble-components/src/wafer-map/tests/sets.ts @@ -0,0 +1,54 @@ +import type { WaferMapDie, WaferMapColorsScale } from '../types'; + +export const highLightedValueSets = [ + [0, 1, 2, 3], + [4, 5, 6, 7], + [1, 5, 7, 15], + [0, 2, 7, 10] +]; + +export const wafermapDieSets: WaferMapDie[][] = [ + [ + { x: 0, y: 0, value: 100 }, + { x: 0, y: 1, value: 50 }, + { x: 0, y: 2, value: 12 }, + { x: 0, y: 3, value: 99 }, + { x: 1, y: 0, value: 78 }, + { x: 1, y: 1, value: 88 }, + { x: 1, y: 2, value: 68 }, + { x: 1, y: 3, value: 99 }, + { x: 2, y: 0, value: 99 }, + { x: 2, y: 1, value: 80 }, + { x: 2, y: 2, value: 99 }, + { x: 2, y: 3, value: 100 }, + { x: 3, y: 0, value: 40 }, + { x: 3, y: 1, value: 10 }, + { x: 3, y: 2, value: 15 }, + { x: 3, y: 3, value: 30 } + ], + [ + { x: 0, y: 0, value: 16 }, + { x: 0, y: 1, value: 50 }, + { x: 0, y: 2, value: 13 }, + { x: 0, y: 3, value: 65 }, + { x: 1, y: 0, value: 78 }, + { x: 1, y: 1, value: 88 }, + { x: 1, y: 2, value: 99 }, + { x: 1, y: 3, value: 99 }, + { x: 2, y: 0, value: 99 }, + { x: 2, y: 1, value: 80 }, + { x: 2, y: 2, value: 99 }, + { x: 2, y: 3, value: 100 }, + { x: 3, y: 0, value: 70 }, + { x: 3, y: 1, value: 75 }, + { x: 3, y: 2, value: 70 }, + { x: 3, y: 3, value: 72 } + ] +]; + +export const waferMapColorsScaleSets: WaferMapColorsScale[] = [ + { + colors: ['red', 'orange', 'green'], + values: [1, 50, 100] + } +]; diff --git a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts new file mode 100644 index 0000000000..7de5f28723 --- /dev/null +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -0,0 +1,213 @@ +import { html } from '@microsoft/fast-element'; +import type { Meta, StoryObj } from '@storybook/html'; +import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; +import { bodyFont } from '../../theme-provider/design-tokens'; + +import '../../all-components'; +import type { WaferMapDie, WaferMapColorsScale } from '../types'; +import { + WaferMapQuadrant, + WaferMapOrientation, + WaferMapColorsScaleMode +} from '../types'; +import { + highLightedValueSets, + wafermapDieSets, + waferMapColorsScaleSets +} from './sets'; + +interface WaferMapArgs { + colorscale: WaferMapColorsScale; + colorscalemode: WaferMapColorsScaleMode; + dielabelshidden: boolean; + dielabelsuffix: string; + dies: string; + highlightedvalues: string; + maxcharacters: number; + orientation: WaferMapOrientation; + quadrant: WaferMapQuadrant; +} + +const metadata: Meta = { + title: 'WaferMap', + parameters: { + docs: { + description: { + component: + 'A wafer map is a component for visualizing data from the manufacture of semiconductor wafers. Each die on the wafer can show numerical information and be colored to indicate information about that die.' + } + } + }, + render: createUserSelectedThemeStory(html` +
+ WARNING - The wafermap is still in development and considered + experimental. It is not recommended for application use. +
+ { + let returnedValue: WaferMapDie[] | undefined; + switch (x.dies) { + case 'set1': + returnedValue = wafermapDieSets[0]; + break; + case 'set2': + returnedValue = wafermapDieSets[1]; + break; + case 'set3': + returnedValue = wafermapDieSets[2]; + break; + case 'set4': + returnedValue = wafermapDieSets[2]; + break; + default: + returnedValue = undefined; + break; + } + return returnedValue; + }} + :highlightedValues="${x => { + let returnedValue: number[] | undefined; + switch (x.dies) { + case 'set1': + returnedValue = highLightedValueSets[0]; + break; + case 'set2': + returnedValue = highLightedValueSets[0]; + break; + default: + returnedValue = undefined; + break; + } + return returnedValue; + }}" + > + + + `), + args: { + dies: 'set1', + quadrant: WaferMapQuadrant.bottomLeft, + orientation: WaferMapOrientation.left, + colorscale: waferMapColorsScaleSets[0], + maxcharacters: 4, + dielabelshidden: false, + dielabelsuffix: '', + colorscalemode: WaferMapColorsScaleMode.linear, + highlightedvalues: 'set1' + }, + argTypes: { + dies: { + description: + 'Represents the input data, an array of `WaferMapDie`, which will be renedered by the wafer map', + options: ['set1', 'set2'], + control: { + type: 'radio', + labels: { + set1: 'Set 1', + set2: 'Set 2' + } + }, + defaultValue: 'set1' + }, + quadrant: { + description: + 'Represents the orientation of the dies on the wafer map', + options: Object.values(WaferMapQuadrant), + control: { + type: 'radio', + labels: { + [WaferMapQuadrant.bottomLeft]: 'bottom-left', + [WaferMapQuadrant.bottomRight]: 'bottom-right', + [WaferMapQuadrant.topLeft]: 'top-left', + [WaferMapQuadrant.topRight]: 'top-right' + } + } + }, + orientation: { + description: 'Notch orientation', + options: Object.values(WaferMapOrientation), + control: { + type: 'radio', + labels: { + [WaferMapOrientation.left]: 'left', + [WaferMapOrientation.top]: 'top', + [WaferMapOrientation.right]: 'right', + [WaferMapOrientation.bottom]: 'bottom' + } + } + }, + maxcharacters: { + description: + 'Represents the number of characters allowed to be displayed within a single die. As the die values are represented by Floating point numbers, we must have the liberty of limiting how many characters we are willing to display within a single die.', + control: { type: 'number' } + }, + dielabelshidden: { + description: + 'Boolean value that determines if the dies labels in the wafer map view are shown or not. Default value is false.', + control: { type: 'boolean' } + }, + dielabelsuffix: { + description: + 'String that can be added as a label at the end of each wafer map die value', + control: { type: 'string' } + }, + colorscalemode: { + description: + 'Enum value that determines if the color scale represents continuous gradient values (linear), or is set categorically (ordinal).', + options: Object.values(WaferMapColorsScaleMode), + control: { + type: 'radio', + labels: { + [WaferMapColorsScaleMode.linear]: 'Linear', + [WaferMapColorsScaleMode.ordinal]: 'Ordinal' + } + } + }, + highlightedvalues: { + description: + 'Represents an array of die indexes that will be highlighted in the wafer map view', + options: ['set1', 'set2', 'set3', 'set4'], + control: { + type: 'radio', + labels: { + set1: 'Set 1', + set2: 'Set 2', + set3: 'Set 3', + set4: 'Set 4' + } + }, + defaultValue: 'set1' + }, + colorscale: { + description: + 'Represents the color spectrum which shows the status of the dies on the wafer.', + options: ['set1'], + control: { + type: 'radio', + labels: { + set1: 'Scale 1' + } + }, + defaultValue: 'set1', + mapping: { + set1: waferMapColorsScaleSets[0] + } + } + } +}; + +export default metadata; + +export const waferMap: StoryObj = {};