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 = 600;

# 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 (Symbolic)

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

### Continuous Distributions (PointSet)

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

### Continuous Distributions (SampleSet)

<Canvas>
  <Story
    name="Continuous SampleSet"
    args={{
      squiggleString: "toSampleSet(normal(5,2), 1000)",
      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>

## Arrays

<Canvas>
  <Story
    name="Array"
    args={{
      squiggleString: "[normal(5,2), normal(10,1), normal(40,2), 400000]",
      width,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Errors

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

## Booleans

<Canvas>
  <Story
    name="Boolean"
    args={{
      squiggleString: "3 == 3",
      width,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Functions (Distribution Output)

<Canvas>
  <Story
    name="Function to Distribution"
    args={{
      squiggleString: "foo(t) = normal(t,2)*normal(5,3); foo",
      width,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Functions (Number Output)

<Canvas>
  <Story
    name="Function to Number"
    args={{
      squiggleString: "foo(t) = t^2; foo",
      width,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Records

<Canvas>
  <Story
    name="Record"
    args={{
      squiggleString: "{foo: 35 to 50, bar: [1,2,3]}",
      width,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## Strings

<Canvas>
  <Story
    name="String"
    args={{
      squiggleString: '"Lucky day!"',
      width,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<Props of={SquiggleChart} />