@ac-design/design-system 2.0.0 → 2.1.0

package/dist/lib/charts/echarts.d.ts

@@ -0,0 +1,86 @@
+import type { ECharts, EChartsCoreOption } from "echarts/core";
+import type { Ref } from "vue";
+/** `canvas` (default) stays fast with tens of thousands of points; `svg` is crisper when printed or zoomed and lighter for a few dozen. */
+export type ChartRenderer = "canvas" | "svg";
+/** Our tokens resolved to plain colours, because ECharts can't read CSS variables. */
+export interface ChartTheme {
+    /** Any CSS colour, including `var(--color-chart-1)`, as `rgba(r, g, b, a)`. */
+    color: (css: string) => string;
+    /** The colour at an opacity, e.g. `alpha(color, 0.3)` for an area fill. */
+    alpha: (css: string, opacity: number) => string;
+    heading: string;
+    body: string;
+    muted: string;
+    border: string;
+    borderDark: string;
+    surface: string;
+    sunken: string;
+    primary: string;
+    font: string;
+    reducedMotion: boolean;
+}
+/** Reads the tokens through a hidden probe inside the chart, so a `.dark` subtree or a re-hued brand resolves correctly. */
+export declare function readChartTheme(scope: HTMLElement): ChartTheme;
+/** Axis, grid and text styles every cartesian chart shares, in cloud-ui's look: muted 11px labels, dashed grid lines. */
+export declare function axisStyle(t: ChartTheme): {
+    axisLine: {
+        lineStyle: {
+            color: string;
+        };
+    };
+    axisTick: {
+        show: boolean;
+    };
+    axisLabel: {
+        color: string;
+        fontSize: number;
+        fontFamily: string;
+        hideOverlap: boolean;
+    };
+    splitLine: {
+        lineStyle: {
+            color: string;
+            type: "dashed";
+        };
+    };
+    nameTextStyle: {
+        color: string;
+        fontSize: number;
+        fontFamily: string;
+    };
+};
+export declare function loadOnce(key: string, load: () => Promise<unknown>): Promise<unknown>;
+interface UseEChartOptions {
+    /** The element ECharts draws into. It may appear later (after loading), and is re-initialised when it changes. */
+    host: Ref<HTMLElement | undefined>;
+    /** Builds the option from the theme. Read reactive props inside: the chart re-renders when they change. */
+    option: (theme: ChartTheme) => EChartsCoreOption;
+    renderer: () => ChartRenderer;
+    /** Loads extra ECharts modules before the first render, e.g. the zoom component. */
+    prepare?: () => Promise<unknown> | void;
+    /** Attaches event handlers once the instance exists. */
+    setup?: (chart: ECharts) => void;
+}
+export declare function useEChart(options: UseEChartOptions): {
+    chart: import("vue").ShallowRef<ECharts | undefined, ECharts | undefined>;
+    theme: import("vue").ShallowRef<ChartTheme | undefined, ChartTheme | undefined>;
+};
+/** Index of the value in a sorted list closest to `v` (binary search, so it stays fast on large series). */
+export declare function nearestIndex(values: number[], v: number): number;
+/**
+ * Feeds pointer moves over the plot into ChartFrame's tooltip: `locate` turns a pixel into a row index.
+ * ECharts' own tooltip box is turned off (`showContent: false`); its axis pointer still draws the guide line.
+ */
+export declare function bindAxisHover(chart: ECharts, locate: (point: [number, number]) => number | null, onMove: (index: number, clientX: number, clientY: number) => void, onLeave: () => void): void;
+/** The hovered item of a series (a donut segment, map point or graph node), with the pointer position for ChartFrame's tooltip. */
+export interface ItemHover {
+    seriesIndex: number;
+    dataIndex: number;
+    dataType?: string;
+    data: unknown;
+    clientX: number;
+    clientY: number;
+}
+/** Feeds item hovers (donut, map, graph) into ChartFrame's tooltip. Turn ECharts' own tooltip box off for these series. */
+export declare function bindItemHover(chart: ECharts, onMove: (hover: ItemHover) => void, onLeave: () => void): void;
+export {};

package/dist/lib/charts/echarts.js

