From efd6489f7a7ac357c5445815d110d30f535f1c66 Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Tue, 22 Nov 2022 17:52:17 +0200 Subject: [PATCH 01/16] First commit - basic implementation of the story with arguments and argument types --- .../nimble-components/src/wafer-map/index.ts | 2 +- .../src/wafer-map/template.ts | 6 +- .../src/wafer-map/tests/wafer-map.stories.ts | 81 +++++++++++++++++++ 3 files changed, 87 insertions(+), 2 deletions(-) create mode 100644 packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts diff --git a/packages/nimble-components/src/wafer-map/index.ts b/packages/nimble-components/src/wafer-map/index.ts index 2199df4159..13ed39494b 100644 --- a/packages/nimble-components/src/wafer-map/index.ts +++ b/packages/nimble-components/src/wafer-map/index.ts @@ -4,7 +4,7 @@ import { observable } from '@microsoft/fast-element'; import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation'; -import { template } from '../theme-provider/template'; +import { template } from './template'; import { styles } from './styles'; import { WaferMapColorsScale, diff --git a/packages/nimble-components/src/wafer-map/template.ts b/packages/nimble-components/src/wafer-map/template.ts index 006c6f23ee..cfdf7f41a7 100644 --- a/packages/nimble-components/src/wafer-map/template.ts +++ b/packages/nimble-components/src/wafer-map/template.ts @@ -1,4 +1,8 @@ import { html } from '@microsoft/fast-element'; import type { WaferMap } from '.'; -export const template = html``; +export const template = html` +
+ Wafermap placeholder +
+`; \ No newline at end of file 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..271398eb86 --- /dev/null +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -0,0 +1,81 @@ +import { html } from '@microsoft/fast-element'; +import type { Meta, StoryObj } from '@storybook/html'; +import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; +import '../../all-components'; +import type {WaferMapColorsScaleMode, + WaferMapDie, + WaferMapColorsScale} from '../types'; +import {WaferMapQuadrant, WaferMapOrientation} from '../types'; + +interface WafermapArgs { + quadrant: WaferMapQuadrant; + orientation: WaferMapOrientation; + maxCharacters: number; + dieLabelsHidden:boolean; + dieLabelsSuffix:string; + colorsScaleMode: WaferMapColorsScaleMode; + highlightedValues: number[]; + dies: WaferMapDie[]; + colorScale: WaferMapColorsScale; + name: string; +} + +const metadata: Meta = { + title: 'Wafermap', + parameters: { + docs: { + description: { + component: + 'A Wafermap description' + } + }, + actions: { + handles: ['click'] + } + }, + render: createUserSelectedThemeStory(html` + + + `), + args: { + quadrant: WaferMapQuadrant.bottomLeft, + orientation: WaferMapOrientation.left + }, + argTypes: { + name: { + description: + 'A wafer map identifies the locations of defective integrated circuits (chips) on a silicon wafer and provides important spatial information.' + }, + quadrant:{ + description: + 'Wafermap axis origin position', + options: Object.values(WaferMapQuadrant), + control:{ + type: 'radio', + labels:{ + [WaferMapQuadrant.bottomLeft]:'BottomLeft', + [WaferMapQuadrant.bottomRight]:'BottomRight', + [WaferMapQuadrant.topLeft]:'TopLeft', + [WaferMapQuadrant.topRight]:'TopRight' + } + } + }, + orientation:{ + description:'Notch orientation', + options: Object.values(WaferMapOrientation), + control:{ + type:'radio', + labels:{ + [WaferMapOrientation.left]:'Left', + [WaferMapOrientation.top]:'Top', + [WaferMapOrientation.right]:'Right', + [WaferMapOrientation.bottom]:'Bottom', + } + } + } + } +}; + +export default metadata; + +export const waferMap: StoryObj = {}; From 6d226065f1ffe264db4ff2a8bc672fc6b4150a34 Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Thu, 24 Nov 2022 11:58:24 +0200 Subject: [PATCH 02/16] Finished first iteration of the wafermap component and the storybook --- .../nimble-components/src/wafer-map/index.ts | 14 ++ .../src/wafer-map/template.ts | 26 +++- .../src/wafer-map/tests/sets.ts | 54 ++++++++ .../src/wafer-map/tests/wafer-map.stories.ts | 121 ++++++++++++++++-- .../nimble-components/src/wafer-map/types.ts | 33 +++++ 5 files changed, 232 insertions(+), 16 deletions(-) create mode 100644 packages/nimble-components/src/wafer-map/tests/sets.ts diff --git a/packages/nimble-components/src/wafer-map/index.ts b/packages/nimble-components/src/wafer-map/index.ts index 13ed39494b..206aaec536 100644 --- a/packages/nimble-components/src/wafer-map/index.ts +++ b/packages/nimble-components/src/wafer-map/index.ts @@ -58,6 +58,20 @@ export class WaferMap extends FoundationElement { colors: [], values: [] }; + @observable public renderReady: boolean = false; + + override connectedCallback() { + super.connectedCallback(); + //The component has been attached to the DOM and the attributes, properties are available + //Use this for initialization/initial render + + //Simulate the time required until render is complete, before displaying the wafermap + //User this for conditional rendering + setTimeout(()=>{ + this.renderReady=true; + },2000); + } + } const nimbleWaferMap = WaferMap.compose({ diff --git a/packages/nimble-components/src/wafer-map/template.ts b/packages/nimble-components/src/wafer-map/template.ts index cfdf7f41a7..0b4ad35dc3 100644 --- a/packages/nimble-components/src/wafer-map/template.ts +++ b/packages/nimble-components/src/wafer-map/template.ts @@ -1,8 +1,30 @@ -import { html } from '@microsoft/fast-element'; +import { html, repeat, ref } from '@microsoft/fast-element'; import type { WaferMap } from '.'; export const template = html`
- Wafermap placeholder + ${ x => { + if(x.renderReady){return WaferTemplate;} + return notReadyTemplate + } + }
+`; + +const notReadyTemplate = html` +
+ Loading.... +
+`; + +const WaferTemplate = html` +
+
    + ${repeat(x=>x.dies, html` +
  • + ${(x,c)=>{return `dieX: ${x.x}, dieY: ${x.y}, value: ${x.value}%`}} +
    • + `)} +
      +
      `; \ No newline at end of file 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..2a11876552 --- /dev/null +++ b/packages/nimble-components/src/wafer-map/tests/sets.ts @@ -0,0 +1,54 @@ +import type { WaferMapDie, WaferMapColorsScale } from '../types'; + +export const HighlightedValuesSets = [ + [0, 1, 2, 3], + [4, 5, 6, 7], + [1, 5, 7, 15], + [0, 2, 7, 10] +]; + +export const WafermapDiesSets: 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 index 271398eb86..cdb47cb474 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -1,11 +1,12 @@ -import { html } from '@microsoft/fast-element'; +import { html, ViewTemplate } from '@microsoft/fast-element'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; + import '../../all-components'; -import type {WaferMapColorsScaleMode, - WaferMapDie, - WaferMapColorsScale} from '../types'; -import {WaferMapQuadrant, WaferMapOrientation} from '../types'; +import type {WaferMapDie, + WaferMapColorsScale} from '../types'; +import {WaferMapQuadrant, WaferMapOrientation, WaferMapColorsScaleMode} from '../types'; +import {HighlightedValuesSets,WafermapDiesSets, WaferMapColorsScaleSets} from './sets'; interface WafermapArgs { quadrant: WaferMapQuadrant; @@ -17,9 +18,10 @@ interface WafermapArgs { highlightedValues: number[]; dies: WaferMapDie[]; colorScale: WaferMapColorsScale; - name: string; } +const decoratorTemplate = html`
      Decorator template
      `; + const metadata: Meta = { title: 'Wafermap', parameters: { @@ -30,28 +32,58 @@ const metadata: Meta = { } }, actions: { - handles: ['click'] + handles: ['click', 'mouseover'] } }, render: createUserSelectedThemeStory(html` - + x.dies} + > `), args: { + dies:WafermapDiesSets[0], quadrant: WaferMapQuadrant.bottomLeft, - orientation: WaferMapOrientation.left + orientation: WaferMapOrientation.left, + colorScale:WaferMapColorsScaleSets[0], + maxCharacters:4, + dieLabelsHidden:false, + dieLabelsSuffix:'', + colorsScaleMode: WaferMapColorsScaleMode.linear, + highlightedValues: HighlightedValuesSets[0] }, argTypes: { - name: { + dies:{ description: - 'A wafer map identifies the locations of defective integrated circuits (chips) on a silicon wafer and provides important spatial information.' + 'Represents the input data, an array of WaferMapDie, which will be renedered by the Wafermap', + options:['set1', 'set2'], + control:{ + type:'select', + labels:{ + set1:'Dies Set 1', + set2:'Dies Set 2' + } + }, + mapping:{ + set1:WafermapDiesSets[0], + set2:WafermapDiesSets[1] + } }, quadrant:{ description: - 'Wafermap axis origin position', + 'Represents the orientation of the dies on the wafer map', options: Object.values(WaferMapQuadrant), control:{ - type: 'radio', + type: 'select', labels:{ [WaferMapQuadrant.bottomLeft]:'BottomLeft', [WaferMapQuadrant.bottomRight]:'BottomRight', @@ -64,7 +96,7 @@ const metadata: Meta = { description:'Notch orientation', options: Object.values(WaferMapOrientation), control:{ - type:'radio', + type:'select', labels:{ [WaferMapOrientation.left]:'Left', [WaferMapOrientation.top]:'Top', @@ -72,6 +104,67 @@ const metadata: Meta = { [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'} + }, + dieLabelsSuffix:{ + description: + 'String that can be added as a label at the end of each wafer map die value', + control:{type:'string'} + }, + colorsScaleMode:{ + description: + 'Enum value that determines if the colorScale represents continuous gradient values (linear), or is set categorically (ordinal).', + options:Object.values(WaferMapColorsScaleMode), + control:{ + type:'select', + 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:'select', + labels:{ + set1:'Highlighted Values Set 1', + set2:'Highlighted Values Set 2', + set3:'Highlighted Values Set 3', + set4:'Highlighted Values Set 4' + } + }, + mapping:{ + set1:HighlightedValuesSets[0], + set2:HighlightedValuesSets[1], + set3:HighlightedValuesSets[2], + set4:HighlightedValuesSets[3] + } + }, + colorScale:{ + description: + 'Represents the color spectrum which shows the status of the dies on the wafer.', + options:['set1'], + control:{ + type:'select', + labels:{ + set1:'Color Scale 1' + } + }, + mapping:{ + set1:WaferMapColorsScaleSets[0] + } } } }; diff --git a/packages/nimble-components/src/wafer-map/types.ts b/packages/nimble-components/src/wafer-map/types.ts index 413481f6dd..8bd7718a4d 100644 --- a/packages/nimble-components/src/wafer-map/types.ts +++ b/packages/nimble-components/src/wafer-map/types.ts @@ -5,6 +5,39 @@ export const WaferMapQuadrant = { topRight: 'top-right' } as const; +export const HighlightedValuesSets = [ + [0, 1, 2 ,3], + [4, 5, 6 ,7], + [1, 5, 7 ,15], + [0, 2, 7 ,10] +]; + +export const WafermapDiesSet: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}, +] + +export const WaferMapColorsScaleSets:WaferMapColorsScale[]=[ + { + colors:['red', 'orange', 'green'], + values:[1, 50, 100] + } +] + export type WaferMapQuadrant = typeof WaferMapQuadrant[keyof typeof WaferMapQuadrant]; From 854667e67fd3388a7d0af92ec08b17b0db19a960 Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Thu, 24 Nov 2022 13:31:39 +0200 Subject: [PATCH 03/16] Fixed linting issues --- .../nimble-components/src/wafer-map/index.ts | 20 +- .../src/wafer-map/template.ts | 56 +++--- .../src/wafer-map/tests/sets.ts | 6 +- .../src/wafer-map/tests/wafer-map.stories.ts | 184 +++++++++--------- .../nimble-components/src/wafer-map/types.ts | 52 ++--- 5 files changed, 164 insertions(+), 154 deletions(-) diff --git a/packages/nimble-components/src/wafer-map/index.ts b/packages/nimble-components/src/wafer-map/index.ts index 206aaec536..5bc99eaa34 100644 --- a/packages/nimble-components/src/wafer-map/index.ts +++ b/packages/nimble-components/src/wafer-map/index.ts @@ -58,20 +58,20 @@ export class WaferMap extends FoundationElement { colors: [], values: [] }; - @observable public renderReady: boolean = false; - override connectedCallback() { + @observable public renderReady = false; + + public override connectedCallback(): void { super.connectedCallback(); - //The component has been attached to the DOM and the attributes, properties are available - //Use this for initialization/initial render + // The component has been attached to the DOM and the attributes, properties are available + // Use this for initialization/initial render - //Simulate the time required until render is complete, before displaying the wafermap - //User this for conditional rendering - setTimeout(()=>{ - this.renderReady=true; - },2000); + // Simulate the time required until render is complete, before displaying the wafermap + // User this for conditional rendering + setTimeout((): void => { + this.renderReady = true; + }, 2000); } - } const nimbleWaferMap = WaferMap.compose({ diff --git a/packages/nimble-components/src/wafer-map/template.ts b/packages/nimble-components/src/wafer-map/template.ts index 0b4ad35dc3..a73e0ffc4c 100644 --- a/packages/nimble-components/src/wafer-map/template.ts +++ b/packages/nimble-components/src/wafer-map/template.ts @@ -1,30 +1,36 @@ -import { html, repeat, ref } from '@microsoft/fast-element'; +import { html, repeat } from '@microsoft/fast-element'; import type { WaferMap } from '.'; +import type { WaferMapDie } from './types'; -export const template = html` -
      - ${ x => { - if(x.renderReady){return WaferTemplate;} - return notReadyTemplate - } - } -
      -`; +const notReadyTemplate = html`
      Loading....
      `; -const notReadyTemplate = html` -
      - Loading.... -
      +const waferTemplate = html` +
      +
        + ${repeat( + x => x.dies, + html` +
      • + ${(x: WaferMapDie) => { + return `dieX: ${x.x}, dieY: ${x.y}, value: ${x.value}%`; + }} +
        • + ` + )} +
          +
          +
        +
      +
      `; -const WaferTemplate = html` -
      -
        - ${repeat(x=>x.dies, html` -
      • - ${(x,c)=>{return `dieX: ${x.x}, dieY: ${x.y}, value: ${x.value}%`}} -
        • - `)} -
          -
          -`; \ No newline at end of file +export const template = html` +
          + ${x => { + if (x.renderReady) { + return waferTemplate; + } + return notReadyTemplate; + }} +
          +`; diff --git a/packages/nimble-components/src/wafer-map/tests/sets.ts b/packages/nimble-components/src/wafer-map/tests/sets.ts index 2a11876552..09eddf91ee 100644 --- a/packages/nimble-components/src/wafer-map/tests/sets.ts +++ b/packages/nimble-components/src/wafer-map/tests/sets.ts @@ -1,13 +1,13 @@ import type { WaferMapDie, WaferMapColorsScale } from '../types'; -export const HighlightedValuesSets = [ +export const HIGHLIGHTEDVALUESETS = [ [0, 1, 2, 3], [4, 5, 6, 7], [1, 5, 7, 15], [0, 2, 7, 10] ]; -export const WafermapDiesSets: WaferMapDie[][] = [ +export const WAFERMAPDIESETS: WaferMapDie[][] = [ [ { x: 0, y: 0, value: 100 }, { x: 0, y: 1, value: 50 }, @@ -46,7 +46,7 @@ export const WafermapDiesSets: WaferMapDie[][] = [ ] ]; -export const WaferMapColorsScaleSets: WaferMapColorsScale[] = [ +export const WAFERMAPCOLORSCALESETS: 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 index cdb47cb474..46bd2fc4c4 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -1,34 +1,38 @@ -import { html, ViewTemplate } from '@microsoft/fast-element'; +import { html } from '@microsoft/fast-element'; import type { Meta, StoryObj } from '@storybook/html'; import { createUserSelectedThemeStory } from '../../utilities/tests/storybook'; import '../../all-components'; -import type {WaferMapDie, - WaferMapColorsScale} from '../types'; -import {WaferMapQuadrant, WaferMapOrientation, WaferMapColorsScaleMode} from '../types'; -import {HighlightedValuesSets,WafermapDiesSets, WaferMapColorsScaleSets} from './sets'; +import type { WaferMapDie, WaferMapColorsScale } from '../types'; +import { + WaferMapQuadrant, + WaferMapOrientation, + WaferMapColorsScaleMode +} from '../types'; +import { + HIGHLIGHTEDVALUESETS, + WAFERMAPDIESETS, + WAFERMAPCOLORSCALESETS +} from './sets'; interface WafermapArgs { quadrant: WaferMapQuadrant; orientation: WaferMapOrientation; maxCharacters: number; - dieLabelsHidden:boolean; - dieLabelsSuffix:string; + dieLabelsHidden: boolean; + dieLabelsSuffix: string; colorsScaleMode: WaferMapColorsScaleMode; - highlightedValues: number[]; + highlightedValues: number[]; dies: WaferMapDie[]; colorScale: WaferMapColorsScale; } -const decoratorTemplate = html`
          Decorator template
          `; - const metadata: Meta = { title: 'Wafermap', parameters: { docs: { description: { - component: - 'A Wafermap description' + component: 'A Wafermap description' } }, actions: { @@ -38,132 +42,132 @@ const metadata: Meta = { render: createUserSelectedThemeStory(html` x.dies} + quadrant="${x => x.quadrant}" + orientation="${x => x.orientation}" + maxCharacters="${x => x.maxCharacters}" + dieLabelsHidden="${x => x.dieLabelsHidden}" + dieLabelsSuffix="${x => x.dieLabelsSuffix}" + colorsScaleMode="${x => x.colorsScaleMode}" + :highlightedValues="${x => x.highlightedValues}" + :colorScale="${x => x.colorScale}" + :dies=${x => x.dies} > `), args: { - dies:WafermapDiesSets[0], + dies: WAFERMAPDIESETS[0], quadrant: WaferMapQuadrant.bottomLeft, orientation: WaferMapOrientation.left, - colorScale:WaferMapColorsScaleSets[0], - maxCharacters:4, - dieLabelsHidden:false, - dieLabelsSuffix:'', + colorScale: WAFERMAPCOLORSCALESETS[0], + maxCharacters: 4, + dieLabelsHidden: false, + dieLabelsSuffix: '', colorsScaleMode: WaferMapColorsScaleMode.linear, - highlightedValues: HighlightedValuesSets[0] + highlightedValues: HIGHLIGHTEDVALUESETS[0] }, argTypes: { - dies:{ + dies: { description: 'Represents the input data, an array of WaferMapDie, which will be renedered by the Wafermap', - options:['set1', 'set2'], - control:{ - type:'select', - labels:{ - set1:'Dies Set 1', - set2:'Dies Set 2' + options: ['set1', 'set2'], + control: { + type: 'select', + labels: { + set1: 'Dies Set 1', + set2: 'Dies Set 2' } }, - mapping:{ - set1:WafermapDiesSets[0], - set2:WafermapDiesSets[1] + mapping: { + set1: WAFERMAPDIESETS[0], + set2: WAFERMAPDIESETS[1] } }, - quadrant:{ + quadrant: { description: 'Represents the orientation of the dies on the wafer map', options: Object.values(WaferMapQuadrant), - control:{ + control: { type: 'select', - labels:{ - [WaferMapQuadrant.bottomLeft]:'BottomLeft', - [WaferMapQuadrant.bottomRight]:'BottomRight', - [WaferMapQuadrant.topLeft]:'TopLeft', - [WaferMapQuadrant.topRight]:'TopRight' + labels: { + [WaferMapQuadrant.bottomLeft]: 'BottomLeft', + [WaferMapQuadrant.bottomRight]: 'BottomRight', + [WaferMapQuadrant.topLeft]: 'TopLeft', + [WaferMapQuadrant.topRight]: 'TopRight' } } }, - orientation:{ - description:'Notch orientation', + orientation: { + description: 'Notch orientation', options: Object.values(WaferMapOrientation), - control:{ - type:'select', - labels:{ - [WaferMapOrientation.left]:'Left', - [WaferMapOrientation.top]:'Top', - [WaferMapOrientation.right]:'Right', - [WaferMapOrientation.bottom]:'Bottom', + control: { + type: 'select', + labels: { + [WaferMapOrientation.left]: 'Left', + [WaferMapOrientation.top]: 'Top', + [WaferMapOrientation.right]: 'Right', + [WaferMapOrientation.bottom]: 'Bottom' } } }, - maxCharacters:{ - description: + 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'} + control: { type: 'number' } }, - dieLabelsHidden:{ - description: + 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'} + control: { type: 'boolean' } }, - dieLabelsSuffix:{ + dieLabelsSuffix: { description: 'String that can be added as a label at the end of each wafer map die value', - control:{type:'string'} + control: { type: 'string' } }, - colorsScaleMode:{ + colorsScaleMode: { description: 'Enum value that determines if the colorScale represents continuous gradient values (linear), or is set categorically (ordinal).', - options:Object.values(WaferMapColorsScaleMode), - control:{ - type:'select', - labels:{ - [WaferMapColorsScaleMode.linear]:'Linear', - [WaferMapColorsScaleMode.ordinal]:'Ordinal' + options: Object.values(WaferMapColorsScaleMode), + control: { + type: 'select', + labels: { + [WaferMapColorsScaleMode.linear]: 'Linear', + [WaferMapColorsScaleMode.ordinal]: 'Ordinal' } } }, - highlightedValues:{ + highlightedValues: { description: 'Represents an array of die indexes that will be highlighted in the wafer map view', - options:['set1', 'set2', 'set3', 'set4'], - control:{ - type:'select', - labels:{ - set1:'Highlighted Values Set 1', - set2:'Highlighted Values Set 2', - set3:'Highlighted Values Set 3', - set4:'Highlighted Values Set 4' + options: ['set1', 'set2', 'set3', 'set4'], + control: { + type: 'select', + labels: { + set1: 'Highlighted Values Set 1', + set2: 'Highlighted Values Set 2', + set3: 'Highlighted Values Set 3', + set4: 'Highlighted Values Set 4' } }, - mapping:{ - set1:HighlightedValuesSets[0], - set2:HighlightedValuesSets[1], - set3:HighlightedValuesSets[2], - set4:HighlightedValuesSets[3] + mapping: { + set1: HIGHLIGHTEDVALUESETS[0], + set2: HIGHLIGHTEDVALUESETS[1], + set3: HIGHLIGHTEDVALUESETS[2], + set4: HIGHLIGHTEDVALUESETS[3] } }, - colorScale:{ + colorScale: { description: 'Represents the color spectrum which shows the status of the dies on the wafer.', - options:['set1'], - control:{ - type:'select', - labels:{ - set1:'Color Scale 1' + options: ['set1'], + control: { + type: 'select', + labels: { + set1: 'Color Scale 1' } }, - mapping:{ - set1:WaferMapColorsScaleSets[0] + mapping: { + set1: WAFERMAPCOLORSCALESETS[0] } } } diff --git a/packages/nimble-components/src/wafer-map/types.ts b/packages/nimble-components/src/wafer-map/types.ts index 60dcebc82f..aaaa440bba 100644 --- a/packages/nimble-components/src/wafer-map/types.ts +++ b/packages/nimble-components/src/wafer-map/types.ts @@ -6,37 +6,37 @@ export const WaferMapQuadrant = { } as const; export const HighlightedValuesSets = [ - [0, 1, 2 ,3], - [4, 5, 6 ,7], - [1, 5, 7 ,15], - [0, 2, 7 ,10] + [0, 1, 2, 3], + [4, 5, 6, 7], + [1, 5, 7, 15], + [0, 2, 7, 10] ]; -export const WafermapDiesSet: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}, -] +export const WafermapDiesSet: 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 } +]; -export const WaferMapColorsScaleSets:WaferMapColorsScale[]=[ +export const WaferMapColorsScaleSets: WaferMapColorsScale[] = [ { - colors:['red', 'orange', 'green'], - values:[1, 50, 100] + colors: ['red', 'orange', 'green'], + values: [1, 50, 100] } -] +]; export type WaferMapQuadrant = typeof WaferMapQuadrant[keyof typeof WaferMapQuadrant]; From 22763ebc1c8a0a632b874ffe9de01fd93e6dbc95 Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Thu, 24 Nov 2022 13:49:41 +0200 Subject: [PATCH 04/16] Change files --- ...le-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-nimble-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json 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..e99116a612 --- /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": "denis.stavila@ni.com", + "dependentChangeType": "patch" +} From 73bd0adc948a763671d1ce1642cb49d112baf86a Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Thu, 24 Nov 2022 16:50:05 +0200 Subject: [PATCH 05/16] Updated the change file with a public email address --- ...-nimble-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@ni-nimble-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json b/change/@ni-nimble-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json index e99116a612..2b40203989 100644 --- a/change/@ni-nimble-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json +++ b/change/@ni-nimble-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json @@ -2,6 +2,6 @@ "type": "patch", "comment": "Finished first iteration of the wafermap component and its storybook", "packageName": "@ni/nimble-components", - "email": "denis.stavila@ni.com", + "email": "35329597+DStavilaNI@users.noreply.github.com", "dependentChangeType": "patch" } From f2d5b0a701ecf73723bfd39e3db8bdf30f713209 Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Thu, 24 Nov 2022 16:54:45 +0200 Subject: [PATCH 06/16] Applied PR feedback --- .../src/wafer-map/tests/wafer-map.stories.ts | 6 ++-- .../nimble-components/src/wafer-map/types.ts | 33 ------------------- 2 files changed, 3 insertions(+), 36 deletions(-) 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 index 46bd2fc4c4..2da10db0e3 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -15,7 +15,7 @@ import { WAFERMAPCOLORSCALESETS } from './sets'; -interface WafermapArgs { +interface WaferMapArgs { quadrant: WaferMapQuadrant; orientation: WaferMapOrientation; maxCharacters: number; @@ -27,7 +27,7 @@ interface WafermapArgs { colorScale: WaferMapColorsScale; } -const metadata: Meta = { +const metadata: Meta = { title: 'Wafermap', parameters: { docs: { @@ -175,4 +175,4 @@ const metadata: Meta = { export default metadata; -export const waferMap: StoryObj = {}; +export const waferMap: StoryObj = {}; diff --git a/packages/nimble-components/src/wafer-map/types.ts b/packages/nimble-components/src/wafer-map/types.ts index aaaa440bba..bf2ee6a76c 100644 --- a/packages/nimble-components/src/wafer-map/types.ts +++ b/packages/nimble-components/src/wafer-map/types.ts @@ -5,39 +5,6 @@ export const WaferMapQuadrant = { topRight: 'top-right' } as const; -export const HighlightedValuesSets = [ - [0, 1, 2, 3], - [4, 5, 6, 7], - [1, 5, 7, 15], - [0, 2, 7, 10] -]; - -export const WafermapDiesSet: 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 } -]; - -export const WaferMapColorsScaleSets: WaferMapColorsScale[] = [ - { - colors: ['red', 'orange', 'green'], - values: [1, 50, 100] - } -]; - export type WaferMapQuadrant = typeof WaferMapQuadrant[keyof typeof WaferMapQuadrant]; From 3bd4b21b31a0e48428a6ff19c68e62af7a7976fe Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Fri, 25 Nov 2022 12:12:57 +0200 Subject: [PATCH 07/16] applied pr feedback --- ...e-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json | 2 +- packages/nimble-components/src/wafer-map/index.ts | 2 +- .../src/wafer-map/tests/wafer-map.stories.ts | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/change/@ni-nimble-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json b/change/@ni-nimble-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json index 2b40203989..6e7045c938 100644 --- a/change/@ni-nimble-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json +++ b/change/@ni-nimble-components-297ab22e-342a-48cb-94f9-a5d8e7fe9bfa.json @@ -1,6 +1,6 @@ { "type": "patch", - "comment": "Finished first iteration of the wafermap component and its storybook", + "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/index.ts b/packages/nimble-components/src/wafer-map/index.ts index 5bc99eaa34..1c05914fe5 100644 --- a/packages/nimble-components/src/wafer-map/index.ts +++ b/packages/nimble-components/src/wafer-map/index.ts @@ -66,7 +66,7 @@ export class WaferMap extends FoundationElement { // The component has been attached to the DOM and the attributes, properties are available // Use this for initialization/initial render - // Simulate the time required until render is complete, before displaying the wafermap + // Simulate the time required until render is complete, before displaying the waferMap // User this for conditional rendering setTimeout((): void => { this.renderReady = true; 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 index 2da10db0e3..f7746f1f8b 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -28,11 +28,11 @@ interface WaferMapArgs { } const metadata: Meta = { - title: 'Wafermap', + title: 'WaferMap', parameters: { docs: { description: { - component: 'A Wafermap description' + component: 'A WaferMap description' } }, actions: { @@ -41,7 +41,7 @@ const metadata: Meta = { }, render: createUserSelectedThemeStory(html` = { argTypes: { dies: { description: - 'Represents the input data, an array of WaferMapDie, which will be renedered by the Wafermap', + 'Represents the input data, an array of WaferMapDie, which will be renedered by the WaferMap', options: ['set1', 'set2'], control: { type: 'select', From cbd63a490fedc47c012c64e595a5e209eb885a26 Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Tue, 29 Nov 2022 14:17:57 +0200 Subject: [PATCH 08/16] Applied PR feedback --- .../nimble-components/src/wafer-map/index.ts | 14 ------ .../src/wafer-map/template.ts | 33 +++---------- .../src/wafer-map/tests/sets.ts | 6 +-- .../src/wafer-map/tests/wafer-map.stories.ts | 49 ++++++++++--------- 4 files changed, 35 insertions(+), 67 deletions(-) diff --git a/packages/nimble-components/src/wafer-map/index.ts b/packages/nimble-components/src/wafer-map/index.ts index 1c05914fe5..13ed39494b 100644 --- a/packages/nimble-components/src/wafer-map/index.ts +++ b/packages/nimble-components/src/wafer-map/index.ts @@ -58,20 +58,6 @@ export class WaferMap extends FoundationElement { colors: [], values: [] }; - - @observable public renderReady = false; - - public override connectedCallback(): void { - super.connectedCallback(); - // The component has been attached to the DOM and the attributes, properties are available - // Use this for initialization/initial render - - // Simulate the time required until render is complete, before displaying the waferMap - // User this for conditional rendering - setTimeout((): void => { - this.renderReady = true; - }, 2000); - } } const nimbleWaferMap = WaferMap.compose({ diff --git a/packages/nimble-components/src/wafer-map/template.ts b/packages/nimble-components/src/wafer-map/template.ts index a73e0ffc4c..aacd29fa82 100644 --- a/packages/nimble-components/src/wafer-map/template.ts +++ b/packages/nimble-components/src/wafer-map/template.ts @@ -2,35 +2,14 @@ import { html, repeat } from '@microsoft/fast-element'; import type { WaferMap } from '.'; import type { WaferMapDie } from './types'; -const notReadyTemplate = html`
          Loading....
          `; - -const waferTemplate = html` +export const template = html`
            - ${repeat( - x => x.dies, - html` + ${repeat(x => x.dies, html`
          • - ${(x: WaferMapDie) => { - return `dieX: ${x.x}, dieY: ${x.y}, value: ${x.value}%`; - }} -
            • - ` - )} -
              -
              -
            + ${(x: WaferMapDie) => {return `dieX: ${x.x}, dieY: ${x.y}, value: ${x.value}%`;}} + ` + )}
          -`; - -export const template = html` -
          - ${x => { - if (x.renderReady) { - return waferTemplate; - } - return notReadyTemplate; - }} -
          -`; +`; \ No newline at end of file diff --git a/packages/nimble-components/src/wafer-map/tests/sets.ts b/packages/nimble-components/src/wafer-map/tests/sets.ts index 09eddf91ee..e23f116325 100644 --- a/packages/nimble-components/src/wafer-map/tests/sets.ts +++ b/packages/nimble-components/src/wafer-map/tests/sets.ts @@ -1,13 +1,13 @@ import type { WaferMapDie, WaferMapColorsScale } from '../types'; -export const HIGHLIGHTEDVALUESETS = [ +export const highLightedValueSets = [ [0, 1, 2, 3], [4, 5, 6, 7], [1, 5, 7, 15], [0, 2, 7, 10] ]; -export const WAFERMAPDIESETS: WaferMapDie[][] = [ +export const wafermapDieSets: WaferMapDie[][] = [ [ { x: 0, y: 0, value: 100 }, { x: 0, y: 1, value: 50 }, @@ -46,7 +46,7 @@ export const WAFERMAPDIESETS: WaferMapDie[][] = [ ] ]; -export const WAFERMAPCOLORSCALESETS: WaferMapColorsScale[] = [ +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 index f7746f1f8b..7d8ed3509d 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -10,21 +10,21 @@ import { WaferMapColorsScaleMode } from '../types'; import { - HIGHLIGHTEDVALUESETS, - WAFERMAPDIESETS, - WAFERMAPCOLORSCALESETS + highLightedValueSets, + wafermapDieSets, + waferMapColorsScaleSets } from './sets'; interface WaferMapArgs { - quadrant: WaferMapQuadrant; - orientation: WaferMapOrientation; - maxCharacters: number; + colorScale: WaferMapColorsScale; + colorsScaleMode: WaferMapColorsScaleMode; dieLabelsHidden: boolean; dieLabelsSuffix: string; - colorsScaleMode: WaferMapColorsScaleMode; - highlightedValues: number[]; dies: WaferMapDie[]; - colorScale: WaferMapColorsScale; + highlightedValues: number[]; + maxCharacters: number; + orientation: WaferMapOrientation; + quadrant: WaferMapQuadrant; } const metadata: Meta = { @@ -32,7 +32,7 @@ const metadata: Meta = { parameters: { docs: { description: { - component: 'A WaferMap 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.' } }, actions: { @@ -40,8 +40,11 @@ const metadata: Meta = { } }, render: createUserSelectedThemeStory(html` +
          + WARNING - The tooltip is still in development and considered + experimental. It is not recommended for application use. +
          = { `), args: { - dies: WAFERMAPDIESETS[0], + dies: wafermapDieSets[0], quadrant: WaferMapQuadrant.bottomLeft, orientation: WaferMapOrientation.left, - colorScale: WAFERMAPCOLORSCALESETS[0], + colorScale: waferMapColorsScaleSets[0], maxCharacters: 4, dieLabelsHidden: false, dieLabelsSuffix: '', colorsScaleMode: WaferMapColorsScaleMode.linear, - highlightedValues: HIGHLIGHTEDVALUESETS[0] + highlightedValues: highLightedValueSets[0] }, argTypes: { dies: { description: - 'Represents the input data, an array of WaferMapDie, which will be renedered by the WaferMap', + 'Represents the input data, an array of `WaferMapDie`, which will be renedered by the wafer map', options: ['set1', 'set2'], control: { type: 'select', @@ -78,8 +81,8 @@ const metadata: Meta = { } }, mapping: { - set1: WAFERMAPDIESETS[0], - set2: WAFERMAPDIESETS[1] + set1: wafermapDieSets[0], + set2: wafermapDieSets[1] } }, quadrant: { @@ -126,7 +129,7 @@ const metadata: Meta = { }, colorsScaleMode: { description: - 'Enum value that determines if the colorScale represents continuous gradient values (linear), or is set categorically (ordinal).', + 'Enum value that determines if the color scale represents continuous gradient values (linear), or is set categorically (ordinal).', options: Object.values(WaferMapColorsScaleMode), control: { type: 'select', @@ -150,10 +153,10 @@ const metadata: Meta = { } }, mapping: { - set1: HIGHLIGHTEDVALUESETS[0], - set2: HIGHLIGHTEDVALUESETS[1], - set3: HIGHLIGHTEDVALUESETS[2], - set4: HIGHLIGHTEDVALUESETS[3] + set1: highLightedValueSets[0], + set2: highLightedValueSets[1], + set3: highLightedValueSets[2], + set4: highLightedValueSets[3] } }, colorScale: { @@ -167,7 +170,7 @@ const metadata: Meta = { } }, mapping: { - set1: WAFERMAPCOLORSCALESETS[0] + set1: waferMapColorsScaleSets[0] } } } From e9d03cf459baa0c5e6e85042473c8e1fdc0044c6 Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Tue, 29 Nov 2022 15:03:33 +0200 Subject: [PATCH 09/16] Applied PR feedback --- .../src/wafer-map/template.ts | 6 +++--- .../src/wafer-map/tests/wafer-map.stories.ts | 18 +++++++++--------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/nimble-components/src/wafer-map/template.ts b/packages/nimble-components/src/wafer-map/template.ts index aacd29fa82..a316741a90 100644 --- a/packages/nimble-components/src/wafer-map/template.ts +++ b/packages/nimble-components/src/wafer-map/template.ts @@ -6,9 +6,9 @@ export const template = html`
            ${repeat(x => x.dies, html` -
          • - ${(x: WaferMapDie) => {return `dieX: ${x.x}, dieY: ${x.y}, value: ${x.value}%`;}} -
            • ` +
          • + ${x => html `dieX: ${x.x}, dieY: ${x.y}, value: ${x.value}%`} +
            • ` )}
          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 index 7d8ed3509d..eb305577fe 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -34,9 +34,6 @@ const metadata: Meta = { 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.' } - }, - actions: { - handles: ['click', 'mouseover'] } }, render: createUserSelectedThemeStory(html` @@ -45,15 +42,15 @@ const metadata: Meta = { experimental. It is not recommended for application use.
          x.dies} + :highlightedValues="${x => x.highlightedValues}" > `), @@ -80,10 +77,11 @@ const metadata: Meta = { set2: 'Dies Set 2' } }, + defaultValue:'set1', mapping: { set1: wafermapDieSets[0], set2: wafermapDieSets[1] - } + }, }, quadrant: { description: @@ -152,6 +150,7 @@ const metadata: Meta = { set4: 'Highlighted Values Set 4' } }, + defaultValue:'set1', mapping: { set1: highLightedValueSets[0], set2: highLightedValueSets[1], @@ -169,6 +168,7 @@ const metadata: Meta = { set1: 'Color Scale 1' } }, + defaultValue:'set1', mapping: { set1: waferMapColorsScaleSets[0] } From dc47172ca5af3eaa29059a9932127f6b4800fcc2 Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Tue, 29 Nov 2022 17:21:40 +0200 Subject: [PATCH 10/16] fixed linting issue --- .../nimble-components/src/wafer-map/template.ts | 14 ++++++++------ .../src/wafer-map/tests/wafer-map.stories.ts | 11 ++++++----- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/nimble-components/src/wafer-map/template.ts b/packages/nimble-components/src/wafer-map/template.ts index a316741a90..564c372138 100644 --- a/packages/nimble-components/src/wafer-map/template.ts +++ b/packages/nimble-components/src/wafer-map/template.ts @@ -2,14 +2,16 @@ import { html, repeat } from '@microsoft/fast-element'; import type { WaferMap } from '.'; import type { WaferMapDie } from './types'; -export const template = html` +export const template = html`
            - ${repeat(x => x.dies, html` -
          • - ${x => html `dieX: ${x.x}, dieY: ${x.y}, value: ${x.value}%`} + ${repeat( + x => x.dies, + html`
          • + ${x => html`dieX: ${x.x}, dieY: ${x.y}, value: + ${x.value}%`}
            • ` - )} + )}
          -`; \ No newline at end of file +`; 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 index eb305577fe..7f7e6ab26e 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -32,7 +32,8 @@ const metadata: Meta = { 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.' + 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.' } } }, @@ -77,11 +78,11 @@ const metadata: Meta = { set2: 'Dies Set 2' } }, - defaultValue:'set1', + defaultValue: 'set1', mapping: { set1: wafermapDieSets[0], set2: wafermapDieSets[1] - }, + } }, quadrant: { description: @@ -150,7 +151,7 @@ const metadata: Meta = { set4: 'Highlighted Values Set 4' } }, - defaultValue:'set1', + defaultValue: 'set1', mapping: { set1: highLightedValueSets[0], set2: highLightedValueSets[1], @@ -168,7 +169,7 @@ const metadata: Meta = { set1: 'Color Scale 1' } }, - defaultValue:'set1', + defaultValue: 'set1', mapping: { set1: waferMapColorsScaleSets[0] } From 51b038304115290ccae960ddc64f029a49898cb5 Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Tue, 29 Nov 2022 17:30:47 +0200 Subject: [PATCH 11/16] applied PR feedback --- packages/nimble-components/src/wafer-map/template.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/nimble-components/src/wafer-map/template.ts b/packages/nimble-components/src/wafer-map/template.ts index 564c372138..6b7ab3d91b 100644 --- a/packages/nimble-components/src/wafer-map/template.ts +++ b/packages/nimble-components/src/wafer-map/template.ts @@ -2,6 +2,7 @@ import { html, repeat } from '@microsoft/fast-element'; import type { WaferMap } from '.'; import type { WaferMapDie } from './types'; +// prettier-ignore export const template = html`
            From 34e80186e60213a293557c308ea14a3b201938d2 Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Tue, 29 Nov 2022 17:32:18 +0200 Subject: [PATCH 12/16] applied PR feedback --- .../nimble-components/src/wafer-map/tests/wafer-map.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 7f7e6ab26e..4bb8203230 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -39,7 +39,7 @@ const metadata: Meta = { }, render: createUserSelectedThemeStory(html`
            - WARNING - The tooltip is still in development and considered + WARNING - The wafermap is still in development and considered experimental. It is not recommended for application use.
            Date: Tue, 29 Nov 2022 17:38:17 +0200 Subject: [PATCH 13/16] applied PR feedback --- .../src/wafer-map/tests/wafer-map.stories.ts | 7 +++++++ 1 file changed, 7 insertions(+) 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 index 4bb8203230..23e2e65ebd 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -1,6 +1,7 @@ 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'; @@ -54,6 +55,12 @@ const metadata: Meta = { :highlightedValues="${x => x.highlightedValues}" > + `), args: { dies: wafermapDieSets[0], From dcf2963e168e900f732fd19f7b9b0ef552806539 Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Tue, 29 Nov 2022 17:50:17 +0200 Subject: [PATCH 14/16] applied PR feedback --- .../src/wafer-map/tests/wafer-map.stories.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) 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 index 23e2e65ebd..dc687b2ba4 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -1,7 +1,7 @@ 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 { bodyFont } from '../../theme-provider/design-tokens'; import '../../all-components'; import type { WaferMapDie, WaferMapColorsScale } from '../types'; @@ -56,11 +56,11 @@ const metadata: Meta = { > + #usage-warning { + color: red; + font: var(${bodyFont.cssCustomProperty}); + } + `), args: { dies: wafermapDieSets[0], From 9538e9a54e82494b9ff690b100577cc6ff800cf9 Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Tue, 29 Nov 2022 18:41:39 +0200 Subject: [PATCH 15/16] Applied PR feedback --- .../src/wafer-map/tests/wafer-map.stories.ts | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) 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 index dc687b2ba4..9575b76c58 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -79,7 +79,7 @@ const metadata: Meta = { 'Represents the input data, an array of `WaferMapDie`, which will be renedered by the wafer map', options: ['set1', 'set2'], control: { - type: 'select', + type: 'radio', labels: { set1: 'Dies Set 1', set2: 'Dies Set 2' @@ -96,12 +96,12 @@ const metadata: Meta = { 'Represents the orientation of the dies on the wafer map', options: Object.values(WaferMapQuadrant), control: { - type: 'select', + type: 'radio', labels: { - [WaferMapQuadrant.bottomLeft]: 'BottomLeft', - [WaferMapQuadrant.bottomRight]: 'BottomRight', - [WaferMapQuadrant.topLeft]: 'TopLeft', - [WaferMapQuadrant.topRight]: 'TopRight' + [WaferMapQuadrant.bottomLeft]: 'bottom-left', + [WaferMapQuadrant.bottomRight]: 'bottom-right', + [WaferMapQuadrant.topLeft]: 'top-left', + [WaferMapQuadrant.topRight]: 'top-right' } } }, @@ -109,12 +109,12 @@ const metadata: Meta = { description: 'Notch orientation', options: Object.values(WaferMapOrientation), control: { - type: 'select', + type: 'radio', labels: { - [WaferMapOrientation.left]: 'Left', - [WaferMapOrientation.top]: 'Top', - [WaferMapOrientation.right]: 'Right', - [WaferMapOrientation.bottom]: 'Bottom' + [WaferMapOrientation.left]: 'left', + [WaferMapOrientation.top]: 'top', + [WaferMapOrientation.right]: 'right', + [WaferMapOrientation.bottom]: 'bottom' } } }, @@ -150,7 +150,7 @@ const metadata: Meta = { 'Represents an array of die indexes that will be highlighted in the wafer map view', options: ['set1', 'set2', 'set3', 'set4'], control: { - type: 'select', + type: 'radio', labels: { set1: 'Highlighted Values Set 1', set2: 'Highlighted Values Set 2', @@ -171,7 +171,7 @@ const metadata: Meta = { 'Represents the color spectrum which shows the status of the dies on the wafer.', options: ['set1'], control: { - type: 'select', + type: 'radio', labels: { set1: 'Color Scale 1' } From 1dd13c980d8c7f3df42c4559d6f9d07e67b8f0a4 Mon Sep 17 00:00:00 2001 From: DStavilaNI Date: Tue, 29 Nov 2022 19:19:53 +0200 Subject: [PATCH 16/16] applied pr feedback --- .../src/wafer-map/tests/wafer-map.stories.ts | 118 +++++++++++------- 1 file changed, 71 insertions(+), 47 deletions(-) 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 index 9575b76c58..7de5f28723 100644 --- a/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts +++ b/packages/nimble-components/src/wafer-map/tests/wafer-map.stories.ts @@ -17,13 +17,13 @@ import { } from './sets'; interface WaferMapArgs { - colorScale: WaferMapColorsScale; - colorsScaleMode: WaferMapColorsScaleMode; - dieLabelsHidden: boolean; - dieLabelsSuffix: string; - dies: WaferMapDie[]; - highlightedValues: number[]; - maxCharacters: number; + colorscale: WaferMapColorsScale; + colorscalemode: WaferMapColorsScaleMode; + dielabelshidden: boolean; + dielabelsuffix: string; + dies: string; + highlightedvalues: string; + maxcharacters: number; orientation: WaferMapOrientation; quadrant: WaferMapQuadrant; } @@ -44,15 +44,49 @@ const metadata: Meta = { experimental. It is not recommended for application use.
          x.dies} - :highlightedValues="${x => x.highlightedValues}" + :colorScale="${x => x.colorscale}" + :dies=${x => { + 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: wafermapDieSets[0], + dies: 'set1', quadrant: WaferMapQuadrant.bottomLeft, orientation: WaferMapOrientation.left, - colorScale: waferMapColorsScaleSets[0], - maxCharacters: 4, - dieLabelsHidden: false, - dieLabelsSuffix: '', - colorsScaleMode: WaferMapColorsScaleMode.linear, - highlightedValues: highLightedValueSets[0] + colorscale: waferMapColorsScaleSets[0], + maxcharacters: 4, + dielabelshidden: false, + dielabelsuffix: '', + colorscalemode: WaferMapColorsScaleMode.linear, + highlightedvalues: 'set1' }, argTypes: { dies: { @@ -81,15 +115,11 @@ const metadata: Meta = { control: { type: 'radio', labels: { - set1: 'Dies Set 1', - set2: 'Dies Set 2' + set1: 'Set 1', + set2: 'Set 2' } }, - defaultValue: 'set1', - mapping: { - set1: wafermapDieSets[0], - set2: wafermapDieSets[1] - } + defaultValue: 'set1' }, quadrant: { description: @@ -118,62 +148,56 @@ const metadata: Meta = { } } }, - maxCharacters: { + 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: { + 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' } }, - dieLabelsSuffix: { + dielabelsuffix: { description: 'String that can be added as a label at the end of each wafer map die value', control: { type: 'string' } }, - colorsScaleMode: { + 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: 'select', + type: 'radio', labels: { [WaferMapColorsScaleMode.linear]: 'Linear', [WaferMapColorsScaleMode.ordinal]: 'Ordinal' } } }, - highlightedValues: { + 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: 'Highlighted Values Set 1', - set2: 'Highlighted Values Set 2', - set3: 'Highlighted Values Set 3', - set4: 'Highlighted Values Set 4' + set1: 'Set 1', + set2: 'Set 2', + set3: 'Set 3', + set4: 'Set 4' } }, - defaultValue: 'set1', - mapping: { - set1: highLightedValueSets[0], - set2: highLightedValueSets[1], - set3: highLightedValueSets[2], - set4: highLightedValueSets[3] - } + defaultValue: 'set1' }, - colorScale: { + colorscale: { description: 'Represents the color spectrum which shows the status of the dies on the wafer.', options: ['set1'], control: { type: 'radio', labels: { - set1: 'Color Scale 1' + set1: 'Scale 1' } }, defaultValue: 'set1',