diff --git a/docs/docs/reference/project-files/dashboards.md b/docs/docs/reference/project-files/dashboards.md
index 3d9fe2ff305..3ed0690aaeb 100644
--- a/docs/docs/reference/project-files/dashboards.md
+++ b/docs/docs/reference/project-files/dashboards.md
@@ -41,12 +41,13 @@ _**`measures`**_ — numeric [aggregates](../../develop/metrics-dashboard#measur
   - _**`description`**_ — a freeform text description of the dimension for your dashboard _(optional)_ 
   - _**`ignore`**_ — hides the measure _(optional)_ 
   - _**`valid_percent_of_total`**_ — a boolean indicating whether percent-of-total values should be rendered for this measure _(optional)_ 
-  - _**`format_preset`**_ — one of a set of values that format dashboard measures. _(optional; default is humanize)_. Possible values include:
-      - _`humanize`_ — round off numbers in an opinionated way to thousands (K), millions (M), billions (B), etc
-      - _`none`_ — raw output
-      - _`currency_usd`_ —  output rounded to 2 decimal points prepended with a dollar sign
-      - _`percentage`_ — output transformed from a rate to a percentage appended with a percentage sign
-      - _`interval_ms`_ — time intervals given in milliseconds are transformed into human readable time units like hours (h), days (d), years (y), etc
+  - _**`format_d3`**_ — controls the formatting of this measure in the dashboard using a [d3-format string](https://d3js.org/d3-format). If an invalid format string is supplied, measures will be formatted with `format_preset: humanize` (described below). Measures cannot have both `format_preset` and `format_d3` entries. _(optional; if neither `format_preset` nor `format_d3` is supplied, measures will be formatted with the `humanize` preset)_
+  - _**`format_preset`**_ — controls the formatting of this measure in the dashboard according to option specified below. Measures cannot have both `format_preset` and `format_d3` entries. _(optional; if neither `format_preset` nor `format_d3` is supplied, measures will be formatted with the `humanize` preset)_
+    - _`humanize`_ — round off numbers in an opinionated way to thousands (K), millions (M), billions (B), etc
+    - _`none`_ — raw output
+    - _`currency_usd`_ —  output rounded to 2 decimal points prepended with a dollar sign
+    - _`percentage`_ — output transformed from a rate to a percentage appended with a percentage sign
+    - _`interval_ms`_ — time intervals given in milliseconds are transformed into human readable time units like hours (h), days (d), years (y), etc
 
 _**`security`**_ - define a [security policy](../../develop/security) for the dashboard _(optional)_
   - _**`access`**_ - Expression indicating if the user should be granted access to the dashboard. If not defined, it will resolve to `false` and the dashboard won't be accessible to anyone. Needs to be a valid SQL expression that evaluates to a boolean. _(optional)_
diff --git a/web-common/src/components/data-graphic/guides/PointLabel.svelte b/web-common/src/components/data-graphic/guides/PointLabel.svelte
index 9df6b90cf2d..83d94fdb0b6 100644
--- a/web-common/src/components/data-graphic/guides/PointLabel.svelte
+++ b/web-common/src/components/data-graphic/guides/PointLabel.svelte
@@ -4,8 +4,8 @@
     WithGraphicContexts,
     WithTween,
   } from "@rilldata/web-common/components/data-graphic/functional-components";
-  import { formatMeasurePercentageDifference } from "@rilldata/web-common/features/dashboards/humanize-numbers";
   import { justEnoughPrecision } from "@rilldata/web-common/lib/formatters";
+  import { formatMeasurePercentageDifference } from "@rilldata/web-common/lib/number-formatting/percentage-formatter";
   import { cubicOut } from "svelte/easing";
   import { fade } from "svelte/transition";
   export let point;
diff --git a/web-common/src/components/data-types/MeasureChange.svelte b/web-common/src/components/data-types/MeasureChange.svelte
index 82384154842..199915b31bd 100644
--- a/web-common/src/components/data-types/MeasureChange.svelte
+++ b/web-common/src/components/data-types/MeasureChange.svelte
@@ -5,9 +5,6 @@
   export let dark = false;
   export let customStyle = "";
   export let value;
-
-  $: isNegative =
-    (typeof value === "string" && value?.startsWith("-")) || value < 0;
 </script>
 
 <Base
@@ -16,7 +13,5 @@
     'block text-right'}"
   {dark}
 >
-  <slot name="value">
-    {!isNegative ? "+" : ""}{value}
-  </slot>
+  {value}
 </Base>
diff --git a/web-common/src/features/dashboards/big-number/MeasureBigNumber.svelte b/web-common/src/features/dashboards/big-number/MeasureBigNumber.svelte
index a9d8739b3dd..68fc242e2ce 100644
--- a/web-common/src/features/dashboards/big-number/MeasureBigNumber.svelte
+++ b/web-common/src/features/dashboards/big-number/MeasureBigNumber.svelte
@@ -10,13 +10,11 @@
   import type { TimeComparisonOption } from "@rilldata/web-common/lib/time/types";
   import { crossfade, fly } from "svelte/transition";
   import Spinner from "../../entity-management/Spinner.svelte";
-  import {
-    formatMeasurePercentageDifference,
-    humanizeDataType,
-    FormatPreset,
-    humanizeDataTypeExpanded,
-  } from "../humanize-numbers";
+
   import type { MetricsViewSpecMeasureV2 } from "@rilldata/web-common/runtime-client";
+  import { createMeasureValueFormatter } from "@rilldata/web-common/lib/number-formatting/format-measure-value";
+  import { FormatPreset } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
+  import { formatMeasurePercentageDifference } from "@rilldata/web-common/lib/number-formatting/percentage-formatter";
 
   export let measure: MetricsViewSpecMeasureV2;
   export let value: number;
@@ -29,26 +27,32 @@
 
   $: description =
     measure?.description || measure?.label || measure?.expression;
-  $: formatPreset =
-    (measure?.formatPreset as FormatPreset) || FormatPreset.HUMANIZE;
+
+  $: measureValueFormatter = createMeasureValueFormatter(measure);
+  $: measureValueFormatterUnabridged = createMeasureValueFormatter(
+    measure,
+    true
+  );
 
   $: name = measure?.label || measure?.expression;
 
   $: valueIsPresent = value !== undefined && value !== null;
 
-  $: isComparisonPositive = Number.isFinite(diff) && (diff as number) >= 0;
   const [send, receive] = crossfade({ fallback: fly });
 
-  $: diff = comparisonValue ? value - comparisonValue : false;
-  $: noChange = !diff;
+  $: diff =
+    valueIsPresent && comparisonValue !== undefined
+      ? value - comparisonValue
+      : 0;
+  $: noChange = !comparisonValue;
+  $: isComparisonPositive = diff >= 0;
 
