@antelopejs/dms 0.9.2 → 0.9.3

package/frontend-vue/tests/chart-auto-y-range.test.ts

@@ -1,131 +0,0 @@
-import { describe, expect, it } from "vitest";
-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";
-
-interface AutoBounds {
-  min: (value: number) => number;
-  max: (value: number) => number;
-}
-
-function chartFor(input: Partial<UseApexChartInput> = {}) {
-  return useApexChart(() => ({ type: "line", series: [], ...input }));
-}
-
-function boundsFor(input: Partial<UseApexChartInput> = {}): AutoBounds {
-  return chartFor({ autoYRange: {}, ...input }).options.value
-    .yaxis as AutoBounds;
-}
-
-describe("annotation-aware auto Y range", () => {
-  it("leaves native scaling unchanged unless opted in", () => {
-    const yaxis = chartFor({ annotations: [{ y: 200 }] }).options.value.yaxis;
-    expect(yaxis).not.toHaveProperty("min");
-    expect(yaxis).not.toHaveProperty("max");
-  });
-
-  it("keeps explicit bounds authoritative even with annotations and auto range", () => {
-    const yaxis = boundsFor({
-      yRange: { min: 0, max: 10 },
-      annotations: [{ y: 200 }],
-    });
-    expect(yaxis).toMatchObject({ min: 0, max: 10 });
-  });
-
-  it("expands both ends for annotations above and below native data bounds", () => {
-    const bounds = boundsFor({ annotations: [{ y: 200 }, { y: -50 }] });
-    expect(bounds.min(10)).toBe(-100);
-    expect(bounds.max(30)).toBe(250);
-  });
-
-  it("includes both ends of a reversed band and all native series extrema", () => {
-    const bounds = boundsFor({ annotations: [{ y: 200, y2: -50 }] });
-    expect(bounds.min(-100)).toBe(-150);
-    expect(bounds.max(300)).toBe(350);
-  });
-
-  it("pads negative bounds outwards rather than clipping negative data", () => {
-    const bounds = boundsFor();
-    expect(bounds.min(-100)).toBe(-120);
-    expect(bounds.max(-10)).toBe(-9);
-  });
-
-  it("gives zero-only data a nonzero range without changing the series", () => {
-    const series = [{ name: "zero", data: [0, 0] }];
-    const chart = chartFor({ autoYRange: {}, series });
-    const bounds = chart.options.value.yaxis as AutoBounds;
-    expect(bounds.min(0)).toBe(-0.08);
-    expect(bounds.max(0)).toBe(0.08);
-    expect(chart.series.value).toEqual(series);
-  });
-
-  it("does not synthesize data for an empty chart", () => {
-    expect(
-      chartFor({ autoYRange: {}, annotations: [{ y: 20 }] }).series.value,
-    ).toEqual([]);
-  });
-
-  it("supports zero padding", () => {
-    const bounds = boundsFor({
-      autoYRange: { padding: 0 },
-      annotations: [{ y: 20 }],
-    });
-    expect(bounds.min(0)).toBe(0);
-    expect(bounds.max(10)).toBe(20);
-  });
-
-  it.each([-1, NaN, Infinity])("defaults invalid padding %s", (padding) => {
-    expect(boundsFor({ autoYRange: { padding } }).max(100)).toBe(120);
-  });
-
-  it("ignores nonfinite annotation coordinates when determining bounds", () => {
-    const bounds = boundsFor({
-      annotations: [{ y: NaN }, { y: Infinity }, { y: 20 }],
-    });
-    expect(bounds.min(10)).toBe(9);
-    expect(bounds.max(10)).toBe(22);
-  });
-
-  it("recomputes when annotations or padding change", () => {
-    const input = reactive<UseApexChartInput>({
-      type: "line",
-      series: [],
-      autoYRange: { padding: 0.1 },
-      annotations: [{ y: 20 }],
-    });
-    const chart = useApexChart(() => input);
-    expect((chart.options.value.yaxis as AutoBounds).max(10)).toBe(22);
-    input.annotations![0]!.y = 40;
-    input.autoYRange!.padding = 0.2;
-    expect((chart.options.value.yaxis as AutoBounds).max(10)).toBe(48);
-  });
-
-  it("retains the rawOptions escape hatch precedence", () => {
-    expect(
-      chartFor({
-        autoYRange: {},
-        rawOptions: [{ key: "yaxis", value: '{"min":0,"max":5}' }],
-      }).options.value.yaxis,
-    ).toEqual({ min: 0, max: 5 });
-  });
-
-  it("rounds the padded bounds to a step the axis can tick evenly", () => {
-    const series = [{ name: "value", data: [104.4, 420, 770] }];
-    const bounds = boundsFor({ series, annotations: [{ y: 300, y2: 500 }] });
-    expect(bounds.min(104.4)).toBe(0);
-    expect(bounds.max(770)).toBe(900);
-  });
-
-  it("writes unformatted axis labels without float noise", () => {
-    const labels = chartFor().options.value.yaxis as {
-      labels: { formatter: (value: number) => string };
-    };
-    expect(labels.labels.formatter(160.00000000000003)).toBe("160");
-    expect(labels.labels.formatter(0.1 + 0.2)).toBe("0.3");
-    expect(labels.labels.formatter(603.6)).toBe("603.6");
-  });
-
-  it("does not scale circular charts", () => {
-    expect(boundsFor({ type: "donut" })).not.toHaveProperty("min");
-  });
-});

