Skip to content
Designer Decisions

Creating Custom Visualizations

This guide explains how to create custom visualizations for your documentation.

Setup

Creating custom components

In the Astro integration docs you can find a comprehensive set of primitives for rendering decisions in different scenarios and layouts, as well as a few helpful layouts and atoms.

You can reuse these built-in components to create your own, composing any layout of your choice, with total control over styling. You can also merge data from other sources, add custom logic, and format values as you wish.

In this example, we compose the <ShowColorValue/> and the <ShowDecisionUsage/> atom within the standard <DecisionCard/> layout.

MyColorDecision.Astro
---
import { type Decision } from '@noodlestan/designer-decisions';
import { type Store } from '@noodlestan/designer-functions';
import {
    DecisionCardLayout,
    ShowDecision,
    ShowDecisionUsage,
} from '@noodlestan/designer-shows/astro';


type Props = {
    d: string;
    store: Store;
};


const { d, store } = Astro.props;
const [decision] = store.decision(d)
---


<DecisionCardLayout>
    <h2 slot="header">{decision.name}</h2>
    <ShowDecision slot="viz" d={d} value={['rgb', 'oklch']} />
    <div slot="details">
        <h3>Usage</h3>
        <ShowDecisionUsage d={d} />
    </div>
</DecisionCardLayout>

Use the new component directly in your MDX files.

src/content/page.mdx
import MyColorDecision from '../components/';


<MyColorDecision d="Action Color" />

Resolve decision values

You can also resolve decision values by calling value() on the decision object.

This code block demonstrates how you can use a decision value to build your own visualization.

---
import { type ColorDecision } from '@noodlestan/designer-decisions';
import { ShowDecisionCard } from '@noodlestan/designer-shows/astro';


const { d, store } = Astro.props
const [, decision] = store.decision<ColorDecision>(d);


const color = decision.produce().toString('oklch')
---


<div class="my-color-value-viz">{color}</div>


<style define:vars={{ 'my-color': color }}>
.my-color-value-viz { background-color: var(--my-color) }
</style>

See also