Dash.BigNumber

.github/workflows/test.yml

@@ -19,7 +19,7 @@ jobs:
           node-version: ${{ matrix.version }}
           cache: yarn
       - run: yarn --frozen-lockfile
-      - run: yarn c8 --check-coverage -x src/**/*.d.ts -x src/preview.ts -x src/observableApiConfig.ts -x src/client --lines 80 --per-file yarn test:mocha
+      - run: yarn c8 --check-coverage -x "src/**/*.d.ts" -x src/preview.ts -x src/observableApiConfig.ts -x src/client --lines 80 --per-file yarn test:mocha
       - run: yarn test:tsc
       - run: |
           echo ::add-matcher::.github/eslint.json

docs/bigNumber.md

@@ -0,0 +1,19 @@
+# Testing the big number component
+
+${Dash.BigNumber(1)}
+
+<div class="card grid grid-cols-4">
+  ${Dash.BigNumber(1127)}
+  ${Dash.BigNumber(17, {secondary: 7, secondaryFormat: "+"})}
+  ${Dash.BigNumber(1e9 * Math.E, {title: "e", subtitle: "Transcendental value", format: "s", secondary: -2/3, secondaryFormat: ".1%", secondaryTitle: "Year over year"})}
+  ${Dash.BigNumber(1e9 * Math.E, {format: "s", secondary: -2/3, secondaryFormat: ".1%", secondaryColor: "steelblue"})}
+</div>
+
+<div class="card grid grid-cols-4">
+  ${Dash.BigNumber(1127, {title: "A unit", secondary: 0})}
+  ${Dash.BigNumber(10, {secondary: -7/17, secondaryFormat: ".0%", children: Plot.lineY({length: 100}, Plot.mapY("cumsum", {
+    y: d3.randomNormal.source(d3.randomLcg(42))()
+  })).plot({width: 300, height: 40, axis: false})})}
+  ${Dash.BigNumber(1e9 * Math.E, {format: "s", secondary: -2/3, secondaryFormat: ".1%"})}
+  ${Dash.BigNumber(1e9 * Math.E, {format: "s", secondary: -2/3, secondaryFormat: ".1%", secondaryColor: "steelblue", children: [html`<div>A bit of <em>explanation</em>.`, html`<div>Another bit of information.`]})}
+</div>

src/client/global.d.ts

@@ -0,0 +1,2 @@
+declare module "npm:d3";
+declare module "npm:htl";

src/client/stdlib/dash.ts

@@ -1 +1,2 @@
 export * from "./dash/resize.js";
+export * from "./dash/bigNumber.js";

src/client/stdlib/dash/bigNumber.ts

@@ -0,0 +1,59 @@
+import * as d3 from "npm:d3";
+import {html} from "npm:htl";
+
+export function BigNumber(
+  number,
+  {
+    href,
+    target = "_blank",
+    title,
+    subtitle,
+    format = ",.2~f",
+    columnGap = "10px",
+    secondary,
+    secondaryFormat = format,
+    secondaryColor = secondary == null
+      ? ""
+      : secondary > 0
+      ? "var(--theme-color-positive)"
+      : secondary < 0
+      ? "var(--theme-color-negative)"
+      : "var(--theme-color-neutral)",
+    secondaryArrow = secondary == null ? "" : secondary > 0 ? "↗︎" : secondary < 0 ? "↘︎" : "→",
+    secondaryTitle,
+    children
+  }: {
+    href?: string;
+    target?: string;
+    title?: string;
+    subtitle?: string;
+    format?: string | ((x: any) => string);
+    columnGap?: string;
+    secondary?: number;
+    secondaryFormat?: string | ((x: any) => string);
+    secondaryColor?: string;
+    secondaryArrow?: string;
+    secondaryTitle?: string;
+    styles?: {[key: string]: string};
+    children?: Node | Iterable<Node>;
+  } = {}
+) {
+  if (typeof format !== "function") format = typeof number === "string" ? String : d3.format(format);
+  if (typeof secondaryFormat !== "function") secondaryFormat = d3.format(secondaryFormat);
+  const div = html`<figure class="bignumber">
+    ${title != null ? html`<h2>${title}` : ""}
+    ${subtitle != null ? html`<h3>${subtitle}` : ""}
+    <dl style="display: flex; flex-wrap: wrap; align-items: baseline; column-gap: ${columnGap};">
+      <dt>${(format as (x: any) => string)(number)}</dt>
+      ${
+        secondary == null
+          ? null
+          : html`<dd style="color: ${secondaryColor};" ${{title: secondaryTitle}}>${(
+              secondaryFormat as (x: any) => string
+            )(secondary)} ${secondaryArrow}`
+      }
+    </dl>
+    ${children}
+  </figure>`;
+  return href == null ? div : html`<a href=${href} target=${target} style="color: inherit;">${div}</a>`;
+}

src/style/bigNumber.css

@@ -0,0 +1,18 @@
+:root {
+  --theme-color-positive: #3ca951;
+  --theme-color-negative: #ff725c;
+  --theme-color-neutral: #efb118;
+}
+
+figure.bignumber dl {
+  margin-top: 0;
+}
+figure.bignumber dt {
+  font-size: 32px;
+  font-weight: bold;
+  line-height: 1;
+}
+figure.bignumber dd {
+  font-size: 14px;
+  margin-left: 0;
+}

src/style/default.css

@@ -1,6 +1,7 @@
 @import url("./global.css");
 @import url("./layout.css");
 @import url("./grid.css");
+@import url("./bigNumber.css");
 @import url("./card.css");
 @import url("./inspector.css");
 @import url("./plot.css");