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

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

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

export const Template = SquiggleChart;
/* 
  We have to hardcode a width here, because otherwise some interaction with
  Storybook creates an infinite loop with the internal width
*/
const width = 500;

# 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

### Continuous Distributions

<Canvas>
  <Story
    name="Normal"
    args={{
      squiggleString: "normal(5,2)",
      width,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

### Discrete Distributions

<Canvas>
  <Story
    name="Discrete"
    args={{
      squiggleString: "mx(0, 1, 3, 5, 8, 10, [0.1, 0.8, 0.5, 0.3, 0.2, 0.1])",
      width,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Mixed distributions

<Canvas>
  <Story
    name="Mixed"
    args={{
      squiggleString:
        "mx(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
      width,
    }}
  >
    {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: "500000000",
      width,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Functions

Full functions can be returned. These plot out the results of distributions between a set of x-coordinates.

The default is show 10 points between 0 and 10.

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

## Errors

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

<Props of={SquiggleChart} />