package/frontend-vue/tests/chart-click-payload.test.ts

@@ -1,34 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { readPointValue } from "../layers/dms-ui/app/composables/chart/events";
-
-describe("readPointValue", () => {
-  it("keeps a bare number in value", () => {
-    expect(readPointValue(42)).toEqual({ value: 42 });
-  });
-
-  it("keeps a scalar point's y in value", () => {
-    expect(readPointValue({ x: "10:00", y: 42 })).toEqual({ value: 42 });
-  });
-
-  it("keeps an explicit null y as a null value", () => {
-    expect(readPointValue({ x: "10:00", y: null })).toEqual({ value: null });
-  });
-
-  it("moves a rangeArea tuple into values with a null value", () => {
-    expect(readPointValue({ x: "10:00", y: [12, 48] })).toEqual({
-      value: null,
-      values: [12, 48],
-    });
-  });
-
-  it("moves a candlestick tuple into values with a null value", () => {
-    expect(readPointValue({ x: "Jan", y: [100, 120, 95, 110] })).toEqual({
-      value: null,
-      values: [100, 120, 95, 110],
-    });
-  });
-
-  it("treats a missing point as a null value", () => {
-    expect(readPointValue(undefined)).toEqual({ value: null });
-  });
-});

package/frontend-vue/tests/chart-colors.browser.html

