@antelopejs/dms 0.0.1

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

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useChartFetch } from "../../composables/chart/useChartFetch";
+import { formatValue } from "../../composables/chart/formatValue";
+import { resolveSparklineAccent } from "../../composables/chart/resolveSparklineAccent";
+import { usePeriodScope } from "#dms-core/app/composables/period/usePeriodScope";
+import type {
+  TopListCardResponse,
+  TopListItem,
+  UiColor,
+  ValueFormat,
+  ValuePrecision,
+} from "../../composables/chart/types";
+import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+
+interface Props extends DefaultComponentProps {
+  title: string;
+  description?: string;
+  fetchUrl?: string;
+  fetchUrlMethod?: string;
+  periodScope?: string;
+  valueFormat?: ValueFormat;
+  currencyCode?: string;
+  valuePrecision?: ValuePrecision;
+  showRank?: boolean;
+  highlightTopN?: number;
+  rankColor?: UiColor;
+  showDelta?: boolean;
+  showSparkline?: boolean;
+  sparklineAccent?: string;
+  invert?: boolean;
+  badgeColor?: UiColor;
+  maxHeight?: string;
+  staticItems?: TopListItem[];
+  emptyLabel?: string;
+}
+
+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;
+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 props = withDefaults(defineProps<Props>(), {
+  showRank: true,
+  showDelta: true,
+  showSparkline: false,
+  highlightTopN: DEFAULT_HIGHLIGHT_TOP_N,
+  rankColor: "primary",
+  badgeColor: "primary",
+  sparklineAccent: "auto",
+  valueFormat: "number",
+  currencyCode: "EUR",
+  maxHeight: DEFAULT_MAX_HEIGHT,
+});
+
+const { locale, t } = useI18n();
+const { processI18n } = useTranslation();
+useComponentEvent(props.componentId);
+const { state: watchState } = useWatch(
+  props.watchActions || [],
+  props.componentId,
+);
+const watchKey = computed(() => JSON.stringify(watchState.value));
+
+const staticData = computed<TopListCardResponse | null>(() =>
+  props.staticItems ? { items: props.staticItems } : null,
+);
+
+const { data, isLoading } = useChartFetch<TopListCardResponse>({
+  fetchUrl: props.fetchUrl,
+  fetchUrlMethod: props.fetchUrlMethod,
+  periodScope: props.periodScope,
+  staticData: () => staticData.value,
+  watchSource: () => watchKey.value,
+});
+
+const items = computed<TopListItem[]>(() => data.value?.items ?? []);
+const hasAnyIcon = computed(() =>
+  items.value.some((item) => Boolean(item.icon || item.avatar)),
+);
+
+const scrollRef = ref<HTMLElement | null>(null);
+watch(items, () => {
+  if (scrollRef.value) scrollRef.value.scrollTop = 0;
+});
+
+function rankLabel(index: number): string {
+  return String(index + 1).padStart(RANK_PAD_WIDTH, "0");
+}
+
+function rankClass(index: number): string {
+  if (index >= props.highlightTopN) return MUTED_RANK_CLASS;
+  return (
+    RANK_HIGHLIGHT_CLASSES[props.rankColor] ?? RANK_HIGHLIGHT_CLASSES.primary!
+  );
+}
+
+function formattedValue(item: TopListItem): string {
+  return formatValue(
+    item.value,
+    props.valueFormat,
+    locale.value,
+    props.currencyCode,
+    props.valuePrecision,
+  );
+}
+
+function sparklineAccentFor(item: TopListItem): string {
+  return resolveSparklineAccent(props.sparklineAccent, {
+    delta: item.delta ?? null,
+    sparkline: item.sparkline ?? [],
+    invert: props.invert,
+  });
+}
+
+const scopeState = usePeriodScope(props.periodScope);
+const badgeLabel = computed<string | null>(() => {
+  if (!props.periodScope) return null;
+  const state = scopeState.value;
+  if (!state) return null;
+  return t(`${PRESET_LABEL_KEY_PREFIX}.${state.preset}`, state.preset);
+});
+
+const emptyLabelDisplay = computed(() =>
+  props.emptyLabel
+    ? processI18n(props.emptyLabel)
+    : t(EMPTY_LABEL_FALLBACK_KEY, EMPTY_LABEL_FALLBACK_TEXT),
+);
+
+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";
+const TITLE_COLUMN_WIDTH = "minmax(0,1fr)";
+const VALUE_COLUMN_WIDTH = "auto";
+const SPARKLINE_COLUMN_WIDTH = "4rem";
+const TREND_COLUMN_WIDTH = "auto";
+
+const gridStyle = computed(() => {
+  const columns: string[] = [];
+  if (props.showRank) columns.push(RANK_COLUMN_WIDTH);
+  if (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 (props.showDelta) columns.push(TREND_COLUMN_WIDTH);
+  return {
+    display: "grid",
+    gridTemplateColumns: columns.join(" "),
+  };
+});
+</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>
+
+    <div
+      ref="scrollRef"
+      class="overflow-y-auto overscroll-contain pr-2"
+      :style="maxHeightStyle"
+    >
+      <ul
+        v-if="items.length > 0"
+        class="divide-default gap-x-3 divide-y"
+        :style="gridStyle"
+      >
+        <DmsTopListRow
+          v-for="(item, index) in items"
+          :key="item.id"
+          :item="item"
+          :show-rank="showRank"
+          :rank-label="rankLabel(index)"
+          :rank-class="rankClass(index)"
+          :has-any-icon="hasAnyIcon"
+          :show-sparkline="showSparkline"
+          :sparkline-accent="sparklineAccentFor(item)"
+          :show-delta="showDelta"
+          :invert="invert"
+          :formatted-value="formattedValue(item)"
+        />
+      </ul>
+
+      <div
+        v-else-if="!isLoading"
+        class="flex items-center justify-center text-center"
+        :style="emptyStateStyle"
+      >
+        <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>
+    </div>
+  </DmsCard>
+</template>

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

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import type { TopListItem } from "../../../composables/chart/types";
+
+interface Props {
+  item: TopListItem;
+  showRank: boolean;
+  rankLabel: string;
+  rankClass: string;
+  hasAnyIcon: boolean;
+  showSparkline: boolean;
+  sparklineAccent: string;
+  showDelta: boolean;
+  invert?: boolean;
+  formattedValue: string;
+}
+
+const props = defineProps<Props>();
+
+const { processI18n } = useTranslation();
+
+const titleDisplay = computed(() => processI18n(props.item.title));
+const descriptionDisplay = computed(() =>
+  props.item.description ? processI18n(props.item.description) : "",
+);
+
+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,
+);
+</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' : ''"
+  >
+    <DmsLink
+      v-if="item.to"
+      :to="item.to"
+      class="absolute inset-0 z-10"
+      :aria-label="titleDisplay"
+    />
+    <span
+      v-if="showRank"
+      class="text-center font-mono text-xs tabular-nums"
+      :class="rankClass"
+    >
+      {{ rankLabel }}
+    </span>
+    <template v-if="hasAnyIcon">
+      <UAvatar
+        v-if="item.avatar"
+        :src="item.avatar.src"
+        :alt="item.avatar.alt"
+        size="sm"
+      />
+      <UIcon
+        v-else-if="item.icon"
+        :name="item.icon"
+        class="text-toned size-5"
+      />
+      <span v-else 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">
+        {{ descriptionDisplay }}
+      </p>
+    </div>
+    <span
+      class="text-muted justify-self-end text-xs whitespace-nowrap tabular-nums"
+    >
+      {{ formattedValue }}
+    </span>
+    <div v-if="showSparkline" class="h-6 w-16">
+      <DmsSparkline
+        v-if="hasSparklineData"
+        :values="item.sparkline ?? []"
+        :accent="sparklineAccent"
+        :aria-label="titleDisplay"
+      />
+    </div>
+    <DmsTrendBadge
+      v-if="showDelta"
+      :delta="deltaForBadge"
+      :invert="invert"
+      class="justify-self-end"
+    />
+  </li>
+</template>