@@ -0,0 +1,173 @@
+import { onBeforeUnmount as e, shallowRef as t, watch as n } from "vue";
+import { init as r, use as i } from "echarts/core";
+import { CanvasRenderer as a } from "echarts/renderers";
+//#region src/lib/charts/echarts.ts
+i([a]);
+function o(e) {
+	let t = /^#([0-9a-f]{6})$/i.exec(e);
+	if (t) {
+		let e = parseInt(t[1], 16);
+		return [
+			e >> 16 & 255,
+			e >> 8 & 255,
+			e & 255,
+			1
+		];
+	}
+	let n = e.match(/[\d.]+/g)?.map(Number) ?? [
+		0,
+		0,
+		0,
+		1
+	];
+	return [
+		n[0] ?? 0,
+		n[1] ?? 0,
+		n[2] ?? 0,
+		n[3] ?? 1
+	];
+}
+function s(e) {
+	let t = e.querySelector(":scope > [data-chart-probe]");
+	t || (t = document.createElement("span"), t.dataset.chartProbe = "", t.style.display = "none", e.appendChild(t));
+	let n = document.createElement("canvas").getContext("2d"), r = /* @__PURE__ */ new Map(), i = t;
+	function a(e) {
+		let t = r.get(e);
+		if (!t) {
+			i.style.color = "", i.style.color = e;
+			let a = getComputedStyle(i).color;
+			n && (n.fillStyle = "#000", n.fillStyle = a, a = String(n.fillStyle)), t = o(a), r.set(e, t);
+		}
+		return t;
+	}
+	let s = (e, t) => {
+		let [n, r, i, o] = a(e);
+		return `rgba(${n}, ${r}, ${i}, ${+(o * t).toFixed(3)})`;
+	}, c = (e) => s(e, 1);
+	return {
+		color: c,
+		alpha: s,
+		heading: c("var(--color-heading)"),
+		body: c("var(--color-body)"),
+		muted: c("var(--color-muted)"),
+		border: c("var(--color-border)"),
+		borderDark: c("var(--color-border-dark)"),
+		surface: c("var(--color-surface)"),
+		sunken: c("var(--color-surface-sunken)"),
+		primary: c("var(--color-primary)"),
+		font: getComputedStyle(e).fontFamily || "Roboto, sans-serif",
+		reducedMotion: typeof window < "u" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches
+	};
+}
+function c(e) {
+	return {
+		axisLine: { lineStyle: { color: e.border } },
+		axisTick: { show: !1 },
+		axisLabel: {
+			color: e.muted,
+			fontSize: 11,
+			fontFamily: e.font,
+			hideOverlap: !0
+		},
+		splitLine: { lineStyle: {
+			color: e.border,
+			type: "dashed"
+		} },
+		nameTextStyle: {
+			color: e.muted,
+			fontSize: 11,
+			fontFamily: e.font
+		}
+	};
+}
+var l = /* @__PURE__ */ new Map();
+function u(e, t) {
+	return l.has(e) || l.set(e, t()), l.get(e);
+}
+function d(a) {
+	let o = t(), c = t(), l, d, f, p = 0;
+	function m() {
+		let e = a.host.value;
+		e?.parentElement && (c.value = s(e.parentElement));
+	}
+	function h() {
+		l?.disconnect(), o.value?.dispose(), o.value = void 0;
+	}
+	async function g(e) {
+		let t = ++p;
+		if (h(), !e) return;
+		let n = a.renderer();
+		if (await Promise.all([n === "svg" ? u("svg", () => import("echarts/renderers").then((e) => i([e.SVGRenderer]))) : void 0, a.prepare?.()]), t !== p || a.host.value !== e) return;
+		m();
+		let s = r(e, void 0, { renderer: n });
+		o.value = s, a.setup?.(s), _(), typeof ResizeObserver < "u" && (l = new ResizeObserver(() => s.resize()), l.observe(e));
+	}
+	function _() {
+		let e = o.value;
+		if (!e || !c.value) return;
+		let t = a.option(c.value), n = e.getOption()?.dataZoom;
+		t.dataZoom && n?.length && (t.dataZoom = t.dataZoom.map((e, t) => ({
+			...e,
+			start: n[t]?.start ?? e.start,
+			end: n[t]?.end ?? e.end
+		}))), e.setOption(t, {
+			notMerge: !0,
+			lazyUpdate: !0
+		});
+	}
+	return n(a.host, (e) => void g(e), {
+		immediate: !0,
+		flush: "post"
+	}), n(a.renderer, () => void g(a.host.value)), n(() => c.value ? a.option(c.value) : null, _), typeof window < "u" && (d = new MutationObserver(() => {
+		m(), _();
+	}), d.observe(document.documentElement, {
+		attributes: !0,
+		attributeFilter: [
+			"class",
+			"style",
+			"data-theme"
+		]
+	}), d.observe(document.body, {
+		attributes: !0,
+		attributeFilter: ["class"]
+	}), f = window.matchMedia?.("(prefers-color-scheme: dark)"), f?.addEventListener("change", m)), e(() => {
+		p++, d?.disconnect(), f?.removeEventListener("change", m), h();
+	}), {
+		chart: o,
+		theme: c
+	};
+}
+function f(e, t) {
+	let n = 0, r = e.length - 1;
+	if (r < 0) return -1;
+	for (; n < r;) {
+		let i = n + r >> 1;
+		e[i] < t ? n = i + 1 : r = i;
+	}
+	return n > 0 && Math.abs(e[n - 1] - t) <= Math.abs(e[n] - t) ? n - 1 : n;
+}
+function p(e, t, n, r) {
+	let i = e.getZr();
+	i.on("mousemove", (i) => {
+		let a = [i.offsetX, i.offsetY];
+		if (!e.containPixel({ gridIndex: 0 }, a)) return r();
+		let o = t(a);
+		if (o === null || o < 0 || !i.event) return r();
+		n(o, i.event.clientX, i.event.clientY);
+	}), i.on("globalout", r);
+}
+function m(e, t, n) {
+	e.on("mousemove", (e) => {
+		let n = e, r = n.event?.event;
+		r && n.dataIndex !== void 0 && t({
+			seriesIndex: n.seriesIndex ?? 0,
+			dataIndex: n.dataIndex,
+			dataType: n.dataType,
+			data: n.data,
+			clientX: r.clientX,
+			clientY: r.clientY
+		});
+	}), e.on("mouseout", n), e.getZr().on("globalout", n);
+}
+//#endregion
+export { c as axisStyle, p as bindAxisHover, m as bindItemHover, u as loadOnce, f as nearestIndex, s as readChartTheme, d as useEChart };

