Moved NumberShower to its own Storybook, and slight cleanup to other code.

packages/components/src/NumberShower.tsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+import _ from "lodash";
+
+const orderOfMagnitudeNum = (n: number) => {
+    return Math.pow(10, n);
+};
+
+// 105 -> 3
+const orderOfMagnitude = (n: number) => {
+    return Math.floor(Math.log(n) / Math.LN10 + 0.000000001);
+};
+
+function withXSigFigs(number: number, sigFigs: number) {
+    const withPrecision = number.toPrecision(sigFigs);
+    const formatted = Number(withPrecision);
+    return `${formatted}`;
+}
+
+class NumberShowerBuilder {
+    number: number;
+    precision: number;
+
+    constructor(number: number, precision = 2) {
+        this.number = number;
+        this.precision = precision;
+    }
+
+    convert() {
+        const number = Math.abs(this.number);
+        const response = this.evaluate(number);
+        if (this.number < 0) {
+            response.value = "-" + response.value;
+        }
+        return response;
+    }
+
+    metricSystem(number: number, order: number) {
+        const newNumber = number / orderOfMagnitudeNum(order);
+        const precision = this.precision;
+        return `${withXSigFigs(newNumber, precision)}`;
+    }
+
+    evaluate(number: number) {
+        if (number === 0) {
+            return { value: this.metricSystem(0, 0) };
+        }
+
+        const order = orderOfMagnitude(number);
+        if (order < -2) {
+            return { value: this.metricSystem(number, order), power: order };
+        } else if (order < 4) {
+            return { value: this.metricSystem(number, 0) };
+        } else if (order < 6) {
+            return { value: this.metricSystem(number, 3), symbol: "K" };
+        } else if (order < 9) {
+            return { value: this.metricSystem(number, 6), symbol: "M" };
+        } else if (order < 12) {
+            return { value: this.metricSystem(number, 9), symbol: "B" };
+        } else if (order < 15) {
+            return { value: this.metricSystem(number, 12), symbol: "T" };
+        } else {
+            return { value: this.metricSystem(number, order), power: order };
+        }
+    }
+}
+
+export function numberShow(number: number, precision = 2) {
+    const ns = new NumberShowerBuilder(number, precision);
+    return ns.convert();
+}
+
+export interface NumberShowerProps {
+    number: number;
+    precision?: number
+}
+
+export let NumberShower: React.FC<NumberShowerProps> = ({
+    number,
+    precision = 2
+}: NumberShowerProps) => {
+    let numberWithPresentation = numberShow(number, precision);
+    return (
+        <span>
+            {numberWithPresentation.value}
+            {numberWithPresentation.symbol}
+            {numberWithPresentation.power ? (
+                <span>
+                    {"\u00b710"}
+                    <span style={{ fontSize: "0.6em", verticalAlign: "super" }}>
+                        {numberWithPresentation.power}
+                    </span>
+                </span>
+            ) : (
+                <></>
+            )}
+        </span>
+    );
+}

packages/components/src/SquiggleChart.tsx

