@antelopejs/dms 0.9.2 → 0.9.3

package/frontend-vue/tests/chart-live-pause.test.ts

@@ -1,77 +0,0 @@
-// @vitest-environment jsdom
-/**
- * A chart on a paused live page sends no request on its events or on a page
- * refresh, and reads once when the page resumes.
- */
-import { createApp, defineComponent, h, ref } from "vue";
-import { beforeEach, afterEach, expect, it, vi } from "vitest";
-import { useRealDataEngine } from "./fixtures/dataEngine";
-import {
-  refreshLivePageBlocks,
-  refreshPageBlocks,
-} from "../layers/dms-ui/app/utils/blockRefresh";
-import { createPageLiveController } from "../layers/dms-ui/app/build/composables/live/pageLiveController";
-import { setCurrentPageLive } from "../layers/dms-ui/app/build/composables/live/currentPageLive";
-
-const requests: string[] = [];
-
-vi.stubGlobal("useAuthFetch", () => ({
-  $authFetch: async (url: string) => {
-    requests.push(url);
-    return { value: requests.length };
-  },
-}));
-vi.stubGlobal("useDmsRoute", () => ({ query: {} }));
-vi.stubGlobal("ref", ref);
-
-const { useChartFetch } = await import(
-  "../layers/dms-ui/app/composables/chart/useChartFetch"
-);
-
-// useChartFetch debounces every refresh past the first by 180ms.
-const SETTLE_MS = 250;
-const settle = () => new Promise((resolve) => setTimeout(resolve, SETTLE_MS));
-
-const apps: Array<() => void> = [];
-
-afterEach(() => {
-  apps.splice(0).forEach((unmount) => unmount());
-  setCurrentPageLive(null);
-  window.localStorage.clear();
-});
-
-beforeEach(() => useRealDataEngine());
-
-it("requests nothing while paused and reads once on resume", async () => {
-  const live = createPageLiveController("api.overview", {});
-  setCurrentPageLive(live);
-  const app = createApp(
-    defineComponent({
-      setup() {
-        useChartFetch<{ value: number }>({ fetchUrl: "/api/overview/chart" });
-        return () => h("div");
-      },
-    }),
-  );
-  app.mount(document.createElement("div"));
-  apps.push(() => app.unmount());
-  await settle();
-  expect(requests).toHaveLength(1);
-
-  live.pause();
-  refreshLivePageBlocks();
-  refreshLivePageBlocks();
-  await settle();
-  expect(requests).toHaveLength(1);
-
-  live.resume();
-  await settle();
-  expect(requests).toHaveLength(2);
-
-  // An action of the user refreshes even while paused.
-  live.pause();
-  refreshPageBlocks();
-  await settle();
-  expect(requests).toHaveLength(3);
-  live.dispose();
-});

package/frontend-vue/tests/chart-nested-donut.test.ts