package/dist/lib/charts/graph.d.ts

@@ -0,0 +1,77 @@
+import type { Component } from "vue";
+/** Node diameter in px at 100% zoom. */
+export declare const NODE_SIZE = 40;
+/** Gap between a node and its label. */
+export declare const LABEL_GAP = 6;
+export declare const NAME_LINE = 16;
+export declare const KIND_LINE = 14;
+export declare const GROUP_PAD = 10;
+/** Room above a group's nodes for its name. */
+export declare const GROUP_TITLE = 20;
+export interface LayoutNode {
+    id: string;
+    label: string;
+    kind: string;
+    group?: string;
+    badge: boolean;
+}
+export interface LayoutLink {
+    source: string;
+    target: string;
+    label: string;
+}
+export interface GroupBox {
+    name: string;
+    /** Top-left corner and size, in layout px. */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface Bounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+}
+export interface GraphLayout {
+    /** Node centres in layout px (100% zoom). */
+    positions: Map<string, [number, number]>;
+    groups: GroupBox[];
+    /** Bounds of the node centres: what ECharts fits into the view. */
+    centers: Bounds;
+    /** Half the label width per node and detail, in screen px: labels keep their size at any zoom. */
+    labelHalf: Map<string, Record<LabelDetail, number>>;
+}
+/** How much text a node shows: name and kind, the name only, or only the problem badge. Set by the screen scale. */
+export type LabelDetail = "full" | "name" | "badge";
+/** The detail that still reads at a screen scale: everything from 60%, names from 40%. */
+export declare const LABEL_DETAILS: LabelDetail[];
+export declare function labelDetail(scale: number): LabelDetail;
+export declare function truncate(text: string, max: number): string;
+export declare function nodeName(label: string): string;
+export declare function nodeKind(kind: string): string;
+/** Layered layout: ranks follow the links, and nodes of a group are kept together as a dagre cluster. */
+export declare function layoutGraph(nodes: LayoutNode[], links: LayoutLink[], direction: "LR" | "TB"): GraphLayout;
+/**
+ * How far the drawing reaches past the node centres' box, in screen px at `scale`.
+ * Nodes and group boxes scale; labels don't, so the answer isn't linear in `scale`.
+ */
+export declare function overhang(layout: GraphLayout, scale: number, detail: LabelDetail): {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+};
+export interface NodeImageOptions {
+    icon: Component | string;
+    /** Resolved colours (ECharts and SVG images can't read CSS variables). */
+    iconColor: string;
+    fill: string;
+    ring: string;
+    ringWidth: number;
+    shape: "circle" | "square";
+    font: string;
+}
+/** One node as an `image://` symbol: fill, ring and icon in a 40×40 view box, rasterised large enough to stay sharp at 150% on a 2× screen. */
+export declare function nodeImage(o: NodeImageOptions): string;