@@ -1,157 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>DMS chart color browser check</title>
-  <style>
-    :root {
-      --ui-color-primary-500: oklch(60.6% 0.25 292.717);
-      --ui-color-primary-400: oklch(70.2% 0.183 293.541);
-      --ui-primary: var(--ui-color-primary-500);
-      --ui-text-muted: #6b7280;
-      --ui-text-highlighted: #111827;
-      --invalid-color: 12px;
-      --transparent-color: transparent;
-      background: white;
-      color: #111827;
-      font: 16px system-ui;
-    }
-    :root.dark {
-      --ui-primary: var(--ui-color-primary-400);
-      --ui-text-muted: #9ca3af;
-      --ui-text-highlighted: #f9fafb;
-      background: #111827;
-      color: #f9fafb;
-    }
-    body {
-      max-width: 960px;
-      margin: 48px auto;
-      padding: 24px;
-    }
-    button {
-      padding: 12px 20px;
-      cursor: pointer;
-    }
-    pre {
-      white-space: pre-wrap;
-    }
-  </style>
-  <h1>DMS chart color browser check</h1>
-  <p>
-    Real resolver, theme observer and ApexCharts. Violet scale values are test
-    fixtures, not a new application palette.
-  </p>
-  <button id="theme">Toggle light / dark</button>
-  <div id="app"></div>
-  <script type="module">
-    import { createApp, h, onMounted, watch } from "vue";
-    import ApexCharts from "apexcharts";
-    import { useThemeRevision } from "../layers/dms-ui/app/composables/chart/useThemeRevision.ts";
-    import { useApexChart } from "../layers/dms-ui/app/composables/chart/useApexChart.ts";
-    import { resolveChartColor } from "../layers/dms-ui/app/composables/chart/useChartTheme.ts";
-
-    const HEIGHT = 360;
-    const EXPECTED_FALLBACK = "#7c3aed";
-    const series = [
-      {
-        name: "Semantic primary",
-        data: [
-          { x: "Mon", y: 25 },
-          { x: "Tue", y: 60 },
-          { x: "Wed", y: 40 },
-        ],
-      },
-      {
-        name: "Typed primary-400",
-        color: "primary-400",
-        data: [
-          { x: "Mon", y: 10 },
-          { x: "Tue", y: 35 },
-          { x: "Wed", y: 20 },
-        ],
-      },
-    ];
-
-    function verifyResolution() {
-      const alias = resolveChartColor("var(--ui-color-primary-500)");
-      if (alias !== resolveChartColor("primary-500"))
-        throw Error("Alias mismatch");
-      if (!alias.startsWith("rgba(")) throw Error("OKLCH was not normalized");
-      for (const token of ["--invalid-color", "--transparent-color"]) {
-        if (resolveChartColor(token) !== EXPECTED_FALLBACK)
-          throw Error(`Invalid fallback: ${token}`);
-      }
-      if (resolveChartColor("--missing") !== "rgb(124, 58, 237)")
-        throw Error("Missing token inherited text color");
-      const stops = [...document.querySelectorAll("stop")];
-      if (
-        !stops.length ||
-        stops.some(
-          (stop) => !stop.getAttribute("stop-color")?.startsWith("rgba("),
-        )
-      )
-        throw Error("Unresolved Apex gradient stop");
-      return "PASS: aliases, OKLCH → sRGB, missing / invalid / transparent fallback";
-    }
-
-    function apexOptions(chart) {
-      return {
-        ...chart.options.value,
-        series: chart.series.value,
-        chart: {
-          type: "area",
-          height: HEIGHT,
-          animations: { enabled: false },
-          toolbar: { show: false },
-        },
-        fill: {
-          type: "gradient",
-          gradient: { opacityFrom: 0.5, opacityTo: 0.1 },
-        },
-      };
-    }
-
-    function renderCheck(chart, revision) {
-      return h("section", [
-        h("div", { id: "chart" }),
-        h(
-          "pre",
-          { id: "values" },
-          JSON.stringify({
-            revision: revision.value,
-            colors: chart.options.value.colors,
-          }),
-        ),
-        h("pre", { id: "checks" }),
-      ]);
-    }
-
-    createApp({
-      setup() {
-        const revision = useThemeRevision();
-        const chart = useApexChart(() => ({
-          type: "area",
-          series,
-          colors: ["primary"],
-          themeRevision: revision.value,
-        }));
-        let apex;
-        onMounted(async () => {
-          apex = new ApexCharts(
-            document.querySelector("#chart"),
-            apexOptions(chart),
-          );
-          await apex.render();
-          document.querySelector("#checks").textContent = verifyResolution();
-        });
-        watch(chart.options, async () => {
-          await apex?.updateOptions(apexOptions(chart));
-          document.querySelector("#checks").textContent = verifyResolution();
-        });
-        return () => renderCheck(chart, revision);
-      },
-    }).mount("#app");
-    document.querySelector("#theme").onclick = () =>
-      document.documentElement.classList.toggle("dark");
-  </script>
-</html>

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