@@ -11,6 +11,7 @@ import type {
 import { createClassFromSpec } from "react-vega";
 import * as chartSpecification from "./spec-distributions.json";
 import * as percentilesSpec from "./spec-percentiles.json";
+import { NumberShower }  from "./NumberShower";
 
 let SquiggleVegaChart = createClassFromSpec({
   spec: chartSpecification as Spec,
@@ -71,7 +72,7 @@ export const SquiggleChart: React.FC<SquiggleChartProps> = ({
     onEnvChange(environment);
     let chartResults = exports.map((chartResult: exportDistribution) => {
       if (chartResult["NAME"] === "Float") {
-        return <MakeNumberShower precision={3} number={chartResult["VAL"]} />;
+        return <NumberShower precision={3} number={chartResult["VAL"]} />;
       } else if (chartResult["NAME"] === "DistPlus") {
         let shape = chartResult.VAL.pointSetDist;
         if (shape.tag === "Continuous") {
@@ -316,92 +317,4 @@ function getPercentiles(percentiles: number[], t: DistPlus) {
     });
     return bounds;
   }
-}
+}
-
-function MakeNumberShower(props: { number: number; precision: number }) {
-  let numberWithPresentation = numberShow(props.number, props.precision);
-  return (
-    <span>
-      {numberWithPresentation.value}
-      {numberWithPresentation.symbol}
-      {numberWithPresentation.power ? (
-        <span>
-          {"\u00b710"}
-          <span style={{ fontSize: "0.6em", verticalAlign: "super" }}>
-            {numberWithPresentation.power}
-          </span>
-        </span>
-      ) : (
-        <></>
-      )}
-    </span>
-  );
-}
-
-const orderOfMagnitudeNum = (n: number) => {
-  return Math.pow(10, n);
-};
-
-// 105 -> 3
-const orderOfMagnitude = (n: number) => {
-  return Math.floor(Math.log(n) / Math.LN10 + 0.000000001);
-};
-
-function withXSigFigs(number: number, sigFigs: number) {
-  const withPrecision = number.toPrecision(sigFigs);
-  const formatted = Number(withPrecision);
-  return `${formatted}`;
-}
-
-class NumberShower {
-  number: number;
-  precision: number;
-
-  constructor(number: number, precision = 2) {
-    this.number = number;
-    this.precision = precision;
-  }
-
-  convert() {
-    const number = Math.abs(this.number);
-    const response = this.evaluate(number);
-    if (this.number < 0) {
-      response.value = "-" + response.value;
-    }
-    return response;
-  }
-
-  metricSystem(number: number, order: number) {
-    const newNumber = number / orderOfMagnitudeNum(order);
-    const precision = this.precision;
-    return `${withXSigFigs(newNumber, precision)}`;
-  }
-
-  evaluate(number: number) {
-    if (number === 0) {
-      return { value: this.metricSystem(0, 0) };
-    }
-
-    const order = orderOfMagnitude(number);
-    if (order < -2) {
-      return { value: this.metricSystem(number, order), power: order };
-    } else if (order < 4) {
-      return { value: this.metricSystem(number, 0) };
-    } else if (order < 6) {
-      return { value: this.metricSystem(number, 3), symbol: "K" };
-    } else if (order < 9) {
-      return { value: this.metricSystem(number, 6), symbol: "M" };
-    } else if (order < 12) {
-      return { value: this.metricSystem(number, 9), symbol: "B" };
-    } else if (order < 15) {
-      return { value: this.metricSystem(number, 12), symbol: "T" };
-    } else {
-      return { value: this.metricSystem(number, order), power: order };
-    }
-  }
-}
-
-export function numberShow(number: number, precision = 2) {
-  const ns = new NumberShower(number, precision);
-  return ns.convert();
-}

packages/components/src/spec-distributions.json

@@ -4,14 +4,25 @@
   "width": 500,
   "height": 200,
   "padding": 5,
-  "data": [{ "name": "con" }, { "name": "dis" }],
+  "data": [
-
+    {
+      "name": "con"
+    },
+    {
+      "name": "dis"
+    }
+  ],
   "signals": [
     {
       "name": "mousex",
       "description": "x position of mouse",
       "update": "0",
-      "on": [{ "events": "mousemove", "update": "1-x()/width" }]
+      "on": [
+        {
+          "events": "mousemove",
+          "update": "1-x()/width"
+        }
+      ]
     },
     {
       "name": "xscale",
@@ -32,89 +43,152 @@
       }
     }
   ],
-
   "scales": [
     {
       "name": "xscale",
       "type": "pow",
-      "exponent": { "signal": "xscale ? 0.1 : 1" },
+      "exponent": {
+        "signal": "xscale ? 0.1 : 1"
+      },
       "range": "width",
       "zero": false,
       "nice": false,
       "domain": {
         "fields": [
-          { "data": "con", "field": "x" },
+          {
-          { "data": "dis", "field": "x" }
+            "data": "con",
+            "field": "x"
+          },
+          {
+            "data": "dis",
+            "field": "x"
+          }
         ]
       }
     },
     {
       "name": "yscale",
       "type": "pow",
-      "exponent": { "signal": "yscale ? 0.1 : 1" },
+      "exponent": {
+        "signal": "yscale ? 0.1 : 1"
+      },
       "range": "height",
       "nice": true,
       "zero": true,
       "domain": {
         "fields": [
-          { "data": "con", "field": "y" },
+          {
-          { "data": "dis", "field": "y" }
+            "data": "con",
+            "field": "y"
+          },
+          {
+            "data": "dis",
+            "field": "y"
+          }
         ]
       }
     }
   ],
-
+  "axes": [
-  "axes": [{ "orient": "bottom", "scale": "xscale", "tickCount": 20 }],
+    {
-
+      "orient": "bottom",
+      "scale": "xscale",
+      "tickCount": 20
+    }
+  ],
   "marks": [
     {
       "type": "area",
-      "from": { "data": "con" },
+      "from": {
+        "data": "con"
+      },
       "encode": {
         "enter": {
-          "tooltip": { "signal": "datum.cdf" }
+          "tooltip": {
+            "signal": "datum.cdf"
+          }
         },
         "update": {
-          "x": { "scale": "xscale", "field": "x" },
+          "x": {
-          "y": { "scale": "yscale", "field": "y" },
+            "scale": "xscale",
-          "y2": { "scale": "yscale", "value": 0 },
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "y"
+          },
+          "y2": {
+            "scale": "yscale",
+            "value": 0
+          },
           "fill": {
             "signal": "{gradient: 'linear', x1: 1, y1: 1, x2: 0, y2: 1, stops: [ {offset: 0.0, color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#11ac8f'}, {offset: clamp(mousex, 0, 1), color: '#1b6fac'}, {offset: 1.0, color: '#1b6fac'} ] }",
             "color": "#000"
           },
-          "interpolate": { "value": "monotone" },
+          "interpolate": {
-          "fillOpacity": { "value": 1 }
+            "value": "monotone"
+          },
+          "fillOpacity": {
+            "value": 1
+          }
         }
       }
     },
     {
       "type": "rect",
-      "from": { "data": "dis" },
+      "from": {
+        "data": "dis"
+      },
       "encode": {
         "enter": {
-          "y2": { "scale": "yscale", "value": 0 },
+          "y2": {
-          "width": { "value": 1 }
+            "scale": "yscale",
+            "value": 0
+          },
+          "width": {
+            "value": 1
+          }
         },
         "update": {
-          "x": { "scale": "xscale", "field": "x" },
+          "x": {
-          "y": { "scale": "yscale", "field": "y" }
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "y"
+          }
         }
       }
     },
     {
       "type": "symbol",
-      "from": { "data": "dis" },
+      "from": {
+        "data": "dis"
+      },
       "encode": {
         "enter": {
-          "shape": { "value": "circle" },
+          "shape": {
-          "width": { "value": 5 },
+            "value": "circle"
-          "tooltip": { "signal": "datum.y" }
+          },
+          "width": {
+            "value": 5
+          },
+          "tooltip": {
+            "signal": "datum.y"
+          }
         },
         "update": {
-          "x": { "scale": "xscale", "field": "x" },
+          "x": {
-          "y": { "scale": "yscale", "field": "y" }
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "y"
+          }
         }
       }
     }
   ]
-}
+}

packages/components/src/spec-percentiles.json

@@ -7,7 +7,12 @@
     {
       "name": "facet",
       "values": [],
-      "format": { "type": "json", "parse": { "timestamp": "date" } }
+      "format": {
+        "type": "json",
+        "parse": {
+          "timestamp": "date"
+        }
+      }
     },
     {
       "name": "table",
@@ -15,7 +20,9 @@
       "transform": [
         {
           "type": "aggregate",
-          "groupby": ["x"],
+          "groupby": [
+            "x"
+          ],
           "ops": [
             "mean",
             "mean",
@@ -70,7 +77,10 @@
       "name": "xscale",
       "type": "linear",
       "nice": true,
-      "domain": { "data": "facet", "field": "x" },
+      "domain": {
+        "data": "facet",
+        "field": "x"
+      },
       "range": "width"
     },
     {
@@ -79,7 +89,10 @@
       "range": "height",
       "nice": true,
       "zero": true,
-      "domain": { "data": "facet", "field": "p99" }
+      "domain": {
+        "data": "facet",
+        "field": "p99"
+      }
     }
   ],
   "axes": [
@@ -89,8 +102,20 @@
       "grid": false,
       "tickSize": 2,
       "encode": {
-        "grid": { "enter": { "stroke": { "value": "#ccc" } } },
+        "grid": {
-        "ticks": { "enter": { "stroke": { "value": "#ccc" } } }
+          "enter": {
+            "stroke": {
+              "value": "#ccc"
+            }
+          }
+        },
+        "ticks": {
+          "enter": {
+            "stroke": {
+              "value": "#ccc"
+            }
+          }
+        }
       }
     },
     {
@@ -100,109 +125,251 @@
       "domain": false,
       "tickSize": 2,
       "encode": {
-        "grid": { "enter": { "stroke": { "value": "#ccc" } } },
+        "grid": {
-        "ticks": { "enter": { "stroke": { "value": "#ccc" } } }
+          "enter": {
+            "stroke": {
+              "value": "#ccc"
+            }
+          }
+        },
+        "ticks": {
+          "enter": {
+            "stroke": {
+              "value": "#ccc"
+            }
+          }
+        }
       }
     }
   ],
   "marks": [
     {
       "type": "area",
-      "from": { "data": "table" },
+      "from": {
+        "data": "table"
+      },
       "encode": {
-        "enter": { "fill": { "value": "#4C78A8" } },
+        "enter": {
+          "fill": {
+            "value": "#4C78A8"
+          }
+        },
         "update": {
-          "interpolate": { "value": "monotone" },
+          "interpolate": {
-          "x": { "scale": "xscale", "field": "x" },
+            "value": "monotone"
-          "y": { "scale": "yscale", "field": "p1" },
+          },
-          "y2": { "scale": "yscale", "field": "p99" },
+          "x": {
-          "opacity": { "value": 0.05 }
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "p1"
+          },
+          "y2": {
+            "scale": "yscale",
+            "field": "p99"
+          },
+          "opacity": {
+            "value": 0.05
+          }
         }
       }
     },
     {
       "type": "area",
-      "from": { "data": "table" },
+      "from": {
+        "data": "table"
+      },
       "encode": {
-        "enter": { "fill": { "value": "#4C78A8" } },
+        "enter": {
+          "fill": {
+            "value": "#4C78A8"
+          }
+        },
         "update": {
-          "interpolate": { "value": "monotone" },
+          "interpolate": {
-          "x": { "scale": "xscale", "field": "x" },
+            "value": "monotone"
-          "y": { "scale": "yscale", "field": "p5" },
+          },
-          "y2": { "scale": "yscale", "field": "p95" },
+          "x": {
-          "opacity": { "value": 0.1 }
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "p5"
+          },
+          "y2": {
+            "scale": "yscale",
+            "field": "p95"
+          },
+          "opacity": {
+            "value": 0.1
+          }
         }
       }
     },
     {
       "type": "area",
-      "from": { "data": "table" },
+      "from": {
+        "data": "table"
+      },
       "encode": {
-        "enter": { "fill": { "value": "#4C78A8" } },
+        "enter": {
+          "fill": {
+            "value": "#4C78A8"
+          }
+        },
         "update": {
-          "interpolate": { "value": "monotone" },
+          "interpolate": {
-          "x": { "scale": "xscale", "field": "x" },
+            "value": "monotone"
-          "y": { "scale": "yscale", "field": "p10" },
+          },
-          "y2": { "scale": "yscale", "field": "p90" },
+          "x": {
-          "opacity": { "value": 0.15 }
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "p10"
+          },
+          "y2": {
+            "scale": "yscale",
+            "field": "p90"
+          },
+          "opacity": {
+            "value": 0.15
+          }
         }
       }
     },
     {
       "type": "area",
-      "from": { "data": "table" },
+      "from": {
+        "data": "table"
+      },
       "encode": {
-        "enter": { "fill": { "value": "#4C78A8" } },
+        "enter": {
+          "fill": {
+            "value": "#4C78A8"
+          }
+        },
         "update": {
-          "interpolate": { "value": "monotone" },
+          "interpolate": {
-          "x": { "scale": "xscale", "field": "x" },
+            "value": "monotone"
-          "y": { "scale": "yscale", "field": "p20" },
+          },
-          "y2": { "scale": "yscale", "field": "p80" },
+          "x": {
-          "opacity": { "value": 0.2 }
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "p20"
+          },
+          "y2": {
+            "scale": "yscale",
+            "field": "p80"
+          },
+          "opacity": {
+            "value": 0.2
+          }
         }
       }
     },
     {
       "type": "area",
-      "from": { "data": "table" },
+      "from": {
+        "data": "table"
+      },
       "encode": {
-        "enter": { "fill": { "value": "#4C78A8" } },
+        "enter": {
+          "fill": {
+            "value": "#4C78A8"
+          }
+        },
         "update": {
-          "interpolate": { "value": "monotone" },
+          "interpolate": {
-          "x": { "scale": "xscale", "field": "x" },
+            "value": "monotone"
-          "y": { "scale": "yscale", "field": "p30" },
+          },
-          "y2": { "scale": "yscale", "field": "p70" },
+          "x": {
-          "opacity": { "value": 0.2 }
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "p30"
+          },
+          "y2": {
+            "scale": "yscale",
+            "field": "p70"
+          },
+          "opacity": {
+            "value": 0.2
+          }
         }
       }
     },
     {
       "type": "area",
-      "from": { "data": "table" },
+      "from": {
+        "data": "table"
+      },
       "encode": {
-        "enter": { "fill": { "value": "#4C78A8" } },
+        "enter": {
+          "fill": {
+            "value": "#4C78A8"
+          }
+        },
         "update": {
-          "interpolate": { "value": "monotone" },
+          "interpolate": {
-          "x": { "scale": "xscale", "field": "x" },
+            "value": "monotone"
-          "y": { "scale": "yscale", "field": "p40" },
+          },
-          "y2": { "scale": "yscale", "field": "p60" },
+          "x": {
-          "opacity": { "value": 0.2 }
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "p40"
+          },
+          "y2": {
+            "scale": "yscale",
+            "field": "p60"
+          },
+          "opacity": {
+            "value": 0.2
+          }
         }
       }
     },
     {
       "type": "line",
-      "from": { "data": "table" },
+      "from": {
+        "data": "table"
+      },
       "encode": {
         "update": {
-          "interpolate": { "value": "monotone" },
+          "interpolate": {
-          "stroke": { "value": "#4C78A8" },
+            "value": "monotone"
-          "strokeWidth": { "value": 2 },
+          },
-          "opacity": { "value": 0.8 },
+          "stroke": {
-          "x": { "scale": "xscale", "field": "x" },
+            "value": "#4C78A8"
-          "y": { "scale": "yscale", "field": "p50" }
+          },
+          "strokeWidth": {
+            "value": 2
+          },
+          "opacity": {
+            "value": 0.8
+          },
+          "x": {
+            "scale": "xscale",
+            "field": "x"
+          },
+          "y": {
+            "scale": "yscale",
+            "field": "p50"
+          }
         }
       }
     }
   ]
-}
+}

packages/components/src/stories/Introduction.stories.mdx

@@ -2,8 +2,5 @@ import { Meta } from "@storybook/addon-docs";
 
 <Meta title="Squiggle/Introduction" />
 
-This is the component library for Squiggle. All of these components are react
+This is the component library for Squiggle. These are React
-components, and can be used in any application that you see fit.
+components, and can be used in any application that you see fit.
-
-Currently, the only component that is provided is the SquiggleChart component.
-This component allows you to render the result of a squiggle expression.

packages/components/src/stories/NumberShower.stories.mdx

@@ -0,0 +1,60 @@
+import { NumberShower } from "../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} />

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

@@ -18,7 +18,7 @@ could be continuous, discrete or mixed.
 
 ## Distributions
 
-An example of a normal distribution is:
+### Continuous Distributions
 
 <Canvas>
   <Story
@@ -31,26 +31,26 @@ An example of a normal distribution is:
   </Story>
 </Canvas>
 
-An example of a Discrete distribution is:
+### Discrete Distributions
 
 <Canvas>
   <Story
     name="Discrete"
     args={{
-      squiggleString: "mm(0, 1, [0.5, 0.5])",
+      squiggleString: "mm(0, 1, 3, 5, 8, 10, [0.1, 0.8, 0.5, 0.3, 0.2, 0.1])",
     }}
   >
     {Template.bind({})}
   </Story>
 </Canvas>
 
-An example of a Mixed distribution is:
+## Mixed distributions
 
 <Canvas>
   <Story
     name="Mixed"
     args={{
-      squiggleString: "mm(0, 5 to 10, [0.5, 0.5])",
+      squiggleString: "mm(0, 1, 3, 5, 8, normal(8, 1), [0.1, 0.3, 0.4, 0.35, 0.2, 0.8])",
     }}
   >
     {Template.bind({})}
@@ -66,7 +66,7 @@ to allow large and small numbers being printed cleanly.
   <Story
     name="Constant"
     args={{
-      squiggleString: "500000 * 5000000",
+      squiggleString: "500000000",
     }}
   >
     {Template.bind({})}
@@ -75,14 +75,15 @@ to allow large and small numbers being printed cleanly.
 
 ## Functions
 
-Finally, a function can be returned, and this shows how the distribution changes
+Full functions can be returned. These plot out the results of distributions between a set of x-coordinates.  
-over the axis between x = 0 and 10.
+
+The default is show 10 points between 0 and 10.
 
 <Canvas>
   <Story
     name="Function"
     args={{
-      squiggleString: "f(x) = normal(x,x)\nf",
+      squiggleString: "f(x) = normal(x^2,x^1.8)\nf",
     }}
   >
     {Template.bind({})}