package/dist/lib/charts/graph.js

@@ -0,0 +1,155 @@
+import { h as e, render as t } from "vue";
+import n from "@dagrejs/dagre";
+var r = 20, i = 22, a = 24, o = 18, s = "\0group:", c = [
+	"full",
+	"name",
+	"badge"
+];
+function l(e) {
+	return e >= .6 ? "full" : e >= .4 ? "name" : "badge";
+}
+var u = {
+	full: 36,
+	name: 22,
+	badge: 22
+};
+function d(e, t) {
+	return e.length > t ? `${e.slice(0, t - 1)}…` : e;
+}
+function f(e) {
+	return d(e, i);
+}
+function p(e) {
+	return d(e, a);
+}
+function m(e) {
+	let t = e.badge ? o : 0, n = f(e.label).length * 6.8 + t, r = p(e.kind).length * 6.2;
+	return {
+		full: Math.max(n, r) + 8,
+		name: n + 8,
+		badge: t
+	};
+}
+function h(e, t, r) {
+	let i = new n.graphlib.Graph({
+		compound: !0,
+		multigraph: !0
+	});
+	i.setGraph(r === "TB" ? {
+		rankdir: "TB",
+		nodesep: 28,
+		ranksep: 44,
+		edgesep: 52
+	} : {
+		rankdir: "LR",
+		nodesep: 20,
+		ranksep: 72,
+		edgesep: 52
+	}), i.setDefaultEdgeLabel(() => ({}));
+	let a = /* @__PURE__ */ new Map();
+	for (let t of e) {
+		let e = m(t);
+		a.set(t.id, {
+			full: e.full / 2,
+			name: e.name / 2,
+			badge: e.badge / 2
+		});
+		let n = Math.max(40, e.full);
+		if (i.setNode(t.id, {
+			width: n,
+			height: 76
+		}), t.group) {
+			let e = s + t.group;
+			i.hasNode(e) || i.setNode(e, {
+				width: 0,
+				height: 0
+			}), i.setParent(t.id, e);
+		}
+	}
+	t.forEach((e, t) => {
+		let n = e.label ? {
+			width: e.label.length * 6.4 + 16,
+			height: 18,
+			labelpos: "c"
+		} : {};
+		i.setEdge(e.source, e.target, n, String(t));
+	}), n.layout(i);
+	let o = /* @__PURE__ */ new Map(), c = {
+		minX: Infinity,
+		minY: Infinity,
+		maxX: -Infinity,
+		maxY: -Infinity
+	};
+	for (let t of e) {
+		let e = i.node(t.id), n = e.x ?? 0, r = (e.y ?? 0) - 38 + 20;
+		o.set(t.id, [n, r]), _(c, n, r, n, r);
+	}
+	let l = [];
+	for (let e of i.nodes()) {
+		if (!e.startsWith(s)) continue;
+		let t = i.node(e), n = (t.x ?? 0) - t.width / 2 - 10, r = (t.y ?? 0) - t.height / 2 - 10 - 20, a = {
+			name: e.slice(7),
+			x: n,
+			y: r,
+			width: t.width + 20,
+			height: t.height + 20 + 20
+		};
+		l.push(a);
+	}
+	return e.length || Object.assign(c, {
+		minX: 0,
+		minY: 0,
+		maxX: 0,
+		maxY: 0
+	}), {
+		positions: o,
+		groups: l,
+		centers: c,
+		labelHalf: a
+	};
+}
+function g(e, t, n) {
+	let { centers: r } = e, i = {
+		left: 0,
+		top: 0,
+		right: 0,
+		bottom: 0
+	}, a = u[n];
+	for (let [o, [s, c]] of e.positions) {
+		let l = e.labelHalf.get(o)?.[n] ?? 0, u = Math.max(20 * t, l);
+		i.left = Math.max(i.left, u - (s - r.minX) * t), i.right = Math.max(i.right, u - (r.maxX - s) * t), i.top = Math.max(i.top, 20 * t - (c - r.minY) * t);
+		let d = n === "badge" && !l ? 0 : a;
+		i.bottom = Math.max(i.bottom, 20 * t + d - (r.maxY - c) * t);
+	}
+	for (let n of e.groups) i.left = Math.max(i.left, (r.minX - n.x) * t), i.right = Math.max(i.right, (n.x + n.width - r.maxX) * t), i.top = Math.max(i.top, (r.minY - n.y) * t), i.bottom = Math.max(i.bottom, (n.y + n.height - r.maxY) * t);
+	return i;
+}
+function _(e, t, n, r, i) {
+	e.minX = Math.min(e.minX, t), e.minY = Math.min(e.minY, n), e.maxX = Math.max(e.maxX, r), e.maxY = Math.max(e.maxY, i);
+}
+var v = /* @__PURE__ */ new WeakMap();
+function y(n) {
+	let i = v.get(n);
+	if (i !== void 0) return i;
+	if (i = "", typeof document < "u") {
+		let a = document.createElement("div");
+		t(e(n, {
+			size: r,
+			width: r,
+			height: r
+		}), a);
+		let o = a.querySelector("svg");
+		o && (o.removeAttribute("class"), o.setAttribute("x", "10"), o.setAttribute("y", "10"), o.setAttribute("width", String(r)), o.setAttribute("height", String(r)), i = new XMLSerializer().serializeToString(o)), t(null, a);
+	}
+	return v.set(n, i), i;
+}
+function b(e) {
+	return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var x = 160;
+function S(e) {
+	let t = e.ringWidth / 2, n = 40 - e.ringWidth, r = `<svg xmlns="http://www.w3.org/2000/svg" width="${x}" height="${x}" viewBox="0 0 40 40">${e.shape === "square" ? `<rect x="${t}" y="${t}" width="${n}" height="${n}" rx="10" fill="${e.fill}" stroke="${e.ring}" stroke-width="${e.ringWidth}"/>` : `<circle cx="20" cy="20" r="${n / 2}" fill="${e.fill}" stroke="${e.ring}" stroke-width="${e.ringWidth}"/>`}${typeof e.icon == "string" ? `<text x="20" y="20" text-anchor="middle" dominant-baseline="central" font-size="11" font-weight="600" font-family="${b(e.font)}" fill="${e.iconColor}">${b(e.icon.slice(0, 3))}</text>` : `<g color="${e.iconColor}">${y(e.icon)}</g>`}</svg>`;
+	return `image://data:image/svg+xml;charset=utf-8,${encodeURIComponent(r)}`;
+}
+//#endregion
+export { c as LABEL_DETAILS, l as labelDetail, h as layoutGraph, S as nodeImage, p as nodeKind, f as nodeName, g as overhang, d as truncate };

package/dist/lib/charts/index.d.ts

@@ -2,6 +2,10 @@ export { default as AcLineChart } from "../components/AcLineChart.vue";
 export { default as AcAreaChart } from "../components/AcAreaChart.vue";
 export { default as AcBarChart } from "../components/AcBarChart.vue";
 export { default as AcDonutChart } from "../components/AcDonutChart.vue";
+export { default as AcGraphChart } from "../components/AcGraphChart.vue";
+export { default as AcMapChart } from "../components/AcMapChart.vue";
 export type { ChartAccessor, ChartCategory, ChartColor, ChartCurve, ChartDatum, ChartLegendPosition, ChartTooltipItem, } from "./shared";
 export type { ChartTooltipSlotProps } from "./ChartFrame.vue";
 export type { XYChartProps } from "./xy";
+export type { MapChartTooltipSlotProps, MapGeoJson, MapPoint, MapPointStatus } from "../components/AcMapChart.vue";
+export type { GraphLink, GraphNode, GraphStatus, GraphTooltipSlotProps } from "../components/AcGraphChart.vue";

package/dist/lib/charts/index.js

@@ -2,4 +2,6 @@ import e from "../components/AcLineChart.js";
 import t from "../components/AcAreaChart.js";
 import n from "../components/AcBarChart.js";
 import r from "../components/AcDonutChart.js";
-export { t as AcAreaChart, n as AcBarChart, r as AcDonutChart, e as AcLineChart };
+import i from "../components/AcGraphChart.js";
+import a from "../components/AcMapChart.js";
+export { t as AcAreaChart, n as AcBarChart, r as AcDonutChart, i as AcGraphChart, e as AcLineChart, a as AcMapChart };

package/dist/lib/charts/shared.d.ts

@@ -51,10 +51,3 @@ export declare function timeFormatters(values: number[]): {
     tick: (t: number) => string;
     title: (t: number) => string;
 };
-/** Rounds an axis maximum up to a tidy step, like d3's `nice()`. */
-export declare function niceMax(max: number, ticks?: number): number;
-/** Every k-th index so at most `max` category ticks are drawn. */
-export declare function categoryTicks(count: number, max: number): number[];
-/** Unovis animation length; 0 when the viewer asks for reduced motion. */
-export declare function chartDuration(): number;
-export declare const CURVES: Record<ChartCurve, string>;

package/dist/lib/charts/shared.js

@@ -92,23 +92,5 @@ function h(e) {
 		title: (e) => n ? u.format(e) : r ? l.format(e) : c.format(e)
 	};
 }