@@ -1,185 +0,0 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { reactive } from "vue";
-import type { ChartColorValue } from "@antelopejs/interface-dms/base/chart";
-import { useApexChart } from "../layers/dms-ui/app/composables/chart/useApexChart";
-import type { UseApexChartInput } from "../layers/dms-ui/app/composables/chart/useApexChart.types";
-import {
-  clearChartColorCache,
-  readThemeMuted,
-  resolveChartColor,
-  resolveChartColors,
-} from "../layers/dms-ui/app/composables/chart/useChartTheme";
-
-const FALLBACK = "#7c3aed";
-const LIGHT = "rgb(124, 58, 237)";
-const DARK = "rgb(167, 139, 250)";
-const TOKENS: ChartColorValue[] = [
-  "primary-500",
-  "accent-50",
-  "neutral-950",
-  "--usage",
-  "var(--usage)",
-];
-let computedColor = LIGHT;
-const probe = { style: { backgroundColor: "" } };
-const appendChild = vi.fn();
-const removeChild = vi.fn();
-
-function mockBrowser() {
-  vi.stubGlobal("document", {
-    body: { appendChild, removeChild },
-    createElement: vi.fn(() => probe),
-  });
-  vi.stubGlobal("getComputedStyle", () => ({ backgroundColor: computedColor }));
-}
-
-beforeEach(() => {
-  computedColor = LIGHT;
-  clearChartColorCache();
-  vi.clearAllMocks();
-});
-afterEach(() => vi.unstubAllGlobals());
-
-describe("chart color tokens", () => {
-  it("falls back without accessing the DOM during SSR", () => {
-    expect(resolveChartColors(TOKENS)).toEqual(TOKENS.map(() => FALLBACK));
-    expect(resolveChartColor(undefined)).toBe(FALLBACK);
-  });
-
-  it.each([
-    ["primary", "--ui-primary"],
-    ["neutral", "--ui-text-toned"],
-    ["primary-500", "--ui-color-primary-500"],
-    ["accent-50", "--ui-color-primary-50"],
-    ["neutral-950", "--ui-color-neutral-950"],
-    ["--usage", "--usage"],
-    ["var(--usage)", "--usage"],
-  ])("resolves %s via %s", (input, variable) => {
-    mockBrowser();
-    expect(resolveChartColor(input)).toBe(LIGHT);
-    expect(probe.style.backgroundColor).toBe(`var(${variable}, ${FALLBACK})`);
-    expect(removeChild).toHaveBeenCalledWith(probe);
-  });
-
-  it.each([
-    "#abcdef",
-    "rgb(1, 2, 3)",
-    "hsl(0, 50%, 50%)",
-    "unknown",
-    "primary-123",
-  ])("preserves legacy passthrough %s", (color) => {
-    expect(resolveChartColor(color)).toBe(color);
-  });
-
-  it.each([
-    ["rgb(14 165 233)", "rgb(14, 165, 233)"],
-    ["rgb(14 165 233 / 0.5)", "rgba(14, 165, 233, 0.5)"],
-    ["rgba(14 165 233 / 40%)", "rgba(14, 165, 233, 0.4)"],
-  ])("rewrites space-separated %s in the comma form Apex reads", (color, expected) => {
-    expect(resolveChartColor(color)).toBe(expected);
-  });
-
-  it.each(["", "transparent", "rgba(0, 0, 0, 0)"])(
-    "falls back for unusable computed color %s",
-    (color) => {
-      mockBrowser();
-      computedColor = color;
-      expect(resolveChartColor("--missing")).toBe(FALLBACK);
-    },
-  );
-
-  it("shares cache entries across equivalent spellings", () => {
-    mockBrowser();
-    resolveChartColors([
-      "primary-500",
-      "--ui-color-primary-500",
-      "var(--ui-color-primary-500)",
-    ]);
-    expect(appendChild).toHaveBeenCalledTimes(1);
-  });
-
-  it("does not cache SSR fallback before hydration", () => {
-    expect(resolveChartColor("primary-500")).toBe(FALLBACK);
-    mockBrowser();
-    expect(resolveChartColor("primary-500")).toBe(LIGHT);
-  });
-
-  it("keeps text and chart fallbacks independent for the same variable", () => {
-    mockBrowser();
-    computedColor = "transparent";
-    expect(readThemeMuted()).toBe("#6b7280");
-    expect(resolveChartColor("--ui-text-muted")).toBe(FALLBACK);
-  });
-
-  it("recomputes Apex colors after theme cache invalidation and revision", () => {
-    mockBrowser();
-    const input = reactive<UseApexChartInput>({
-      type: "line",
-      series: [],
-      colors: TOKENS,
-      themeRevision: 0,
-    });
-    const chart = useApexChart(() => input);
-    expect(chart.options.value.colors).toEqual(TOKENS.map(() => LIGHT));
-    computedColor = DARK;
-    clearChartColorCache();
-    input.themeRevision = 1;
-    expect(chart.options.value.colors).toEqual(TOKENS.map(() => DARK));
-  });
-
-  it("resolves series overrides and annotation colors", () => {
-    mockBrowser();
-    const chart = useApexChart(() => ({
-      type: "line",
-      series: [{ name: "usage", color: "primary-500", data: [] }],
-      annotations: [{ y: 10, color: "var(--usage)" }],
-    }));
-    expect(chart.options.value.colors).toEqual([LIGHT]);
-    expect(chart.series.value).toEqual([
-      expect.objectContaining({ color: LIGHT }),
-    ]);
-    expect(chart.options.value.annotations).toMatchObject({
-      yaxis: [expect.objectContaining({ borderColor: LIGHT })],
-    });
-  });
-
-  it("refreshes mixed series colors without mutating the input", () => {
-    mockBrowser();
-    const input = reactive<UseApexChartInput>({
-      type: "mixed",
-      series: [{ name: "usage", data: [] }],
-      seriesDefs: [{ name: "usage", type: "line", color: "primary-500" }],
-      themeRevision: 0,
-    });
-    const chart = useApexChart(() => input);
-    expect(chart.series.value).toEqual([
-      expect.objectContaining({ color: LIGHT }),
-    ]);
-    computedColor = DARK;
-    clearChartColorCache();
-    input.themeRevision = 1;
-    expect(chart.series.value).toEqual([
-      expect.objectContaining({ color: DARK }),
-    ]);
-    expect(input.series[0]?.color).toBeUndefined();
-    expect(input.seriesDefs?.[0]?.color).toBe("primary-500");
-  });
-
-  it("normalizes modern color spaces through an sRGB canvas", () => {
-    mockBrowser();
-    computedColor = "oklch(0.5 0.2 280)";
-    const context = {
-      fillStyle: "",
-      fillRect: vi.fn(),
-      getImageData: () => ({ data: [92, 76, 200, 255] }),
-    };
-    vi.mocked(document.createElement).mockReturnValueOnce(
-      probe as unknown as HTMLDivElement,
-    );
-    vi.mocked(document.createElement).mockReturnValueOnce({
-      getContext: () => context,
-    } as unknown as HTMLCanvasElement);
-    expect(resolveChartColor("primary-500")).toBe("rgb(92, 76, 200)");
-    expect(context.fillStyle).toBe(computedColor);
-  });
-});

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