package/frontend-vue/layers/dms-ui/app/components/tree/Tree.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import type { TreeNode, TreeProps } from "../../composables/tree/types";
+import {
+  TreeSelectionBehavior,
+  TreeNavigationDirection,
+} from "../../composables/tree/types";
+import { buildTreeShortcuts } from "../../composables/tree/shortcuts";
+
+const { processI18n } = useTranslation();
+
+const props = withDefaults(defineProps<TreeProps>(), {
+  color: Color.primary,
+  size: Size.medium,
+  multiple: false,
+  disabled: false,
+  selectionBehavior: TreeSelectionBehavior.toggle,
+  propagateSelect: false,
+  lazyLoad: false,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: TreeNode | TreeNode[] | undefined];
+  "items-loaded": [value: TreeNode[]];
+}>();
+
+const { items, itemsRef, selected, loading, isAnyNodeLoading, expandedNodes } =
+  await useTree(props);
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (props.multiple) {
+      const currentValues = Array.isArray(selected.value)
+        ? (selected.value as TreeNode[])
+            .map((n) => n.value)
+            .sort()
+            .join(",")
+        : "";
+      const newValues = Array.isArray(newValue)
+        ? (newValue as TreeNode[])
+            .map((n) => n.value)
+            .sort()
+            .join(",")
+        : "";
+
+      if (currentValues !== newValues) {
+        selected.value = newValue;
+      }
+    } else {
+      const currentValue =
+        selected.value && !Array.isArray(selected.value)
+          ? selected.value.value
+          : undefined;
+      const newVal =
+        newValue && !Array.isArray(newValue) ? newValue.value : undefined;
+
+      if (currentValue !== newVal) {
+        selected.value = newValue;
+      }
+    }
+  },
+  { deep: true },
+);
+
+onMounted(() => {
+  emit("items-loaded", items.value);
+});
+
+watch(items, (newItems) => {
+  if (newItems && newItems.length > 0) {
+    emit("items-loaded", newItems);
+  }
+});
+
+watch(
+  selected,
+  (newValue) => {
+    emit("update:modelValue", newValue);
+  },
+  { deep: true },
+);
+
+const treeContainer = useTemplateRef<HTMLElement>("treeContainer");
+const focusedNodeIndex = ref(0);
+
+function navigateTree(direction: TreeNavigationDirection) {
+  if (!treeContainer.value) return;
+
+  const activeElement = document.activeElement;
+  if (!activeElement || !treeContainer.value.contains(activeElement)) return;
+
+  const allNodes = treeContainer.value.querySelectorAll('[role="treeitem"]');
+  if (!allNodes.length) return;
+
+  const navigationHandlers: Record<TreeNavigationDirection, () => void> = {
+    [TreeNavigationDirection.DOWN]: () => {
+      focusedNodeIndex.value = Math.min(
+        focusedNodeIndex.value + 1,
+        allNodes.length - 1,
+      );
+      (allNodes[focusedNodeIndex.value] as HTMLElement)?.focus();
+    },
+    [TreeNavigationDirection.UP]: () => {
+      focusedNodeIndex.value = Math.max(focusedNodeIndex.value - 1, 0);
+      (allNodes[focusedNodeIndex.value] as HTMLElement)?.focus();
+    },
+    [TreeNavigationDirection.SELECT]: () => {
+      (allNodes[focusedNodeIndex.value] as HTMLElement)?.click();
+    },
+    [TreeNavigationDirection.HOME]: () => {
+      focusedNodeIndex.value = 0;
+      (allNodes[0] as HTMLElement)?.focus();
+    },
+    [TreeNavigationDirection.END]: () => {
+      focusedNodeIndex.value = allNodes.length - 1;
+      (allNodes[allNodes.length - 1] as HTMLElement)?.focus();
+    },
+  };
+
+  navigationHandlers[direction]();
+}
+
+const shortcutHandlers: Record<string, () => void> = (
+  buildTreeShortcuts as (...args: unknown[]) => Record<string, () => void>
+)({
+  navigateTree,
+  props,
+  items,
+  selected,
+});
+defineShortcuts(shortcutHandlers as Record<string, (() => void) | undefined>);
+</script>
+
+<template>
+  <DmsCard>
+    <template v-if="props.title">
+      <section class="space-y-1">
+        <h2 class="text-highlighted text-xl font-semibold">
+          {{ processI18n(props.title) }}
+        </h2>
+
+        <p v-if="props.description" class="text-dimmed text-sm">
+          {{ processI18n(props.description) }}
+        </p>
+      </section>
+    </template>
+
+    <div
+      ref="treeContainer"
+      class="my-2"
+      tabindex="0"
+      :aria-label="props.title || 'Tree navigation'"
+      :aria-busy="loading || isAnyNodeLoading"
+    >
+      <div v-if="loading" class="space-y-3">
+        <div v-for="i in 5" :key="i" class="flex items-center gap-2">
+          <USkeleton class="size-4 shrink-0" />
+          <USkeleton class="h-4" :style="{ width: `${80 + i * 20}px` }" />
+        </div>
+        <div class="ml-6 space-y-3">
+          <div v-for="j in 3" :key="`sub-${j}`" class="flex items-center gap-2">
+            <USkeleton class="size-4 shrink-0" />
+            <USkeleton class="h-4" :style="{ width: `${60 + j * 15}px` }" />
+          </div>
+        </div>
+      </div>
+
+      <UTree
+        v-else-if="!loading && items.length > 0"
+        v-model="selected"
+        :items="itemsRef"
+        :color="props.color as ColorValue"
+        :size="props.size"
+        :trailing-icon="props.trailingIcon"
+        :expanded-icon="props.expandedIcon"
+        :collapsed-icon="props.collapsedIcon"
+        :multiple="props.multiple"
+        :expanded="Array.from(expandedNodes)"
+        :disabled="props.disabled || isAnyNodeLoading"
+        :selection-behavior="props.selectionBehavior"
+        :propagate-select="props.propagateSelect"
+        :get-key="
+          (item: TreeNode) => item.hierarchicalPath || item.value || item.label
+        "
+      />
+
+      <div
+        v-else-if="!loading && items.length === 0"
+        class="text-muted py-8 text-center"
+      >
+        {{ $t("dms.tree.no_entries") }}
+      </div>
+    </div>
+  </DmsCard>
+</template>

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

