Moved NumberShower to its own Storybook, and slight cleanup to other code.
This commit is contained in:
Ozzie Gooen
parent
952ce9da11
commit
4d0a522e96
98
packages/components/src/NumberShower.tsx
Normal file
98
packages/components/src/NumberShower.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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") {
|
||||
|
|
@ -317,91 +318,3 @@ 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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,87 +43,150 @@
|
|||
}
|
||||
}
|
||||
],
|
||||
|
||||
"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": [{ "orient": "bottom", "scale": "xscale", "tickCount": 20 }],
|
||||
|
||||
"axes": [
|
||||
{
|
||||
"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" },
|
||||
"y": { "scale": "yscale", "field": "y" },
|
||||
"y2": { "scale": "yscale", "value": 0 },
|
||||
"x": {
|
||||
"scale": "xscale",
|
||||
"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" },
|
||||
"fillOpacity": { "value": 1 }
|
||||
"interpolate": {
|
||||
"value": "monotone"
|
||||
},
|
||||
"fillOpacity": {
|
||||
"value": 1
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "rect",
|
||||
"from": { "data": "dis" },
|
||||
"from": {
|
||||
"data": "dis"
|
||||
},
|
||||
"encode": {
|
||||
"enter": {
|
||||
"y2": { "scale": "yscale", "value": 0 },
|
||||
"width": { "value": 1 }
|
||||
"y2": {
|
||||
"scale": "yscale",
|
||||
"value": 0
|
||||
},
|
||||
"width": {
|
||||
"value": 1
|
||||
}
|
||||
},
|
||||
"update": {
|
||||
"x": { "scale": "xscale", "field": "x" },
|
||||
"y": { "scale": "yscale", "field": "y" }
|
||||
"x": {
|
||||
"scale": "xscale",
|
||||
"field": "x"
|
||||
},
|
||||
"y": {
|
||||
"scale": "yscale",
|
||||
"field": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "symbol",
|
||||
"from": { "data": "dis" },
|
||||
"from": {
|
||||
"data": "dis"
|
||||
},
|
||||
"encode": {
|
||||
"enter": {
|
||||
"shape": { "value": "circle" },
|
||||
"width": { "value": 5 },
|
||||
"tooltip": { "signal": "datum.y" }
|
||||
"shape": {
|
||||
"value": "circle"
|
||||
},
|
||||
"width": {
|
||||
"value": 5
|
||||
},
|
||||
"tooltip": {
|
||||
"signal": "datum.y"
|
||||
}
|
||||
},
|
||||
"update": {
|
||||
"x": { "scale": "xscale", "field": "x" },
|
||||
"y": { "scale": "yscale", "field": "y" }
|
||||
"x": {
|
||||
"scale": "xscale",
|
||||
"field": "x"
|
||||
},
|
||||
"y": {
|
||||
"scale": "yscale",
|
||||
"field": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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" } } },
|
||||
"ticks": { "enter": { "stroke": { "value": "#ccc" } } }
|
||||
"grid": {
|
||||
"enter": {
|
||||
"stroke": {
|
||||
"value": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"ticks": {
|
||||
"enter": {
|
||||
"stroke": {
|
||||
"value": "#ccc"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
@ -100,107 +125,249 @@
|
|||
"domain": false,
|
||||
"tickSize": 2,
|
||||
"encode": {
|
||||
"grid": { "enter": { "stroke": { "value": "#ccc" } } },
|
||||
"ticks": { "enter": { "stroke": { "value": "#ccc" } } }
|
||||
"grid": {
|
||||
"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" },
|
||||
"x": { "scale": "xscale", "field": "x" },
|
||||
"y": { "scale": "yscale", "field": "p1" },
|
||||
"y2": { "scale": "yscale", "field": "p99" },
|
||||
"opacity": { "value": 0.05 }
|
||||
"interpolate": {
|
||||
"value": "monotone"
|
||||
},
|
||||
"x": {
|
||||
"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" },
|
||||
"x": { "scale": "xscale", "field": "x" },
|
||||
"y": { "scale": "yscale", "field": "p5" },
|
||||
"y2": { "scale": "yscale", "field": "p95" },
|
||||
"opacity": { "value": 0.1 }
|
||||
"interpolate": {
|
||||
"value": "monotone"
|
||||
},
|
||||
"x": {
|
||||
"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" },
|
||||
"x": { "scale": "xscale", "field": "x" },
|
||||
"y": { "scale": "yscale", "field": "p10" },
|
||||
"y2": { "scale": "yscale", "field": "p90" },
|
||||
"opacity": { "value": 0.15 }
|
||||
"interpolate": {
|
||||
"value": "monotone"
|
||||
},
|
||||
"x": {
|
||||
"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" },
|
||||
"x": { "scale": "xscale", "field": "x" },
|
||||
"y": { "scale": "yscale", "field": "p20" },
|
||||
"y2": { "scale": "yscale", "field": "p80" },
|
||||
"opacity": { "value": 0.2 }
|
||||
"interpolate": {
|
||||
"value": "monotone"
|
||||
},
|
||||
"x": {
|
||||
"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" },
|
||||
"x": { "scale": "xscale", "field": "x" },
|
||||
"y": { "scale": "yscale", "field": "p30" },
|
||||
"y2": { "scale": "yscale", "field": "p70" },
|
||||
"opacity": { "value": 0.2 }
|
||||
"interpolate": {
|
||||
"value": "monotone"
|
||||
},
|
||||
"x": {
|
||||
"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" },
|
||||
"x": { "scale": "xscale", "field": "x" },
|
||||
"y": { "scale": "yscale", "field": "p40" },
|
||||
"y2": { "scale": "yscale", "field": "p60" },
|
||||
"opacity": { "value": 0.2 }
|
||||
"interpolate": {
|
||||
"value": "monotone"
|
||||
},
|
||||
"x": {
|
||||
"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" },
|
||||
"stroke": { "value": "#4C78A8" },
|
||||
"strokeWidth": { "value": 2 },
|
||||
"opacity": { "value": 0.8 },
|
||||
"x": { "scale": "xscale", "field": "x" },
|
||||
"y": { "scale": "yscale", "field": "p50" }
|
||||
"interpolate": {
|
||||
"value": "monotone"
|
||||
},
|
||||
"stroke": {
|
||||
"value": "#4C78A8"
|
||||
},
|
||||
"strokeWidth": {
|
||||
"value": 2
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.8
|
||||
},
|
||||
"x": {
|
||||
"scale": "xscale",
|
||||
"field": "x"
|
||||
},
|
||||
"y": {
|
||||
"scale": "yscale",
|
||||
"field": "p50"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
Currently, the only component that is provided is the SquiggleChart component.
|
||||
This component allows you to render the result of a squiggle expression.
|
||||
|
|
|
|||
60
packages/components/src/stories/NumberShower.stories.mdx
Normal file
60
packages/components/src/stories/NumberShower.stories.mdx
Normal file
|
|
@ -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} />
|
||||
|
|
@ -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
|
||||
over the axis between x = 0 and 10.
|
||||
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,x)\nf",
|
||||
squiggleString: "f(x) = normal(x^2,x^1.8)\nf",
|
||||
}}
|
||||
>
|
||||
{Template.bind({})}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user