@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-ui/app/components/chart/ApexChartHost.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import {
+  computed,
   defineAsyncComponent,
+  markRaw,
   onMounted,
   ref,
   shallowRef,
+  toRaw,
   watch,
   type Component,
 } from "vue";
@@ -16,6 +19,11 @@ interface Props {
   series: unknown;
 }
 
+interface Emits {
+  /** Apex has drawn the chart: the caller's placeholder can go. */
+  (event: "drawn"): void;
+}
+
 interface ApexChartInstance {
   updateOptions: (
     options: Record<string, unknown>,
@@ -26,6 +34,7 @@ interface ApexChartInstance {
 }
 
 const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
 
 const REDRAW_PATHS = false;
 const ANIMATE = true;
@@ -33,6 +42,8 @@ const UPDATE_SYNCED_CHARTS = false;
 
 const { locale } = useI18n();
 
+// ApexCharts stays a lazy chunk: the caller (Chart) keeps the chart's frame
+// and a skeleton until this host reports the chart drawn.
 const ApexChart = defineAsyncComponent(async () => {
   const [mod] = await Promise.all([
     import("vue3-apexcharts"),
@@ -48,15 +59,52 @@ onMounted(() => {
 
 const chartRef = ref<ApexChartInstance | null>(null);
 
+/**
+ * A plain, non-reactive copy of a value handed to Apex. Apex writes into the
+ * series and options it is given, and the wrapper deep-watches its `series`
+ * prop: a reactive series (fetched data, a card's reactive context) turns
+ * each of Apex's own writes into another update, until Vue gives up with
+ * "Maximum recursive updates". A copy Apex may scribble on, marked raw so the
+ * deep watcher only reacts to a new series, breaks that loop. Functions
+ * (formatters, event handlers) and dates are kept as they are.
+ */
+function toApexInput<T>(value: T): T {
+  const raw = toRaw(value) as unknown;
+  if (Array.isArray(raw)) return raw.map((entry) => toApexInput(entry)) as T;
+  if (raw && typeof raw === "object" && !(raw instanceof Date)) {
+    const copy: Record<string, unknown> = {};
+    for (const [key, entry] of Object.entries(raw)) {
+      copy[key] = toApexInput(entry);
+    }
+    return copy as T;
+  }
+  return raw as T;
+}
+
+function rawApexInput<T extends object>(value: T): T {
+  return markRaw(toApexInput(value));
+}
+
+const apexSeries = computed(() =>
+  rawApexInput((props.series ?? []) as unknown[]),
+);
+
 // The wrapper's reactive options update JSON-clones away formatter callbacks.
-const pinnedOptions = shallowRef<Record<string, unknown>>({ ...props.options });
+const pinnedOptions = shallowRef<Record<string, unknown>>(
+  rawApexInput(props.options),
+);
 
 function pushOptionsWithoutGroupBroadcast(
   instance: ApexChartInstance,
   next: Record<string, unknown>,
 ): void {
   void instance
-    .updateOptions(next, REDRAW_PATHS, ANIMATE, UPDATE_SYNCED_CHARTS)
+    .updateOptions(
+      rawApexInput(next),
+      REDRAW_PATHS,
+      ANIMATE,
+      UPDATE_SYNCED_CHARTS,
+    )
     .catch(() => undefined);
 }
 
@@ -65,20 +113,111 @@ watch(
   (next) => {
     const instance = chartRef.value;
     if (!instance) {
-      pinnedOptions.value = { ...next };
+      pinnedOptions.value = rawApexInput(next);
       return;
     }
     pushOptionsWithoutGroupBroadcast(instance, next);
   },
 );
+
+function onDrawn() {
+  emit("drawn");
+}
 </script>
 
 <template>
-  <ApexChart
-    ref="chartRef"
-    :type="apexType"
-    :height="height"
-    :options="pinnedOptions"
-    :series="series"
-  />
+  <div class="dms-apex">
+    <ApexChart
+      ref="chartRef"
+      :type="apexType"
+      :height="height"
+      :options="pinnedOptions"
+      :series="apexSeries"
+      @mounted="onDrawn"
+      @updated="onDrawn"
+    />
+  </div>
 </template>
+
+<style>
+/* Apex renders its tooltip and legend as plain DOM: they are restyled here
+   as the v2 menu surface (mono eyebrow title, mono values, square keys).
+   The doubled class outranks Apex's injected light-theme rules. */
+.dms-apex .apexcharts-tooltip.apexcharts-tooltip {
+  min-width: 150px;
+  padding: 8px 0 6px;
+  border: 1px solid var(--ui-border-accented);
+  border-radius: calc(var(--ui-radius) * 1.5);
+  background: var(--ui-bg);
+  box-shadow: var(--shadow-lg);
+  color: var(--ui-text);
+  font-size: 12px;
+}
+.dms-apex .apexcharts-tooltip.apexcharts-tooltip .apexcharts-tooltip-title {
+  margin: 0;
+  padding: 0 10px 4px;
+  border: 0;
+  background: transparent;
+  color: var(--ui-text-dimmed);
+  font-family: var(--font-mono) !important;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.dms-apex
+  .apexcharts-tooltip.apexcharts-tooltip
+  .apexcharts-tooltip-series-group {
+  gap: 8px;
+  padding: 0 10px;
+}
+.dms-apex .apexcharts-tooltip.apexcharts-tooltip .apexcharts-tooltip-y-group {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 2px 0;
+}
+.dms-apex
+  .apexcharts-tooltip.apexcharts-tooltip
+  .apexcharts-tooltip-text-y-label {
+  color: var(--ui-text-muted);
+}
+.dms-apex
+  .apexcharts-tooltip.apexcharts-tooltip
+  .apexcharts-tooltip-text-y-value {
+  margin-left: 0;
+  color: var(--ui-text-highlighted);
+  font-family: var(--font-mono) !important;
+  font-size: 13px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.dms-apex .apexcharts-tooltip.apexcharts-tooltip .apexcharts-tooltip-marker {
+  width: 8px;
+  height: 8px;
+  margin: 0;
+  flex: none;
+  border-radius: 2.5px;
+  background: currentColor;
+}
+.dms-apex
+  .apexcharts-tooltip.apexcharts-tooltip
+  .apexcharts-tooltip-marker::before {
+  content: none;
+}
+/* Donut centre label as a mono eyebrow (Apex has no text-transform). */
+.dms-apex .apexcharts-pie .apexcharts-datalabel-label {
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.dms-apex .apexcharts-legend-text {
+  color: var(--ui-text-muted) !important;
+}
+.dms-apex .apexcharts-legend-marker {
+  margin-right: 6px;
+  overflow: hidden;
+  border-radius: 2.5px;
+}
+</style>

package/frontend-vue/layers/dms-ui/app/components/chart/Chart.vue

@@ -1,6 +1,11 @@
 <script setup lang="ts">
-import { computed, inject } from "vue";
-import { useApexChart } from "../../composables/chart/useApexChart";
+import { computed, inject, ref, watch } from "vue";
+import DmsEmptyState from "../empty-state/EmptyState.vue";
+import DmsChartSkeleton from "../../build/components/chart/internal/ChartSkeleton.vue";
+import {
+  chartFrameHeight,
+  useApexChart,
+} from "../../composables/chart/useApexChart";
 import type { MixedSeriesDef } from "../../composables/chart/useApexChart.types";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { useThemeRevision } from "../../composables/chart/useThemeRevision";
@@ -77,9 +82,13 @@ interface Props extends DefaultComponentProps {
 }
 
 const DEFAULT_CHART_HEIGHT = "320px";
+const EMPTY_ICON = "i-ph-chart-line-up";
 
 const props = withDefaults(defineProps<Props>(), {
   height: DEFAULT_CHART_HEIGHT,
+  // Declared like the server schema: Vue casts a missing boolean to false.
+  showGrid: true,
+  roundedCorners: true,
   showTooltip: true,
   showLegend: true,
   smooth: true,
@@ -267,6 +276,29 @@ const apex = useApexChart(() => ({
 }));
 
 const heightInPx = computed(() => props.height);
+// Every state (placeholder, drawn chart, empty state) takes the box the drawn
+// chart occupies, so nothing moves when the data or the chart arrives.
+const frameHeight = computed(() =>
+  chartFrameHeight(props.height, isCircular.value),
+);
+
+const hasData = computed(
+  () => finalSeries.value.length > 0 || finalDonutData.value.length > 0,
+);
+// A nested chart plots its card's data, so it waits on the card's request.
+const isAwaitingData = computed(() =>
+  nestedContext ? nestedContext.isLoading : isLoading.value,
+);
+// New inputs (a period applied) are on their way: the chart on screen still
+// shows the previous ones, so it dims like the KPI values do.
+const isRefreshing = computed(() => hasData.value && isAwaitingData.value);
+
+// The host (a lazy chunk) and Apex (another one) take a moment to draw: the
+// frame keeps the chart's box and its skeleton until the host says it drew.
+const isDrawn = ref(false);
+watch(hasData, (present) => {
+  if (!present) isDrawn.value = false;
+});
 </script>
 
 <template>
@@ -274,41 +306,61 @@ const heightInPx = computed(() => props.height);
        DmsChartCard inherit its frame instead. -->
   <div
     class="dms-chart"
-    :class="nestedContext ? undefined : 'dms-card p-5 sm:p-6'"
+    :class="nestedContext ? undefined : 'dms-card p-3.5 sm:pr-[18px]'"
   >
-    <div v-if="!nestedContext && (title || description)" class="mb-3">
-      <h3 v-if="title" class="text-highlighted text-lg font-semibold">
+    <div
+      v-if="!nestedContext && (title || description)"
+      class="mb-2.5 px-1 pt-0.5"
+    >
+      <h3
+        v-if="title"
+        class="text-highlighted text-sm leading-[1.3] font-semibold tracking-[-0.01em]"
+      >
         {{ processI18n(title) }}
       </h3>
-      <p v-if="description" class="text-dimmed text-sm">
+      <p v-if="description" class="text-dimmed mt-px text-[12.5px]">
         {{ processI18n(description) }}
       </p>
     </div>
 
     <DmsClientOnly>
-      <DmsApexChartHost
-        v-if="finalSeries.length > 0 || finalDonutData.length > 0"
-        :apex-type="apex.apexType.value"
-        :height="heightInPx"
-        :options="apex.options.value"
-        :series="apex.series.value"
-      />
       <div
-        v-else-if="isLoading"
-        class="bg-elevated/30 flex items-center justify-center rounded-md"
-        :style="{ height: heightInPx }"
+        v-if="hasData"
+        class="relative transition-opacity"
+        :class="isRefreshing && 'opacity-55'"
+        :style="{ minHeight: frameHeight }"
+        :aria-busy="isRefreshing || !isDrawn || undefined"
       >
-        <USkeleton class="h-full w-full" />
+        <DmsApexChartHost
+          :class="!isDrawn && 'invisible'"
+          :apex-type="apex.apexType.value"
+          :height="heightInPx"
+          :options="apex.options.value"
+          :series="apex.series.value"
+          @drawn="isDrawn = true"
+        />
+        <DmsChartSkeleton
+          v-if="!isDrawn"
+          class="absolute inset-x-0 top-0"
+          :height="frameHeight"
+          :circular="isCircular"
+        />
       </div>
-      <div
+      <DmsChartSkeleton
+        v-else-if="isAwaitingData"
+        :height="frameHeight"
+        :circular="isCircular"
+      />
+      <DmsEmptyState
         v-else
-        class="text-dimmed flex items-center justify-center text-sm"
-        :style="{ height: heightInPx }"
-      >
-        {{ $t("dms.chart.no_data") }}
-      </div>
+        :icon="EMPTY_ICON"
+        :title="$t('dms.chart.no_data')"
+        size="sm"
+        class="border-default place-content-center rounded-lg border border-dashed"
+        :style="{ height: frameHeight }"
+      />
       <template #fallback>
-        <USkeleton class="w-full" :style="{ height: heightInPx }" />
+        <DmsChartSkeleton :height="frameHeight" :circular="isCircular" />
       </template>
     </DmsClientOnly>
   </div>

package/frontend-vue/layers/dms-ui/app/components/chart/ChartCard.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { computed, provide, reactive, watchEffect } from "vue";
+import DmsEyebrow from "../section-header/Eyebrow.vue";
+// 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 value.
+import DmsTrendBadge from "./internal/TrendBadge.vue";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
 import {
   ABSENT_VALUE_TEXT,
@@ -33,14 +38,15 @@ interface Props extends DefaultComponentProps {
   comparisonLabel?: string;
 }
 
-// Comparison series/dot follow the neutral theme token (design --fg-tertiary)
-// instead of a hardcoded slate; re-resolved on theme changes via
-// useThemeRevision so they track light/dark mode.
+// The comparison series takes palette step 2 (v2 violet), re-resolved on
+// theme changes via useThemeRevision so it tracks light/dark mode.
+const COMPARISON_COLOR_TOKEN = "--dms-chart-2";
 const themeRevision = useThemeRevision();
 const comparisonColor = computed(() => {
   void themeRevision.value;
-  return resolveChartColor("neutral");
+  return resolveChartColor(COMPARISON_COLOR_TOKEN);
 });
+const LEGEND_KEY_CLASS = "size-2 shrink-0 rounded-[2.5px]";
 const DEFAULT_PRIMARY_LABEL_KEY = "dms.chart.legend_period";
 const DEFAULT_COMPARISON_LABEL_KEY = "dms.chart.legend_comparison";
 
@@ -147,48 +153,77 @@ const comparisonLegendLabel = computed(() =>
     : t(DEFAULT_COMPARISON_LABEL_KEY, "Comparison"),
 );
 
-const primaryDotColor = computed(() => resolveChartColor("primary"));
+const isFirstLoad = computed(() => isLoading.value && data.value === null);
+// New inputs (a period applied) are on their way: the figures 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 showTrend = computed(() => props.showDelta && delta.value !== null);
+const hasMeta = computed(
+  () => showTrend.value || !!previousFormatted.value || !!props.description,
+);
 </script>
 
 <template>
-  <DmsCard>
-    <div class="mb-4 flex flex-wrap items-start justify-between gap-3">
-      <div class="min-w-0">
-        <p class="text-muted text-sm">{{ processI18n(title) }}</p>
-        <div class="text-2xl font-semibold tracking-tight tabular-nums">
-          <USkeleton v-if="isLoading && data === null" class="h-8 w-32" />
-          <span v-else>{{ formatted }}</span>
+  <DmsCard :padded="false" class="flex min-w-0 flex-col">
+    <div class="flex flex-wrap items-start gap-3 px-4 pt-4 pb-1.5 sm:px-[18px]">
+      <div class="grid min-w-0 justify-items-start">
+        <DmsEyebrow
+          tone="muted"
+          truncate
+          class="max-w-full max-sm:whitespace-normal"
+          :label="processI18n(title)"
+        />
+        <div
+          class="text-highlighted mt-2 text-[30px] leading-[1.1] font-[650] tracking-[-0.035em] tabular-nums"
+        >
+          <USkeleton v-if="isFirstLoad" class="h-[33px] w-36" />
+          <span
+            v-else
+            class="transition-opacity"
+            :class="isRefreshing && 'opacity-55'"
+          >
+            {{ formatted }}
+          </span>
         </div>
+        <!-- The trend line arrives with the data: its row is held meanwhile. -->
         <div
-          v-if="
-            (showDelta && delta !== null) || previousFormatted || description
-          "
-          class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1"
+          v-if="isFirstLoad && showDelta"
+          class="mt-1.5 flex h-5 items-center gap-2"
+          aria-hidden="true"
         >
-          <DmsTrendBadge v-if="showDelta && delta !== null" :delta="delta" />
-          <span v-if="previousFormatted" class="text-muted text-xs">
+          <USkeleton class="h-4 w-14 rounded-full" />
+          <USkeleton class="h-3 w-20" />
+        </div>
+        <div
+          v-else-if="hasMeta"
+          class="mt-1.5 flex flex-wrap items-center gap-2 transition-opacity"
+          :class="isRefreshing && 'opacity-55'"
+        >
+          <DmsTrendBadge v-if="showTrend" :delta="delta" />
+          <span v-if="previousFormatted" class="text-dimmed text-xs">
             vs {{ previousFormatted }}
           </span>
-          <span v-else-if="description" class="text-muted text-xs">
+          <span v-else-if="description" class="text-dimmed text-xs">
             {{ processI18n(description) }}
           </span>
         </div>
       </div>
       <div
         v-if="showLegend && hasComparison"
-        class="flex items-center gap-3 text-xs"
+        class="text-muted ml-auto flex items-center gap-3.5 text-xs"
       >
         <span class="flex items-center gap-1.5">
           <span
-            class="size-2.5 rounded-full"
-            :style="{ background: primaryDotColor }"
+            :class="LEGEND_KEY_CLASS"
+            class="bg-(--dms-sparkline)"
             aria-hidden="true"
           />
           {{ primaryLegendLabel }}
         </span>
-        <span class="text-muted flex items-center gap-1.5">
+        <span class="flex items-center gap-1.5">
           <span
-            class="size-2.5 rounded-full"
+            :class="LEGEND_KEY_CLASS"
             :style="{ background: comparisonColor }"
             aria-hidden="true"
           />
@@ -196,6 +231,8 @@ const primaryDotColor = computed(() => resolveChartColor("primary"));
         </span>
       </div>
     </div>
-    <slot :series="cardSeries" :comparison-series="cardComparisonSeries" />
+    <div class="px-3.5 pt-2.5 pb-3.5 sm:pr-[18px]">
+      <slot :series="cardSeries" :comparison-series="cardComparisonSeries" />
+    </div>
   </DmsCard>
 </template>