diff --git a/docs/docs/reference/project-files/dashboards.md b/docs/docs/reference/project-files/dashboards.md
index 3ed0690aaeb..3d9fe2ff305 100644
--- a/docs/docs/reference/project-files/dashboards.md
+++ b/docs/docs/reference/project-files/dashboards.md
@@ -41,13 +41,12 @@ _**`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_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
+  - _**`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
 
 _**`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 83d94fdb0b6..9df6b90cf2d 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 199915b31bd..82384154842 100644
--- a/web-common/src/components/data-types/MeasureChange.svelte
+++ b/web-common/src/components/data-types/MeasureChange.svelte
@@ -5,6 +5,9 @@
   export let dark = false;
   export let customStyle = "";
   export let value;
+
+  $: isNegative =
+    (typeof value === "string" && value?.startsWith("-")) || value < 0;
 </script>
 
 <Base
@@ -13,5 +16,7 @@
     'block text-right'}"
   {dark}
 >
-  {value}
+  <slot name="value">
+    {!isNegative ? "+" : ""}{value}
+  </slot>
 </Base>
diff --git a/web-common/src/features/dashboards/big-number/MeasureBigNumber.svelte b/web-common/src/features/dashboards/big-number/MeasureBigNumber.svelte
index 68fc242e2ce..a9d8739b3dd 100644
--- a/web-common/src/features/dashboards/big-number/MeasureBigNumber.svelte
+++ b/web-common/src/features/dashboards/big-number/MeasureBigNumber.svelte
@@ -10,11 +10,13 @@
   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;
@@ -27,32 +29,26 @@
 
   $: description =
     measure?.description || measure?.label || measure?.expression;
-
-  $: measureValueFormatter = createMeasureValueFormatter(measure);
-  $: measureValueFormatterUnabridged = createMeasureValueFormatter(
-    measure,
-    true
-  );
+  $: formatPreset =
+    (measure?.formatPreset as FormatPreset) || FormatPreset.HUMANIZE;
 
   $: 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 =
-    valueIsPresent && comparisonValue !== undefined
-      ? value - comparisonValue
-      : 0;
-  $: noChange = !comparisonValue;
-  $: isComparisonPositive = diff >= 0;
+  $: diff = comparisonValue ? value - comparisonValue : false;
+  $: noChange = !diff;
 
-  $: formattedDiff = `${isComparisonPositive ? "+" : ""}${measureValueFormatter(
-    diff
+  $: formattedDiff = `${isComparisonPositive ? "+" : ""}${humanizeDataType(
+    diff,
+    formatPreset
   )}`;
 
   /** when the measure is a percentage, we don't show a percentage change. */
-  $: measureIsPercentage = measure?.formatPreset === FormatPreset.PERCENTAGE;
+  $: measureIsPercentage = formatPreset === FormatPreset.PERCENTAGE;
 </script>
 
 <button
@@ -83,11 +79,11 @@
         <Tooltip distance={8} location="bottom" alignment="start">
           <div class="w-max">
             <WithTween {value} tweenProps={{ duration: 500 }} let:output>
-              {measureValueFormatter(output)}
+              {humanizeDataType(output, formatPreset)}
             </WithTween>
           </div>
           <TooltipContent slot="tooltip-content">
-            {measureValueFormatterUnabridged(value)}
+            {humanizeDataTypeExpanded(value, formatPreset)}
             <TooltipDescription>
               the aggregate value over the current time period
             </TooltipDescription>
@@ -138,7 +134,7 @@
               {:else}
                 {TIME_COMPARISON[comparisonOption].shorthand}
                 <span class="font-semibold">
-                  {measureValueFormatter(comparisonValue)}
+                  {humanizeDataType(comparisonValue, formatPreset)}
                 </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 c19b09fd519..d9c0238dade 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,7 +11,11 @@ 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";
 
@@ -21,9 +25,6 @@ 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(
@@ -339,20 +340,17 @@ 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 (!isPercent) {
+    if (selectedMeasure?.formatPreset != FormatPreset.PERCENTAGE) {
       percentOfTotalSpliceIndex = 3;
       columnNames.splice(sortByColumnIndex + 2, 0, `${name}_delta_perc`);
     }
   }
-  // Only push percentage-of-total if selected measure is
-  // validPercentOfTotal and not a percentage
-  if (validPercentOfTotal && !isPercent) {
+  if (validPercentOfTotal) {
     columnNames.splice(
       sortByColumnIndex + percentOfTotalSpliceIndex,
       0,
@@ -378,8 +376,8 @@ export function prepareDimensionTableRows(
 ): DimensionTableRow[] {
   if (!queryRows || !queryRows.length) return [];
 
-  const formattersForMeasures = Object.fromEntries(
-    measures.map((m) => [m.name, createMeasureValueFormatter(m)])
+  const formatMap = Object.fromEntries(
+    measures.map((m) => [m.name, m.formatPreset as FormatPreset])
   );
 
   const tableRows: DimensionTableRow[] = queryRows.map((row) => {
@@ -391,7 +389,7 @@ export function prepareDimensionTableRows(
     const formattedVals: [string, string | number][] = row.measureValues.map(
       (m) => [
         "__formatted_" + m.measureName,
-        formattersForMeasures[m.measureName](m.baseValue as number),
+        humanizeDimTableValue(m.baseValue as number, formatMap[m.measureName]),
       ]
     );
 
@@ -406,11 +404,12 @@ export function prepareDimensionTableRows(
         (m) => m.measureName === activeMeasureName
       ) as V1MetricsViewComparisonValue;
 
-      (rowOut[`${activeMeasureName}_delta`] = formattersForMeasures[
-        activeMeasureName
-      ](activeMeasure.deltaAbs as number)),
-        (rowOut[`${activeMeasureName}_delta_perc`] =
-          formatMeasurePercentageDifference(activeMeasure.deltaRel as number));
+      rowOut[`${activeMeasureName}_delta`] = humanizeDimTableValue(
+        activeMeasure.deltaAbs as number,
+        formatMap[activeMeasureName]
+      );
+      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
new file mode 100644
index 00000000000..9a7e5a93b3c
--- /dev/null
+++ b/web-common/src/features/dashboards/humanize-numbers.ts
@@ -0,0 +1,216 @@
+// 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 3fdc8e4159d..262cc5da3c2 100644
--- a/web-common/src/features/dashboards/leaderboard/ContextColumnValue.svelte
+++ b/web-common/src/features/dashboards/leaderboard/ContextColumnValue.svelte
@@ -1,48 +1,46 @@
 <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 { 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";
+  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";
 
-  export let itemData: LeaderboardItemData;
+  export let formattedValue: string | NumberParts | PERC_DIFF;
+  export let contextColumn: LeaderboardContextColumn;
 
-  const {
-    selectors: {
-      contextColumn: {
-        widthPx,
-        isDeltaAbsolute,
-        isDeltaPercent,
-        isPercentOfTotal,
-        isHidden,
-      },
-      numberFormat: { activeMeasureFormatter },
-    },
-  } = getStateManagers();
+  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);
 
-  $: negativeChange = itemData.deltaRel !== null && itemData.deltaAbs < 0;
-  $: noChangeData = itemData.deltaRel === null;
+  $: 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.`
+    );
+  }
 </script>
 
-{#if !$isHidden}
-  <div style:width={$widthPx}>
-    {#if $isPercentOfTotal}
-      <PercentageChange
-        value={formatProperFractionAsPercent(itemData.pctOfTotal)}
-      />
-    {:else if noChangeData}
+{#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}
       <span class="opacity-50 italic" style:font-size=".925em">no data</span>
-    {:else if $isDeltaPercent}
-      <PercentageChange
-        value={formatMeasurePercentageDifference(itemData.deltaRel)}
-      />
-    {:else if $isDeltaAbsolute}
-      <FormattedDataType
-        type="INTEGER"
-        value={$activeMeasureFormatter(itemData.deltaAbs)}
-        customStyle={negativeChange ? "text-red-500" : ""}
-      />
+    {:else}
+      <FormattedDataType type="INTEGER" value={formattedValue} {customStyle} />
     {/if}
   </div>
 {/if}
diff --git a/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte b/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte
index 2dbb356a4b1..3f243a6545d 100644
--- a/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte
+++ b/web-common/src/features/dashboards/leaderboard/Leaderboard.svelte
@@ -25,6 +25,7 @@
     metricsExplorerStore,
     useDashboardStore,
   } from "web-common/src/features/dashboards/stores/dashboard-stores";
+  import type { FormatPreset } from "../humanize-numbers";
   import LeaderboardHeader from "./LeaderboardHeader.svelte";
   import {
     LeaderboardItemData,
@@ -32,7 +33,10 @@
     prepareLeaderboardItemData,
   } from "./leaderboard-utils";
   import LeaderboardListItem from "./LeaderboardListItem.svelte";
-  import { prepareSortedQueryBody } from "../dashboard-utils";
+  import {
+    getDimensionColumn,
+    prepareSortedQueryBody,
+  } from "../dashboard-utils";
 
   export let metricViewName: string;
   export let dimensionName: string;
@@ -43,9 +47,10 @@
   export let referenceValue: number;
   export let unfilteredTotal: number;
 
-  let slice = 7;
+  export let formatPreset: FormatPreset;
+  export let isSummableMeasure = false;
 
-  const stateManagers = getStateManagers();
+  let slice = 7;
 
   $: dashboardStore = useDashboardStore(metricViewName);
 
@@ -63,6 +68,7 @@
   let dimension: MetricsViewDimension;
   $: dimension = $dimensionQuery?.data;
   $: displayName = dimension?.label || dimension?.name;
+  $: dimensionColumn = getDimensionColumn(dimension);
 
   $: measureQuery = useMetaMeasure(
     $runtime.instanceId,
@@ -83,7 +89,7 @@
       ?.in ?? [];
   $: atLeastOneActive = !!activeValues?.length;
 
-  const timeControlsStore = useTimeControlStore(stateManagers);
+  const timeControlsStore = useTimeControlStore(getStateManagers());
 
   function selectDimension(dimensionName) {
     metricsExplorerStore.setMetricDimensionName(metricViewName, dimensionName);
@@ -103,6 +109,8 @@
   $: isBeingCompared =
     $dashboardStore?.selectedComparisonDimension === dimensionName;
 
+  $: contextColumn = $dashboardStore?.leaderboardContextColumn;
+
   $: sortAscending = $dashboardStore.sortDirection === SortDirection.ASCENDING;
   $: sortType = $dashboardStore.dashboardSortType;
 
@@ -162,12 +170,15 @@
     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}
@@ -178,10 +189,13 @@
         {#each aboveTheFold as itemData (itemData.dimensionValue)}
           <LeaderboardListItem
             {itemData}
+            {contextColumn}
             {atLeastOneActive}
             {isBeingCompared}
             {filterExcludeMode}
+            {isSummableMeasure}
             {referenceValue}
+            {formatPreset}
             on:click
             on:keydown
             on:select-item
@@ -193,10 +207,13 @@
           {#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 26f5a47b48f..ba6cf35430c 100644
--- a/web-common/src/features/dashboards/leaderboard/LeaderboardDisplay.svelte
+++ b/web-common/src/features/dashboards/leaderboard/LeaderboardDisplay.svelte
@@ -16,8 +16,10 @@
     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;
 
@@ -60,6 +62,9 @@
     }
   );
 
+  $: formatPreset =
+    (activeMeasure?.formatPreset as FormatPreset) ?? FormatPreset.HUMANIZE;
+
   let referenceValue: number;
   $: if (activeMeasure?.name && $totalsQuery?.data?.data) {
     referenceValue = $totalsQuery.data.data?.[activeMeasure.name];
@@ -147,6 +152,8 @@
       <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 9aef911eda5..d378da96718 100644
--- a/web-common/src/features/dashboards/leaderboard/LeaderboardHeader.svelte
+++ b/web-common/src/features/dashboards/leaderboard/LeaderboardHeader.svelte
@@ -12,37 +12,26 @@
   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 = $sortedAscending ? "scale(1 -1)" : "scale(1 1)";
+  $: arrowTransform = sortAscending ? "scale(1 -1)" : "scale(1 1)";
 </script>
 
 <div class="flex flex-row items-center">
@@ -116,28 +105,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 min-w-[40px]"
+        class="shrink flex flex-row items-center justify-end"
         aria-label="Toggle sort leaderboards by value"
       >
-        #{#if $sortType === SortType.VALUE}
+        #{#if sortType === SortType.VALUE}
           <ArrowDown transform={arrowTransform} />
         {/if}
       </button>
 
-      {#if !$isHidden}
+      {#if contextColumn !== LeaderboardContextColumn.HIDDEN}
         <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={$widthPx}
+          style:width={contextColumnWidth(contextColumn)}
         >
-          {#if $isDeltaPercent}
+          {#if contextColumn === LeaderboardContextColumn.DELTA_PERCENT}
             <Delta /> %
-          {:else if $isDeltaAbsolute}
+          {:else if contextColumn === LeaderboardContextColumn.DELTA_ABSOLUTE}
             <Delta />
-          {:else if $isPercentOfTotal}
+          {:else if contextColumn === LeaderboardContextColumn.PERCENT}
             <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 3f85e4a960a..87745aebb45 100644
--- a/web-common/src/features/dashboards/leaderboard/LeaderboardListItem.svelte
+++ b/web-common/src/features/dashboards/leaderboard/LeaderboardListItem.svelte
@@ -1,4 +1,5 @@
 <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";
@@ -17,10 +18,13 @@
   import LeaderboardTooltipContent from "./LeaderboardTooltipContent.svelte";
 
   import LeaderboardItemFilterIcon from "./LeaderboardItemFilterIcon.svelte";
+  import { humanizeDataType } from "../humanize-numbers";
   import LongBarZigZag from "./LongBarZigZag.svelte";
-  import type { LeaderboardItemData } from "./leaderboard-utils";
+  import {
+    LeaderboardItemData,
+    formatContextColumnValue,
+  } from "./leaderboard-utils";
   import ContextColumnValue from "./ContextColumnValue.svelte";
-  import { getStateManagers } from "../state-managers/state-managers";
 
   export let itemData: LeaderboardItemData;
   $: label = itemData.dimensionValue;
@@ -28,23 +32,30 @@
   $: selected = itemData.selectedIndex >= 0;
   $: comparisonValue = itemData.prevValue;
 
+  export let contextColumn: LeaderboardContextColumn;
+
   export let atLeastOneActive = false;
   export let isBeingCompared = false;
   export let filterExcludeMode;
 
-  const {
-    numberFormat: { activeMeasureFormatter },
-    activeMeasure: { isSummableMeasure },
-  } = getStateManagers().selectors;
+  export let formatPreset;
 
+  /** 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 = $activeMeasureFormatter(measureValue);
+  $: formattedValue = humanizeDataType(measureValue, formatPreset);
+
+  $: contextColumnFormattedValue = formatContextColumnValue(
+    itemData,
+    contextColumn,
+    formatPreset
+  );
 
   $: previousValueString =
     comparisonValue !== undefined && comparisonValue !== null
-      ? $activeMeasureFormatter(comparisonValue)
+      ? humanizeDataType(comparisonValue, formatPreset)
       : undefined;
   $: showPreviousTimeValue = hovered && previousValueString !== undefined;
   // Super important special case: if there is not at least one "active" (selected) value,
@@ -56,7 +67,7 @@
 
   let renderedBarValue = 0; // should be between 0 and 1.
   $: {
-    renderedBarValue = $isSummableMeasure
+    renderedBarValue = isSummableMeasure
       ? referenceValue
         ? measureValue / referenceValue
         : 0
@@ -161,7 +172,10 @@
               value={formattedValue || measureValue}
             />
           </div>
-          <ContextColumnValue {itemData} />
+          <ContextColumnValue
+            formattedValue={contextColumnFormattedValue}
+            {contextColumn}
+          />
         </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 5998715f563..ef04476a6f0 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 24297cb8c0e..ebe2e27d4b1 100644
--- a/web-common/src/features/dashboards/leaderboard/leaderboard-utils.ts
+++ b/web-common/src/features/dashboards/leaderboard/leaderboard-utils.ts
@@ -3,8 +3,16 @@ 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
@@ -245,6 +253,47 @@ 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 ea389f0dcd9..f8047b4f2cb 100644
--- a/web-common/src/features/dashboards/state-managers/actions/index.ts
+++ b/web-common/src/features/dashboards/state-managers/actions/index.ts
@@ -30,9 +30,6 @@ 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
deleted file mode 100644
index dbf62952d05..00000000000
--- a/web-common/src/features/dashboards/state-managers/selectors/active-measure.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-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
deleted file mode 100644
index 76e69893421..00000000000
--- a/web-common/src/features/dashboards/state-managers/selectors/context-column.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-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
deleted file mode 100644
index 393aeed5201..00000000000
--- a/web-common/src/features/dashboards/state-managers/selectors/data-formatting.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-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 53c944de7e5..6b832e6f24c 100644
--- a/web-common/src/features/dashboards/state-managers/selectors/index.ts
+++ b/web-common/src/features/dashboards/state-managers/selectors/index.ts
@@ -2,87 +2,30 @@ 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>,
-  metricsSpecQueryResultStore: Readable<
-    QueryObserverResult<V1MetricsViewSpec, RpcStatus>
-  >
+  dashboardStore: Readable<MetricsExplorerEntity>
 ) => {
   return {
     /**
      * Readables related to the sorting state of the dashboard.
      */
-    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
-    ),
+    sorting: createReadablesFromSelectors(sortingSelectors, dashboardStore),
   };
 };
 
 function createReadablesFromSelectors<T extends SelectorFnsObj>(
   selectors: T,
-  dashboardStore: Readable<MetricsExplorerEntity>,
-  metricsSpecQueryResultStore: Readable<
-    QueryObserverResult<V1MetricsViewSpec, RpcStatus>
-  >
+  dashboardStore: Readable<MetricsExplorerEntity>
 ): ReadablesObj<T> {
   return Object.fromEntries(
     Object.entries(selectors).map(([key, selectorFn]) => [
       key,
-      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,
-          })
-      ),
+      derived(dashboardStore, selectorFn),
     ])
   ) 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 4d69f4e0f37..ed4b47ac4f0 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 { SelectorFnArgs } from "./types";
+import type { MetricsExplorerEntity } from "../../stores/metrics-explorer-entity";
 
 export const sortingSelectors = {
   /**
    * Gets the sort type for the dash (value, percent, delta, etc.)
    */
-  sortType: ({ dashboard }: SelectorFnArgs) => dashboard.dashboardSortType,
+  sortType: (dashboard: MetricsExplorerEntity) => dashboard.dashboardSortType,
 
   /**
    * true if the dashboard is sorted ascending, false otherwise.
    */
-  sortedAscending: ({ dashboard }: SelectorFnArgs) =>
+  sortedAscending: (dashboard: MetricsExplorerEntity) =>
     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 }: SelectorFnArgs) =>
+  sortMeasure: (dashboard: MetricsExplorerEntity) =>
     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 }: SelectorFnArgs) =>
+  sortedByDimensionValue: (dashboard: MetricsExplorerEntity) =>
     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 67e0402fb24..455fc07d998 100644
--- a/web-common/src/features/dashboards/state-managers/selectors/types.ts
+++ b/web-common/src/features/dashboards/state-managers/selectors/types.ts
@@ -1,25 +1,11 @@
 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> = (args: SelectorFnArgs) => T;
+export type SelectorFn<T> = (dashboard: MetricsExplorerEntity) => 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 7af1cf18b35..1bbee34e9cb 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, QueryObserverResult } from "@tanstack/svelte-query";
+import type { QueryClient } from "@tanstack/svelte-query";
 import type { Runtime } from "@rilldata/web-common/runtime-client/runtime-store";
 import {
   MetricsExplorerStoreType,
@@ -16,14 +16,6 @@ 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>;
@@ -65,18 +57,6 @@ 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
   ) => {
@@ -89,20 +69,13 @@ export function createStateManagers({
     runtime: runtime,
     metricsViewName: metricsViewNameStore,
     metricsStore: metricsExplorerStore,
-
     queryClient,
     dashboardStore,
     setMetricsViewName: (name) => {
       metricsViewNameStore.set(name);
     },
     updateDashboard,
-    /**
-     * 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.
-     */
+    selectors: createStateManagerReadables(dashboardStore),
     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 f2a152df5b5..3e604d494bb 100644
--- a/web-common/src/features/dashboards/time-series/MeasureChart.svelte
+++ b/web-common/src/features/dashboards/time-series/MeasureChart.svelte
@@ -32,8 +32,11 @@
   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 { createMeasureValueFormatter } from "@rilldata/web-common/lib/number-formatting/format-measure-value";
-  import { numberKindForMeasure } from "@rilldata/web-common/lib/number-formatting/humanizer-types";
+  import {
+    FormatPreset,
+    humanizeDataType,
+    formatPresetToNumberKind,
+  } from "../humanize-numbers";
 
   export let measure: MetricsViewSpecMeasureV2;
   export let metricViewName: string;
@@ -64,8 +67,9 @@
   export let mouseoverTimeFormat: (d: number | Date | string) => string = (v) =>
     v.toString();
 
-  $: mouseoverFormat = createMeasureValueFormatter(measure);
-  $: numberKind = numberKindForMeasure(measure);
+  $: mouseoverFormat = (value) =>
+    humanizeDataType(value, measure?.formatPreset as FormatPreset);
+  $: numberKind = formatPresetToNumberKind(measure?.formatPreset);
 
   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 f8c965d8354..d3f3efa0679 100644
--- a/web-common/src/features/dashboards/time-series/MeasureValueMouseover.svelte
+++ b/web-common/src/features/dashboards/time-series/MeasureValueMouseover.svelte
@@ -2,9 +2,8 @@
   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;
@@ -25,10 +24,15 @@
 
   $: comparisonIsPositive = diff >= 0;
 
-  $: isDiffValid = !isNaN(diff);
+  $: isDiffValid = !isNaN(
+    formatMeasurePercentageDifference((y - comparisonY) / comparisonY)?.int
+  );
 
   $: diffLabel =
-    isDiffValid && numberPartsToString(formatMeasurePercentageDifference(diff));
+    isDiffValid &&
+    numberPartsToString(
+      formatMeasurePercentageDifference((y - comparisonY) / comparisonY)
+    );
 
   let lastAvailableCurrentY = 0;
   let lastAvailableComparisonY;
diff --git a/web-common/src/lib/formatters.ts b/web-common/src/lib/formatters.ts
index ca7b9c42b2b..63280829287 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.toString();
+    return value;
   } 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
deleted file mode 100644
index 7ad87e883be..00000000000
--- a/web-common/src/lib/number-formatting/format-measure-value.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-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 521ac59f4bd..86a061937b4 100644
--- a/web-common/src/lib/number-formatting/humanizer-types.ts
+++ b/web-common/src/lib/number-formatting/humanizer-types.ts
@@ -1,16 +1,36 @@
-import type { MetricsViewSpecMeasureV2 } from "@rilldata/web-common/runtime-client";
+export type NumberFormatter = (x: number) => RichFormatNumber;
 
-/**
- * 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",
-}
+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 the semantic kind of the number being
@@ -18,94 +38,14 @@ export enum FormatPreset {
  * 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",
-
-  /**
-   * 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.
-   */
+  // NOTE: PERCENT formatter assumes numbers have not
+  // already been multiplied by 100
   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
deleted file mode 100644
index 1379dda899a..00000000000
--- a/web-common/src/lib/number-formatting/percentage-formatter.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-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
deleted file mode 100644
index ca99e26206f..00000000000
--- a/web-common/src/lib/number-formatting/proper-fraction-formatter.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-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
new file mode 100644
index 00000000000..c3a5e1407bf
--- /dev/null
+++ b/web-common/src/lib/number-formatting/utils/max-widths-for-number-parts.ts
@@ -0,0 +1,97 @@
+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 0a4680dedd9..1ef7a53135e 100644
--- a/web-local/src/lib/types.ts
+++ b/web-local/src/lib/types.ts
@@ -1,11 +1,15 @@
 import type { SortDirection } from "@rilldata/web-common/features/dashboards/proto-state/derived-types";
 import type { SvelteComponent } from "svelte";
 
-export interface VirtualizedTableColumns {
+export interface ProfileColumn {
   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
new file mode 100644
index 00000000000..0218cd10776
--- /dev/null
+++ b/web-local/src/routes/dev/data-graphic/empty-timeseries.svelte
@@ -0,0 +1,112 @@
+<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>