@@ -1,97 +0,0 @@
-import { createSSRApp, defineComponent, h, ref, type PropType } from "vue";
-import { renderToString } from "vue/server-renderer";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import ChartCard from "../layers/dms-ui/app/components/chart/ChartCard.vue";
-import Chart from "../layers/dms-ui/app/components/chart/Chart.vue";
-import type { ChartType } from "../layers/dms-ui/app/composables/chart/types";
-
-const CARD_SERIES = [
-  {
-    name: "Plans",
-    data: [
-      { x: "Starter", y: 3 },
-      { x: "Pro", y: 5, label: "Pro plan" },
-    ],
-  },
-];
-
-vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
-  useChartFetch: (options: { fetchUrl?: string }) => ({
-    data: ref(options.fetchUrl ? { value: 8, series: CARD_SERIES } : null),
-    isLoading: ref(false),
-  }),
-}));
-
-interface CircularOptions {
-  labels?: string[];
-}
-
-const PlotProbe = defineComponent({
-  props: {
-    options: { type: Object as PropType<CircularOptions>, required: true },
-    series: { type: Array as PropType<unknown[]>, required: true },
-  },
-  setup: (props) => () =>
-    h("output", [
-      h("span", { class: "labels" }, JSON.stringify(props.options.labels)),
-      h("span", { class: "series" }, JSON.stringify(props.series)),
-    ]),
-});
-const Slot = defineComponent({
-  setup:
-    (_, { slots }) =>
-    () =>
-      h("div", slots.default?.()),
-});
-
-const SLOT_COMPONENTS = [
-  "DmsCard",
-  "DmsClientOnly",
-  "UIcon",
-  "USkeleton",
-  "DmsTrendBadge",
-  "DmsSparkline",
-  "UBadge",
-];
-
-async function renderNested(type: ChartType) {
-  const app = createSSRApp({
-    render: () =>
-      h(
-        ChartCard,
-        {
-          title: "Plans",
-          componentId: "card",
-          pageId: "donut",
-          fetchUrl: "/plans",
-        },
-        () => h(Chart, { type, componentId: "plot", pageId: "donut" }),
-      ),
-  });
-  for (const name of SLOT_COMPONENTS) app.component(name, Slot);
-  app.component("DmsApexChartHost", PlotProbe);
-  return renderToString(app);
-}
-
-beforeEach(() => {
-  vi.stubGlobal("useI18n", () => ({ locale: ref("en-US"), t: String }));
-  vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
-  vi.stubGlobal("useComponentEvent", () => ({}));
-  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
-});
-
-afterEach(() => vi.unstubAllGlobals());
-
-describe("circular chart nested in a ChartCard", () => {
-  it.each<ChartType>(["donut", "pie"])(
-    "draws the card's first series as %s slices",
-    async (type) => {
-      const html = await renderNested(type);
-      expect(html).not.toContain("dms.chart.no_data");
-      expect(html).toContain(
-        'class="labels">[&quot;Starter&quot;,&quot;Pro plan&quot;]',
-      );
-      expect(html).toContain(`class="series">[3,5]`);
-    },
-  );
-});

package/frontend-vue/tests/chart-options.test.ts

