squiggle/packages/components/src/stories/SquiggleChart.stories.mdx

import { SquiggleChart } from '../SquiggleChart'
import { Canvas, Meta, Story, Props } from '@storybook/addon-docs';

<Meta title="Squiggle/SquiggleChart" component={ SquiggleChart } />

export const Template = SquiggleChart

# Squiggle Chart

Squiggle chart evaluates squiggle expressions, and then returns a graph representing
the result of a squiggle expression.

A squiggle expression can have three different types of returns. A distribution,
a constant, and a function.

A distribution means that the result forms a probability distribution. This
could be continuous, discrete or mixed.

## Distributions

An example of a normal distribution is:
<Canvas>
  <Story
    name="Normal"
    args={{
      squiggleString: "normal(5,2)"
    }}> 
    {Template.bind({})}
  </Story>
</Canvas>


An example of a Discrete distribution is:
<Canvas>
  <Story
    name="Discrete"
    args={{
      squiggleString: "mm(0, 1, [0.5, 0.5])"
    }}>
    {Template.bind({})}
  </Story>
</Canvas>

An example of a Mixed distribution is:
<Canvas>
  <Story
    name="Mixed"
    args={{
      squiggleString: "mm(0, 5 to 10, [0.5, 0.5])"
    }}> 
    {Template.bind({})}
  </Story>
</Canvas>

## Constants
A constant is a simple number as a result. This has special formatting rules
to allow large and small numbers being printed cleanly.
<Canvas>
  <Story
    name="Constant"
    args={{
      squiggleString: "500000 * 5000000"
    }}> 
    {Template.bind({})}
  </Story>
</Canvas>

## Functions
Finally, a function can be returned, and this shows how the distribution changes
over the axis between x = 0 and 10.

<Canvas>
  <Story
    name="Function"
    args={{
      squiggleString: "f(x) = normal(x,x)\nf"
    }}> 
    {Template.bind({})}
  </Story>
</Canvas>

<Props of={SquiggleChart} />