@antelopejs/dms 0.5.6 → 0.6.0

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

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { useMounted } from "@vueuse/core";
+import DmsEmptyState from "../empty-state/EmptyState.vue";
+import DmsSectionHeader from "../section-header/SectionHeader.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 { formatValue } from "../../composables/chart/formatValue";
 import { resolveSparklineAccent } from "../../composables/chart/resolveSparklineAccent";
@@ -27,38 +34,54 @@ interface Props extends DefaultComponentProps {
   rankColor?: UiColor;
   showDelta?: boolean;
   showSparkline?: boolean;
+  /** 3px proportion bar under each title, width = value / largest value. */
+  showBar?: boolean;
   sparklineAccent?: string;
   invert?: boolean;
   badgeColor?: UiColor;
   maxHeight?: string;
   staticItems?: TopListItem[];
   emptyLabel?: string;
+  /**
+   * Placeholder rows while `fetchUrl` loads: the "top N" it answers.
+   * Optional. Defaults to 10, enough to fill the default `maxHeight`.
+   */
+  skeletonCount?: number;
 }
 
-const RANK_PAD_WIDTH = 2;
 const DEFAULT_MAX_HEIGHT = "24rem";
-const EMPTY_STATE_MIN_HEIGHT = "12rem";
 const DEFAULT_HIGHLIGHT_TOP_N = 3;
-const SKELETON_ROW_COUNT = 5;
+// 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";
 const EMPTY_LABEL_FALLBACK_KEY = "dms.top_list.empty";
 const EMPTY_LABEL_FALLBACK_TEXT = "No data";