@@ -1,281 +0,0 @@
-import { describe, expect, expectTypeOf, it } from "vitest";
-import type {
-  ChartXAxis as ServerXAxis,
-  LineChartProps,
-} from "@antelopejs/interface-dms/base/chart";
-import { reactive } from "vue";
-import { useApexChart } from "../layers/dms-ui/app/composables/chart/useApexChart";
-import type { UseApexChartInput } from "../layers/dms-ui/app/composables/chart/useApexChart.types";
-import type {
-  ChartAnnotation,
-  ChartSeries,
-  ChartXAxis,
-} from "../layers/dms-ui/app/composables/chart/types";
-
-const SERIES: ChartSeries[] = [
-  { name: "p50 – p99", data: [{ x: "10:00", y: [12, 48] }] },
-];
-
-describe("typed X axis", () => {
-  it("keeps the server settings serializable and the formatter Vue-only", () => {
-    expectTypeOf<ChartXAxis>().toEqualTypeOf<ServerXAxis>();
-    expectTypeOf<LineChartProps>().not.toHaveProperty("xAxisFormatter");
-    const settings: ServerXAxis = {
-      tickAmount: 2,
-      rotate: 0,
-      hideOverlappingLabels: true,
-      datetimeFormat: "dd MMM",
-    };
-    expect(JSON.parse(JSON.stringify(settings))).toEqual(settings);
-  });
-
-  it("preserves defaults when settings are absent or empty", () => {
-    const baseline = sectionOf(optionsFor({}), "xaxis");
-    expect(sectionOf(optionsFor({ xAxis: {} }), "xaxis")).toEqual(baseline);
-    expect(baseline.type).toBe("category");
-    expect(baseline.tickAmount).toBeUndefined();
-    expect(sectionOf(baseline, "labels").datetimeUTC).toBe(false);
-  });
-
-  it("keeps theme labels and explicit zero/false settings", () => {
-    const axis = sectionOf(
-      optionsFor({
-        xAxis: {
-          tickAmount: 2,
-          rotate: 0,
-          hideOverlappingLabels: false,
-        },
-      }),
-      "xaxis",
-    );
-    expect(axis.tickAmount).toBe(2);
-    expect(sectionOf(axis, "labels")).toMatchObject({
-      rotate: 0,
-      hideOverlappingLabels: false,
-      style: { fontSize: "11px" },
-    });
-    expect(axis.axisBorder).toEqual({ show: false });
-  });
-
-  it.each(["category", "numeric", "datetime"] as const)(
-    "formats %s at runtime",
-    (xaxisType) => {
-      const formatter = (value: string, timestamp?: number) =>
-        `${timestamp ?? value} units`;
-      const axis = sectionOf(
-        optionsFor({
-          xaxisType,
-          xAxis: { datetimeFormat: "dd MMM" },
-          xAxisFormatter: formatter,
-        }),
-        "xaxis",
-      );
-      const labels = sectionOf(axis, "labels");
-      expect(labels.formatter).toBe(formatter);
-      expect(labels.format).toBe(
-        xaxisType === "datetime" ? "dd MMM" : undefined,
-      );
-      expect(formatter("16")).toBe("16 units");
-      expect(formatter("date", 123)).toBe("123 units");
-    },
-  );
-
-  it("keeps rawOptions as the final whole-section override", () => {
-    const rawAxis = { type: "numeric", tickAmount: 7 };
-    expect(
-      sectionOf(
-        optionsFor({
-          xAxis: { tickAmount: 2 },
-          xAxisFormatter: (value) => `Day ${value}`,
-          rawOptions: [{ key: "xaxis", value: JSON.stringify(rawAxis) }],
-        }),
-        "xaxis",
-      ),
-    ).toEqual(rawAxis);
-  });
-
-  it("updates and removes settings and formatters reactively", () => {
-    const input = reactive<UseApexChartInput>({
-      type: "line",
-      series: SERIES,
-      xAxis: { tickAmount: 2 },
-      xAxisFormatter: (value) => `Jour ${value}`,
-    });
-    const chart = useApexChart(() => input);
-    expect(sectionOf(chart.options.value, "xaxis").tickAmount).toBe(2);
-    input.xAxis = { tickAmount: 4 };
-    expect(sectionOf(chart.options.value, "xaxis").tickAmount).toBe(4);
-    input.xAxis = undefined;
-    input.xAxisFormatter = undefined;
-    expect(sectionOf(chart.options.value, "xaxis").tickAmount).toBeUndefined();
-    expect(
-      sectionOf(sectionOf(chart.options.value, "xaxis"), "labels").formatter,
-    ).toBeUndefined();
-  });
-});
-
-function optionsFor(
-  input: Partial<UseApexChartInput>,
-): Record<string, unknown> {
-  const chart = useApexChart(() => ({
-    type: "line",
-    series: SERIES,
-    ...input,
-  }));
-  return chart.options.value;
-}
-
-function sectionOf(
-  options: Record<string, unknown>,
-  key: string,
-): Record<string, unknown> {
-  return options[key] as Record<string, unknown>;
-}
-
-describe("rangeArea", () => {
-  it("maps to the Apex rangeArea type", () => {
-    const chart = useApexChart(() => ({ type: "rangeArea", series: SERIES }));
-    expect(chart.apexType.value).toBe("rangeArea");
-  });
-
-  it("fills the band with a flat opacity", () => {
-    const fill = sectionOf(optionsFor({ type: "rangeArea" }), "fill");
-    expect(fill.opacity).toBeGreaterThan(0);
-    expect(fill.type).toBeUndefined();
-  });
-
-  it("honours an explicit fillOpacity", () => {
-    const fill = sectionOf(
-      optionsFor({ type: "rangeArea", fillOpacity: 0.5 }),
-      "fill",
-    );
-    expect(fill.opacity).toBe(0.5);
-  });
-
-  it("promotes a mixed chart carrying a band to the rangeArea type", () => {
-    const chart = useApexChart(() => ({
-      type: "mixed",
-      series: SERIES,
-      seriesDefs: [
-        { name: "p50 – p99", type: "rangeArea" },
-        { name: "p95", type: "line" },
-      ],
-    }));
-    expect(chart.apexType.value).toBe("rangeArea");
-    const config = sectionOf(chart.options.value, "chart");
-    expect(config.type).toBe("rangeArea");
-  });
-
-  it("keeps a band-free mixed chart on the line type", () => {
-    const chart = useApexChart(() => ({
-      type: "mixed",
-      series: SERIES,
-      seriesDefs: [{ name: "orders", type: "column" }],
-    }));
-    expect(chart.apexType.value).toBe("line");
-  });
-});
-
-describe("curve", () => {
-  it("defaults to the type's own curve", () => {
-    expect(sectionOf(optionsFor({}), "stroke").curve).toBe("smooth");
-  });
-
-  it("applies stepline", () => {
-    expect(sectionOf(optionsFor({ curve: "stepline" }), "stroke").curve).toBe(
-      "stepline",
-    );
-  });
-
-  it("takes precedence over smooth", () => {
-    const stroke = sectionOf(
-      optionsFor({ curve: "stepline", smooth: false }),
-      "stroke",
-    );
-    expect(stroke.curve).toBe("stepline");
-  });
-
-  it("still lets smooth false fall back to straight", () => {
-    expect(sectionOf(optionsFor({ smooth: false }), "stroke").curve).toBe(
-      "straight",
-    );
-  });
-});
-
-describe("annotations", () => {
-  const CAP: ChartAnnotation = { y: 250, label: "spend cap", color: "#f59e0b" };
-
-  it("stays absent when none are declared", () => {
-    expect(optionsFor({}).annotations).toBeUndefined();
-    expect(optionsFor({ annotations: [] }).annotations).toBeUndefined();
-  });
-
-  it("maps a reference line onto the Y axis", () => {
-    const annotations = sectionOf(
-      optionsFor({ annotations: [CAP] }),
-      "annotations",
-    );
-    const [line] = annotations.yaxis as Array<Record<string, unknown>>;
-    expect(line!.y).toBe(250);
-    expect(line!.borderColor).toBe("#f59e0b");
-    expect(line!.strokeDashArray).toBeGreaterThan(0);
-    expect((line!.label as Record<string, unknown>).text).toBe("spend cap");
-  });
-
-  it("draws a solid line when dashed is false", () => {
-    const annotations = sectionOf(
-      optionsFor({ annotations: [{ ...CAP, dashed: false }] }),
-      "annotations",
-    );
-    const [line] = annotations.yaxis as Array<Record<string, unknown>>;
-    expect(line!.strokeDashArray).toBe(0);
-  });
-
-  it("resolves theme color names to usable CSS colors", () => {
-    const annotations = sectionOf(
-      optionsFor({ annotations: [{ y: 4, label: "cap", color: "warning" }] }),
-      "annotations",
-    );
-    const [line] = annotations.yaxis as Array<Record<string, unknown>>;
-    expect(line!.borderColor).not.toBe("warning");
-    expect(String(line!.borderColor)).toMatch(/^(#|rgb|hsl)/);
-    expect((line!.label as Record<string, unknown>).style).toMatchObject({
-      color: line!.borderColor,
-    });
-  });
-
-  it("shades a band when y2 is set", () => {
-    const annotations = sectionOf(
-      optionsFor({ annotations: [{ y: 10, y2: 40, color: "#10b981" }] }),
-      "annotations",
-    );
-    const [band] = annotations.yaxis as Array<Record<string, unknown>>;
-    expect(band!.y2).toBe(40);
-    expect(band!.fillColor).toBe("#10b981");
-    expect(band!.opacity).toBeGreaterThan(0);
-    expect(band!.label).toBeUndefined();
-  });
-});
-
-describe("syncGroup", () => {
-  it("leaves the chart ungrouped by default", () => {
-    const chart = sectionOf(optionsFor({}), "chart");
-    expect(chart.group).toBeUndefined();
-    expect(chart.id).toBeUndefined();
-  });
-
-  it("exposes the group and a per-chart id", () => {
-    const chart = sectionOf(
-      optionsFor({ syncGroup: "service-metrics", chartId: "latency" }),
-      "chart",
-    );
-    expect(chart.group).toBe("service-metrics");
-    expect(chart.id).toBe("latency");
-  });
-
-  it("leaves the id to Apex when no chart id is given", () => {
-    const chart = sectionOf(optionsFor({ syncGroup: "grid" }), "chart");
-    expect(chart.group).toBe("grid");
-    expect(chart.id).toBeUndefined();
-  });
-});

package/frontend-vue/tests/chart-resize-after-animation.test.ts

@@ -1,100 +0,0 @@
-// @vitest-environment jsdom
-/**
- * Apex drops its container's resizes while an animation runs: a sidebar
- * toggled during the intro animation left the chart at its old width, past
- * its card, until the next window resize. The host redraws such a chart once
- * the animation ends.
- */
-import { createApp, defineComponent, h, nextTick, ref } from "vue";
-import { afterEach, beforeEach, expect, it, vi } from "vitest";
-import ApexChartHost from "../layers/dms-ui/app/components/chart/ApexChartHost.vue";
-
-const HOST_WIDTH = 1047;
-const STALE_WIDTH = 1227;
-
-const windowResizeHandler = vi.fn();
-const drawnWidth = ref(HOST_WIDTH);
-let endAnimation: () => void = () => {};
-
-vi.mock("apexcharts", () => ({ default: {} }));
-vi.mock("../layers/dms-ui/app/composables/chart/apexLocales", () => ({
-  ensureApexLocale: async () => undefined,
-}));
-vi.mock("vue3-apexcharts", () => ({
-  default: defineComponent({
-    emits: ["animationEnd"],
-    setup(_, { emit, expose }) {
-      expose({
-        chart: { windowResizeHandler },
-        updateOptions: async () => undefined,
-      });
-      endAnimation = () => emit("animationEnd");
-      return () =>
-        h("div", [
-          h("svg", {
-            class: "apexcharts-svg",
-            "data-width": drawnWidth.value,
-          }),
-        ]);
-    },
-  }),
-}));
-
-function widthOf(element: Element): number {
-  if (element.classList.contains("dms-apex")) return HOST_WIDTH;
-  return Number(element.getAttribute("data-width") ?? 0);
-}
-
-let app: ReturnType<typeof createApp> | undefined;
-
-async function mountHost(): Promise<HTMLElement> {
-  const root = document.createElement("div");
-  app = createApp(() =>
-    h(ApexChartHost, {
-      apexType: "line",
-      height: 300,
-      options: {},
-      series: [],
-    }),
-  );
-  app.mount(root);
-  await vi.waitFor(() => {
-    expect(root.querySelector("svg.apexcharts-svg")).not.toBeNull();
-  });
-  return root;
-}
-
-beforeEach(() => {
-  vi.stubGlobal("useI18n", () => ({ locale: ref("en") }));
-  vi.spyOn(Element.prototype, "getBoundingClientRect").mockImplementation(
-    function (this: Element) {
-      return { width: widthOf(this) } as DOMRect;
-    },
-  );
-});
-
-afterEach(() => {
-  app?.unmount();
-  windowResizeHandler.mockClear();
-  drawnWidth.value = HOST_WIDTH;
-  vi.restoreAllMocks();
-  vi.unstubAllGlobals();
-});
-
-it("redraws a chart left at a stale width when its animation ends", async () => {
-  await mountHost();
-  drawnWidth.value = STALE_WIDTH;
-  await nextTick();
-
-  endAnimation();
-
-  expect(windowResizeHandler).toHaveBeenCalledOnce();
-});
-
-it("leaves a chart drawn at its host's width alone", async () => {
-  await mountHost();
-
-  endAnimation();
-
-  expect(windowResizeHandler).not.toHaveBeenCalled();
-});

package/frontend-vue/tests/chart-series-styles.test.ts

@@ -1,131 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { ref } from "vue";
-import { useApexChart } from "../layers/dms-ui/app/composables/chart/useApexChart";
-import type { ChartSeries } from "../layers/dms-ui/app/composables/chart/types";
-import type { UseApexChartInput } from "../layers/dms-ui/app/composables/chart/useApexChart.types";
-
-const PLAIN: ChartSeries = { name: "Actual", data: [1, 2, 3] };
-const STYLED: ChartSeries = {
-  name: "Estimate",
-  data: [2, 3, 4],
-  strokeWidth: 2,
-  strokeDashArray: 6,
-};
-
-function strokeFor(input: Partial<UseApexChartInput> = {}) {
-  return useApexChart(() => ({ type: "line", series: [PLAIN], ...input }))
-    .options.value.stroke;
-}
-
-describe("series stroke styles", () => {
-  it("preserves scalar defaults and comparison defaults when omitted", () => {
-    expect(strokeFor()).toEqual({
-      curve: "smooth",
-      width: 2.5,
-      lineCap: "round",
-    });
-    expect(
-      strokeFor({ series: [PLAIN, PLAIN], comparisonSeriesCount: 1 }),
-    ).toMatchObject({ width: [2.5, 1.75], dashArray: [0, 5] });
-  });
-
-  it("keeps styles attached through reactive reorder, insertion and removal", () => {
-    const series = ref([PLAIN, STYLED]);
-    const chart = useApexChart(() => ({ type: "line", series: series.value }));
-    expect(chart.options.value.stroke).toMatchObject({
-      width: [2.5, 2],
-      dashArray: [0, 6],
-    });
-    series.value = [STYLED, PLAIN];
-    expect(chart.options.value.stroke).toMatchObject({
-      width: [2, 2.5],
-      dashArray: [6, 0],
-    });
-    series.value = [PLAIN, STYLED, PLAIN];
-    expect(chart.options.value.stroke).toMatchObject({
-      width: [2.5, 2, 2.5],
-      dashArray: [0, 6, 0],
-    });
-    series.value = [STYLED];
-    expect(chart.options.value.stroke).toMatchObject({
-      width: [2],
-      dashArray: [6],
-    });
-    series.value = [PLAIN];
-    expect(chart.options.value.stroke).toEqual(strokeFor());
-    series.value = [];
-    expect(chart.options.value.stroke).toEqual(strokeFor());
-  });
-
-  it("overrides global width and comparison styling, including explicit zero", () => {
-    const solid: ChartSeries = { ...PLAIN, strokeWidth: 0, strokeDashArray: 0 };
-    expect(
-      strokeFor({
-        series: [STYLED, solid],
-        strokeWidth: 8,
-        comparisonSeriesCount: 1,
-      }),
-    ).toMatchObject({ width: [2, 0], dashArray: [6, 0] });
-    expect(
-      strokeFor({
-        series: [STYLED, PLAIN],
-        strokeWidth: 8,
-        comparisonSeriesCount: 1,
-      }),
-    ).toMatchObject({ width: [2, 8], dashArray: [6, 5] });
-  });
-
-  it.each(["solid", "dimmed"] as const)(
-    "overrides %s comparison dashes",
-    (comparisonStyle) => {
-      expect(
-        strokeFor({
-          series: [PLAIN, STYLED],
-          comparisonSeriesCount: 1,
-          comparisonStyle,
-        }),
-      ).toMatchObject({ width: [2.5, 2], dashArray: [0, 6] });
-    },
-  );
-
-  it("resolves each property independently", () => {
-    expect(
-      strokeFor({
-        series: [
-          { ...PLAIN, strokeWidth: 5 },
-          { ...PLAIN, strokeDashArray: 3 },
-        ],
-      }),
-    ).toMatchObject({ width: [5, 2.5], dashArray: [0, 3] });
-  });
-
-  it("preserves styles when mixed definitions project type and color", () => {
-    const chart = useApexChart(() => ({
-      type: "mixed",
-      series: [PLAIN, STYLED],
-      comparisonSeriesCount: 1,
-      seriesDefs: [
-        { name: "Actual", type: "column" },
-        { name: "Estimate", type: "line", color: "#ff0000" },
-      ],
-    }));
-    expect(chart.options.value.stroke).toMatchObject({
-      width: [2.5, 2],
-      dashArray: [0, 6],
-    });
-    expect(chart.series.value).toEqual([
-      { ...PLAIN, type: "column" },
-      { ...STYLED, type: "line", color: "#ff0000" },
-    ]);
-  });
-
-  it("keeps rawOptions as whole-section replacement, not a deep merge", () => {
-    const rawStroke = { width: [9], dashArray: [1] };
-    expect(
-      strokeFor({
-        series: [STYLED],
-        rawOptions: [{ key: "stroke", value: JSON.stringify(rawStroke) }],
-      }),
-    ).toEqual(rawStroke);
-  });
-});