Visualization Components

These components render a decision’s visualization directly.

Tip

You don’t have to use these components directly in your docs. Using ShowDecision will select the appropriate one for you.

They are exposed so that anyone can create custom visualizations, composing values and visualizations directly in their custom components.

Refer to the table on Composable Types for all decision types and their corresponding visualizations.

Common Props

༶ v: BaseValue<unknown>

A decision value of the appropriate type.

༶ VizProps: viz, size, and options

These props control how the visualization should be displayed.

Decision components, such as <ShowDecision/> expose them well, so that you can have full control over visualization options.

Note

In the <ShowDecision /> and <ShowDecisionCard /> components the viz and options props are typed to base types and will not auto-complete on your IDE. You can use the types listed below to improve your experience and ensure type safety.

Color

Color related components.

ShowColorViz

༶ v: ColorValue

༶ viz: ColorVizName

Which color visualization to show.

༶ options: ColorVizOptions

Options for color visualizations.

Example

export const colorValue = createColorValue(context, '#009955');

<ShowColorViz v={colorValue} viz="fg" />
<ShowColorViz v={colorValue} viz="bg" />

GgAbT

hello

ShowColorChannelViz

༶ v: ColorChannelValue

༶ viz: -

This prop has no effect on this component.

It always renders the Color Swatch visualization, providing defaults for the complimentary channels.

༶ options: ColorVizOptions

Options for Color Swatch as in the <ShowColorViz> component above.

Example

export const colorChannelValue = createOklabHueValue(context, 123);

<ShowColorChannelViz size="m" v={colorChannelValue} channel="oklab-hue" />

Space

Space related components.

ShowSpaceViz

༶ v: SpaceValue

༶ viz: SpaceVizName

Which space visualization to show.

Example

export const spaceValue = createSpaceValue(context, 100);

<ShowSpaceViz size="m" v={spaceValue} viz="bar-h" />
<ShowSpaceViz size="m" v={spaceValue} viz="square" />
<ShowSpaceViz size="m" v={spaceValue} viz="bar-v" />
<ShowSpaceViz size="m" v={spaceValue} viz="circle" />