61 lines
1.1 KiB
Plaintext
61 lines
1.1 KiB
Plaintext
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} />
|