@antelopejs/dms 0.7.21 → 0.8.1

package/frontend-vue/layers/dms-ui/app/components/form/components/InputCode.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageRequestUrl } from "../../../build/composables/page/pageUrlValues";
 import { getCurrentInstance, h, render } from "vue";
 import { useFormField } from "@nuxt/ui/composables/useFormField";
 import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
@@ -84,10 +85,11 @@ function checkSyntax(text: string): void {
 
 async function loadCompletions(): Promise<CodeEditorCompletion[]> {
   const fixed = props.completions ?? [];
-  if (!props.completionsUrl) return fixed;
+  const url = pageRequestUrl(props.completionsUrl);
+  if (!url) return fixed;
   const response = await $authFetch<
     CodeEditorCompletion[] | CompletionsResponse
-  >(props.completionsUrl).catch(() => []);
+  >(url).catch(() => []);
   const fetched = Array.isArray(response) ? response : (response.items ?? []);
   return [...fixed, ...fetched];
 }

package/frontend-vue/layers/dms-ui/app/components/form/components/InputSecret.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageRequestUrl } from "../../../build/composables/page/pageUrlValues";
 import { useConfirm } from "../../../composables/confirm/useConfirm";
 import DmsCopyButton from "../../copy/CopyButton.vue";
 