-function g(e, t = 5) {
-	if (!(e > 0)) return e;
-	let n = e / t, r = 10 ** Math.floor(Math.log10(n)), i = n / r;
-	return r *= i >= 7.5 ? 10 : i >= 3.5 ? 5 : i >= 1.5 ? 2 : 1, Math.ceil(e / r) * r;
-}
-function _(e, t) {
-	let n = Math.max(1, Math.ceil(e / Math.max(1, t))), r = [];
-	for (let t = 0; t < e; t += n) r.push(t);
-	return r;
-}
-function v() {
-	return typeof window > "u" || !window.matchMedia ? 300 : window.matchMedia("(prefers-reduced-motion: reduce)").matches ? 0 : 300;
-}
-var y = {
-	linear: "linear",
-	monotone: "monotoneX",
-	step: "step"
-};
 //#endregion
-export { y as CURVES, _ as categoryTicks, n as chartColor, v as chartDuration, l as detectXKind, o as formatCompact, g as niceMax, i as readNumber, r as readValue, h as timeFormatters, d as toTimestamp };
+export { n as chartColor, l as detectXKind, o as formatCompact, i as readNumber, r as readValue, h as timeFormatters, d as toTimestamp };

package/dist/lib/charts/xy.d.ts

@@ -32,8 +32,16 @@ export interface XYChartProps {
     title?: string;
     /** A sentence for screen readers on what the chart shows. Defaults to the series names and the x range. */
     description?: string;
+    /** Adds zoom and pan along the x axis: drag the slider under the plot, or scroll and pinch over it. For long time series. */
+    zoom?: boolean;
+    /** `canvas` (default) stays fast with tens of thousands of points; `svg` is crisper when printed and lighter for a few dozen. */
+    renderer?: "canvas" | "svg";
+    /** Animates the first draw and updates. Off by itself above 2,000 rows and when the viewer asks for reduced motion. */
+    animation?: boolean;
 }