-const MUTED_RANK_CLASS = "text-muted";
-
-const RANK_HIGHLIGHT_CLASSES: Record<string, string> = {
-  primary: "text-primary font-semibold",
-  secondary: "text-secondary font-semibold",
-  info: "text-info font-semibold",
-  success: "text-success font-semibold",
-  warning: "text-warning font-semibold",
-  error: "text-error font-semibold",
-  neutral: "text-toned font-semibold",
+const EMPTY_ICON = "i-ph-rows";
+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> = {
+  primary: "bg-(--dms-accent-fill)",
+  secondary: "bg-(--ui-color-secondary-400)",
+  info: "bg-(--ui-color-info-400)",
+  success: "bg-(--ui-color-success-400)",
+  warning: "bg-(--ui-color-warning-400)",
+  error: "bg-(--ui-color-error-400)",
+  neutral: "bg-(--ui-border-accented)",
 };
+const RANK_TILE_CLASS =
+  "text-(--dms-accent-on-fill) shadow-(--dms-fill-highlight)";
 
 const props = withDefaults(defineProps<Props>(), {
   showRank: true,
   showDelta: true,
   showSparkline: false,
+  showBar: false,
   highlightTopN: DEFAULT_HIGHLIGHT_TOP_N,
   rankColor: "primary",
   badgeColor: "primary",
@@ -66,6 +89,7 @@ const props = withDefaults(defineProps<Props>(), {
   valueFormat: "number",
   currencyCode: "EUR",
   maxHeight: DEFAULT_MAX_HEIGHT,
+  skeletonCount: SKELETON_ROW_COUNT,
 });
 
 const { locale, t } = useI18n();
@@ -93,21 +117,47 @@ const items = computed<TopListItem[]>(() => data.value?.items ?? []);
 const hasAnyIcon = computed(() =>
   items.value.some((item) => Boolean(item.icon || item.avatar)),
 );
+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);
-watch(items, () => {
+const isOverflowing = ref(false);
+function measureOverflow() {
+  const element = scrollRef.value;
+  isOverflowing.value =
+    !!element && element.scrollHeight > element.clientHeight;
+}
+watch(items, async () => {
   if (scrollRef.value) scrollRef.value.scrollTop = 0;
+  await nextTick();
+  measureOverflow();
 });
+onMounted(measureOverflow);
 
-function rankLabel(index: number): string {
-  return String(index + 1).padStart(RANK_PAD_WIDTH, "0");
+const rankFillClass = computed(
+  () => RANK_FILL_CLASSES[props.rankColor] ?? RANK_FILL_CLASSES.primary!,
+);
+
+function isHighlighted(index: number): boolean {
+  return index < props.highlightTopN;
 }
 
 function rankClass(index: number): string {
-  if (index >= props.highlightTopN) return MUTED_RANK_CLASS;
-  return (
-    RANK_HIGHLIGHT_CLASSES[props.rankColor] ?? RANK_HIGHLIGHT_CLASSES.primary!
-  );
+  if (!isHighlighted(index)) return PLAIN_RANK_CLASS;
+  return `${rankFillClass.value} ${RANK_TILE_CLASS}`;
+}
+
+function barPercent(item: TopListItem): number | null {
+  if (!props.showBar || largestValue.value <= 0) return null;
+  return (Math.max(item.value, 0) / largestValue.value) * PERCENT;
+}
+
+function barClass(index: number): string {
+  if (isHighlighted(index)) return rankFillClass.value;
+  return `${rankFillClass.value} ${QUIET_BAR_OPACITY_CLASS}`;
 }
 
 function formattedValue(item: TopListItem): string {
@@ -129,13 +179,22 @@ function sparklineAccentFor(item: TopListItem): string {
 }
 
 const scopeState = usePeriodScope(props.periodScope);
+// The scope registers in the browser only, so the server cannot print the
+// preset: the badge slot is drawn on both sides from the start (a skeleton
+// until mounted), and the label follows once the scope is known.
+const isMounted = useMounted();
 const badgeLabel = computed<string | null>(() => {
-  if (!props.periodScope) return null;
+  if (!props.periodScope || !isMounted.value) return null;
   const state = scopeState.value;
   if (!state) return null;
   return t(`${PRESET_LABEL_KEY_PREFIX}.${state.preset}`, state.preset);
 });
 
+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);
+
 const emptyLabelDisplay = computed(() =>
   props.emptyLabel
     ? processI18n(props.emptyLabel)
@@ -143,60 +202,72 @@ const emptyLabelDisplay = computed(() =>
 );
 
 const maxHeightStyle = computed(() => ({ maxHeight: props.maxHeight }));
-const emptyStateStyle = { minHeight: EMPTY_STATE_MIN_HEIGHT };
 
-const RANK_COLUMN_WIDTH = "1.75rem";
-const ICON_COLUMN_WIDTH = "1.5rem";
+// 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";
-const TREND_COLUMN_WIDTH = "auto";
+// Fixed so the deltas line up down the list whatever their length.
+const TREND_COLUMN_WIDTH = "62px";
 
-const gridStyle = computed(() => {
-  const columns: string[] = [];
+// 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);
-  if (hasAnyIcon.value) columns.push(ICON_COLUMN_WIDTH);
+  if (icon && hasAnyIcon.value) columns.push(ICON_COLUMN_WIDTH);
   columns.push(TITLE_COLUMN_WIDTH);
   columns.push(VALUE_COLUMN_WIDTH);
-  if (props.showSparkline) columns.push(SPARKLINE_COLUMN_WIDTH);
+  if (sparkline && props.showSparkline) columns.push(SPARKLINE_COLUMN_WIDTH);
   if (props.showDelta) columns.push(TREND_COLUMN_WIDTH);
-  return {
-    display: "grid",
-    gridTemplateColumns: columns.join(" "),
-  };
-});
+  columns.push(EDGE_COLUMN_WIDTH);
+  return columns.join(" ");
+}
+
+const gridStyle = computed(() => ({
+  "--dms-top-list-cols": columnsTemplate(true, true),
+  "--dms-top-list-cols-mid": columnsTemplate(false, true),
+  "--dms-top-list-cols-narrow": columnsTemplate(false, false),
+}));
 </script>
 
 <template>
-  <DmsCard :padded="false" class="p-4 sm:p-5">
-    <div class="mb-4 flex items-start justify-between gap-3">
-      <div class="min-w-0">
-        <p class="truncate text-sm font-semibold sm:text-base">
-          {{ processI18n(title) }}
-        </p>
-        <p v-if="description" class="text-muted mt-0.5 truncate text-xs">
-          {{ processI18n(description) }}
-        </p>
-      </div>
-      <UBadge
-        v-if="badgeLabel"
-        :color="badgeColor"
-        variant="soft"
-        size="sm"
-        class="shrink-0"
-      >
-        {{ badgeLabel }}
-      </UBadge>
-    </div>
+  <DmsCard :padded="false" class="flex min-w-0 flex-col overflow-hidden">
+    <DmsSectionHeader
+      size="card"
+      class="border-default border-b py-3.5 pr-4 pl-[18px]"
+      :title="processI18n(title)"
+      :description="description ? processI18n(description) : undefined"
+    >
+      <template v-if="periodScope" #trailing>
+        <UBadge v-if="badgeLabel" :color="badgeColor" variant="soft" size="sm">
+          {{ badgeLabel }}
+        </UBadge>
+        <USkeleton v-else class="h-5 w-16 rounded-[5px]" aria-hidden="true" />
+      </template>
+    </DmsSectionHeader>
 
     <div
       ref="scrollRef"
-      class="overflow-y-auto overscroll-contain pr-2"
+      class="@container [scrollbar-width:thin] overflow-y-auto overscroll-contain"
+      :class="
+        isOverflowing &&
+        '[mask-image:linear-gradient(to_bottom,black_calc(100%-36px),transparent)]'
+      "
       :style="maxHeightStyle"
     >
       <ul
         v-if="items.length > 0"
-        class="divide-default gap-x-3 divide-y"
+        :aria-busy="isRefreshing || undefined"
+        :class="isRefreshing && 'opacity-55'"
+        class="grid [grid-template-columns:var(--dms-top-list-cols-narrow)] gap-x-2 divide-y divide-(--ui-border-muted) py-1 transition-opacity @[22rem]:[grid-template-columns:var(--dms-top-list-cols-mid)] @[22rem]:gap-x-3 @[28rem]:[grid-template-columns:var(--dms-top-list-cols)]"
         :style="gridStyle"
       >
         <DmsTopListRow
@@ -204,7 +275,7 @@ const gridStyle = computed(() => {
           :key="item.id"
           :item="item"
           :show-rank="showRank"
-          :rank-label="rankLabel(index)"
+          :rank-label="String(index + 1)"
           :rank-class="rankClass(index)"
           :has-any-icon="hasAnyIcon"
           :show-sparkline="showSparkline"
@@ -212,23 +283,40 @@ const gridStyle = computed(() => {
           :show-delta="showDelta"
           :invert="invert"
           :formatted-value="formattedValue(item)"
+          :bar-percent="barPercent(item)"
+          :bar-class="barClass(index)"
         />
       </ul>
 
+      <DmsEmptyState
+        v-else-if="!isFirstLoad"
+        :icon="EMPTY_ICON"
+        :title="emptyLabelDisplay"
+        size="sm"
+        class="min-h-48 place-content-center"
+      />
+
       <div
-        v-else-if="!isLoading"
-        class="flex items-center justify-center text-center"
-        :style="emptyStateStyle"
+        v-else
+        class="divide-y divide-(--ui-border-muted) py-1"
+        aria-busy="true"
       >
-        <p class="text-muted text-sm">{{ emptyLabelDisplay }}</p>
-      </div>
-
-      <div v-else class="space-y-2 py-2">
-        <USkeleton
-          v-for="i in SKELETON_ROW_COUNT"
-          :key="i"
-          class="h-10 w-full"
-        />
+        <div
+          v-for="row in props.skeletonCount"
+          :key="row"
+          class="flex h-14 items-center gap-3 px-[18px]"
+        >
+          <USkeleton
+            v-if="showRank"
+            class="size-[26px] shrink-0 rounded-[7px]"
+          />
+          <div class="grid flex-1 gap-1.5">
+            <USkeleton class="h-3 w-2/5" />
+            <USkeleton class="h-2.5 w-1/4" />
+          </div>
+          <USkeleton class="h-3 w-14" />
+          <USkeleton v-if="showDelta" class="h-3 w-[46px]" />
+        </div>
       </div>
     </div>
   </DmsCard>

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

@@ -1,11 +1,17 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import type { TopListItem } from "../../../composables/chart/types";
+// 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";
 
 interface Props {
   item: TopListItem;
   showRank: boolean;
   rankLabel: string;
+  /** Classes of the 26px rank tile (solid fill for the top N, ring otherwise). */
   rankClass: string;
   hasAnyIcon: boolean;
   showSparkline: boolean;
@@ -13,9 +19,17 @@ interface Props {
   showDelta: boolean;
   invert?: boolean;
   formattedValue: string;
+  /** Width of the proportion bar in %, or null to hide it. */
+  barPercent?: number | null;
+  barClass?: string;
 }
 
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  barPercent: null,
+  barClass: "",
+});
+
+const PERCENT_UNIT = "%";
 
 const { processI18n } = useTranslation();
 
@@ -27,18 +41,19 @@ const descriptionDisplay = computed(() =>
 const hasSparklineData = computed(
   () => (props.item.sparkline?.length ?? 0) > 0,
 );
-const hasDeltaData = computed(
-  () => props.item.delta !== null && props.item.delta !== undefined,
-);
-const deltaForBadge = computed(() =>
-  hasDeltaData.value ? (props.item.delta as number) : null,
-);
+const deltaForBadge = computed(() => props.item.delta ?? null);
+const barStyle = computed(() => ({
+  width: `${props.barPercent ?? 0}${PERCENT_UNIT}`,
+}));
 </script>
 
 <template>
   <li
-    class="hover:bg-elevated/60 relative col-[1/-1] grid grid-cols-subgrid items-center py-2.5 transition-colors"
-    :class="item.to ? 'cursor-pointer' : ''"
+    class="relative col-[1/-1] grid grid-cols-subgrid items-center transition-colors hover:bg-(--ui-bg-elevated)/60"
+    :class="[
+      item.to ? 'cursor-pointer' : '',
+      barPercent === null ? 'h-14' : 'h-[60px]',
+    ]"
   >
     <DmsLink
       v-if="item.to"
@@ -46,51 +61,70 @@ const deltaForBadge = computed(() =>
       class="absolute inset-0 z-10"
       :aria-label="titleDisplay"
     />
+    <span aria-hidden="true" />
     <span
       v-if="showRank"
-      class="text-center font-mono text-xs tabular-nums"
+      class="grid size-[26px] place-items-center rounded-[7px] font-mono text-[11px] font-bold tabular-nums"
       :class="rankClass"
     >
       {{ rankLabel }}
     </span>
     <template v-if="hasAnyIcon">
+      <!-- The icon column only exists on a card 22rem wide or more
+           (TopListCard container query). -->
       <UAvatar
         v-if="item.avatar"
         :src="item.avatar.src"
         :alt="item.avatar.alt"
         size="sm"
+        class="hidden @[22rem]:inline-flex"
       />
-      <UIcon
+      <span
         v-else-if="item.icon"
-        :name="item.icon"
-        class="text-toned size-5"
-      />
-      <span v-else aria-hidden="true" />
+        class="text-muted hidden size-[26px] place-items-center rounded-[7px] bg-(--ui-bg-elevated) @[22rem]:grid"
+      >
+        <UIcon :name="item.icon" class="size-[15px]" :aria-hidden="true" />
+      </span>
+      <span v-else class="hidden @[22rem]:block" aria-hidden="true" />
     </template>
     <div class="min-w-0">
-      <p class="truncate text-sm font-medium">{{ titleDisplay }}</p>
-      <p v-if="item.description" class="text-muted truncate text-xs">
+      <p
+        class="text-highlighted truncate text-[13px] leading-[1.35] font-[550]"
+      >
+        {{ titleDisplay }}
+      </p>
+      <p v-if="item.description" class="text-dimmed truncate text-xs">
         {{ descriptionDisplay }}
       </p>
+      <div
+        v-if="barPercent !== null"
+        class="mt-1.5 h-[3px] overflow-hidden rounded-full bg-(--ui-bg-elevated)"
+      >
+        <div class="h-full rounded-full" :class="barClass" :style="barStyle" />
+      </div>
     </div>
     <span
-      class="text-muted justify-self-end text-xs whitespace-nowrap tabular-nums"
+      class="text-toned justify-self-end font-mono text-[13px] whitespace-nowrap tabular-nums"
     >
       {{ formattedValue }}
     </span>
-    <div v-if="showSparkline" class="h-6 w-16">
+    <!-- Sparkline column from 28rem of card width (container query). -->
+    <div v-if="showSparkline" class="hidden h-6 w-16 @[28rem]:block">
       <DmsSparkline
         v-if="hasSparklineData"
         :values="item.sparkline ?? []"
         :accent="sparklineAccent"
         :aria-label="titleDisplay"
+        area="flat"
       />
     </div>
     <DmsTrendBadge
       v-if="showDelta"
       :delta="deltaForBadge"
       :invert="invert"
+      variant="text"
       class="justify-self-end"
     />
+    <span aria-hidden="true" />
   </li>
 </template>

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

@@ -1,11 +1,20 @@
 import type { UseApexChartInput } from "./useApexChart.types";
 import type { ChartType } from "./types";
+import {
+  readThemeDimmed,
+  readThemeHighlighted,
+  readThemeMonoFont,
+  readThemeTrack,
+} from "./useChartTheme";
 
-const DEFAULT_BAR_RADIUS = 6;
+const DEFAULT_BAR_RADIUS = 4;
 const DEFAULT_BAR_WIDTH_PCT = "60%";
-const DEFAULT_DONUT_HOLE = "70%";
+const DEFAULT_DONUT_HOLE = "76%";
 const DEFAULT_RADIAL_HOLE = "60%";
-const TRACK_BG = "rgba(120,120,120,0.1)";
+const CENTER_NAME_FONT_SIZE = "10.5px";
+const CENTER_NAME_FONT_WEIGHT = 600;
+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;
@@ -29,6 +38,8 @@ function buildBarPlotOptions(
     bar: {
       horizontal: isHorizontal,
       borderRadius: input.roundedCorners === false ? 0 : DEFAULT_BAR_RADIUS,
+      borderRadiusApplication: "end",
+      borderRadiusWhenStacked: "last",
       [widthKey]: widthValue(widthInput, DEFAULT_BAR_WIDTH_PCT),
       distributed: input.distributed ?? false,
     },
@@ -40,16 +51,36 @@ function donutSizeFor(arcWidth: number | undefined): string {
   return `${HUNDRED_PERCENT - arcWidth}%`;
 }
 
+/** v2 donut centre: mono eyebrow over a 20px value. */
+function centerLabelStyles(): Record<string, Record<string, unknown>> {
+  return {
+    name: {
+      fontFamily: readThemeMonoFont(),
+      fontSize: CENTER_NAME_FONT_SIZE,
+      fontWeight: CENTER_NAME_FONT_WEIGHT,
+      color: readThemeDimmed(),
+    },
+    value: {
+      fontSize: CENTER_VALUE_FONT_SIZE,
+      fontWeight: CENTER_VALUE_FONT_WEIGHT,
+      color: readThemeHighlighted(),
+    },
+  };
+}
+
 function buildDonutPlot(props: UseApexChartInput): Record<string, unknown> {
+  const styles = centerLabelStyles();
   return {
     pie: {
       donut: {
         size: donutSizeFor(props.arcWidth),
         labels: {
           show: !!(props.centralLabel || props.centralSubLabel),
-          name: { show: !!props.centralSubLabel },
-          value: { show: !!props.centralLabel },
+          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,
             label: props.centralSubLabel || props.title || "",
             formatter: () => props.centralLabel ?? "",
@@ -64,7 +95,7 @@ function buildRadialBarPlot(props: UseApexChartInput): Record<string, unknown> {
   return {
     radialBar: {
       hollow: { size: props.hollowSize || DEFAULT_RADIAL_HOLE },
-      track: { background: TRACK_BG },
+      track: { background: readThemeTrack() },
       dataLabels: {
         total: {
           show: !!props.showTotal,

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

@@ -8,10 +8,11 @@ export interface ApexTypeConfig {
   sharedTooltip: boolean;
 }
 
-const SMOOTH_LINE_STROKE = { curve: "smooth", width: 3 } as const;
+const SMOOTH_LINE_STROKE = { curve: "smooth", width: 2.5 } as const;
 const SMOOTH_BAND_STROKE = { curve: "smooth", width: 1 } as const;
 const NO_STROKE = { width: 0 } as const;
 const THIN_STROKE = { width: 2 } as const;
+const SEGMENT_GAP_STROKE = { width: 3 } as const;
 const MEDIUM_STROKE = { width: 1 } as const;
 
 export const APEX_TYPE_CONFIGS: Record<ChartType, ApexTypeConfig> = {
@@ -60,14 +61,14 @@ export const APEX_TYPE_CONFIGS: Record<ChartType, ApexTypeConfig> = {
   donut: {
     apexType: "donut",
     isCircular: true,
-    defaultStroke: THIN_STROKE,
+    defaultStroke: SEGMENT_GAP_STROKE,
     supportsDataLabels: true,
     sharedTooltip: false,
   },
   pie: {
     apexType: "pie",
     isCircular: true,
-    defaultStroke: THIN_STROKE,
+    defaultStroke: SEGMENT_GAP_STROKE,
     supportsDataLabels: true,
     sharedTooltip: false,
   },

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

@@ -1,4 +1,5 @@
-const POSITIVE_ACCENT = "success";
+/** Default accent of a good trend; KPI cards pass "primary" (v2 cyan). */
+export const POSITIVE_ACCENT = "success";
 const NEGATIVE_ACCENT = "error";
 const NEUTRAL_ACCENT = "neutral";
 const AUTO_ACCENT = "auto";
@@ -20,8 +21,7 @@ function trendFromSparkline(values: number[]): SparklineTrend {
   return "neutral";
 }
 
-const TREND_TO_ACCENT: Record<SparklineTrend, string> = {
-  positive: POSITIVE_ACCENT,
+const TREND_TO_ACCENT: Record<Exclude<SparklineTrend, "positive">, string> = {
   negative: NEGATIVE_ACCENT,
   neutral: NEUTRAL_ACCENT,
 };
@@ -45,12 +45,15 @@ function detectTrend(input: AutoAccentInput): SparklineTrend {
   return trendFromSparkline(input.sparkline);
 }
 
+/** Resolve "auto" from the delta (or the series slope), honouring `invert`. */
 export function resolveSparklineAccent(
   accent: string,
   input: AutoAccentInput,
+  positiveAccent: string = POSITIVE_ACCENT,
 ): string {
   if (accent !== AUTO_ACCENT) return accent;
   const trend = detectTrend(input);
   const finalTrend = input.invert ? INVERTED_TREND[trend] : trend;
+  if (finalTrend === "positive") return positiveAccent;
   return TREND_TO_ACCENT[finalTrend];
 }