-  $: formattedDiff = `${isComparisonPositive ? "+" : ""}${humanizeDataType(
-    diff,
-    formatPreset
+  $: formattedDiff = `${isComparisonPositive ? "+" : ""}${measureValueFormatter(
+    diff
   )}`;
 
   /** when the measure is a percentage, we don't show a percentage change. */
-  $: measureIsPercentage = formatPreset === FormatPreset.PERCENTAGE;
+  $: measureIsPercentage = measure?.formatPreset === FormatPreset.PERCENTAGE;
 </script>
 
 <button
@@ -79,11 +83,11 @@
         <Tooltip distance={8} location="bottom" alignment="start">
           <div class="w-max">
             <WithTween {value} tweenProps={{ duration: 500 }} let:output>
-              {humanizeDataType(output, formatPreset)}
+              {measureValueFormatter(output)}
             </WithTween>
           </div>
           <TooltipContent slot="tooltip-content">
-            {humanizeDataTypeExpanded(value, formatPreset)}
+            {measureValueFormatterUnabridged(value)}
             <TooltipDescription>
               the aggregate value over the current time period
             </TooltipDescription>
@@ -134,7 +138,7 @@
               {:else}
                 {TIME_COMPARISON[comparisonOption].shorthand}
                 <span class="font-semibold">
-                  {humanizeDataType(comparisonValue, formatPreset)}
+                  {measureValueFormatter(comparisonValue)}
                 </span>
                 {#if !measureIsPercentage}
                   <span class="text-gray-300">,</span>
diff --git a/web-common/src/features/dashboards/dimension-table/dimension-table-utils.ts b/web-common/src/features/dashboards/dimension-table/dimension-table-utils.ts
index d9c0238dade..c19b09fd519 100644
--- a/web-common/src/features/dashboards/dimension-table/dimension-table-utils.ts
+++ b/web-common/src/features/dashboards/dimension-table/dimension-table-utils.ts
@@ -11,11 +11,7 @@ import type {
   V1MetricsViewFilter,
   V1MetricsViewToplistResponseDataItem,
 } from "../../../runtime-client";
-import {
-  FormatPreset,
-  formatMeasurePercentageDifference,
-  humanizeDimTableValue,
-} from "../humanize-numbers";
+
 import type { VirtualizedTableColumns } from "@rilldata/web-local/lib/types";
 import type { VirtualizedTableConfig } from "@rilldata/web-common/components/virtualized-table/types";
 
@@ -25,6 +21,9 @@ import type { DimensionTableRow } from "./dimension-table-types";
 import { getFilterForDimension } from "../selectors";
 import { SortType } from "../proto-state/derived-types";
 import type { MetricsExplorerEntity } from "../stores/metrics-explorer-entity";
+import { createMeasureValueFormatter } from "@rilldata/web-common/lib/number-formatting/format-measure-value";
+import { FormatPreset } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
+import { formatMeasurePercentageDifference } from "@rilldata/web-common/lib/number-formatting/percentage-formatter";
 
 /** Returns an updated filter set for a given dimension on search */
 export function updateFilterOnSearch(
@@ -340,17 +339,20 @@ export function addContextColumnNames(
   const sortByColumnIndex = columnNames.indexOf(name);
   // Add comparison columns if available
   let percentOfTotalSpliceIndex = 1;
+  const isPercent = selectedMeasure?.formatPreset === FormatPreset.PERCENTAGE;
   if (timeComparison) {
     percentOfTotalSpliceIndex = 2;
     columnNames.splice(sortByColumnIndex + 1, 0, `${name}_delta`);
 
     // Only push percentage delta column if selected measure is not a percentage
-    if (selectedMeasure?.formatPreset != FormatPreset.PERCENTAGE) {
+    if (!isPercent) {
       percentOfTotalSpliceIndex = 3;
       columnNames.splice(sortByColumnIndex + 2, 0, `${name}_delta_perc`);
     }
   }
-  if (validPercentOfTotal) {
+  // Only push percentage-of-total if selected measure is
+  // validPercentOfTotal and not a percentage
+  if (validPercentOfTotal && !isPercent) {
     columnNames.splice(
       sortByColumnIndex + percentOfTotalSpliceIndex,
       0,
@@ -376,8 +378,8 @@ export function prepareDimensionTableRows(
 ): DimensionTableRow[] {
   if (!queryRows || !queryRows.length) return [];
 
-  const formatMap = Object.fromEntries(
-    measures.map((m) => [m.name, m.formatPreset as FormatPreset])
+  const formattersForMeasures = Object.fromEntries(
+    measures.map((m) => [m.name, createMeasureValueFormatter(m)])
   );
 
   const tableRows: DimensionTableRow[] = queryRows.map((row) => {
@@ -389,7 +391,7 @@ export function prepareDimensionTableRows(
     const formattedVals: [string, string | number][] = row.measureValues.map(
       (m) => [
         "__formatted_" + m.measureName,
-        humanizeDimTableValue(m.baseValue as number, formatMap[m.measureName]),
+        formattersForMeasures[m.measureName](m.baseValue as number),
       ]
     );
 
@@ -404,12 +406,11 @@ export function prepareDimensionTableRows(
         (m) => m.measureName === activeMeasureName
       ) as V1MetricsViewComparisonValue;
 
-      rowOut[`${activeMeasureName}_delta`] = humanizeDimTableValue(
-        activeMeasure.deltaAbs as number,
-        formatMap[activeMeasureName]
-      );
-      rowOut[`${activeMeasureName}_delta_perc`] =
-        formatMeasurePercentageDifference(activeMeasure.deltaRel as number);
+      (rowOut[`${activeMeasureName}_delta`] = formattersForMeasures[
+        activeMeasureName
+      ](activeMeasure.deltaAbs as number)),
+        (rowOut[`${activeMeasureName}_delta_perc`] =
+          formatMeasurePercentageDifference(activeMeasure.deltaRel as number));
     }
 
     if (addPercentOfTotal) {
diff --git a/web-common/src/features/dashboards/humanize-numbers.ts b/web-common/src/features/dashboards/humanize-numbers.ts
deleted file mode 100644
index 9a7e5a93b3c..00000000000
--- a/web-common/src/features/dashboards/humanize-numbers.ts
+++ /dev/null
@@ -1,216 +0,0 @@
-// Create types and then present an appropriate string
-// Current dash persion has `prefix` key in JSON to add currecny etc.
-// We can provide a dropdown option in the table?? or regex??
-
-import { humanizedFormatterFactory } from "@rilldata/web-common/lib/number-formatting/humanizer";
-import {
-  FormatterFactoryOptions,
-  NumberKind,
-  NumberParts,
-} from "@rilldata/web-common/lib/number-formatting/humanizer-types";
-import {
-  formatMsInterval,
-  formatMsToDuckDbIntervalString,
-} from "@rilldata/web-common/lib/number-formatting/strategies/intervals";
-import { PerRangeFormatter } from "@rilldata/web-common/lib/number-formatting/strategies/per-range";
-
-const shortHandSymbols = ["Q", "T", "B", "M", "k", "none"] as const;
-export type ShortHandSymbols = (typeof shortHandSymbols)[number];
-
-/**
- * This enum represents all of the valid strings that can be
- * used in the `format_preset` field of a measure definition.
- */
-export enum FormatPreset {
-  HUMANIZE = "humanize",
-  NONE = "none",
-  CURRENCY = "currency_usd",
-  PERCENTAGE = "percentage",
-  INTERVAL = "interval_ms",
-}
-
-// NOTE: the following are adapters that I think fit the API
-// used by the existing humanizer, but I'm not sure of the
-// exact details, nor am I totally confident about the options
-// passed in at all the relevant call sites, so I've added
-// thes adapters rather than just pave over the existing functions.
-// This really needs to be reviewed by Dhiraj, at which point we
-// can deprecate any left over code that is no longer needed.
-
-export const formatPresetToNumberKind = (type: FormatPreset | string) => {
-  switch (type) {
-    case FormatPreset.CURRENCY:
-      return NumberKind.DOLLAR;
-
-    case FormatPreset.PERCENTAGE:
-      return NumberKind.PERCENT;
-
-    case FormatPreset.INTERVAL:
-      return NumberKind.INTERVAL;
-
-    default:
-      // captures:
-      // FormatPreset.NONE
-      // FormatPreset.HUMANIZE
-      return NumberKind.ANY;
-  }
-};
-
-export function humanizeDataType(
-  value: unknown,
-  type: FormatPreset,
-  options?: FormatterFactoryOptions
-): string {
-  if (value === undefined || value === null) return "";
-  if (typeof value !== "number") return value.toString();
-
-  const numberKind = formatPresetToNumberKind(type);
-
-  let innerOptions: FormatterFactoryOptions = options;
-  if (type === FormatPreset.NONE) {
-    innerOptions = {
-      strategy: "none",
-      numberKind,
-      padWithInsignificantZeros: false,
-    };
-  } else if (type === FormatPreset.INTERVAL) {
-    return formatMsInterval(value);
-  } else if (options === undefined) {
-    innerOptions = {
-      strategy: "default",
-      numberKind,
-    };
-  } else {
-    innerOptions = {
-      strategy: "default",
-      ...options,
-      numberKind,
-    };
-  }
-  return humanizedFormatterFactory([value], innerOptions).stringFormat(value);
-}
-
-/**
- * This function is intended to provide a lossless
- * humanized string representation of a number in cases
- * where a raw number will be meaningless to the user.
- */
-export function humanizeDataTypeExpanded(
-  value: unknown,
-  type: FormatPreset
-): string {
-  if (type === FormatPreset.INTERVAL) {
-    return formatMsToDuckDbIntervalString(value as number);
-  }
-  return value.toString();
-}
-
-/** This function is used primarily in the leaderboard and the detail tables. */
-export function humanizeDimTableValue(value: number, type: FormatPreset) {
-  if (type == FormatPreset.NONE) return value;
-  if (value === null || value === undefined) return null;
-
-  const numberKind = formatPresetToNumberKind(type);
-  const innerOptions: FormatterFactoryOptions = {
-    strategy: "default",
-    numberKind,
-  };
-
-  const formatter = humanizedFormatterFactory([value], innerOptions);
-  return formatter.stringFormat(value);
-}
-
-/**
- * Formatter for the comparison percentage differences.
- * Input values are given as proportions, not percentages
- * (not yet multiplied by 100). However, inputs may be
- * any real number, not just a proper fraction, so negative
- * values and values of arbitrarily large magnitudes must be
- * supported.
- */
-export function formatMeasurePercentageDifference(value): NumberParts {
-  if (value === 0) {
-    return { percent: "%", int: "0", dot: "", frac: "", suffix: "" };
-  } else if (value < 0.005 && value > 0) {
-    return {
-      percent: "%",
-      int: "0",
-      dot: "",
-      frac: "",
-      suffix: "",
-      approxZero: true,
-    };
-  } else if (value > -0.005 && value < 0) {
-    return {
-      percent: "%",
-      neg: "-",
-      int: "0",
-      dot: "",
-      frac: "",
-      suffix: "",
-      approxZero: true,
-    };
-  }
-
-  const factory = new PerRangeFormatter([], {
-    strategy: "perRange",
-    rangeSpecs: [
-      {
-        minMag: -2,
-        supMag: 3,
-        maxDigitsRight: 1,
-        baseMagnitude: 0,
-        padWithInsignificantZeros: false,
-      },
-    ],
-    defaultMaxDigitsRight: 0,
-    numberKind: NumberKind.PERCENT,
-  });
-
-  return factory["partsFormat"](value);
-}
-
-/**
- * This function is used to format proper fractions, which
- * must be between 0 and 1, as percentages. It is used in
- * formatting the percentage of total column, as well as
- * other contexts where the input number is guaranteed to
- * be a proper fraction.
- *
- * If the input number is not a proper fraction, this function
- * will `console.warn` (since this is not worth crashing over)
- * and use formatMeasurePercentageDifference
- * instead, though that will likely result in a badly formatted
- * output, since formatting of proper fractions may make
- * assumptions that are violated by improper fractions.
- */
-export function formatProperFractionAsPercent(value): NumberParts {
-  if (value < 0 || value > 1) {
-    console.warn(
-      `formatProperFractionAsPercent received invalid input: ${value}. Value must be between 0 and 1.`
-    );
-    return formatMeasurePercentageDifference(value);
-  }
-
-  if (value < 0.01 && value !== 0) {
-    return { percent: "%", int: "<1", dot: "", frac: "", suffix: "" };
-  } else if (value === 0) {
-    return { percent: "%", int: "0", dot: "", frac: "", suffix: "" };
-  }
-  const factory = new PerRangeFormatter([], {
-    strategy: "perRange",
-    rangeSpecs: [
-      {
-        minMag: -2,
-        supMag: 3,
-        maxDigitsRight: 1,
-        baseMagnitude: 0,
-        padWithInsignificantZeros: false,
-      },
-    ],
-    defaultMaxDigitsRight: 0,
-    numberKind: NumberKind.PERCENT,
-  });
-
-  return factory["partsFormat"](value);
-}
diff --git a/web-common/src/features/dashboards/leaderboard/ContextColumnValue.svelte b/web-common/src/features/dashboards/leaderboard/ContextColumnValue.svelte
index 262cc5da3c2..3fdc8e4159d 100644
--- a/web-common/src/features/dashboards/leaderboard/ContextColumnValue.svelte
+++ b/web-common/src/features/dashboards/leaderboard/ContextColumnValue.svelte
@@ -1,46 +1,48 @@
 <script lang="ts">
-  import { LeaderboardContextColumn } from "@rilldata/web-common/features/dashboards/leaderboard-context-column";
   import PercentageChange from "../../../components/data-types/PercentageChange.svelte";
   import { FormattedDataType } from "@rilldata/web-common/components/data-types";
-  import { contextColumnWidth } from "./leaderboard-utils";
-  import type { NumberParts } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
-  import { PERC_DIFF } from "@rilldata/web-common/components/data-types/type-utils";
+  import { getStateManagers } from "../state-managers/state-managers";
+  import type { LeaderboardItemData } from "./leaderboard-utils";
+  import { formatProperFractionAsPercent } from "@rilldata/web-common/lib/number-formatting/proper-fraction-formatter";
+  import { formatMeasurePercentageDifference } from "@rilldata/web-common/lib/number-formatting/percentage-formatter";
 
-  export let formattedValue: string | NumberParts | PERC_DIFF;
-  export let contextColumn: LeaderboardContextColumn;
+  export let itemData: LeaderboardItemData;
 
-  let neg: boolean;
-  let noData: boolean;
-  let customStyle: string;
-  $: if (typeof formattedValue === "string") {
-    neg = formattedValue[0] === "-";
-    noData = formattedValue === "" || !formattedValue;
-    customStyle = neg ? "text-red-500" : noData ? "opacity-50 italic" : "";
-  }
-  $: width = contextColumnWidth(contextColumn);
+  const {
+    selectors: {
+      contextColumn: {
+        widthPx,
+        isDeltaAbsolute,
+        isDeltaPercent,
+        isPercentOfTotal,
+        isHidden,
+      },
+      numberFormat: { activeMeasureFormatter },
+    },
+  } = getStateManagers();
 
-  $: if (
-    typeof formattedValue === "string" &&
-    formattedValue !== PERC_DIFF.PREV_VALUE_NO_DATA
-  ) {
-    console.warn(
-      `ContextColumnValue component expects a \`NumberParts | PERC_DIFF\`  received ${JSON.stringify(
-        formattedValue
-      )} instead.`
-    );
-  }
+  $: negativeChange = itemData.deltaRel !== null && itemData.deltaAbs < 0;
+  $: noChangeData = itemData.deltaRel === null;
 </script>
 