-export type XYChartDefaults = Required<Pick<XYChartProps, "height" | "legend" | "tooltip" | "gridLines" | "loading" | "emptyText">>;
+export type XYChartDefaults = Required<Pick<XYChartProps, "height" | "legend" | "tooltip" | "gridLines" | "loading" | "emptyText" | "zoom" | "renderer" | "animation">>;
+/** Rows above this draw without animation and without point markers, and line series are sampled (LTTB). */
+export declare const LARGE_DATA = 2000;
 /** `positions` places x by index (bars); otherwise time and number x values keep their real spacing. */
 export declare function useXYChart(props: XYChartProps, options: {
     stacked: () => boolean;
@@ -45,19 +53,15 @@ export declare function useXYChart(props: XYChartProps, options: {
     keys: import("vue").ComputedRef<string[]>;
     visibleKeys: import("vue").ComputedRef<string[]>;
     colorOf: import("vue").ComputedRef<Record<string, string>>;
-    colors: import("vue").ComputedRef<string[]>;
     legendItems: import("vue").ComputedRef<ChartLegendItem[]>;
     xKind: import("vue").ComputedRef<import("./shared").XKind>;
+    rawX: import("vue").ComputedRef<unknown[]>;
+    xNumbers: import("vue").ComputedRef<number[]>;
     byPosition: import("vue").ComputedRef<boolean>;
-    x: (_d: ChartDatum, i: number) => number;
-    yAccessors: import("vue").ComputedRef<((d: ChartDatum) => number | null)[]>;
-    xTickValues: import("vue").ComputedRef<number[] | undefined>;
-    maxXTicks: import("vue").ComputedRef<number>;
     yTicks: import("vue").ComputedRef<number>;
     xTickFormat: (tick: number | Date) => string;
     formatY: (v: number | null) => string;
     rowLabel: (i: number) => string;
-    yDomain: import("vue").ComputedRef<[number | undefined, number | undefined]>;
     tooltipItems: (d: ChartDatum) => ChartTooltipItem[];
     tooltipTotal: (d: ChartDatum) => string;
     table: import("vue").ComputedRef<ChartTable>;