@@ -0,0 +1,74 @@
+import type { ChartAnnotation } from "./types";
+import { resolveChartColor } from "./useChartTheme";
+
+const ANNOTATION_DASH = 4;
+const SOLID_DASH = 0;
+const ANNOTATION_STROKE_WIDTH = 1;
+const BAND_FILL_OPACITY = 0.08;
+const LABEL_OFFSET_Y = -4;
+const LABEL_FONT_SIZE = "11px";
+const LABEL_POSITION = "right";
+const TRANSPARENT = "transparent";
+
+interface ApexAnnotationLabelStyle {
+  background: string;
+  color: string;
+  fontSize: string;
+}
+
+interface ApexAnnotationLabel {
+  text: string;
+  position: string;
+  offsetY: number;
+  borderColor: string;
+  style: ApexAnnotationLabelStyle;
+}
+
+interface ApexYAxisAnnotation {
+  y: number;
+  y2?: number;
+  strokeDashArray: number;
+  borderColor: string;
+  borderWidth: number;
+  fillColor?: string;
+  opacity?: number;
+  label?: ApexAnnotationLabel;
+}
+
+function buildLabel(text: string, color: string): ApexAnnotationLabel {
+  return {
+    text,
+    position: LABEL_POSITION,
+    offsetY: LABEL_OFFSET_Y,
+    borderColor: TRANSPARENT,
+    style: {
+      background: TRANSPARENT,
+      color,
+      fontSize: LABEL_FONT_SIZE,
+    },
+  };
+}
+
+function buildYAxisAnnotation(
+  annotation: ChartAnnotation,
+): ApexYAxisAnnotation {
+  const color = resolveChartColor(annotation.color);
+  const isBand = annotation.y2 !== undefined;
+  return {
+    y: annotation.y,
+    y2: annotation.y2,
+    strokeDashArray: annotation.dashed === false ? SOLID_DASH : ANNOTATION_DASH,
+    borderColor: color,
+    borderWidth: ANNOTATION_STROKE_WIDTH,
+    fillColor: isBand ? color : undefined,
+    opacity: isBand ? BAND_FILL_OPACITY : undefined,
+    label: annotation.label ? buildLabel(annotation.label, color) : undefined,
+  };
+}
+
+export function buildAnnotations(
+  annotations: ChartAnnotation[] | undefined,
+): Record<string, unknown> | null {
+  if (!annotations || annotations.length === 0) return null;
+  return { yaxis: annotations.map(buildYAxisAnnotation) };
+}

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