@@ -43,7 +44,7 @@ const masked = computed(() => {
 });
 
 async function rotate(): Promise<void> {
-  const url = props.rotateUrl;
+  const url = pageRequestUrl(props.rotateUrl);
   if (!url) return;
   const confirmed = await confirm({
     title: t("dms.form.secret.rotate_title"),
@@ -95,7 +96,7 @@ async function rotate(): Promise<void> {
     </UInput>
     <DmsCopyButton v-if="props.copyable && value" :value="value" />
     <UButton
-      v-if="props.rotateUrl"
+      v-if="pageRequestUrl(props.rotateUrl)"
       icon="i-ph-arrows-clockwise"
       :label="t('dms.form.secret.rotate')"
       color="neutral"

package/frontend-vue/layers/dms-ui/app/components/form/components/Relation.vue

@@ -3,6 +3,7 @@
   lang="ts"
   generic="T extends ArrayOrNested<SelectMenuItem>, M extends boolean = false"
 >
+import { pageRequestUrl } from "../../../build/composables/page/pageUrlValues";
 import { useForwardPropsEmits } from "reka-ui";
 import type {
   SelectMenuProps,
@@ -193,7 +194,9 @@ interface RelationItems {
 }
 
 async function fetchRelationItems(): Promise<RelationItems> {
-  const data = await $authFetch<RelationResponse>(props.searchUrl, {
+  const url = pageRequestUrl(props.searchUrl);
+  if (!url) return { results: [], total: 0 };
+  const data = await $authFetch<RelationResponse>(url, {
     params: {
       search: searchTermDebounced.value || undefined,
     },

package/frontend-vue/layers/dms-ui/app/components/grid/GridRow.vue

@@ -4,6 +4,7 @@ import type { DefaultComponentProps } from "../../../../dms-core/app/types/compo
 import { GRID_CONTEXT, type GridContext } from "./constants";
 import {
   GRID_DEFAULT_MIN_COLUMN_WIDTH,
+  gridCollapsedCellStyles,
   gridColumnsTemplate,
   gridResponsiveStyles,
   gridScopeId,
@@ -39,13 +40,20 @@ const columnsTemplate = computed(() =>
 // its spans reach are container queries on its own width, identical in the
 // server render and the browser (see gridResponsiveStyles).
 const scope = gridScopeId(props.componentId || useId());
+// Its cells close over the ones their blocks leave empty
+// (see gridCollapsedCellStyles).
 const responsiveStyles = computed(() =>
-  gridResponsiveStyles(
-    scope,
-    maxColumns.value,
-    gap.value,
-    minColumnWidth.value,
-  ),
+  [
+    gridCollapsedCellStyles(scope, maxColumns.value),
+    gridResponsiveStyles(
+      scope,
+      maxColumns.value,
+      gap.value,
+      minColumnWidth.value,
+    ),
+  ]
+    .filter(Boolean)
+    .join("\n"),
 );
 
 const rowStyle = computed(() => ({

package/frontend-vue/layers/dms-ui/app/components/grid/columns.ts

@@ -5,6 +5,18 @@ const SINGLE_COLUMN = 1;
 /** Track floor below which a column stops being usable, as a CSS length. */
 export const GRID_DEFAULT_MIN_COLUMN_WIDTH = "240px";
 
+const UNITLESS_NUMBER = /^[+-]?(\d+\.?\d*|\.\d+)$/;
+
+/**
+ * A length usable inside `calc()`. A bare `0` is a valid `gap` but not a
+ * length in a calculation, where it would void the whole template and leave
+ * the grid on a single column; a unitless number reads as pixels.
+ */
+function calcLength(value: string): string {
+  const trimmed = value.trim();
+  return UNITLESS_NUMBER.test(trimmed) ? `${trimmed}px` : trimmed;
+}
+
 /**
  * The column track template a `Grid` and every `GridRow` inside it share.
  *
@@ -26,8 +38,8 @@ export function gridColumnsTemplate(
   minColumnWidth: string,
 ): string {
   const columns = Math.max(maxColumns, SINGLE_COLUMN);
-  const columnShare = `(100% - ${columns - SINGLE_COLUMN} * ${gap}) / ${columns}`;
-  return `repeat(auto-fill, minmax(min(100%, max(${minColumnWidth}, ${columnShare})), 1fr))`;
+  const columnShare = `(100% - ${columns - SINGLE_COLUMN} * ${calcLength(gap)}) / ${columns}`;
+  return `repeat(auto-fill, minmax(min(100%, max(${calcLength(minColumnWidth)}, ${columnShare})), 1fr))`;
 }
 
 /** Custom property a `Grid` / `GridRow` hands its cells: the tracks left. */
@@ -43,7 +55,7 @@ function trackBreakpoint(
   gap: string,
   minColumnWidth: string,
 ): string {
-  return `calc(${columns} * ${minColumnWidth} + ${columns - SINGLE_COLUMN} * ${gap})`;
+  return `calc(${columns} * ${calcLength(minColumnWidth)} + ${columns - SINGLE_COLUMN} * ${calcLength(gap)})`;
 }
 
 /** A container name / attribute value built from any id. */
@@ -100,6 +112,43 @@ export function gridResponsiveStyles(
   return rules.join("\n");
 }
 
+/**
+ * A cell whose block renders nothing (an element holding only comments):
+ * a block hidden by its own condition, not a spacer, which is empty on
+ * purpose to line the next cells up.
+ */
+const COLLAPSED_CELL = ":empty:not(.dms-spacer)";
+
+/**
+ * The rules that let a row close over the cells its blocks leave empty, as a
+ * stylesheet: an empty cell takes no track, and the last filled cell before a
+ * run of trailing empty ones spans their tracks too, so a block whose
+ * neighbour turned itself off fills the row instead of leaving a hole beside
+ * it. The span is clamped to the tracks left like any other (see
+ * `gridResponsiveStyles`). The row's own stylesheet is its last child, which
+ * is what closes the trailing run.
+ */
+export function gridCollapsedCellStyles(
+  scope: string,
+  maxColumns: number,
+): string {
+  const columns = Math.max(maxColumns, SINGLE_COLUMN);
+  if (columns <= SINGLE_COLUMN) return "";
+  const cells = `[data-dms-grid="${scope}"] > `;
+  const rules = [`${cells}${COLLAPSED_CELL} { display: none; }`];
+  for (let trailing = SINGLE_COLUMN; trailing < columns; trailing++) {
+    const run = Array.from(
+      { length: trailing },
+      () => `+ ${COLLAPSED_CELL} `,
+    ).join("");
+    const span = trailing + SINGLE_COLUMN;
+    rules.push(
+      `${cells}:not(${COLLAPSED_CELL}):has(${run}+ style:last-child) { grid-column: span min(${span}, var(${GRID_TRACKS_VAR}, ${span})); }`,
+    );
+  }
+  return rules.join("\n");
+}
+
 /**
  * Prints a grid's responsive stylesheet inside the grid element. A render
  * function rather than template text: the server escapes interpolated text,

package/frontend-vue/layers/dms-ui/app/components/key-value-list/KeyValueList.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageLink } from "../../build/composables/page/pageUrlValues";
 import { computed } from "vue";
 import { regionalDateTimeFormat } from "#dms-core/app/utils/regional";
 import DmsStatusPill from "../status-pill/StatusPill.vue";
@@ -216,7 +217,7 @@ function keyOf(item: KeyValueItem, index: number): string {
           <template v-else>
             <component
               :is="item.to ? DmsAutoLink : 'span'"
-              :to="item.to"
+              :to="pageLink(item.to)"
               class="min-w-0"
               :class="item.to && item.type !== 'status' && 'hover:underline'"
             >

package/frontend-vue/layers/dms-ui/app/components/list-row/ListRow.vue

@@ -125,6 +125,7 @@ const theme = tv({
     dot: "size-2 rounded-full bg-(--dms-accent-fill) shadow-[0_0_0_3px_var(--dms-accent-tint)]",
     body: "min-w-0 flex-1",
     title: "flex items-center gap-2",
+    titleText: "",
     description: "text-muted mt-0.5 text-[12.5px]",
     // The "·" closes each entry followed by another (rather than opening it),
     // so a wrapped line never starts with a separator.
@@ -188,7 +189,11 @@ const theme = tv({
     // end, so the title and meta wrap there instead.
     truncate: {
       true: {
-        title: "truncate max-sm:whitespace-normal",
+        title:
+          "truncate flex-nowrap max-sm:flex-wrap max-sm:whitespace-normal",
+        // The text box, not the flex title, carries the ellipsis: a flex
+        // container only clips its overflowing children.
+        titleText: "truncate max-sm:whitespace-normal",
         meta: "flex-nowrap overflow-hidden whitespace-nowrap max-sm:flex-wrap max-sm:whitespace-normal",
         detail: "truncate max-sm:whitespace-normal",
       },
@@ -281,7 +286,9 @@ const unreadText = computed(
           :class="ui.title()"
           :title="props.truncate ? props.title : undefined"
         >
-          <slot>{{ props.title }}</slot>
+          <slot>
+            <span :class="ui.titleText()">{{ props.title }}</span>
+          </slot>
         </div>
         <p v-if="hasDescription" :class="ui.description()">
           <slot name="description">{{ props.description }}</slot>

package/frontend-vue/layers/dms-ui/app/components/save-bar/InstantSaveBadge.vue

@@ -3,10 +3,11 @@ import type { SaveStatusState } from "./SaveStatus.vue";
 
 interface InstantSaveBadgeProps {
   /**
-   * Save activity of the page, for a subtle "just saved" flash: the icon
-   * spins while a change is being written and turns into a tick once it is,
-   * and the pill turns red while a save failed (the control says which).
-   * The wording never changes. Defaults to `idle` (a lightning bolt).
+   * Save activity of the page, for a subtle "just saved" flash: the pill
+   * reads "Saving" with a spinning icon while a change is being written,
+   * then "Saved instantly" with a tick once it is, and turns red with "Not
+   * saved" while a save failed (the control says which). Defaults to `idle`
+   * (a lightning bolt and "Saved instantly").
    */
   state?: SaveStatusState;
 }
@@ -23,6 +24,13 @@ const ICONS: Record<SaveStatusState, string> = {
   error: "i-ph-warning-circle",
 };
 
+const LABELS: Record<SaveStatusState, string> = {
+  idle: "dms.save_bar.instant",
+  saving: "dms.save_bar.saving",
+  saved: "dms.save_bar.instant",
+  error: "dms.save_bar.not_saved",
+};
+
 const TONE_CLASSES = {
   ok: "border-success/40 bg-success/10 text-success",
   error: "border-error/40 bg-error/10 text-error",
@@ -49,6 +57,6 @@ const TONE_CLASSES = {
       class="size-3.5 shrink-0"
       :class="{ 'animate-spin': props.state === 'saving' }"
     />
-    {{ t("dms.save_bar.instant") }}
+    {{ t(LABELS[props.state]) }}
   </span>
 </template>

package/frontend-vue/layers/dms-ui/app/components/save-bar/SaveBar.vue

@@ -40,7 +40,7 @@ interface SaveBarProps {
   kind?: FormKind;
   /**
    * Whether anything in the form can be changed: an `action` form nothing in
-   * which can be changed shows its submit alone, all the time.
+   * which can be changed never offers Reset.
    */
   resettable?: boolean;
 }

package/frontend-vue/layers/dms-ui/app/components/stat-group/StatGroup.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageLink } from "../../build/composables/page/pageUrlValues";
 import { computed } from "vue";
 import type { IconWellTone } from "../icon-well/IconWell.vue";
 import DmsStatCell from "../../build/components/stat/StatCell.vue";
@@ -146,7 +147,7 @@ function wellTone(item: StatGroupItem): IconWellTone {
           :icon="item.icon"
           :detail="item.detail"
           :detail-tone="item.detailTone"
-          :to="item.to"
+          :to="pageLink(item.to)"
           size="sm"
           :tone="wellTone(item)"
           :loading="props.loading"
@@ -175,7 +176,7 @@ function wellTone(item: StatGroupItem): IconWellTone {
           :icon="item.icon"
           :detail="item.detail"
           :detail-tone="item.detailTone"
-          :to="item.to"
+          :to="pageLink(item.to)"
           :tone="wellTone(item)"
           :loading="props.loading"
           stack

package/frontend-vue/layers/dms-ui/app/components/table-view/CascaderPath.vue

@@ -1,20 +1,28 @@
 <script setup lang="ts">
 import {
-  buildCascaderPathLabels,
   CASCADER_FETCH_LIMIT,
   CASCADER_PATH_SEPARATOR,
+  cascaderValuePath,
   resolveCascaderKeyMapping,
   type CascaderKeyMapping,
 } from "../../utils/cascader";
+import { MAX_RELATION_BADGES } from "../../build/composables/data-types/relationBadges";
 
 const DEFAULT_VALUE_KEY = "_id";
 
 interface CascaderPathProps {
+  /** One picked value, or the list a multiple cascader holds. */
   value: unknown;
   searchUrl?: string;
   keyMapping?: Partial<CascaderKeyMapping>;
 }
 
+/** A picked value of a multiple cascader: its name, its path on hover. */
+interface CascaderBadge {
+  label: string;
+  title: string;
+}
+
 const props = defineProps<CascaderPathProps>();
 
 const { $authFetch } = useAuthFetch();
@@ -31,22 +39,6 @@ const keyMapping = computed(() =>
   }),
 );
 
-const valueObject = computed(() =>
-  isObject(props.value) ? (props.value as Record<string, unknown>) : undefined,
-);
-
-const valueId = computed(() => {
-  const raw = valueObject.value
-    ? valueObject.value[keyMapping.value.value]
-    : props.value;
-  return raw === undefined || raw === null ? undefined : String(raw);
-});
-
-const ownLabel = computed(() => {
-  const label = valueObject.value?.[keyMapping.value.label];
-  return label === undefined || label === null ? undefined : String(label);
-});
-
 const { data } = await useDmsAsyncData(
   `cascader-path-${props.searchUrl}`,
   () =>
@@ -58,21 +50,51 @@ const { data } = await useDmsAsyncData(
   { lazy: true },
 );
 
-const pathLabel = computed(() => {
-  if (!valueId.value) return ownLabel.value ?? "";
-  const rows = data.value?.results;
-  if (rows) {
-    const labels = buildCascaderPathLabels(
-      rows,
-      keyMapping.value,
-      valueId.value,
-    );
-    if (labels.length > 0) return labels.join(CASCADER_PATH_SEPARATOR);
-  }
-  return ownLabel.value ?? valueId.value;
-});
+const pathOf = (item: unknown): string[] =>
+  cascaderValuePath(item, keyMapping.value, data.value?.results);
+
+const pathLabel = computed(() =>
+  pathOf(props.value).join(CASCADER_PATH_SEPARATOR),
+);
+
+const badges = computed<CascaderBadge[]>(() =>
+  (Array.isArray(props.value) ? props.value : [])
+    .map(pathOf)
+    .filter((path) => path.length > 0)
+    .map((path) => ({
+      label: path.at(-1) ?? "",
+      title: path.join(CASCADER_PATH_SEPARATOR),
+    })),
+);
+const visibleBadges = computed(() =>
+  badges.value.slice(0, MAX_RELATION_BADGES),
+);
+const hiddenBadges = computed(() => badges.value.slice(MAX_RELATION_BADGES));
 </script>
 
 <template>
-  <span class="truncate" :title="pathLabel">{{ pathLabel }}</span>
+  <span
+    v-if="Array.isArray(props.value)"
+    class="inline-flex flex-wrap items-center gap-1"
+  >
+    <UBadge
+      v-for="badge in visibleBadges"
+      :key="badge.title"
+      :label="badge.label"
+      :title="badge.title"
+      color="neutral"
+      variant="subtle"
+      size="sm"
+      class="max-w-40"
+    />
+    <UBadge
+      v-if="hiddenBadges.length"
+      :label="`+${hiddenBadges.length}`"
+      :title="hiddenBadges.map((badge) => badge.title).join(', ')"
+      color="neutral"
+      variant="subtle"
+      size="sm"
+    />
+  </span>
+  <span v-else class="truncate" :title="pathLabel">{{ pathLabel }}</span>
 </template>

package/frontend-vue/layers/dms-ui/app/composables/chart/apexPlotOptions.ts

@@ -9,7 +9,14 @@ import {
 
 const DEFAULT_BAR_RADIUS = 4;
 const DEFAULT_BAR_WIDTH_PCT = "60%";
-const DEFAULT_DONUT_HOLE = "76%";
+const HUNDRED_PERCENT = 100;
+/** Ring thickness, in percent of the radius, of a donut without `arcWidth`. */
+const DEFAULT_ARC_WIDTH = 24;
+/**
+ * The thinnest ring, in percent of the radius, a slice label ("33.0%") fits
+ * in: on a thinner one its white text runs past the ring onto the card.
+ */
+const MIN_LABELLED_ARC_WIDTH = 35;
 const DEFAULT_RADIAL_HOLE = "60%";
 const CENTER_NAME_FONT_SIZE = "10.5px";
 const CENTER_NAME_FONT_WEIGHT = 600;
@@ -17,7 +24,6 @@ const CENTER_VALUE_FONT_SIZE = "20px";
 const CENTER_VALUE_FONT_WEIGHT = 650;
 const HEATMAP_RADIUS = 4;
 const HEATMAP_DEFAULT_INTENSITY = 0.6;
-const HUNDRED_PERCENT = 100;
 
 type PlotBuilder = (props: UseApexChartInput) => Record<string, unknown>;
 
@@ -47,8 +53,13 @@ function buildBarPlotOptions(
 }
 
 function donutSizeFor(arcWidth: number | undefined): string {
-  if (arcWidth === undefined) return DEFAULT_DONUT_HOLE;
-  return `${HUNDRED_PERCENT - arcWidth}%`;
+  return `${HUNDRED_PERCENT - (arcWidth ?? DEFAULT_ARC_WIDTH)}%`;
+}
+
+/** Whether a slice label fits inside the chart's ring; always true off donuts. */
+export function ringFitsSliceLabels(input: UseApexChartInput): boolean {
+  if (input.type !== "donut") return true;
+  return (input.arcWidth ?? DEFAULT_ARC_WIDTH) >= MIN_LABELLED_ARC_WIDTH;
 }
 
 /** v2 donut centre: mono eyebrow over a 20px value. */

package/frontend-vue/layers/dms-ui/app/composables/chart/apexYRange.ts

@@ -0,0 +1,123 @@
+import { APEX_TYPE_CONFIGS } from "./apexTypeConfigs";
+import type { ChartSeries } from "./types";
+import type { UseApexChartInput } from "./useApexChart.types";
+
+const DEFAULT_Y_RANGE_PADDING = 0.08;
+const ZERO_BOUND_MAGNITUDE = 1;
+const STEP_DIVISIONS = 10;
+const NICE_STEP_FACTORS = [1, 2, 5, 10];
+const DECIMAL_BASE = 10;
+/** Enough digits to keep every real value while dropping binary float noise. */
+const SIGNIFICANT_DIGITS = 12;
+
+const DOWNWARD = -1;
+const UPWARD = 1;
+
+type Rounding = (value: number) => number;
+
+/** Bounds Apex resolves from the extent it measured on the drawn series. */
+interface AutoYBounds {
+  min?: (nativeMin: number) => number;
+  max?: (nativeMax: number) => number;
+}
+
+function isFiniteNumber(value: unknown): value is number {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+function withoutFloatNoise(value: number): number {
+  return Number(value.toPrecision(SIGNIFICANT_DIGITS));
+}
+
+function pointValues(point: ChartSeries["data"][number]): unknown[] {
+  if (typeof point === "number") return [point];
+  if (!point || typeof point !== "object") return [];
+  return Array.isArray(point.y) ? point.y : [point.y];
+}
+
+function seriesValues(series: ChartSeries[]): number[] {
+  return series.flatMap((entry) =>
+    entry.data.flatMap(pointValues).filter(isFiniteNumber),
+  );
+}
+
+function annotationValues(input: UseApexChartInput): number[] {
+  return (input.annotations ?? [])
+    .flatMap((annotation) => [annotation.y, annotation.y2])
+    .filter(isFiniteNumber);
+}
+
+function resolvePadding(input: UseApexChartInput): number {
+  const requested = input.autoYRange?.padding ?? DEFAULT_Y_RANGE_PADDING;
+  return Number.isFinite(requested) && requested >= 0
+    ? requested
+    : DEFAULT_Y_RANGE_PADDING;
+}
+
+function padOutward(bound: number, padding: number, direction: number): number {
+  return bound + direction * (Math.abs(bound) || ZERO_BOUND_MAGNITUDE) * padding;
+}
+
+/** The smallest 1, 2 or 5 times a power of ten that covers `span`. */
+export function niceStep(span: number): number {
+  const magnitude = DECIMAL_BASE ** Math.floor(Math.log10(span));
+  const factor =
+    NICE_STEP_FACTORS.find((candidate) => candidate * magnitude >= span) ??
+    DECIMAL_BASE;
+  return withoutFloatNoise(factor * magnitude);
+}
+
+function snapToStep(value: number, step: number, round: Rounding): number {
+  return withoutFloatNoise(round(withoutFloatNoise(value / step)) * step);
+}
+
+/**
+ * The tick step for the padded extent of what is known up front: the series
+ * and the annotations. Apex only lays round ticks between bounds that are
+ * multiples of a round step; padded raw bounds give 603.6, 437.2…
+ */
+function estimateStep(values: number[], padding: number): number | undefined {
+  if (values.length === 0) return undefined;
+  const lower = padOutward(Math.min(...values), padding, DOWNWARD);
+  const upper = padOutward(Math.max(...values), padding, UPWARD);
+  const span = upper - lower;
+  return span > 0 ? niceStep(span / STEP_DIVISIONS) : undefined;
+}
+
+function stepForBound(bound: number, knownStep: number | undefined): number {
+  if (knownStep !== undefined) return knownStep;
+  return niceStep((Math.abs(bound) || ZERO_BOUND_MAGNITUDE) / STEP_DIVISIONS);
+}
+
+/**
+ * Y bounds that take in the annotations, padded outward and rounded to a round
+ * step so the axis ticks read 100, 200… rather than the raw padded extent.
+ */
+export function buildAutoYRange(input: UseApexChartInput): AutoYBounds {
+  if (!input.autoYRange || APEX_TYPE_CONFIGS[input.type].isCircular) return {};
+  const padding = resolvePadding(input);
+  const annotations = annotationValues(input);
+  const knownStep = estimateStep(
+    [...seriesValues(input.series), ...annotations],
+    padding,
+  );
+  const bound = (native: number, direction: number, round: Rounding) => {
+    const extent = [native, ...annotations];
+    const raw = direction === DOWNWARD ? Math.min(...extent) : Math.max(...extent);
+    const padded = padOutward(raw, padding, direction);
+    return snapToStep(padded, stepForBound(padded, knownStep), round);
+  };
+  return {
+    min: (nativeMin) => bound(nativeMin, DOWNWARD, Math.floor),
+    max: (nativeMax) => bound(nativeMax, UPWARD, Math.ceil),
+  };
+}
+
+/**
+ * Axis labels without a format of their own. Apex writes them with as many
+ * decimals as the most precise data point, so 160 reads "160.00000000000000"
+ * once one price carries float noise.
+ */
+export function formatPlainAxisValue(value: number): string {
+  return isFiniteNumber(value) ? String(withoutFloatNoise(value)) : String(value);
+}