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

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

# Number Shower

The number shower is a simple component to display a number.

It uses the symbols "K", "M", "B", and "T", to represent thousands, millions, billions, and trillions. Outside of that range, it uses scientific notation.

<Canvas>
  <Story
    name="Ten Thousand"
    args={{
      number: 10000,
      precision: 2,
    }}
  >
    {(args) => <NumberShower {...args} />}
  </Story>
</Canvas>

<Canvas>
  <Story
    name="Ten Billion"
    args={{
      number: 10000000000,
      precision: 2,
    }}
  >
    {(args) => <NumberShower {...args} />}
  </Story>
</Canvas>

<Canvas>
  <Story
    name="1.2*10^15"
    args={{
      number: 1200000000000000,
      precision: 2,
    }}
  >
    {(args) => <NumberShower {...args} />}
  </Story>
</Canvas>

<Canvas>
  <Story
    name="1.35*10^-13"
    args={{
      number: 0.000000000000135,
      precision: 2,
    }}
  >
    {(args) => <NumberShower {...args} />}
  </Story>
</Canvas>

<Props of={NumberShower} />