@antelopejs/dms 0.11.1 → 0.12.1

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

@@ -5,9 +5,7 @@ import DmsSectionHeader from "../section-header/SectionHeader.vue";
 import DmsBlockActions, {
   type BlockAction,
 } from "../../build/components/blocks/BlockActions.vue";
-// Imported rather than resolved from the registry: a registered component is
-// a lazy chunk of its own, and a list whose rows only arrive with its data
-// 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";
@@ -66,9 +64,7 @@ interface Props extends DefaultComponentProps {
 
 const DEFAULT_MAX_HEIGHT = "24rem";
 const DEFAULT_HIGHLIGHT_TOP_N = 3;
-// A top list is a "top N" (10 most of the time): enough placeholder rows to
-// fill the card to its max height, which clips them exactly where it clips
-// the loaded list, so the card does not grow when the rows land.
+
 const SKELETON_ROW_COUNT = 10;
 const PERCENT = 100;
 const PRESET_LABEL_KEY_PREFIX = "dms.period.presets";
@@ -79,8 +75,7 @@ const PLAIN_RANK_CLASS =
   "text-dimmed font-semibold ring-1 ring-default ring-inset";
 const QUIET_BAR_OPACITY_CLASS = "opacity-45";
 
-// Solid rank fills keep dark ink in both themes (v2 top list).
-const RANK_FILL_CLASSES: Record<string, string> = {
+const RANK_FILL_CLASSES = {
   primary: "bg-(--dms-accent-fill)",
   secondary: "bg-(--ui-color-secondary-400)",
   info: "bg-(--ui-color-info-400)",
@@ -132,16 +127,13 @@ const { data, isLoading, error, refresh } = useChartFetch<TopListCardResponse>({
   watchSource: () => watchKey.value,
 });
 
-// A row's link may name the page it is shown on (`{{query.website}}`), so a
-// list served once leads on with the page's own context, as the URL changes.
-// The route is only read for a list holding such a link.
 function withPageValues(item: TopListItem): TopListItem {
   if (!item.to || !hasUrlVariables(item.to)) return item;
   return {
     ...item,
     to: resolveLinkVariables(item.to, {
       routeParams: props.routeParams,
-      routeQuery: useDmsRoute().query as Record<string, unknown>,
+      routeQuery: useDmsRoute().query,
     }),
   };
 }
@@ -156,8 +148,6 @@ const largestValue = computed(() =>
   Math.max(0, ...items.value.map((item) => item.value)),
 );
 
-// The fade mask only applies when the list actually scrolls, so a short list
-// keeps its last row fully visible.
 const scrollRef = ref<HTMLElement | null>(null);
 const isOverflowing = ref(false);
 function measureOverflow() {
@@ -219,9 +209,6 @@ function sparklineAccentFor(item: TopListItem): string {
   });
 }
 
-// The preset is a name, the same on both sides: the server prints the badge
-// of a selector set up before the card, and the browser hydrates it. A
-// selector set up after it draws a skeleton in its place until it registers.
 const scopePreset = usePeriodScopePreset(props.periodScope);
 const badgeLabel = computed<string | null>(() => {
   const preset = scopePreset.value;
@@ -229,22 +216,17 @@ 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,
 );
@@ -257,22 +239,15 @@ const emptyLabelDisplay = computed(() =>
 
 const maxHeightStyle = computed(() => ({ maxHeight: props.maxHeight }));
 
-// Edge tracks inset the rows by 18px (6px + the 12px column gap) while the
-// hover band still runs edge to edge; padding on a subgrid row would spill
-// out of the fixed-width tracks instead.
 const EDGE_COLUMN_WIDTH = "6px";
 const RANK_COLUMN_WIDTH = "26px";
 const ICON_COLUMN_WIDTH = "26px";
 const TITLE_COLUMN_WIDTH = "minmax(0,1fr)";
 const VALUE_COLUMN_WIDTH = "auto";
 const SPARKLINE_COLUMN_WIDTH = "4rem";
-// Fixed so the deltas line up down the list whatever their length.
+
 const TREND_COLUMN_WIDTH = "62px";
 
-// The columns follow the card's own width (a container query), not the
-// viewport: a narrow card (a phone, a third of a dashboard row) drops the
-// sparkline column under 28rem, then the icon column under 22rem, so the
-// title keeps room instead of being squeezed to nothing.
 function columnsTemplate(sparkline: boolean, icon: boolean): string {
   const columns: string[] = [EDGE_COLUMN_WIDTH];
   if (props.showRank) columns.push(RANK_COLUMN_WIDTH);

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

@@ -2,9 +2,7 @@
 import { computed } from "vue";
 import type { TopListItem } from "../../../composables/chart/types";
 import { useComposedText } from "../../../../../dms-core/app/composables/translation/useComposedText";
-// Imported rather than resolved from the registry: a registered component is
-// a lazy chunk of its own, fetched only when the data first shows it, so the
-// trend would pop in a beat after the row.
+
 import DmsTrendBadge from "../../chart/internal/TrendBadge.vue";
 import DmsSparkline from "../../chart/internal/Sparkline.vue";
 

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

@@ -1,4 +1,5 @@
 import type { ChartAnnotation } from "./types";
+import type { RawOptionSection } from "../../build/composables/chart/apexRawOptions";
 import { resolveChartColor } from "./useChartTheme";
 
 const ANNOTATION_DASH = 4;
@@ -68,7 +69,7 @@ function buildYAxisAnnotation(
 
 export function buildAnnotations(
   annotations: ChartAnnotation[] | undefined,
-): Record<string, unknown> | null {
+): RawOptionSection | null {
   if (!annotations || annotations.length === 0) return null;
   return { yaxis: annotations.map(buildYAxisAnnotation) };
 }

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

@@ -1,3 +1,4 @@
+import { isNumber } from "../../../../dms-core/app/utils/type-check";
 import type { ChartXAxisFormatter } from "./types";
 
 /**
@@ -52,7 +53,7 @@ export function thinnedCategoryFormatter(
     const label = write(value, timestamp);
     const index = opts?.i;
     const globals = opts?.w?.globals;
-    if (typeof index !== "number" || !globals) return label;
+    if (!isNumber(index) || !globals) return label;
     const labels = globals.labels ?? [];
     const longest = labels.reduce<number>(
       (max, entry) => Math.max(max, write(String(entry ?? "")).length),

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

@@ -1,3 +1,4 @@
+import { isString, isNumber } from "../../../../dms-core/app/utils/type-check";
 import type { ChartSeries } from "./types";
 import type { UseApexChartInput } from "./useApexChart.types";
 
@@ -100,10 +101,10 @@ function utcDay(date: Date): CalendarDay | null {
  * route bucketing by month often sends `2026-10-01T00:00:00Z`.
  */
 function calendarDayOf(
-  x: unknown,
+  x: Exclude<ChartSeries["data"][number], number>["x"] | undefined,
   readDay: typeof localDay,
 ): CalendarDay | null {
-  if (typeof x === "string") {
+  if (isString(x)) {
     const match = DATE_ONLY.exec(x);
     if (match) {
       return {
@@ -113,14 +114,15 @@ function calendarDayOf(
       };
     }
   }
-  if (typeof x !== "string" && typeof x !== "number" && !(x instanceof Date)) {
+  if (!isString(x) && !isNumber(x) && !(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 {
+function pointX(point: ChartSeries["data"][number]) {
+  // oxlint-disable-next-line anti-slop/no-runtime-typeof -- The shared isObject guard widens the ChartSeries point's x to unknown; typeof keeps the owner's union without validating or converting its data.
   return typeof point === "object" && point !== null ? point.x : undefined;
 }
 
@@ -255,6 +257,7 @@ export function toBucketSeries(
     ...entry,
     data: buckets.keys.map((key, position) => {
       const point = entry.data[buckets.sourceIndexes[seriesIndex]![position]!];
+      // oxlint-disable-next-line anti-slop/no-runtime-typeof -- The shared isObject guard makes this closed point union unspreadable; typeof retains its owner fields without a cast or changed coercion.
       return typeof point === "object"
         ? { ...point, x: key }
         : { x: key, y: null };
@@ -278,7 +281,11 @@ function intlFormat(
 export function bucketAxisFormatter(
   buckets: DatetimeBuckets,
   input: UseApexChartInput,
-): (value: string, timestamp?: unknown, opts?: ApexLabelOptions) => string {
+): (
+  value: string,
+  timestamp?: Parameters<typeof isNumber>[0],
+  opts?: ApexLabelOptions,
+) => string {
   const formats = BUCKET_FORMATS[buckets.bucket];
   return (value, _timestamp, opts) => {
     if (!DATE_ONLY.test(String(value))) return String(value ?? "");
@@ -301,6 +308,6 @@ export function bucketTooltipFormatter(
   const formats = BUCKET_FORMATS[buckets.bucket];
   return (value) =>
     DATE_ONLY.test(String(value))
-      ? intlFormat(value, input.locale, formats.tooltipIntl)
+      ? intlFormat(String(value), input.locale, formats.tooltipIntl)
       : String(value ?? "");
 }

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

@@ -1,10 +1,17 @@
+import type { ApexOptions } from "apexcharts";
+
 interface ApexGlobal {
-  Apex?: {
-    chart?: { locales?: unknown[]; defaultLocale?: string };
-  };
+  Apex?: Pick<ApexOptions, "chart">;
 }
 
-const APEX_LOCALE_LOADERS: Record<string, () => Promise<unknown>> = {
+type LocaleData = typeof import("apexcharts/dist/locales/en.json");
+type LocaleModule = LocaleData & { default?: LocaleData };
+type LocaleLoader = () => Promise<LocaleModule>;
+
+const APEX_LOCALE_LOADERS: Record<
+  ReturnType<typeof resolveLocaleKey>,
+  LocaleLoader
+> = {
   en: () => import("apexcharts/dist/locales/en.json"),
   fr: () => import("apexcharts/dist/locales/fr.json"),
 };
@@ -21,7 +28,7 @@ function resolveLocaleKey(locale: string): string {
 export async function ensureApexLocale(locale: string): Promise<void> {
   if (typeof window === "undefined") return;
   const key = resolveLocaleKey(locale);
-  const apexGlobal = window as unknown as ApexGlobal;
+  const apexGlobal: Window & ApexGlobal = window;
   apexGlobal.Apex = apexGlobal.Apex || {};
   apexGlobal.Apex.chart = apexGlobal.Apex.chart || {};
 
@@ -29,7 +36,7 @@ export async function ensureApexLocale(locale: string): Promise<void> {
     try {
       const mod = await APEX_LOCALE_LOADERS[key]!();
       const locales = apexGlobal.Apex.chart.locales || [];
-      const localeData = (mod as { default?: unknown }).default ?? mod;
+      const localeData = mod.default ?? mod;
       apexGlobal.Apex.chart.locales = [...locales, localeData];
       loadedLocales.add(key);
     } catch (err) {

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

@@ -1,5 +1,7 @@
+import type { ApexOptions } from "apexcharts";
 import type { UseApexChartInput } from "./useApexChart.types";
 import type { ChartType } from "./types";
+import type { RawOptionSection } from "../../build/composables/chart/apexRawOptions";
 import {
   readThemeDimmed,
   readThemeHighlighted,
@@ -25,7 +27,8 @@ const CENTER_VALUE_FONT_WEIGHT = 650;
 const HEATMAP_RADIUS = 4;
 const HEATMAP_DEFAULT_INTENSITY = 0.6;
 
-type PlotBuilder = (props: UseApexChartInput) => Record<string, unknown>;
+type PlotOptions = NonNullable<ApexOptions["plotOptions"]>;
+type PlotBuilder = (props: UseApexChartInput) => PlotOptions;
 
 function widthValue(
   width: number | undefined,
@@ -37,7 +40,7 @@ function widthValue(
 function buildBarPlotOptions(
   input: UseApexChartInput,
   isHorizontal: boolean,
-): Record<string, unknown> {
+): PlotOptions {
   const widthKey = isHorizontal ? "barHeight" : "columnWidth";
   const widthInput = isHorizontal ? input.barWidth : input.columnWidth;
   return {
@@ -63,7 +66,7 @@ export function ringFitsSliceLabels(input: UseApexChartInput): boolean {
 }
 
 /** v2 donut centre: mono eyebrow over a 20px value. */
-function centerLabelStyles(): Record<string, Record<string, unknown>> {
+function centerLabelStyles() {
   return {
     name: {
       fontFamily: readThemeMonoFont(),
@@ -79,7 +82,7 @@ function centerLabelStyles(): Record<string, Record<string, unknown>> {
   };
 }
 
-function buildDonutPlot(props: UseApexChartInput): Record<string, unknown> {
+function buildDonutPlot(props: UseApexChartInput): PlotOptions {
   const styles = centerLabelStyles();
   return {
     pie: {
@@ -89,7 +92,7 @@ function buildDonutPlot(props: UseApexChartInput): Record<string, unknown> {
           show: !!(props.centralLabel || props.centralSubLabel),
           name: { ...styles.name, show: !!props.centralSubLabel },
           value: { ...styles.value, show: !!props.centralLabel },
-          // Apex paints the resting label from `total`, not from `name`.
+
           total: {
             ...styles.name,
             show: true,
@@ -102,7 +105,7 @@ function buildDonutPlot(props: UseApexChartInput): Record<string, unknown> {
   };
 }
 
-function buildRadialBarPlot(props: UseApexChartInput): Record<string, unknown> {
+function buildRadialBarPlot(props: UseApexChartInput): PlotOptions {
   return {
     radialBar: {
       hollow: { size: props.hollowSize || DEFAULT_RADIAL_HOLE },
@@ -117,7 +120,7 @@ function buildRadialBarPlot(props: UseApexChartInput): Record<string, unknown> {
   };
 }
 
-function buildHeatmapPlot(props: UseApexChartInput): Record<string, unknown> {
+function buildHeatmapPlot(props: UseApexChartInput): PlotOptions {
   return {
     heatmap: {
       shadeIntensity: props.shadeIntensity ?? HEATMAP_DEFAULT_INTENSITY,
@@ -135,8 +138,6 @@ const PLOT_BUILDERS: Partial<Record<ChartType, PlotBuilder>> = {
   heatmap: buildHeatmapPlot,
 };
 
-export function buildPlotOptions(
-  input: UseApexChartInput,
-): Record<string, unknown> {
+export function buildPlotOptions(input: UseApexChartInput): RawOptionSection {
   return PLOT_BUILDERS[input.type]?.(input) ?? {};
 }

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

@@ -1,3 +1,4 @@
+import { isNumber, isObject } from "../../../../dms-core/app/utils/type-check";
 import { APEX_TYPE_CONFIGS } from "./apexTypeConfigs";
 import type { ChartSeries } from "./types";
 import type { UseApexChartInput } from "./useApexChart.types";
@@ -21,17 +22,17 @@ interface AutoYBounds {
   max?: (nativeMax: number) => number;
 }
 
-function isFiniteNumber(value: unknown): value is number {
-  return typeof value === "number" && Number.isFinite(value);
+function isFiniteNumber(value: number | null | undefined): value is number {
+  return isNumber(value) && 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 [];
+function pointValues(point: ChartSeries["data"][number]) {
+  if (isNumber(point)) return [point];
+  if (!point || !isObject(point)) return [];
   return Array.isArray(point.y) ? point.y : [point.y];
 }
 
@@ -55,7 +56,9 @@ function resolvePadding(input: UseApexChartInput): number {
 }
 
 function padOutward(bound: number, padding: number, direction: number): number {
-  return bound + direction * (Math.abs(bound) || ZERO_BOUND_MAGNITUDE) * padding;
+  return (
+    bound + direction * (Math.abs(bound) || ZERO_BOUND_MAGNITUDE) * padding
+  );
 }
 
 /** The smallest 1, 2 or 5 times a power of ten that covers `span`. */
@@ -103,7 +106,8 @@ export function buildAutoYRange(input: UseApexChartInput): AutoYBounds {
   );
   const bound = (native: number, direction: number, round: Rounding) => {
     const extent = [native, ...annotations];
-    const raw = direction === DOWNWARD ? Math.min(...extent) : Math.max(...extent);
+    const raw =
+      direction === DOWNWARD ? Math.min(...extent) : Math.max(...extent);
     const padded = padOutward(raw, padding, direction);
     return snapToStep(padded, stepForBound(padded, knownStep), round);
   };
@@ -119,5 +123,7 @@ export function buildAutoYRange(input: UseApexChartInput): AutoYBounds {
  * once one price carries float noise.
  */
 export function formatPlainAxisValue(value: number): string {
-  return isFiniteNumber(value) ? String(withoutFloatNoise(value)) : String(value);
+  return isFiniteNumber(value)
+    ? String(withoutFloatNoise(value))
+    : String(value);
 }

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

@@ -1,18 +1,13 @@
-import type { ChartSeries, DonutRecord } from "./types";
+import { isNumber } from "../../../../dms-core/app/utils/type-check";
+import type { ChartSeries, ChartSeriesPoint, DonutRecord } from "./types";
 
 type ChartSeriesEntry = ChartSeries["data"][number];
 
-interface LabelledPoint {
-  label?: string;
-  x?: unknown;
-  y?: unknown;
-}
-
 function toDonutRecord(entry: ChartSeriesEntry): DonutRecord {
-  if (typeof entry === "number") {
+  if (isNumber(entry)) {
     return { label: String(entry), value: entry };
   }
-  const point = entry as LabelledPoint;
+  const point: typeof entry & Pick<ChartSeriesPoint, "label"> = entry;
   return {
     label: point.label ?? String(point.x ?? ""),
     value: Number(point.y ?? 0),

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

@@ -1,3 +1,4 @@
+import { isNumber } from "../../../../dms-core/app/utils/type-check";
 import type { ChartType } from "./types";
 
 export const CHART_EVENT_NAMES = {
@@ -27,18 +28,18 @@ export interface ClickPointValue {
   values?: number[];
 }
 
-interface PointWithY {
-  y?: unknown;
-}
-
 /**
  * Projects a series point onto the click payload's value fields: scalars
  * land in `value`, tuple points (rangeArea, candlestick) leave `value` null
  * and carry their tuple in `values`.
  */
-export function readPointValue(point: unknown): ClickPointValue {
-  if (typeof point === "number") return { value: point };
-  const y = (point as PointWithY | undefined)?.y;
-  if (Array.isArray(y)) return { value: null, values: y as number[] };
-  return { value: typeof y === "number" ? y : null };
+export function readPointValue(
+  point: Parameters<typeof isNumber>[0],
+): ClickPointValue {
+  if (isNumber(point)) return { value: point };
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Keep the public unknown input and its existing unchecked optional property read, including getters and primitive boxing.
+  const y = (point as { y?: Parameters<typeof isNumber>[0] } | null | undefined)
+    ?.y;
+  if (Array.isArray(y)) return { value: null, values: y };
+  return { value: isNumber(y) ? y : null };
 }

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

@@ -1,3 +1,4 @@
+import { isString } from "../../../../dms-core/app/utils/type-check";
 import type { ChartSeries, DonutRecord } from "./types";
 
 /** Writes one display string in the reader's language (`processI18n`). */
@@ -5,13 +6,11 @@ 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;
+function translateText<T extends string | number | Date | undefined>(
+  value: T,
+  translate: ChartTextTranslate,
+) {
+  return isString(value) ? translate(value) : value;
 }
 
 /**
@@ -23,12 +22,12 @@ function localizePoint(
   point: ChartSeriesEntry,
   translate: ChartTextTranslate,
 ): ChartSeriesEntry {
+  // oxlint-disable-next-line anti-slop/no-runtime-typeof -- The shared isObject guard widens the point owner's fields to unknown; typeof preserves ChartSeriesEntry without another assertion or narrower runtime validation.
   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;
+  const localized: typeof point & { label?: string } = { ...point };
+  if ("x" in point) localized.x = translateText(point.x, translate);
+  if ("label" in point) localized.label = translateText(point.label, translate);
+  return localized;
 }
 
 /**
@@ -43,7 +42,7 @@ export function localizeSeries(
 ): ChartSeries {
   return {
     ...series,
-    name: translateText(series.name, translate) as string,
+    name: translateText(series.name, translate),
     data: Array.isArray(series.data)
       ? series.data.map((point) => localizePoint(point, translate))
       : series.data,
@@ -57,6 +56,6 @@ export function localizeDonutRecords(
 ): DonutRecord[] {
   return records.map((record) => ({
     ...record,
-    label: translateText(record.label, translate) as string,
+    label: translateText(record.label, translate),
   }));
 }

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

@@ -122,8 +122,18 @@ export interface TopListCardResponse {
   items: TopListItem[];
 }
 
+/** One measured group, as a data source of shape `series` answers it. */
+export interface ChartGroupPoint {
+  x: string | number;
+  y: number | null;
+}
+
+/**
+ * What a bare chart's data source answers: one point per group, the shape the
+ * block registry declares as `series`, or named series.
+ */
 export interface ChartResponse {
-  series: ChartSeries[];
+  series: ChartSeries[] | ChartGroupPoint[];
 }
 
 export type ValueFormat = "number" | "currency" | "percent" | "compact";