@@ -1,133 +0,0 @@
-/**
- * A chart names its series in a legend drawn in the dashboard's colours, at
- * the top of an axis chart or under a circular one unless `legendPosition`
- * says otherwise. Inside a ChartCard the chart's legend stays off, the card
- * heading its single series, until the card asks for it with
- * `showSeriesLegend`: no raw Apex `legend` option is needed for either.
- */
-import { createSSRApp, defineComponent, h, ref, type PropType } from "vue";
-import { renderToString } from "vue/server-renderer";
-import { afterEach, 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 { useApexChart } from "../layers/dms-ui/app/composables/chart/useApexChart";
-import type { UseApexChartInput } from "../layers/dms-ui/app/composables/chart/useApexChart.types";
-import type { ChartSeries } from "../layers/dms-ui/app/composables/chart/types";
-
-const SERIES: ChartSeries[] = [
-  { name: "Average", data: [{ x: "10:00", y: 42 }] },
-  { name: "p95", data: [{ x: "10:00", y: 96 }] },
-];
-
-vi.mock("../layers/dms-ui/app/composables/chart/useChartFetch", () => ({
-  useChartFetch: () => ({
-    data: ref({ value: 42, series: SERIES }),
-    isLoading: ref(false),
-  }),
-}));
-
-interface LegendOptions {
-  show: boolean;
-  position: string;
-}
-
-const LegendProbe = defineComponent({
-  props: {
-    options: {
-      type: Object as PropType<{ legend: LegendOptions }>,
-      required: true,
-    },
-  },
-  setup: (props) => () =>
-    h("output", {
-      "data-show": String(props.options.legend.show),
-      "data-position": props.options.legend.position,
-    }),
-});
-
-const Slot = defineComponent({
-  setup:
-    (_, { slots }) =>
-    () =>
-      h("div", slots.default?.()),
-});
-
-function legendOf(input: Partial<UseApexChartInput>) {
-  const chart = useApexChart(() => ({
-    type: "line",
-    series: SERIES,
-    ...input,
-  }));
-  return chart.options.value.legend as Record<string, unknown>;
-}
-
-async function renderCard(cardProps: Record<string, unknown>) {
-  vi.stubGlobal("useI18n", () => ({
-    locale: ref("en"),
-    t: (key: string) => key,
-  }));
-  vi.stubGlobal("useTranslation", () => ({
-    processI18n: (text: string) => text,
-  }));
-  vi.stubGlobal("useComponentEvent", () => ({}));
-  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
-  const app = createSSRApp({
-    render: () =>
-      h(
-        ChartCard,
-        {
-          title: "Latency",
-          componentId: "card",
-          pageId: "routes",
-          ...cardProps,
-        },
-        () =>
-          h(Chart, {
-            type: "line",
-            componentId: "plot",
-            pageId: "routes",
-            legendPosition: "bottom",
-          }),
-      ),
-  });
-  for (const name of ["DmsCard", "DmsClientOnly", "UIcon", "USkeleton"])
-    app.component(name, Slot);
-  app.component("DmsApexChartHost", LegendProbe);
-  return renderToString(app);
-}
-
-afterEach(() => vi.unstubAllGlobals());
-
-describe("chart legend", () => {
-  it("sits above an axis chart and under a circular one by default", () => {
-    expect(legendOf({}).position).toBe("top");
-    expect(legendOf({ type: "donut", series: [] }).position).toBe("bottom");
-  });
-
-  it("follows legendPosition", () => {
-    expect(legendOf({ legendPosition: "bottom" }).position).toBe("bottom");
-    expect(
-      legendOf({ type: "donut", series: [], legendPosition: "top" }).position,
-    ).toBe("top");
-  });
-
-  it("is drawn in the dashboard's theme", () => {
-    const legend = legendOf({});
-    expect(legend.show).toBe(true);
-    expect(legend.markers).toMatchObject({ shape: "square", strokeWidth: 0 });
-    expect(legend.labels).toHaveProperty("colors");
-  });
-});
-
-describe("series legend of a ChartCard", () => {
-  it("stays off in a card by default", async () => {
-    const html = await renderCard({});
-    expect(html).toContain('data-show="false"');
-  });
-
-  it("names the series where the chart places it when the card asks", async () => {
-    const html = await renderCard({ showSeriesLegend: true });
-    expect(html).toContain('data-show="true"');
-    expect(html).toContain('data-position="bottom"');
-  });
-});