Revert "D3 custom formatter (#3268)" (#3283)

This reverts commit 07d69b5.

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)_

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;

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>

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>

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) {