-{#if contextColumn === LeaderboardContextColumn.DELTA_PERCENT || contextColumn === LeaderboardContextColumn.PERCENT}
-  <div style:width>
-    <PercentageChange value={formattedValue} />
-  </div>
-{:else if contextColumn === LeaderboardContextColumn.DELTA_ABSOLUTE}
-  <div style:width>
-    {#if noData}
+{#if !$isHidden}
+  <div style:width={$widthPx}>
+    {#if $isPercentOfTotal}
+      <PercentageChange
+        value={formatProperFractionAsPercent(itemData.pctOfTotal)}
+      />
+    {:else if noChangeData}
       <span class="opacity-50 italic" style:font-size=".925em">no data</span>
-    {:else}
-      <FormattedDataType type="INTEGER" value={formattedValue} {customStyle} />
+    {:else if $isDeltaPercent}
+      <PercentageChange
+        value={formatMeasurePercentageDifference(itemData.deltaRel)}
+      />
+    {:else if $isDeltaAbsolute}
+      <FormattedDataType
+        type="INTEGER"
+        value={$activeMeasureFormatter(itemData.deltaAbs)}
+        customStyle={negativeChange ? "text-red-500" : ""}
+      />
     {/if}
   </div>
 {/if}
diff --git a/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte b/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte
index 3f243a6545d..2dbb356a4b1 100644
--- a/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte
+++ b/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte
@@ -25,7 +25,6 @@
     metricsExplorerStore,
     useDashboardStore,
   } from "web-common/src/features/dashboards/stores/dashboard-stores";
-  import type { FormatPreset } from "../humanize-numbers";
   import LeaderboardHeader from "./LeaderboardHeader.svelte";
   import {
     LeaderboardItemData,
@@ -33,10 +32,7 @@
     prepareLeaderboardItemData,
   } from "./leaderboard-utils";
   import LeaderboardListItem from "./LeaderboardListItem.svelte";
-  import {
-    getDimensionColumn,
-    prepareSortedQueryBody,
-  } from "../dashboard-utils";
+  import { prepareSortedQueryBody } from "../dashboard-utils";
 
   export let metricViewName: string;
   export let dimensionName: string;
@@ -47,11 +43,10 @@
   export let referenceValue: number;
   export let unfilteredTotal: number;
 
-  export let formatPreset: FormatPreset;
-  export let isSummableMeasure = false;
-
   let slice = 7;
 
+  const stateManagers = getStateManagers();
+
   $: dashboardStore = useDashboardStore(metricViewName);
 
   let filterExcludeMode: boolean;
@@ -68,7 +63,6 @@
   let dimension: MetricsViewDimension;
   $: dimension = $dimensionQuery?.data;
   $: displayName = dimension?.label || dimension?.name;
-  $: dimensionColumn = getDimensionColumn(dimension);
 
   $: measureQuery = useMetaMeasure(
     $runtime.instanceId,
@@ -89,7 +83,7 @@
       ?.in ?? [];
   $: atLeastOneActive = !!activeValues?.length;
 
-  const timeControlsStore = useTimeControlStore(getStateManagers());
+  const timeControlsStore = useTimeControlStore(stateManagers);
 
   function selectDimension(dimensionName) {
     metricsExplorerStore.setMetricDimensionName(metricViewName, dimensionName);
@@ -109,8 +103,6 @@
   $: isBeingCompared =
     $dashboardStore?.selectedComparisonDimension === dimensionName;
 
-  $: contextColumn = $dashboardStore?.leaderboardContextColumn;
-
   $: sortAscending = $dashboardStore.sortDirection === SortDirection.ASCENDING;
   $: sortType = $dashboardStore.dashboardSortType;
 
@@ -170,15 +162,12 @@
     on:mouseleave={() => (hovered = false)}
   >
     <LeaderboardHeader
-      {contextColumn}
       isFetching={$sortedQuery.isFetching}
       {displayName}
       on:toggle-dimension-comparison={() =>
         toggleComparisonDimension(dimensionName, isBeingCompared)}
       {isBeingCompared}
       {hovered}
-      {sortAscending}
-      {sortType}
       dimensionDescription={dimension?.description}
       on:open-dimension-details={() => selectDimension(dimensionName)}
       on:toggle-sort={toggleSort}
@@ -189,13 +178,10 @@
         {#each aboveTheFold as itemData (itemData.dimensionValue)}
           <LeaderboardListItem
             {itemData}
-            {contextColumn}
             {atLeastOneActive}
             {isBeingCompared}
             {filterExcludeMode}
-            {isSummableMeasure}
             {referenceValue}
-            {formatPreset}
             on:click
             on:keydown
             on:select-item
@@ -207,13 +193,10 @@
           {#each selectedBelowTheFold as itemData (itemData.dimensionValue)}
             <LeaderboardListItem
               {itemData}
-              {contextColumn}
               {atLeastOneActive}
               {isBeingCompared}
               {filterExcludeMode}
-              {isSummableMeasure}
               {referenceValue}
-              {formatPreset}
               on:click
               on:keydown
               on:select-item
diff --git a/web-common/src/features/dashboards/leaderboard/LeaderboardDisplay.svelte b/web-common/src/features/dashboards/leaderboard/LeaderboardDisplay.svelte
index ba6cf35430c..26f5a47b48f 100644
--- a/web-common/src/features/dashboards/leaderboard/LeaderboardDisplay.svelte
+++ b/web-common/src/features/dashboards/leaderboard/LeaderboardDisplay.svelte
@@ -16,10 +16,8 @@
     metricsExplorerStore,
     useDashboardStore,
   } from "web-common/src/features/dashboards/stores/dashboard-stores";
-  import { FormatPreset } from "../humanize-numbers";
   import Leaderboard from "./Leaderboard.svelte";
   import LeaderboardControls from "./LeaderboardControls.svelte";
-  import { isSummableMeasure } from "../dashboard-utils";
 
   export let metricViewName: string;
 
@@ -62,9 +60,6 @@
     }
   );
 
-  $: formatPreset =
-    (activeMeasure?.formatPreset as FormatPreset) ?? FormatPreset.HUMANIZE;
-
   let referenceValue: number;
   $: if (activeMeasure?.name && $totalsQuery?.data?.data) {
     referenceValue = $totalsQuery.data.data?.[activeMeasure.name];
@@ -152,8 +147,6 @@
       <VirtualizedGrid {columns} height="100%" items={dimensionsShown} let:item>
         <!-- the single virtual element -->
         <Leaderboard
-          {formatPreset}
-          isSummableMeasure={isSummableMeasure(activeMeasure)}
           {metricViewName}
           dimensionName={item.name}
           on:expand={() => {
diff --git a/web-common/src/features/dashboards/leaderboard/LeaderboardHeader.svelte b/web-common/src/features/dashboards/leaderboard/LeaderboardHeader.svelte
index d378da96718..9aef911eda5 100644
--- a/web-common/src/features/dashboards/leaderboard/LeaderboardHeader.svelte
+++ b/web-common/src/features/dashboards/leaderboard/LeaderboardHeader.svelte
@@ -12,26 +12,37 @@
   import ArrowDown from "@rilldata/web-common/components/icons/ArrowDown.svelte";
   import { createEventDispatcher } from "svelte";
   import { LeaderboardContextColumn } from "../leaderboard-context-column";
-  import { contextColumnWidth } from "./leaderboard-utils";
   import { SortType } from "../proto-state/derived-types";
+  import { getStateManagers } from "../state-managers/state-managers";
 
   export let displayName: string;
   export let isFetching: boolean;
   export let dimensionDescription: string;
   export let hovered: boolean;
-  export let contextColumn: LeaderboardContextColumn;
-  export let sortAscending: boolean;
-  export let sortType: SortType;
   export let isBeingCompared: boolean;
 
+  const {
+    selectors: {
+      contextColumn: {
+        contextColumn,
+        widthPx,
+        isDeltaAbsolute,
+        isDeltaPercent,
+        isPercentOfTotal,
+        isHidden,
+      },
+      sorting: { sortedAscending, sortType },
+    },
+  } = getStateManagers();
+
   const dispatch = createEventDispatcher();
   $: contextColumnSortType = {
     [LeaderboardContextColumn.DELTA_PERCENT]: SortType.DELTA_PERCENT,
     [LeaderboardContextColumn.DELTA_ABSOLUTE]: SortType.DELTA_ABSOLUTE,
     [LeaderboardContextColumn.PERCENT]: SortType.PERCENT,
-  }[contextColumn];
+  }[$contextColumn];
 
-  $: arrowTransform = sortAscending ? "scale(1 -1)" : "scale(1 1)";
+  $: arrowTransform = $sortedAscending ? "scale(1 -1)" : "scale(1 1)";
 </script>
 
 <div class="flex flex-row items-center">
@@ -105,28 +116,28 @@
     <div class="shrink flex flex-row items-center gap-x-4">
       <button
         on:click={() => dispatch("toggle-sort", SortType.VALUE)}
-        class="shrink flex flex-row items-center justify-end"
+        class="shrink flex flex-row items-center justify-end min-w-[40px]"
         aria-label="Toggle sort leaderboards by value"
       >
-        #{#if sortType === SortType.VALUE}
+        #{#if $sortType === SortType.VALUE}
           <ArrowDown transform={arrowTransform} />
         {/if}
       </button>
 
-      {#if contextColumn !== LeaderboardContextColumn.HIDDEN}
+      {#if !$isHidden}
         <button
           on:click={() => dispatch("toggle-sort", contextColumnSortType)}
           class="shrink flex flex-row items-center justify-end"
           aria-label="Toggle sort leaderboards by context column"
-          style:width={contextColumnWidth(contextColumn)}
+          style:width={$widthPx}
         >
-          {#if contextColumn === LeaderboardContextColumn.DELTA_PERCENT}
+          {#if $isDeltaPercent}
             <Delta /> %
-          {:else if contextColumn === LeaderboardContextColumn.DELTA_ABSOLUTE}
+          {:else if $isDeltaAbsolute}
             <Delta />
-          {:else if contextColumn === LeaderboardContextColumn.PERCENT}
+          {:else if $isPercentOfTotal}
             <PieChart /> %
-          {/if}{#if sortType !== SortType.VALUE}
+          {/if}{#if $sortType !== SortType.VALUE}
             <ArrowDown transform={arrowTransform} />
           {/if}
         </button>
diff --git a/web-common/src/features/dashboards/leaderboard/LeaderboardListItem.svelte b/web-common/src/features/dashboards/leaderboard/LeaderboardListItem.svelte
index 87745aebb45..3f85e4a960a 100644
--- a/web-common/src/features/dashboards/leaderboard/LeaderboardListItem.svelte
+++ b/web-common/src/features/dashboards/leaderboard/LeaderboardListItem.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { LeaderboardContextColumn } from "@rilldata/web-common/features/dashboards/leaderboard-context-column";
   import { createEventDispatcher } from "svelte";
   import { fly, slide } from "svelte/transition";
   import BarAndLabel from "../../../components/BarAndLabel.svelte";
@@ -18,13 +17,10 @@
   import LeaderboardTooltipContent from "./LeaderboardTooltipContent.svelte";
 
   import LeaderboardItemFilterIcon from "./LeaderboardItemFilterIcon.svelte";
-  import { humanizeDataType } from "../humanize-numbers";
   import LongBarZigZag from "./LongBarZigZag.svelte";
-  import {
-    LeaderboardItemData,
-    formatContextColumnValue,
-  } from "./leaderboard-utils";
+  import type { LeaderboardItemData } from "./leaderboard-utils";
   import ContextColumnValue from "./ContextColumnValue.svelte";
+  import { getStateManagers } from "../state-managers/state-managers";
 
   export let itemData: LeaderboardItemData;
   $: label = itemData.dimensionValue;
@@ -32,30 +28,23 @@
   $: selected = itemData.selectedIndex >= 0;
   $: comparisonValue = itemData.prevValue;
 
-  export let contextColumn: LeaderboardContextColumn;
-
   export let atLeastOneActive = false;
   export let isBeingCompared = false;
   export let filterExcludeMode;
 
-  export let formatPreset;
+  const {
+    numberFormat: { activeMeasureFormatter },
+    activeMeasure: { isSummableMeasure },
+  } = getStateManagers().selectors;
 
-  /** if this value is a summable measure, we'll show the bar. Otherwise, don't. */
-  export let isSummableMeasure;
   /** for summable measures, this is the value we use to calculate the bar % to fill */
   export let referenceValue;
 
-  $: formattedValue = humanizeDataType(measureValue, formatPreset);
-
-  $: contextColumnFormattedValue = formatContextColumnValue(
-    itemData,
-    contextColumn,
-    formatPreset
-  );
+  $: formattedValue = $activeMeasureFormatter(measureValue);
 
   $: previousValueString =
     comparisonValue !== undefined && comparisonValue !== null
-      ? humanizeDataType(comparisonValue, formatPreset)
+      ? $activeMeasureFormatter(comparisonValue)
       : undefined;
   $: showPreviousTimeValue = hovered && previousValueString !== undefined;
   // Super important special case: if there is not at least one "active" (selected) value,
@@ -67,7 +56,7 @@
 
   let renderedBarValue = 0; // should be between 0 and 1.
   $: {
-    renderedBarValue = isSummableMeasure
+    renderedBarValue = $isSummableMeasure
       ? referenceValue
         ? measureValue / referenceValue
         : 0
@@ -172,10 +161,7 @@
               value={formattedValue || measureValue}
             />
           </div>
-          <ContextColumnValue
-            formattedValue={contextColumnFormattedValue}
-            {contextColumn}
-          />
+          <ContextColumnValue {itemData} />
         </div>
       </div>
     </BarAndLabel>
diff --git a/web-common/src/features/dashboards/leaderboard/__stories__/LeaderboardListItem.stories.svelte b/web-common/src/features/dashboards/leaderboard/__stories__/LeaderboardListItem.stories.svelte
index ef04476a6f0..5998715f563 100644
--- a/web-common/src/features/dashboards/leaderboard/__stories__/LeaderboardListItem.stories.svelte
+++ b/web-common/src/features/dashboards/leaderboard/__stories__/LeaderboardListItem.stories.svelte
@@ -5,9 +5,9 @@
 
   import LeaderboardListItem from "../LeaderboardListItem.svelte";
 
-  import { FormatPreset } from "../../humanize-numbers";
   import type { LeaderboardItemData } from "../leaderboard-utils";
   import { LeaderboardContextColumn } from "../../leaderboard-context-column";
+  import { FormatPreset } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
 
   const atLeastOneActive = true;
   const filterExcludeMode = true;
diff --git a/web-common/src/features/dashboards/leaderboard/leaderboard-utils.ts b/web-common/src/features/dashboards/leaderboard/leaderboard-utils.ts
index ebe2e27d4b1..24297cb8c0e 100644
--- a/web-common/src/features/dashboards/leaderboard/leaderboard-utils.ts
+++ b/web-common/src/features/dashboards/leaderboard/leaderboard-utils.ts
@@ -3,16 +3,8 @@ import {
   type V1MetricsViewComparisonRow,
   type V1MetricsViewComparisonValue,
 } from "@rilldata/web-common/runtime-client";
-import { PERC_DIFF } from "../../../components/data-types/type-utils";
-import {
-  FormatPreset,
-  formatMeasurePercentageDifference,
-  formatProperFractionAsPercent,
-  humanizeDataType,
-} from "../humanize-numbers";
-import { LeaderboardContextColumn } from "../leaderboard-context-column";
+
 import { SortType } from "../proto-state/derived-types";
-import type { NumberParts } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
 
 /**
  * A `V1MetricsViewComparisonRow` basically represents a row of data
@@ -253,47 +245,6 @@ export function getComparisonDefaultSelection(
     .slice(0, 3);
 }
 
-/**
- * Returns the formatted value for the context column
- * accounting for the context column type.
- */
-export function formatContextColumnValue(
-  itemData: LeaderboardItemData,
-  contextType: LeaderboardContextColumn,
-  formatPreset: FormatPreset
-): string | NumberParts | PERC_DIFF.PREV_VALUE_NO_DATA {
-  switch (contextType) {
-    case LeaderboardContextColumn.DELTA_ABSOLUTE: {
-      return humanizeDataType(itemData.deltaAbs, formatPreset);
-    }
-    case LeaderboardContextColumn.DELTA_PERCENT:
-      if (itemData.deltaRel === null || itemData.deltaRel === undefined)
-        return PERC_DIFF.PREV_VALUE_NO_DATA;
-      return formatMeasurePercentageDifference(itemData.deltaRel);
-    case LeaderboardContextColumn.PERCENT:
-      return formatProperFractionAsPercent(itemData.pctOfTotal);
-    case LeaderboardContextColumn.HIDDEN:
-      return "";
-    default:
-      throw new Error("Invalid context column, all cases must be handled");
-  }
-}
-export const contextColumnWidth = (
-  contextType: LeaderboardContextColumn
-): string => {
-  switch (contextType) {
-    case LeaderboardContextColumn.DELTA_ABSOLUTE:
-    case LeaderboardContextColumn.DELTA_PERCENT:
-      return "56px";
-    case LeaderboardContextColumn.PERCENT:
-      return "44px";
-    case LeaderboardContextColumn.HIDDEN:
-      return "0px";
-    default:
-      throw new Error("Invalid context column, all cases must be handled");
-  }
-};
-
 export function getQuerySortType(sortType: SortType) {
   return (
     {
diff --git a/web-common/src/features/dashboards/state-managers/actions/index.ts b/web-common/src/features/dashboards/state-managers/actions/index.ts
index f8047b4f2cb..ea389f0dcd9 100644
--- a/web-common/src/features/dashboards/state-managers/actions/index.ts
+++ b/web-common/src/features/dashboards/state-managers/actions/index.ts
@@ -30,6 +30,9 @@ export const createStateManagerActions = (
     dimTable: createDashboardUpdaters(updateDashboard, dimTableActions),
     // Note: for now, some core actions are kept in the root of the
     // actions object. Can revisit that later if we want to move them.
+    /**
+     * sets the main measure name for the dashboard.
+     */
     setLeaderboardMeasureName: dashboardMutatorToUpdater(
       updateDashboard,
       setLeaderboardMeasureName
diff --git a/web-common/src/features/dashboards/state-managers/selectors/active-measure.ts b/web-common/src/features/dashboards/state-managers/selectors/active-measure.ts
new file mode 100644
index 00000000000..dbf62952d05
--- /dev/null
+++ b/web-common/src/features/dashboards/state-managers/selectors/active-measure.ts
@@ -0,0 +1,30 @@
+import type { MetricsViewSpecMeasureV2 } from "@rilldata/web-common/runtime-client";
+import type { SelectorFnArgs } from "./types";
+import { isSummableMeasure } from "../../dashboard-utils";
+
+export const activeMeasure = ({
+  dashboard,
+  metricsSpecQueryResult,
+}: SelectorFnArgs): MetricsViewSpecMeasureV2 | undefined => {
+  const measures = metricsSpecQueryResult.data?.measures;
+  if (!measures) {
+    return undefined;
+  }
+
+  const activeMeasure = measures.find(
+    (measure) => measure.name === dashboard.leaderboardMeasureName
+  );
+  return activeMeasure;
+};
+
+export const activeMeasureSelectors = {
+  /**
+   * Gets the active measure for the dashboard.
+   */
+  activeMeasure,
+  /**
+   * is the currently active measure a summable measure?
+   */
+  isSummableMeasure: (args: SelectorFnArgs) =>
+    isSummableMeasure(activeMeasure(args)),
+};
diff --git a/web-common/src/features/dashboards/state-managers/selectors/context-column.ts b/web-common/src/features/dashboards/state-managers/selectors/context-column.ts
new file mode 100644
index 00000000000..76e69893421
--- /dev/null
+++ b/web-common/src/features/dashboards/state-managers/selectors/context-column.ts
@@ -0,0 +1,66 @@
+import { LeaderboardContextColumn } from "../../leaderboard-context-column";
+import type { SelectorFnArgs } from "./types";
+
+const contextColumnWidth = (contextType: LeaderboardContextColumn): string => {
+  switch (contextType) {
+    case LeaderboardContextColumn.DELTA_ABSOLUTE:
+    case LeaderboardContextColumn.DELTA_PERCENT:
+      return "56px";
+    case LeaderboardContextColumn.PERCENT:
+      return "44px";
+    case LeaderboardContextColumn.HIDDEN:
+      return "0px";
+    default:
+      throw new Error("Invalid context column, all cases must be handled");
+  }
+};
+
+export const contextColSelectors = {
+  /**
+   * Gets the active context column type for the dashboard.
+   */
+  contextColumn: ({ dashboard }: SelectorFnArgs) =>
+    dashboard.leaderboardContextColumn,
+
+  /**
+   * Is the context column hidden in the leaderboards?
+   */
+  isHidden: ({ dashboard }: SelectorFnArgs) =>
+    dashboard.leaderboardContextColumn === LeaderboardContextColumn.HIDDEN,
+
+  /**
+   * Is the Percentage change context column currently active in the leaderboards?
+   */
+  isDeltaPercent: ({ dashboard }: SelectorFnArgs) =>
+    dashboard.leaderboardContextColumn ===
+    LeaderboardContextColumn.DELTA_PERCENT,
+
+  /**
+   * Is the absolute change context column currently active in the leaderboards?
+   */
+  isDeltaAbsolute: ({ dashboard }: SelectorFnArgs) =>
+    dashboard.leaderboardContextColumn ===
+    LeaderboardContextColumn.DELTA_ABSOLUTE,
+
+  /**
+   * Is the percent-of-total context column currently active in the leaderboards?
+   */
+  isPercentOfTotal: ({ dashboard }: SelectorFnArgs) =>
+    dashboard.leaderboardContextColumn === LeaderboardContextColumn.PERCENT,
+
+  /**
+   * `true` if the context column is either percent or delta percent,
+   * `false` otherwise.
+   */
+  isAPercentColumn: ({ dashboard }: SelectorFnArgs) =>
+    dashboard.leaderboardContextColumn ===
+      LeaderboardContextColumn.DELTA_PERCENT ||
+    dashboard.leaderboardContextColumn === LeaderboardContextColumn.PERCENT,
+
+  /**
+   * returns a css style string specifying the width of the context
+   * column in the leaderboards.
+   */
+  widthPx: ({ dashboard }: SelectorFnArgs) =>
+    contextColumnWidth(dashboard.leaderboardContextColumn),
+};
diff --git a/web-common/src/features/dashboards/state-managers/selectors/data-formatting.ts b/web-common/src/features/dashboards/state-managers/selectors/data-formatting.ts
new file mode 100644
index 00000000000..393aeed5201
--- /dev/null
+++ b/web-common/src/features/dashboards/state-managers/selectors/data-formatting.ts
@@ -0,0 +1,21 @@
+import { createMeasureValueFormatter } from "@rilldata/web-common/lib/number-formatting/format-measure-value";
+import type { SelectorFnArgs } from "./types";
+import { activeMeasure } from "./active-measure";
+import { FormatPreset } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
+
+export const formattingSelectors = {
+  /**
+   * the currently active measure's format preset.
+   */
+  activeMeasureFormatPreset: (args: SelectorFnArgs): FormatPreset =>
+    (activeMeasure(args)?.formatPreset as FormatPreset) ??
+    FormatPreset.HUMANIZE,
+
+  /**
+   * A readable containing a function that formats values
+   * according to the active measure's format specification,
+   * whether it's a d3 format string or a format preset.
+   */
+  activeMeasureFormatter: (args: SelectorFnArgs) =>
+    createMeasureValueFormatter(activeMeasure(args)),
+};
diff --git a/web-common/src/features/dashboards/state-managers/selectors/index.ts b/web-common/src/features/dashboards/state-managers/selectors/index.ts
index 6b832e6f24c..53c944de7e5 100644
--- a/web-common/src/features/dashboards/state-managers/selectors/index.ts
+++ b/web-common/src/features/dashboards/state-managers/selectors/index.ts
@@ -2,30 +2,87 @@ import { sortingSelectors } from "./sorting";
 import { derived, type Readable } from "svelte/store";
 import type { MetricsExplorerEntity } from "../../stores/metrics-explorer-entity";
 import type { ReadablesObj, SelectorFnsObj } from "./types";
+import type { QueryObserverResult } from "@tanstack/svelte-query";
+import type {
+  RpcStatus,
+  V1MetricsViewSpec,
+} from "@rilldata/web-common/runtime-client";
+import { formattingSelectors } from "./data-formatting";
+import { contextColSelectors } from "./context-column";
+import { activeMeasureSelectors } from "./active-measure";
 
 export type StateManagerReadables = ReturnType<
   typeof createStateManagerReadables
 >;
 
 export const createStateManagerReadables = (
-  dashboardStore: Readable<MetricsExplorerEntity>
+  dashboardStore: Readable<MetricsExplorerEntity>,
+  metricsSpecQueryResultStore: Readable<
+    QueryObserverResult<V1MetricsViewSpec, RpcStatus>
+  >
 ) => {
   return {
     /**
      * Readables related to the sorting state of the dashboard.
      */
-    sorting: createReadablesFromSelectors(sortingSelectors, dashboardStore),
+    sorting: createReadablesFromSelectors(
+      sortingSelectors,
+      dashboardStore,
+      metricsSpecQueryResultStore
+    ),
+
+    /**
+     * Readables related to number formatting for the dashboard.
+     */
+    numberFormat: createReadablesFromSelectors(
+      formattingSelectors,
+      dashboardStore,
+      metricsSpecQueryResultStore
+    ),
+
+    /**
+     * Readables related to the dashboard context column.
+     */
+    contextColumn: createReadablesFromSelectors(
+      contextColSelectors,
+      dashboardStore,
+      metricsSpecQueryResultStore
+    ),
+
+    /**
+     * Readables related to the primary active measure in the
+     * leaderboard.
+     */
+    activeMeasure: createReadablesFromSelectors(
+      activeMeasureSelectors,
+      dashboardStore,
+      metricsSpecQueryResultStore
+    ),
   };
 };
 
 function createReadablesFromSelectors<T extends SelectorFnsObj>(
   selectors: T,
-  dashboardStore: Readable<MetricsExplorerEntity>
+  dashboardStore: Readable<MetricsExplorerEntity>,
+  metricsSpecQueryResultStore: Readable<
+    QueryObserverResult<V1MetricsViewSpec, RpcStatus>
+  >
 ): ReadablesObj<T> {
   return Object.fromEntries(
     Object.entries(selectors).map(([key, selectorFn]) => [
       key,
-      derived(dashboardStore, selectorFn),
+      derived(
+        // Note: creating a svelte derived store from multiple stores
+        // requires supplying a tuple of stores.
+        // To simplify the selector function, we pack this into a single
+        // selectorFnArgs object.
+        [dashboardStore, metricsSpecQueryResultStore],
+        ([dashboard, metricsSpecQueryResult]) =>
+          selectorFn({
+            dashboard,
+            metricsSpecQueryResult,
+          })
+      ),
     ])
   ) as ReadablesObj<T>;
 }
diff --git a/web-common/src/features/dashboards/state-managers/selectors/sorting.ts b/web-common/src/features/dashboards/state-managers/selectors/sorting.ts
index ed4b47ac4f0..4d69f4e0f37 100644
--- a/web-common/src/features/dashboards/state-managers/selectors/sorting.ts
+++ b/web-common/src/features/dashboards/state-managers/selectors/sorting.ts
@@ -1,23 +1,23 @@
 import { SortDirection, SortType } from "../../proto-state/derived-types";
-import type { MetricsExplorerEntity } from "../../stores/metrics-explorer-entity";
+import type { SelectorFnArgs } from "./types";
 
 export const sortingSelectors = {
   /**
    * Gets the sort type for the dash (value, percent, delta, etc.)
    */
-  sortType: (dashboard: MetricsExplorerEntity) => dashboard.dashboardSortType,
+  sortType: ({ dashboard }: SelectorFnArgs) => dashboard.dashboardSortType,
 
   /**
    * true if the dashboard is sorted ascending, false otherwise.
    */
-  sortedAscending: (dashboard: MetricsExplorerEntity) =>
+  sortedAscending: ({ dashboard }: SelectorFnArgs) =>
     dashboard.sortDirection === SortDirection.ASCENDING,
 
   /**
    * Returns the measure name that the dashboard is sorted by,
    * or null if the dashboard is sorted by dimension value.
    */
-  sortMeasure: (dashboard: MetricsExplorerEntity) =>
+  sortMeasure: ({ dashboard }: SelectorFnArgs) =>
     dashboard.dashboardSortType !== SortType.DIMENSION &&
     dashboard.dashboardSortType !== SortType.UNSPECIFIED
       ? dashboard.leaderboardMeasureName
@@ -26,6 +26,6 @@ export const sortingSelectors = {
   /**
    * Returns true if the dashboard is sorted by a dimension, false otherwise.
    */
-  sortedByDimensionValue: (dashboard: MetricsExplorerEntity) =>
+  sortedByDimensionValue: ({ dashboard }: SelectorFnArgs) =>
     dashboard.dashboardSortType === SortType.DIMENSION,
 };
diff --git a/web-common/src/features/dashboards/state-managers/selectors/types.ts b/web-common/src/features/dashboards/state-managers/selectors/types.ts
index 455fc07d998..67e0402fb24 100644
--- a/web-common/src/features/dashboards/state-managers/selectors/types.ts
+++ b/web-common/src/features/dashboards/state-managers/selectors/types.ts
@@ -1,11 +1,25 @@
 import type { Readable } from "svelte/store";
 import type { MetricsExplorerEntity } from "../../stores/metrics-explorer-entity";
+import type { QueryObserverResult } from "@tanstack/svelte-query";
+import type {
+  RpcStatus,
+  V1MetricsViewSpec,
+} from "@rilldata/web-common/runtime-client";
+
+/**
+ * Arguments to a selector function. By putting these in a tuple,
+ * these become compatible with the svelte derived store function arguments.
+ */
+export type SelectorFnArgs = {
+  dashboard: MetricsExplorerEntity;
+  metricsSpecQueryResult: QueryObserverResult<V1MetricsViewSpec, RpcStatus>;
+};
 
 /**
  * A SelectorFn is a pure function that takes dashboard data
  * (a MetricsExplorerEntity) and returns some derived value from it.
  */
-export type SelectorFn<T> = (dashboard: MetricsExplorerEntity) => T;
+export type SelectorFn<T> = (args: SelectorFnArgs) => T;
 
 /**
  * A SelectorFnsObj object is a collection of pure SelectorFn functions.
diff --git a/web-common/src/features/dashboards/state-managers/state-managers.ts b/web-common/src/features/dashboards/state-managers/state-managers.ts
index 1bbee34e9cb..7af1cf18b35 100644
--- a/web-common/src/features/dashboards/state-managers/state-managers.ts
+++ b/web-common/src/features/dashboards/state-managers/state-managers.ts
@@ -1,7 +1,7 @@
 import type { MetricsExplorerEntity } from "@rilldata/web-common/features/dashboards/stores/metrics-explorer-entity";
 import { writable, Writable, Readable, derived, get } from "svelte/store";
 import { getContext } from "svelte";
-import type { QueryClient } from "@tanstack/svelte-query";
+import type { QueryClient, QueryObserverResult } from "@tanstack/svelte-query";
 import type { Runtime } from "@rilldata/web-common/runtime-client/runtime-store";
 import {
   MetricsExplorerStoreType,
@@ -16,6 +16,14 @@ import {
 } from "./selectors";
 import { createStateManagerActions, type StateManagerActions } from "./actions";
 import type { DashboardCallbackExecutor } from "./actions/types";
+import {
+  ResourceKind,
+  useResource,
+} from "../../entity-management/resource-selectors";
+import type {
+  RpcStatus,
+  V1MetricsViewSpec,
+} from "@rilldata/web-common/runtime-client";
 
 export type StateManagers = {
   runtime: Writable<Runtime>;
@@ -57,6 +65,18 @@ export function createStateManagers({
     }
   );
 
+  const metricsSpecStore: Readable<
+    QueryObserverResult<V1MetricsViewSpec, RpcStatus>
+  > = derived([runtime, metricsViewNameStore], ([r, metricViewName], set) => {
+    useResource(
+      r.instanceId,
+      metricViewName,
+      ResourceKind.MetricsView,
+      (data) => data.metricsView?.state?.validSpec,
+      queryClient
+    ).subscribe(set);
+  });
+
   const updateDashboard = (
     callback: (metricsExplorer: MetricsExplorerEntity) => void
   ) => {
@@ -69,13 +89,20 @@ export function createStateManagers({
     runtime: runtime,
     metricsViewName: metricsViewNameStore,
     metricsStore: metricsExplorerStore,
+
     queryClient,
     dashboardStore,
     setMetricsViewName: (name) => {
       metricsViewNameStore.set(name);
     },
     updateDashboard,
-    selectors: createStateManagerReadables(dashboardStore),
+    /**
+     * A collection of Readables that can be used to select data from the dashboard.
+     */
+    selectors: createStateManagerReadables(dashboardStore, metricsSpecStore),
+    /**
+     * A collection of functions that update the dashboard data model.
+     */
     actions: createStateManagerActions(updateDashboard),
   };
 }
diff --git a/web-common/src/features/dashboards/time-series/MeasureChart.svelte b/web-common/src/features/dashboards/time-series/MeasureChart.svelte
index 3e604d494bb..f2a152df5b5 100644
--- a/web-common/src/features/dashboards/time-series/MeasureChart.svelte
+++ b/web-common/src/features/dashboards/time-series/MeasureChart.svelte
@@ -32,11 +32,8 @@
   import ChartBody from "./ChartBody.svelte";
   import { metricsExplorerStore } from "@rilldata/web-common/features/dashboards/stores/dashboard-stores";
   import DimensionValueMouseover from "@rilldata/web-common/features/dashboards/time-series/DimensionValueMouseover.svelte";
-  import {
-    FormatPreset,
-    humanizeDataType,
-    formatPresetToNumberKind,
-  } from "../humanize-numbers";
+  import { createMeasureValueFormatter } from "@rilldata/web-common/lib/number-formatting/format-measure-value";
+  import { numberKindForMeasure } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
 
   export let measure: MetricsViewSpecMeasureV2;
   export let metricViewName: string;
@@ -67,9 +64,8 @@
   export let mouseoverTimeFormat: (d: number | Date | string) => string = (v) =>
     v.toString();
 
-  $: mouseoverFormat = (value) =>
-    humanizeDataType(value, measure?.formatPreset as FormatPreset);
-  $: numberKind = formatPresetToNumberKind(measure?.formatPreset);
+  $: mouseoverFormat = createMeasureValueFormatter(measure);
+  $: numberKind = numberKindForMeasure(measure);
 
   export let tweenProps = { duration: 400, easing: cubicOut };
 
diff --git a/web-common/src/features/dashboards/time-series/MeasureValueMouseover.svelte b/web-common/src/features/dashboards/time-series/MeasureValueMouseover.svelte
index d3f3efa0679..f8c965d8354 100644
--- a/web-common/src/features/dashboards/time-series/MeasureValueMouseover.svelte
+++ b/web-common/src/features/dashboards/time-series/MeasureValueMouseover.svelte
@@ -2,8 +2,9 @@
   import { WithTween } from "@rilldata/web-common/components/data-graphic/functional-components";
   import WithGraphicContexts from "@rilldata/web-common/components/data-graphic/functional-components/WithGraphicContexts.svelte";
   import MultiMetricMouseoverLabel from "@rilldata/web-common/components/data-graphic/marks/MultiMetricMouseoverLabel.svelte";
-  import { formatMeasurePercentageDifference } from "@rilldata/web-common/features/dashboards/humanize-numbers";
+
   import { NumberKind } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
+  import { formatMeasurePercentageDifference } from "@rilldata/web-common/lib/number-formatting/percentage-formatter";
   import { numberPartsToString } from "@rilldata/web-common/lib/number-formatting/utils/number-parts-utils";
   import { fade } from "svelte/transition";
   export let point;
@@ -24,15 +25,10 @@
 
   $: comparisonIsPositive = diff >= 0;
 
-  $: isDiffValid = !isNaN(
-    formatMeasurePercentageDifference((y - comparisonY) / comparisonY)?.int
-  );
+  $: isDiffValid = !isNaN(diff);
 
   $: diffLabel =
-    isDiffValid &&
-    numberPartsToString(
-      formatMeasurePercentageDifference((y - comparisonY) / comparisonY)
-    );
+    isDiffValid && numberPartsToString(formatMeasurePercentageDifference(diff));
 
   let lastAvailableCurrentY = 0;
   let lastAvailableComparisonY;
diff --git a/web-common/src/lib/formatters.ts b/web-common/src/lib/formatters.ts
index 63280829287..ca7b9c42b2b 100644
--- a/web-common/src/lib/formatters.ts
+++ b/web-common/src/lib/formatters.ts
@@ -200,7 +200,7 @@ export function formatDataType(value: unknown, type: string) {
 export function formatDataTypeAsDuckDbQueryString(
   value: unknown,
   type: string
-) {
+): string {
   if (value === undefined) return "";
   if (
     INTEGERS.has(type) ||
@@ -208,7 +208,7 @@ export function formatDataTypeAsDuckDbQueryString(
     CATEGORICALS.has(type) ||
     FLOATS.has(type)
   ) {
-    return value;
+    return value.toString();
   } else if (DATES.has(type)) {
     // NOTE: `DATE` must come before `TIMESTAMP` in this list
     // because `DATE` is a subset of `TIMESTAMP`.
diff --git a/web-common/src/lib/number-formatting/format-measure-value.ts b/web-common/src/lib/number-formatting/format-measure-value.ts
new file mode 100644
index 00000000000..7ad87e883be
--- /dev/null
+++ b/web-common/src/lib/number-formatting/format-measure-value.ts
@@ -0,0 +1,90 @@
+import type { MetricsViewSpecMeasureV2 } from "@rilldata/web-common/runtime-client";
+import { format as d3format } from "d3-format";
+import {
+  FormatPreset,
+  formatPresetToNumberKind,
+  type FormatterFactoryOptions,
+} from "./humanizer-types";
+import {
+  formatMsInterval,
+  formatMsToDuckDbIntervalString,
+} from "./strategies/intervals";
+import { humanizedFormatterFactory } from "./humanizer";
+
+/**
+ * This function is intended to provides a compact,
+ * potentially lossy, humanized string representation of a number.
+ */
+function humanizeDataType(value: number, type: FormatPreset): string {
+  const numberKind = formatPresetToNumberKind(type);
+
+  let innerOptions: FormatterFactoryOptions;
+
+  if (type === FormatPreset.NONE) {
+    innerOptions = {
+      strategy: "none",
+      numberKind,
+      padWithInsignificantZeros: false,
+    };
+  } else if (type === FormatPreset.INTERVAL) {
+    return formatMsInterval(value);
+  } else {
+    innerOptions = {
+      strategy: "default",
+      numberKind,
+    };
+  }
+  return humanizedFormatterFactory([value], innerOptions).stringFormat(value);
+}
+
+/**
+ * This function is intended to provide a lossless
+ * humanized string representation of a number in cases
+ * where a raw number will be meaningless to the user.
+ */
+function humanizeDataTypeUnabridged(value: number, type: FormatPreset): string {
+  if (type === FormatPreset.INTERVAL) {
+    return formatMsToDuckDbIntervalString(value as number);
+  }
+  return value.toString();
+}
+
+/**
+ * This higher-order function takes a measure spec and returns
+ * a function appropriate for formatting values from that measure.
+ *
+ * As of October 2023, all measure values supplied to the client
+ * are in the form of a number, so this formatting function will only
+ * accept numeric inputs.
+ */
+export const createMeasureValueFormatter = (
+  measureSpec: MetricsViewSpecMeasureV2,
+  useUnabridged = false
+): ((value: number) => string) => {
+  const humanizer = useUnabridged
+    ? humanizeDataTypeUnabridged
+    : humanizeDataType;
+
+  // Return and empty string if measureSpec is not provided.
+  // This may e.g. be the case during the initial render of a dashboard,
+  // when a measureSpec has not yet loaded from a metadata query.
+  if (measureSpec === undefined) return (_value: number) => "";
+
+  // Use the d3 formatter if it is provided and valid
+  // (d3 throws an error if the format is invalid).
+  // otherwise, use the humanize formatter.
+  if (measureSpec.formatD3 !== undefined && measureSpec.formatD3 !== "") {
+    try {
+      return d3format(measureSpec.formatD3);
+    } catch (error) {
+      return (value: number) => humanizer(value, FormatPreset.HUMANIZE);
+    }
+  }
+
+  // finally, use the formatPreset.
+  const formatPreset =
+    measureSpec.formatPreset && measureSpec.formatPreset !== ""
+      ? (measureSpec.formatPreset as FormatPreset)
+      : FormatPreset.HUMANIZE;
+  return (value: number) => humanizer(value, formatPreset);
+};
diff --git a/web-common/src/lib/number-formatting/humanizer-types.ts b/web-common/src/lib/number-formatting/humanizer-types.ts
index 86a061937b4..521ac59f4bd 100644
--- a/web-common/src/lib/number-formatting/humanizer-types.ts
+++ b/web-common/src/lib/number-formatting/humanizer-types.ts
@@ -1,36 +1,16 @@
-export type NumberFormatter = (x: number) => RichFormatNumber;
+import type { MetricsViewSpecMeasureV2 } from "@rilldata/web-common/runtime-client";
 
-export type NumberParts = {
-  neg?: "-";
-  dollar?: "$";
-  int: string;
-  dot: "" | ".";
-  frac: string;
-  suffix: string;
-  percent?: "%";
-  approxZero?: boolean;
-};
-
-export type NumericRange = {
-  min: number;
-  max: number;
-};
-
-// FIXME: we can add these types back in if we want to implement
-// alignment. If we decide that we don't want to pursue that,
-// we can remove this commented code
-// export type PxWidthLookupFn = (str: string | undefined) => number;
-// export type FormatterWidths = {
-//   left: number;
-//   dot: number;
-//   frac: number;
-//   suffix: number;
-// };
-
-export type RichFormatNumber = {
-  number: number;
-  splitStr: NumberParts;
-};
+/**
+ * This enum represents all of the valid strings that can be
+ * used in the `format_preset` field of a measure definition.
+ */
+export enum FormatPreset {
+  HUMANIZE = "humanize",
+  NONE = "none",
+  CURRENCY = "currency_usd",
+  PERCENTAGE = "percentage",
+  INTERVAL = "interval_ms",
+}
 
 /**
  * This enum represents the semantic kind of the number being
@@ -38,14 +18,94 @@ export type RichFormatNumber = {
  * formatted, though it can inform formatting).
  */
 export enum NumberKind {
+  /**
+   * A real number with units of US Dollars. Note that this
+   * does not imply any restriction on the range of the number;
+   * ANY positive or negative real number of ANY SIZE can have
+   * this units.
+   */
   DOLLAR = "DOLLAR",
-  // NOTE: PERCENT formatter assumes numbers have not
-  // already been multiplied by 100
+
+  /**
+   * A real number with units of "%". Note that this
+   * does not imply any restriction on the range of the number;
+   * ANY positive or negative real number of ANY SIZE can have
+   * these units.
+   * Additionally, `PERCENT` NumberKind assumes numbers have not
+   * already been multiplied by 100; this will need to be applied
+   * for formatting.
+   */
   PERCENT = "PERCENT",
+
+  /**
+   * A real number that represents a time interval with
+   * millisecond units.
+   * This is a special case that is handled
+   * by a custom formatter.
+   */
   INTERVAL = "INTERVAL",
+
+  /**
+   * A generic real number that can be formatted in any way.
+   */
   ANY = "ANY",
 }
 
+/**
+ * This function converts a FormatPreset to a NumberKind.
+ */
+export const formatPresetToNumberKind = (type: FormatPreset) => {
+  switch (type) {
+    case FormatPreset.CURRENCY:
+      return NumberKind.DOLLAR;
+
+    case FormatPreset.PERCENTAGE:
+      return NumberKind.PERCENT;
+
+    case FormatPreset.INTERVAL:
+      return NumberKind.INTERVAL;
+
+    case FormatPreset.NONE:
+    case FormatPreset.HUMANIZE:
+      return NumberKind.ANY;
+    default:
+      throw new Error(
+        `All FormatPreset variants must be explicity handled in formatPresetToNumberKind, got ${
+          type === "" ? "empty string" : type
+        }`
+      );
+  }
+};
+
+/**
+ * Gets the NumberKind for a measure, based on its formatPreset.
+ *
+ * This wrapper around formatPresetToNumberKind allows that innner
+ * function to maintain a more strict type signature.
+ */
+export const numberKindForMeasure = (measure: MetricsViewSpecMeasureV2) => {
+  if (
+    !measure ||
+    measure.formatPreset === undefined ||
+    measure.formatPreset === ""
+  ) {
+    // If no preset is specified, default to ANY
+    return NumberKind.ANY;
+  }
+  return formatPresetToNumberKind(measure.formatPreset as FormatPreset);
+};
+
+export type NumberParts = {
+  neg?: "-";
+  dollar?: "$";
+  int: string;
+  dot: "" | ".";
+  frac: string;
+  suffix: string;
+  percent?: "%";
+  approxZero?: boolean;
+};
+
 /**
  * This is a no-op strategy that
  */
diff --git a/web-common/src/lib/number-formatting/percentage-formatter.ts b/web-common/src/lib/number-formatting/percentage-formatter.ts
new file mode 100644
index 00000000000..1379dda899a
--- /dev/null
+++ b/web-common/src/lib/number-formatting/percentage-formatter.ts
@@ -0,0 +1,52 @@
+import { NumberKind, NumberParts } from "./humanizer-types";
+import { PerRangeFormatter } from "./strategies/per-range";
+
+/**
+ * Formatter for the comparison percentage differences.
+ * Input values are given as proportions, not percentages
+ * (not yet multiplied by 100). However, inputs may be
+ * any real number, not just a proper fraction, so negative
+ * values and values of arbitrarily large magnitudes must be
+ * supported.
+ */
+export function formatMeasurePercentageDifference(value: number): NumberParts {
+  if (value === 0) {
+    return { percent: "%", int: "0", dot: "", frac: "", suffix: "" };
+  } else if (value < 0.005 && value > 0) {
+    return {
+      percent: "%",
+      int: "0",
+      dot: "",
+      frac: "",
+      suffix: "",
+      approxZero: true,
+    };
+  } else if (value > -0.005 && value < 0) {
+    return {
+      percent: "%",
+      neg: "-",
+      int: "0",
+      dot: "",
+      frac: "",
+      suffix: "",
+      approxZero: true,
+    };
+  }
+
+  const factory = new PerRangeFormatter([], {
+    strategy: "perRange",
+    rangeSpecs: [
+      {
+        minMag: -2,
+        supMag: 3,
+        maxDigitsRight: 1,
+        baseMagnitude: 0,
+        padWithInsignificantZeros: false,
+      },
+    ],
+    defaultMaxDigitsRight: 0,
+    numberKind: NumberKind.PERCENT,
+  });
+
+  return factory["partsFormat"](value);
+}
diff --git a/web-common/src/lib/number-formatting/proper-fraction-formatter.ts b/web-common/src/lib/number-formatting/proper-fraction-formatter.ts
new file mode 100644
index 00000000000..ca99e26206f
--- /dev/null
+++ b/web-common/src/lib/number-formatting/proper-fraction-formatter.ts
@@ -0,0 +1,48 @@
+import { NumberKind, type NumberParts } from "./humanizer-types";
+import { formatMeasurePercentageDifference } from "./percentage-formatter";
+import { PerRangeFormatter } from "./strategies/per-range";
+
+/**
+ * This function is used to format proper fractions, which
+ * must be between 0 and 1, as percentages. It is used in
+ * formatting the percentage of total column, as well as
+ * other contexts where the input number is guaranteed to
+ * be a proper fraction.
+ *
+ * If the input number is not a proper fraction, this function
+ * will `console.warn` (since this is not worth crashing over)
+ * and use formatMeasurePercentageDifference
+ * instead, though that will likely result in a badly formatted
+ * output, since formatting of proper fractions may make
+ * assumptions that are violated by improper fractions.
+ */
+export function formatProperFractionAsPercent(value: number): NumberParts {
+  if (value < 0 || value > 1) {
+    console.warn(
+      `formatProperFractionAsPercent received invalid input: ${value}. Value must be between 0 and 1.`
+    );
+    return formatMeasurePercentageDifference(value);
+  }
+
+  if (value < 0.01 && value !== 0) {
+    return { percent: "%", int: "<1", dot: "", frac: "", suffix: "" };
+  } else if (value === 0) {
+    return { percent: "%", int: "0", dot: "", frac: "", suffix: "" };
+  }
+  const factory = new PerRangeFormatter([], {
+    strategy: "perRange",
+    rangeSpecs: [
+      {
+        minMag: -2,
+        supMag: 3,
+        maxDigitsRight: 1,
+        baseMagnitude: 0,
+        padWithInsignificantZeros: false,
+      },
+    ],
+    defaultMaxDigitsRight: 0,
+    numberKind: NumberKind.PERCENT,
+  });
+
+  return factory["partsFormat"](value);
+}
diff --git a/web-common/src/lib/number-formatting/utils/max-widths-for-number-parts.ts b/web-common/src/lib/number-formatting/utils/max-widths-for-number-parts.ts
deleted file mode 100644
index c3a5e1407bf..00000000000
--- a/web-common/src/lib/number-formatting/utils/max-widths-for-number-parts.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-export {};
-// // FIXME: we can add the content of this file back in if we want to implement
-// // alignment. If we decide that we don't want to pursue that,
-// // we can remove this file
-
-// import type {
-//   FormatterFactory,
-//   NumberFormatter,
-//   NumberParts,
-//   NumberKind,
-//   FormatterWidths,
-//   PxWidthLookupFn,
-// } from "../humanizer-types";
-
-// function maxWidthsForSplitStrs(
-//   numPartsArr: NumberParts[],
-//   widthLookupFn: PxWidthLookupFn
-// ): FormatterWidths {
-//   let widths: FormatterWidths = { left: 0, dot: 0, frac: 0, suffix: 0 };
-//   numPartsArr.forEach((ss) => {
-//     widths.left = Math.max(
-//       widths.left,
-//       widthLookupFn(ss.neg) + widthLookupFn(ss.dollar) + widthLookupFn(ss.int)
-//     );
-
-//     widths.dot = Math.max(widths.dot, widthLookupFn(ss.dot));
-
-//     widths.frac = Math.max(widths.left, widthLookupFn(ss.frac));
-
-//     widths.suffix = Math.max(
-//       widths.left,
-//       widthLookupFn(ss.suffix) + widthLookupFn(ss.percent)
-//     );
-//   });
-
-//   return widths;
-// }
-
-// export const maxPxWidthsForSplitStrs = (
-//   numPartsArr: NumberParts[],
-//   pxWidthLookupFn: PxWidthLookupFn
-// ): FormatterWidths => maxWidthsForSplitStrs(numPartsArr, pxWidthLookupFn);
-
-// export const maxCharWidthsForSplitStrs = (numPartsArr: NumberParts[]) =>
-//   maxWidthsForSplitStrs(
-//     numPartsArr,
-//     (str: string | undefined): number => str?.length || 0
-//   );
-
-// // export function maxCharWidthsForSplitStrs(
-// //   numPartsArr: NumberStringParts[]
-// // ): FormatterWidths {
-// //   let widths: FormatterWidths = { left: 0, dot: 0, frac: 0, suffix: 0 };
-// //   numPartsArr.forEach((ss) => {
-// //     widths.left = Math.max(
-// //       widths.left,
-// //       ss.neg.length + (ss?.dollar.length || 0) + ss.int.length
-// //     );
-
-// //     widths.dot = Math.max(widths.dot, ss.dot.length);
-
-// //     widths.frac = Math.max(widths.left, ss.frac.length);
-
-// //     widths.suffix = Math.max(
-// //       widths.left,
-// //       ss.suffix.length + (ss?.percent.length || 0)
-// //     );
-// //   });
-
-// //   return widths;
-// // }
-
-// // export function maxPxWidthsForSplitStrs(
-// //   numPartsArr: NumberStringParts[],
-// //   pxWidthLookupFn: PxWidthLookupFn
-// // ): FormatterWidths {
-// //   let widths: FormatterWidths = { left: 0, dot: 0, frac: 0, suffix: 0 };
-// //   numPartsArr.forEach((ss) => {
-// //     widths.left = Math.max(
-// //       widths.left,
-// //       pxWidthLookupFn(ss.neg) +
-// //         pxWidthLookupFn(ss.dollar) +
-// //         pxWidthLookupFn(ss.int)
-// //     );
-
-// //     widths.dot = Math.max(widths.dot, pxWidthLookupFn(ss.dot));
-
-// //     widths.frac = Math.max(widths.left, pxWidthLookupFn(ss.frac));
-
-// //     widths.suffix = Math.max(
-// //       widths.left,
-// //       pxWidthLookupFn(ss.suffix) + pxWidthLookupFn(ss.percent)
-// //     );
-// //   });
-
-// //   return widths;
-// // }
diff --git a/web-local/src/lib/types.ts b/web-local/src/lib/types.ts
index 1ef7a53135e..0a4680dedd9 100644
--- a/web-local/src/lib/types.ts
+++ b/web-local/src/lib/types.ts
@@ -1,15 +1,11 @@
 import type { SortDirection } from "@rilldata/web-common/features/dashboards/proto-state/derived-types";
 import type { SvelteComponent } from "svelte";
 
-export interface ProfileColumn {
+export interface VirtualizedTableColumns {
   name: string;
   type: string;
   largestStringLength?: number;
   summary?: ProfileColumnSummary | any;
-  nullCount?: number;
-}
-
-export interface VirtualizedTableColumns extends ProfileColumn {
   label?: string | typeof SvelteComponent;
   total?: number;
   description?: string;
diff --git a/web-local/src/routes/dev/data-graphic/empty-timeseries.svelte b/web-local/src/routes/dev/data-graphic/empty-timeseries.svelte
deleted file mode 100644
index 0218cd10776..00000000000
--- a/web-local/src/routes/dev/data-graphic/empty-timeseries.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script>
-  import { SimpleDataGraphic } from "@rilldata/web-common/components/data-graphic/elements";
-  import { WithBisector } from "@rilldata/web-common/components/data-graphic/functional-components";
-  import { Axis } from "@rilldata/web-common/components/data-graphic/guides";
-  import { FormatPreset } from "@rilldata/web-common/features/dashboards/humanize-numbers";
-  import TimeSeriesBody from "@rilldata/web-common/features/dashboards/workspace/metrics-container/TimeSeriesBody.svelte";
-  import TimeSeriesChartContainer from "@rilldata/web-common/features/dashboards/workspace/metrics-container/TimeSeriesChartContainer.svelte";
-
-  const startValue = new Date("2020-08-04T18:30:00.000Z");
-  const endValue = new Date("2020-08-05T00:29:59.000Z");
-
-  let mouseoverValue = undefined;
-
-  const key = `${startValue}` + `${endValue}`;
-
-  const badData = [
-    {
-      measure_0: 0,
-      ts: new Date("2020-08-04T18:30:00.000Z"),
-    },
-  ];
-
-  const goodData = [
-    {
-      measure_0: 135,
-      ts: "2020-08-04T18:30:00.000Z",
-    },
-    {
-      measure_0: 125,
-      ts: "2020-08-04T19:30:00.000Z",
-    },
-    {
-      measure_0: 149,
-      ts: "2020-08-04T20:30:00.000Z",
-    },
-    {
-      measure_0: 132,
-      ts: "2020-08-04T21:30:00.000Z",
-    },
-    {
-      measure_0: 184,
-      ts: "2020-08-04T22:30:00.000Z",
-    },
-    {
-      measure_0: 74,
-      ts: "2020-08-04T23:30:00.000Z",
-    },
-    {
-      measure_0: 60,
-      ts: "2020-08-05T00:29:59.000Z",
-    },
-  ].map((di) => {
-    return { ...di, ts: new Date(di.ts) };
-  });
-
-  let data = goodData;
-  let option = "good";
-
-  function onSelectChange() {
-    if (option === "good") data = goodData;
-    else data = badData;
-  }
-</script>
-
-<select bind:value={option} on:change={onSelectChange}>
-  <option value="good"> good data </option>
-  <option value="bad"> bad data </option>
-</select>
-
-<WithBisector
-  {data}
-  callback={(datum) => datum.ts}
-  value={mouseoverValue?.x}
-  let:point
->
-  <TimeSeriesChartContainer start={startValue} end={endValue}>
-    <div style:padding-left="10px" style:padding-top="30px">
-      {#if point?.ts}
-        <div class="absolute text-gray-600">
-          {new Intl.DateTimeFormat("en-US", {
-            dateStyle: "medium",
-            timeStyle: "medium",
-          }).format(point?.ts)}
-        </div>
-        &nbsp;
-      {:else}
-        &nbsp;
-      {/if}
-    </div>
-    <div />
-    <SimpleDataGraphic
-      height={32}
-      top={34}
-      bottom={0}
-      xMin={startValue}
-      xMax={endValue}
-    >
-      <Axis superlabel side="top" />
-    </SimpleDataGraphic>
-    <div />
-    <TimeSeriesBody
-      bind:mouseoverValue
-      formatPreset={FormatPreset.HUMANIZE}
-      {data}
-      {key}
-      mouseover={point}
-      accessor="measure_0"
-      start={startValue}
-      end={endValue}
-    />
-  </TimeSeriesChartContainer>
-</WithBisector>