@@ -0,0 +1,42 @@
+interface ApexGlobal {
+  Apex?: {
+    chart?: { locales?: unknown[]; defaultLocale?: string };
+  };
+}
+
+const APEX_LOCALE_LOADERS: Record<string, () => Promise<unknown>> = {
+  en: () => import("apexcharts/dist/locales/en.json"),
+  fr: () => import("apexcharts/dist/locales/fr.json"),
+};
+
+const APEX_LOCALE_FALLBACK = "en";
+const loadedLocales = new Set<string>();
+
+function resolveLocaleKey(locale: string): string {
+  const short = locale.split("-")[0]?.toLowerCase();
+  if (short && APEX_LOCALE_LOADERS[short]) return short;
+  return APEX_LOCALE_FALLBACK;
+}
+
+export async function ensureApexLocale(locale: string): Promise<void> {
+  if (typeof window === "undefined") return;
+  const key = resolveLocaleKey(locale);
+  const apexGlobal = window as unknown as ApexGlobal;
+  apexGlobal.Apex = apexGlobal.Apex || {};
+  apexGlobal.Apex.chart = apexGlobal.Apex.chart || {};
+
+  if (!loadedLocales.has(key)) {
+    try {
+      const mod = await APEX_LOCALE_LOADERS[key]!();
+      const locales = apexGlobal.Apex.chart.locales || [];
+      const localeData = (mod as { default?: unknown }).default ?? mod;
+      apexGlobal.Apex.chart.locales = [...locales, localeData];
+      loadedLocales.add(key);
+    } catch (err) {
+      console.warn(`[dms] Failed to load ApexCharts locale "${key}":`, err);
+      return;
+    }
+  }
+
+  apexGlobal.Apex.chart.defaultLocale = key;
+}