@antelopejs/dms 0.9.7 → 0.10.0

package/frontend-vue/layers/dms-ui/app/components/top-list/TopListCard.vue

@@ -10,9 +10,12 @@ import DmsBlockActions, {
 // would draw an empty card for the moment that chunk takes.
 import DmsTopListRow from "./internal/TopListRow.vue";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
+import { readFetchNotFound } from "../../build/utils/fetchNotFound";
+import DmsBlockInlineStatus from "../../build/components/blocks/BlockInlineStatus.vue";
 import { formatValue } from "../../composables/chart/formatValue";
 import { resolveSparklineAccent } from "../../composables/chart/resolveSparklineAccent";
 import { usePeriodScopePreset } from "#dms-core/app/composables/period/usePeriodScope";
+import { usePeriodComparisonDisplay } from "../../build/composables/period/periodComparison";
 import {
   hasUrlVariables,
   resolveLinkVariables,
@@ -119,7 +122,7 @@ const staticData = computed<TopListCardResponse | null>(() =>
   props.staticItems ? { items: props.staticItems } : null,
 );
 
-const { data, isLoading } = useChartFetch<TopListCardResponse>({
+const { data, isLoading, error, refresh } = useChartFetch<TopListCardResponse>({
   fetchUrl: props.fetchUrl,
   fetchUrlMethod: props.fetchUrlMethod,
   routeParams: () => props.routeParams,
@@ -226,11 +229,26 @@ const badgeLabel = computed<string | null>(() => {
   return t(`${PRESET_LABEL_KEY_PREFIX}.${preset}`, preset);
 });
 
+// With no comparison selected on the scope, the rows show no change: their
+// trend column goes rather than staying blank.
+const comparison = usePeriodComparisonDisplay(props.periodScope);
+const showRowDelta = computed(() => props.showDelta && !comparison.isOff.value);
+
 const isFirstLoad = computed(() => isLoading.value && data.value === null);
 // New inputs (a period applied) are on their way: the rows on screen still
 // belong to the previous ones, so they dim like the KPI values do.
 const isRefreshing = computed(() => isLoading.value && data.value !== null);
 
+// A failed first load shows a message and a retry, never the empty state (a
+// list that loaded with no rows); a failed refetch keeps the last rows.
+const hasError = computed(
+  () => !isLoading.value && !data.value && Boolean(error.value),
+);
+// A 404 is a status too, but nothing to retry: the list does not exist.
+const notFound = computed(() =>
+  hasError.value ? readFetchNotFound(error.value) : null,
+);
+
 const emptyLabelDisplay = computed(() =>
   props.emptyLabel
     ? processI18n(props.emptyLabel)
@@ -262,7 +280,7 @@ function columnsTemplate(sparkline: boolean, icon: boolean): string {
   columns.push(TITLE_COLUMN_WIDTH);
   columns.push(VALUE_COLUMN_WIDTH);
   if (sparkline && props.showSparkline) columns.push(SPARKLINE_COLUMN_WIDTH);
-  if (props.showDelta) columns.push(TREND_COLUMN_WIDTH);
+  if (showRowDelta.value) columns.push(TREND_COLUMN_WIDTH);
   columns.push(EDGE_COLUMN_WIDTH);
   return columns.join(" ");
 }
@@ -338,7 +356,7 @@ const gridStyle = computed(() => ({
           :has-any-icon="hasAnyIcon"
           :show-sparkline="showSparkline"
           :sparkline-accent="sparklineAccentFor(item)"
-          :show-delta="showDelta"
+          :show-delta="showRowDelta"
           :invert="invert"
           :formatted-value="formattedValue(item)"
           :bar-percent="barPercent(item)"
@@ -346,6 +364,14 @@ const gridStyle = computed(() => ({
         />
       </ul>
 
+      <DmsBlockInlineStatus
+        v-else-if="hasError"
+        :state="notFound ? 'not-found' : 'error'"
+        :not-found="notFound"
+        class="min-h-48 px-[18px]"
+        @retry="refresh()"
+      />
+
       <DmsEmptyState
         v-else-if="!isFirstLoad"
         :icon="EMPTY_ICON"
@@ -359,10 +385,12 @@ const gridStyle = computed(() => ({
         class="divide-y divide-(--ui-border-muted) py-1"
         aria-busy="true"
       >
+        <!-- A loaded row's height: 60px with its bar, 56px without. -->
         <div
           v-for="row in props.skeletonCount"
           :key="row"
-          class="flex h-14 items-center gap-3 px-[18px]"
+          class="flex items-center gap-3 px-[18px]"
+          :class="props.showBar ? 'h-[60px]' : 'h-14'"
         >
           <USkeleton
             :aria-label="t('dms.a11y.loading')"
@@ -379,7 +407,7 @@ const gridStyle = computed(() => ({
           <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-14" />
           <USkeleton
             :aria-label="t('dms.a11y.loading')"
-            v-if="showDelta"
+            v-if="showRowDelta"
             class="h-3 w-[46px]"
           />
         </div>

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

@@ -0,0 +1,68 @@
+import type { ChartXAxisFormatter } from "./types";
+
+/**
+ * Width of one character of the axis font (11px, monospace) in pixels, with a
+ * little room for a proportional fallback font.
+ */
+const AXIS_CHAR_WIDTH = 7;
+/** Blank space kept between two neighbouring labels. */
+const LABEL_GAP = 8;
+
+/** What Apex hands an x-axis label formatter (`xaxis.labels.formatter`). */
+interface ApexLabelFormatterOpts {
+  /** The label's column; only set while Apex draws the axis. */
+  i?: number;
+  w?: { globals?: { gridWidth?: number; labels?: unknown[] } };
+}
+
+type ApexLabelFormatter = (
+  value: string,
+  timestamp?: number,
+  opts?: ApexLabelFormatterOpts,
+) => string;
+
+/**
+ * How many columns each drawn label stands for: 1 while every label fits its
+ * column, more once the longest one is wider than a column.
+ */
+export function categoryLabelStep(
+  gridWidth: number,
+  labelCount: number,
+  longestLabel: number,
+): number {
+  if (labelCount <= 1 || gridWidth <= 0) return 1;
+  const columnWidth = gridWidth / labelCount;
+  const labelWidth = longestLabel * AXIS_CHAR_WIDTH + LABEL_GAP;
+  return Math.max(1, Math.ceil(labelWidth / columnWidth));
+}
+
+/**
+ * A heatmap gives every column a label and ApexCharts does not thin them
+ * (`hideOverlappingLabels` only acts on other charts), so on a phone they run
+ * into each other ("07:0009:00"). This formatter keeps one label every few
+ * columns, from the plot's width, and leaves the tooltip's (no column index)
+ * whole.
+ */
+export function thinnedCategoryFormatter(
+  format: ChartXAxisFormatter | undefined,
+): ApexLabelFormatter {
+  const write = (value: string, timestamp?: number): string =>
+    format ? format(value, timestamp) : String(value ?? "");
+  return (value, timestamp, opts) => {
+    const label = write(value, timestamp);
+    const index = opts?.i;
+    const globals = opts?.w?.globals;
+    if (typeof index !== "number" || !globals) return label;
+    const labels = globals.labels ?? [];
+    const longest = labels.reduce<number>(
+      (max, entry) => Math.max(max, write(String(entry ?? "")).length),
+      0,
+    );
+    const step = categoryLabelStep(
+      globals.gridWidth ?? 0,
+      labels.length,
+      longest,
+    );
+    return index % step === 0 ? label : "";
+  };
+}

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

@@ -0,0 +1,306 @@
+import type { ChartSeries } from "./types";
+import type { UseApexChartInput } from "./useApexChart.types";
+
+/** The calendar step a series of dates moves by. */
+export type CalendarBucket = "month" | "day";
+
+/** How a bucket's dates are written: on the axis, then in the tooltip. */
+interface BucketFormats {
+  /** ApexCharts tokens, as its own datetime axis writes them. */
+  axis: string;
+  /** Intl options, for the tooltip and wherever Apex lends no formatter. */
+  axisIntl: Intl.DateTimeFormatOptions;
+  tooltipIntl: Intl.DateTimeFormatOptions;
+}
+
+const BUCKET_FORMATS: Record<CalendarBucket, BucketFormats> = {
+  month: {
+    axis: "MMM 'yy",
+    axisIntl: { month: "short", year: "2-digit" },
+    tooltipIntl: { month: "long", year: "numeric" },
+  },
+  day: {
+    axis: "dd MMM",
+    axisIntl: { day: "2-digit", month: "short" },
+    tooltipIntl: { day: "numeric", month: "short", year: "numeric" },
+  },
+};
+
+/** Beyond this many buckets the datetime axis thins its own labels better. */
+const MAX_BUCKETS = 120;
+const DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+const BUCKETED_TYPES = new Set(["column"]);
+
+interface CalendarDay {
+  year: number;
+  month: number;
+  day: number;
+}
+
+type ApexDateFormatter = (date: Date, format: string) => string;
+
+/** What Apex hands an axis label formatter, past the value. */
+interface ApexLabelOptions {
+  dateFormatter?: ApexDateFormatter;
+  w?: unknown;
+}
+
+/** A column chart's dates turned into one category per calendar bucket. */
+export interface DatetimeBuckets {
+  bucket: CalendarBucket;
+  /** Every bucket from the first date to the last, as `YYYY-MM-DD`. */
+  keys: string[];
+  /**
+   * Per series, the index in the route's `data` of the point in each bucket,
+   * `-1` for an empty bucket: a click names the point the route sent.
+   */
+  sourceIndexes: number[][];
+}
+
+function pad(value: number): string {
+  return String(value).padStart(2, "0");
+}
+
+function keyOf(day: CalendarDay): string {
+  return `${day.year}-${pad(day.month)}-${pad(day.day)}`;
+}
+
+function dateOfKey(key: string): Date {
+  const [, year, month, day] = DATE_ONLY.exec(key)!;
+  return new Date(Number(year), Number(month) - 1, Number(day));
+}
+
+function localDay(date: Date): CalendarDay | null {
+  const isMidnight =
+    date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0;
+  if (!isMidnight) return null;
+  return {
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    day: date.getDate(),
+  };
+}
+
+function utcDay(date: Date): CalendarDay | null {
+  const isMidnight =
+    date.getUTCHours() === 0 &&
+    date.getUTCMinutes() === 0 &&
+    date.getUTCSeconds() === 0;
+  if (!isMidnight) return null;
+  return {
+    year: date.getUTCFullYear(),
+    month: date.getUTCMonth() + 1,
+    day: date.getUTCDate(),
+  };
+}
+
+/**
+ * The calendar day a point stands for. A date-only string is that day; a
+ * timestamp counts when it falls on a midnight, the browser's or UTC's: a
+ * route bucketing by month often sends `2026-10-01T00:00:00Z`.
+ */
+function calendarDayOf(
+  x: unknown,
+  readDay: typeof localDay,
+): CalendarDay | null {
+  if (typeof x === "string") {
+    const match = DATE_ONLY.exec(x);
+    if (match) {
+      return {
+        year: Number(match[1]),
+        month: Number(match[2]),
+        day: Number(match[3]),
+      };
+    }
+  }
+  if (typeof x !== "string" && typeof x !== "number" && !(x instanceof Date)) {
+    return null;
+  }
+  const date = new Date(x);
+  return Number.isNaN(date.getTime()) ? null : readDay(date);
+}
+
+function pointX(point: ChartSeries["data"][number]): unknown {
+  return typeof point === "object" && point !== null ? point.x : undefined;
+}
+
+/** Each series' days, in order, or `null` when a point is not a day. */
+function readDays(
+  series: ChartSeries[],
+  readDay: typeof localDay,
+): CalendarDay[][] | null {
+  const days: CalendarDay[][] = [];
+  for (const entry of series) {
+    const seriesDays: CalendarDay[] = [];
+    for (const point of entry.data) {
+      const day = calendarDayOf(pointX(point), readDay);
+      if (!day) return null;
+      seriesDays.push(day);
+    }
+    days.push(seriesDays);
+  }
+  return days.some((entry) => entry.length > 0) ? days : null;
+}
+
+function nextBucket(day: CalendarDay, bucket: CalendarBucket): CalendarDay {
+  const date =
+    bucket === "month"
+      ? new Date(day.year, day.month, 1)
+      : new Date(day.year, day.month - 1, day.day + 1);
+  return {
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    day: date.getDate(),
+  };
+}
+
+/** Every bucket from `first` to `last`, or `null` past the bucket cap. */
+function bucketKeys(
+  first: string,
+  last: string,
+  bucket: CalendarBucket,
+): string[] | null {
+  const keys: string[] = [];
+  let cursor = calendarDayOf(first, localDay)!;
+  while (keyOf(cursor) <= last) {
+    keys.push(keyOf(cursor));
+    if (keys.length > MAX_BUCKETS) return null;
+    cursor = nextBucket(cursor, bucket);
+  }
+  return keys;
+}
+
+/**
+ * Where each series' points fall among `keys`, or `null` when a series holds
+ * two points in one bucket or a date between buckets (the 15th on a monthly
+ * axis): those keep the datetime axis.
+ */
+function sourceIndexesOf(
+  days: CalendarDay[][],
+  keys: string[],
+): number[][] | null {
+  const positions = new Map(keys.map((key, position) => [key, position]));
+  const indexes: number[][] = [];
+  for (const seriesDays of days) {
+    const slots = keys.map(() => -1);
+    for (const [index, day] of seriesDays.entries()) {
+      const position = positions.get(keyOf(day));
+      if (position === undefined || slots[position] !== -1) return null;
+      slots[position] = index;
+    }
+    indexes.push(slots);
+  }
+  return indexes;
+}
+
+/**
+ * Whether two dates sit one bucket apart somewhere: weekly or quarterly
+ * points have none, and the datetime axis spaces them better than buckets
+ * mostly left empty.
+ */
+function hasAdjacentBuckets(sourceIndexes: number[][]): boolean {
+  return sourceIndexes.some((slots) =>
+    slots.some(
+      (index, position) =>
+        index !== -1 &&
+        slots[position + 1] !== undefined &&
+        slots[position + 1] !== -1,
+    ),
+  );
+}
+
+function layoutBuckets(
+  days: CalendarDay[][],
+  bucket: CalendarBucket,
+): DatetimeBuckets | null {
+  const sorted = days.flat().map(keyOf).sort();
+  const keys = bucketKeys(sorted[0]!, sorted.at(-1)!, bucket);
+  if (!keys) return null;
+  const sourceIndexes = sourceIndexesOf(days, keys);
+  if (!sourceIndexes) return null;
+  const isSingleBucket = keys.length === 1;
+  if (!isSingleBucket && !hasAdjacentBuckets(sourceIndexes)) return null;
+  return { bucket, keys, sourceIndexes };
+}
+
+/**
+ * Whether a column chart on a datetime axis plots calendar buckets — every
+ * point on a day, or on the first of a month — and which ones. Apex places
+ * such columns by time and ticks the axis on its own: months of uneven length
+ * leave uneven gaps, and a tick every half month repeats each month's name.
+ */
+export function detectDatetimeBuckets(
+  input: UseApexChartInput,
+): DatetimeBuckets | null {
+  if (input.xaxisType !== "datetime") return null;
+  if (!BUCKETED_TYPES.has(input.type)) return null;
+  const days =
+    readDays(input.series, localDay) ?? readDays(input.series, utcDay);
+  if (!days) return null;
+  const bucket: CalendarBucket = days.flat().every((day) => day.day === 1)
+    ? "month"
+    : "day";
+  return layoutBuckets(days, bucket);
+}
+
+/**
+ * The series on the bucket axis: one point per bucket, named by it, an empty
+ * bucket holding `null` so it keeps its slot.
+ */
+export function toBucketSeries(
+  series: ChartSeries[],
+  buckets: DatetimeBuckets,
+): ChartSeries[] {
+  return series.map((entry, seriesIndex) => ({
+    ...entry,
+    data: buckets.keys.map((key, position) => {
+      const point = entry.data[buckets.sourceIndexes[seriesIndex]![position]!];
+      return typeof point === "object"
+        ? { ...point, x: key }
+        : { x: key, y: null };
+    }),
+  }));
+}
+
+function intlFormat(
+  key: string,
+  locale: string | undefined,
+  options: Intl.DateTimeFormatOptions,
+): string {
+  return new Intl.DateTimeFormat(locale, options).format(dateOfKey(key));
+}
+
+/**
+ * The axis label of a bucket: in Apex's own tokens (`xAxis.datetimeFormat`,
+ * else what its datetime axis writes for that step) when Apex lends its
+ * formatter, which speaks the chart's locale, else through Intl.
+ */
+export function bucketAxisFormatter(
+  buckets: DatetimeBuckets,
+  input: UseApexChartInput,
+): (value: string, timestamp?: unknown, opts?: ApexLabelOptions) => string {
+  const formats = BUCKET_FORMATS[buckets.bucket];
+  return (value, _timestamp, opts) => {
+    if (!DATE_ONLY.test(String(value))) return String(value ?? "");
+    if (input.xAxisFormatter) {
+      return input.xAxisFormatter(value, dateOfKey(value).getTime());
+    }
+    if (opts?.dateFormatter && opts.w) {
+      const format = input.xAxis?.datetimeFormat ?? formats.axis;
+      return opts.dateFormatter.call({ w: opts.w }, dateOfKey(value), format);
+    }
+    return intlFormat(value, input.locale, formats.axisIntl);
+  };
+}
+
+/** The tooltip title of a bucket: the whole month, or the whole day. */
+export function bucketTooltipFormatter(
+  buckets: DatetimeBuckets,
+  input: UseApexChartInput,
+): (value: string) => string {
+  const formats = BUCKET_FORMATS[buckets.bucket];
+  return (value) =>
+    DATE_ONLY.test(String(value))
+      ? intlFormat(value, input.locale, formats.tooltipIntl)
+      : String(value ?? "");
+}

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

@@ -1,3 +1,4 @@
+import { readableNumberFormat } from "#dms-core/app/utils/formatter";
 import type { ValueFormat, ValuePrecision } from "./types";
 
 const PERCENT_DIVISOR = 100;
@@ -81,7 +82,7 @@ export function formatValue(
   precision?: ValuePrecision,
 ): string {
   const config = resolveConfig(format);
-  return new Intl.NumberFormat(
+  return readableNumberFormat(
     locale,
     precisionOptions(config.options(currency), precision),
   ).format(config.transform(value));
@@ -98,7 +99,7 @@ export function formatDeltaPercent(
   delta: number,
   locale = DEFAULT_LOCALE,
 ): string {
-  return new Intl.NumberFormat(locale, {
+  return readableNumberFormat(locale, {
     style: "percent",
     minimumFractionDigits: PERCENT_FRACTION_DIGITS,
     maximumFractionDigits: PERCENT_FRACTION_DIGITS,
@@ -144,7 +145,7 @@ export function formatValueParts(
     };
   }
 
-  const parts = new Intl.NumberFormat(
+  const parts = readableNumberFormat(
     locale,
     precisionOptions(config.options(currency), precision),
   ).formatToParts(config.transform(value));

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

@@ -0,0 +1,93 @@
+const HEX_SHORT_LENGTH = 3;
+const HEX_LONG_LENGTH = 6;
+const HEX_RADIX = 16;
+const COLOR_CHANNEL_MAX = 255;
+/** Below this relative luminance a card surface reads as a dark theme. */
+const DARK_SURFACE_LUMINANCE = 0.5;
+const LUMINANCE_WEIGHTS = { red: 0.2126, green: 0.7152, blue: 0.0722 };
+const RGB_FUNCTION = /^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i;
+
+interface RgbColor {
+  red: number;
+  green: number;
+  blue: number;
+}
+
+function parseHex(color: string): RgbColor | null {
+  const digits = color.slice(1);
+  const long =
+    digits.length === HEX_SHORT_LENGTH
+      ? [...digits].map((digit) => digit + digit).join("")
+      : digits;
+  if (long.length !== HEX_LONG_LENGTH) return null;
+  const value = Number.parseInt(long, HEX_RADIX);
+  if (Number.isNaN(value)) return null;
+  return {
+    red: (value >> 16) & COLOR_CHANNEL_MAX,
+    green: (value >> 8) & COLOR_CHANNEL_MAX,
+    blue: value & COLOR_CHANNEL_MAX,
+  };
+}
+
+/** The channels of a resolved chart colour (`#hex` or comma `rgb()`). */
+function parseColor(color: string): RgbColor | null {
+  if (color.startsWith("#")) return parseHex(color);
+  const match = RGB_FUNCTION.exec(color);
+  if (!match) return null;
+  return {
+    red: Number(match[1]),
+    green: Number(match[2]),
+    blue: Number(match[3]),
+  };
+}
+
+/** Whether the card surface is a dark theme's. */
+export function isDarkSurface(surface: string): boolean {
+  const rgb = parseColor(surface);
+  if (!rgb) return false;
+  const luminance =
+    (LUMINANCE_WEIGHTS.red * rgb.red +
+      LUMINANCE_WEIGHTS.green * rgb.green +
+      LUMINANCE_WEIGHTS.blue * rgb.blue) /
+    COLOR_CHANNEL_MAX;
+  return luminance < DARK_SURFACE_LUMINANCE;
+}
+
+/**
+ * `color` laid over the card surface at `weight` (0 = the surface, 1 = the
+ * colour): a faint cell fades into the card in both themes, rather than
+ * towards white. A colour that cannot be read is kept as it is.
+ */
+function mixOverSurface(
+  color: string,
+  surface: string,
+  weight: number,
+): string {
+  const front = parseColor(color);
+  const back = parseColor(surface);
+  if (!front || !back) return color;
+  const channel = (key: keyof RgbColor) =>
+    Math.round(back[key] + (front[key] - back[key]) * weight);
+  return `rgb(${channel("red")}, ${channel("green")}, ${channel("blue")})`;
+}
+
+/**
+ * The colours of a heatmap's value ranges, lowest first: each palette colour
+ * over the surface, from `1 - intensity` of it for the lowest range to the
+ * full colour for the highest.
+ */
+export function heatmapRangeColors(
+  palette: string[],
+  surface: string,
+  intensity: number,
+): string[] {
+  const faintest = 1 - Math.min(Math.max(intensity, 0), 1);
+  const lastIndex = Math.max(palette.length - 1, 1);
+  return palette.map((color, index) =>
+    mixOverSurface(
+      color,
+      surface,
+      faintest + ((1 - faintest) * index) / lastIndex,
+    ),
+  );
+}

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

@@ -0,0 +1,62 @@
+import type { ChartSeries, DonutRecord } from "./types";
+
+/** Writes one display string in the reader's language (`processI18n`). */
+export type ChartTextTranslate = (text: string) => string;
+
+type ChartSeriesEntry = ChartSeries["data"][number];
+
+interface TextPoint {
+  x?: unknown;
+  label?: unknown;
+}
+
+function translateText(value: unknown, translate: ChartTextTranslate): unknown {
+  return typeof value === "string" ? translate(value) : value;
+}
+
+/**
+ * A point's category (`x`) and `label` are what Apex prints on the axis, in
+ * the tooltip and on a slice: a `$` key there is translated like a name. A
+ * date or a number is left alone, and so is any string without the `$`.
+ */
+function localizePoint(
+  point: ChartSeriesEntry,
+  translate: ChartTextTranslate,
+): ChartSeriesEntry {
+  if (typeof point !== "object" || point === null) return point;
+  const text = point as TextPoint;
+  const localized: Record<string, unknown> = { ...point };
+  if ("x" in text) localized.x = translateText(text.x, translate);
+  if ("label" in text) localized.label = translateText(text.label, translate);
+  return localized as unknown as ChartSeriesEntry;
+}
+
+/**
+ * A series as the reader sees it: its `name`, and the categories and labels
+ * of its points, translated when they follow the `$`-prefix convention.
+ * Apex prints all of them verbatim, so a route's `$` keys are resolved here,
+ * in the browser, in the language on screen.
+ */
+export function localizeSeries(
+  series: ChartSeries,
+  translate: ChartTextTranslate,
+): ChartSeries {
+  return {
+    ...series,
+    name: translateText(series.name, translate) as string,
+    data: Array.isArray(series.data)
+      ? series.data.map((point) => localizePoint(point, translate))
+      : series.data,
+  };
+}
+
+/** The slices of a circular chart, their labels translated. */
+export function localizeDonutRecords(
+  records: DonutRecord[],
+  translate: ChartTextTranslate,
+): DonutRecord[] {
+  return records.map((record) => ({
+    ...record,
+    label: translateText(record.label, translate) as string,
+  }));
+}