vccs 0.5.0 → 1.0.0-beta.1

package/dist/es/model/chart.mjs

@@ -0,0 +1,122 @@
+import { legendArea, registeredAxes } from "../core/layout.mjs";
+import { getBandSizeOfAxis } from "../core/axis/scale.mjs";
+import { provideChartPresentation } from "./presentation.mjs";
+import { createTooltip, provideTooltipController } from "./tooltip.mjs";
+import { createPolarLayout } from "./polar.mjs";
+import { createAxes } from "./axis.mjs";
+import { createChartData } from "./dataRange.mjs";
+import { createLayout } from "./layout.mjs";
+import { createChartBrush } from "./brush.mjs";
+import { createChartLegend } from "./legend.mjs";
+import { createRegistries } from "./registries.mjs";
+import { useTrackedData } from "../hooks/useTrackedData.mjs";
+import { computed, getCurrentScope, inject, provide } from "vue";
+//#region src/model/chart.ts
+var chartKey = Symbol("vccs-chart");
+function createChart(inputs) {
+	const scope = getCurrentScope();
+	if (!scope) throw new Error("vccs: createChart must run inside a chart scope.");
+	const eventEmitter = Symbol("vccs-chart-emitter");
+	const data = useTrackedData(inputs.data);
+	const layout = computed(() => ({
+		layout: inputs.layout(),
+		...inputs.size(),
+		margin: { ...inputs.margin() }
+	}));
+	const options = computed(inputs.options);
+	const polar = computed(inputs.polar);
+	const tooltipOptions = computed(() => ({
+		...inputs.tooltip(),
+		eventEmitter
+	}));
+	const registries = createRegistries();
+	const brush = createChartBrush();
+	const dataRange = createChartData(() => data.value, () => brush.range.value);
+	const legend = createChartLegend();
+	const geometry = createLayout({
+		layout: () => layout.value,
+		brush: () => brush.state.value,
+		legendSettings: () => legend.state.value.settings,
+		legendSize: () => legend.state.value.size,
+		axes: registries.axes
+	});
+	const polarLayout = createPolarLayout({
+		layout: inputs.layout,
+		size: inputs.size,
+		offset: () => geometry.offset.value,
+		polar: inputs.polar
+	});
+	const axis = createAxes(scope, {
+		polarLayout,
+		size: inputs.size,
+		offset: () => geometry.offset.value,
+		categoryScale: () => tooltipOptions.value.capabilities.categoryScale,
+		hasBar: () => registries.items.cartesian.entries.value.some((item) => item.type === "bar") || registries.items.polar.entries.value.some((item) => item.type === "radialBar"),
+		barCategoryGap: () => options.value.barCategoryGap,
+		...registries,
+		dataRange,
+		layout: inputs.layout,
+		stackOffset: () => options.value.stackOffset,
+		reverseStackOrder: () => options.value.reverseStackOrder
+	});
+	const tooltip = createTooltip({
+		axis,
+		dataRange,
+		layout: inputs.layout,
+		size: inputs.size,
+		offset: () => geometry.offset.value,
+		options: () => tooltipOptions.value
+	});
+	return {
+		legendArea: computed(() => legendArea(inputs.size(), inputs.margin())),
+		direction: computed(() => {
+			if (inputs.layout() === "horizontal") return registeredAxes(registries.axes.xAxis.entries.value).some((axis) => axis.reversed) ? "right-to-left" : "left-to-right";
+			if (inputs.layout() === "vertical") return registeredAxes(registries.axes.yAxis.entries.value).some((axis) => axis.reversed) ? "bottom-to-top" : "top-to-bottom";
+		}),
+		tooltip,
+		polarLayout,
+		axis,
+		dataRange,
+		inputs,
+		data,
+		layout,
+		options,
+		polar,
+		tooltipOptions,
+		brush,
+		legend,
+		...registries,
+		...geometry
+	};
+}
+function provideChart(chart) {
+	provide(chartKey, chart);
+	provideTooltipController(chart.tooltip);
+	provideChartPresentation({
+		capabilities: computed(() => chart.tooltipOptions.value.capabilities),
+		layout: computed(() => chart.layout.value.layout),
+		width: chart.width,
+		height: chart.height,
+		margin: chart.margin,
+		viewBox: chart.viewBox,
+		offset: chart.offset,
+		accessibility: computed(() => chart.options.value.accessibilityLayer !== false),
+		bandSize: computed(() => {
+			const axis = chart.tooltip.axis.value;
+			const scale = axis?.scale.value;
+			return axis && scale ? getBandSizeOfAxis({
+				...axis.settings.value,
+				scale
+			}, chart.tooltip.ticks.value ?? void 0) : void 0;
+		}),
+		syncId: computed(() => chart.options.value.syncId),
+		emitter: computed(() => chart.tooltipOptions.value.eventEmitter)
+	});
+}
+function useChart() {
+	const chart = inject(chartKey, null);
+	if (!chart) throw new Error("vccs: this component must be used inside a chart.");
+	return chart;
+}
+//#endregion
+export { createChart, provideChart, useChart };

package/dist/es/model/dataRange.mjs

@@ -0,0 +1,54 @@
+import { computed, shallowRef } from "vue";
+//#region src/model/dataRange.ts
+/**
+* The displayed row window. A registered Brush owns it (`null` = all rows); without a Brush the
+* chart follows the last range received from a synchronised peer. `undefined` from `brushRange`
+* means no Brush is registered.
+*/
+function createChartData(source, brushRange = () => void 0) {
+	const synced = shallowRef(null);
+	const range = computed(() => {
+		const length = source()?.length ?? 0;
+		const owned = brushRange();
+		return normalizeBrushRange(owned === void 0 ? synced.value : owned, length) ?? {
+			startIndex: 0,
+			endIndex: Math.max(0, length - 1)
+		};
+	});
+	const state = computed(() => ({
+		chartData: source(),
+		dataStartIndex: range.value.startIndex,
+		dataEndIndex: range.value.endIndex
+	}));
+	/** Follow a synchronised peer's range; used only when this chart has no Brush. */
+	function receiveSyncedRange(value) {
+		synced.value = value;
+	}
+	function displayedData(item, range = "brush") {
+		if (item.data?.length) return item.data;
+		const { chartData, dataStartIndex, dataEndIndex } = state.value;
+		return range === "all" ? chartData : chartData?.slice(dataStartIndex, dataEndIndex + 1);
+	}
+	function tooltipData(itemData) {
+		const { chartData, dataStartIndex, dataEndIndex } = state.value;
+		const data = itemData ?? chartData;
+		return Array.isArray(data) && dataStartIndex + dataEndIndex !== 0 ? data.slice(dataStartIndex, dataEndIndex + 1) : data;
+	}
+	return {
+		state,
+		receiveSyncedRange,
+		displayedData,
+		tooltipData
+	};
+}
+function normalizeBrushRange(value, length) {
+	if (value == null || length === 0 || !Number.isFinite(value.startIndex) || !Number.isFinite(value.endIndex)) return null;
+	const start = Math.max(0, Math.min(length - 1, Math.floor(value.startIndex)));
+	const end = Math.max(0, Math.min(length - 1, Math.floor(value.endIndex)));
+	return {
+		startIndex: Math.min(start, end),
+		endIndex: Math.max(start, end)
+	};
+}
+//#endregion
+export { createChartData, normalizeBrushRange };

package/dist/es/model/defaults.mjs

@@ -0,0 +1,28 @@
+//#region src/model/defaults.ts
+var chartDefaults = {
+	accessibilityLayer: true,
+	barCategoryGap: "10%",
+	barGap: 4,
+	barSize: void 0,
+	class: void 0,
+	maxBarSize: void 0,
+	reverseStackOrder: false,
+	stackOffset: "none",
+	syncId: void 0,
+	syncMethod: "index",
+	layout: "horizontal",
+	margin: {
+		top: 5,
+		right: 5,
+		bottom: 5,
+		left: 5
+	},
+	cx: "50%",
+	cy: "50%",
+	startAngle: 90,
+	endAngle: -270,
+	innerRadius: 0,
+	outerRadius: "80%"
+};
+//#endregion
+export { chartDefaults };

package/dist/es/model/layout.mjs

@@ -0,0 +1,33 @@
+import { brushDimensions, chartOffset, chartViewBox, registeredAxes } from "../core/layout.mjs";
+import { computed } from "vue";
+//#region src/model/layout.ts
+function createLayout(sources) {
+	const width = computed(() => sources.layout().width);
+	const height = computed(() => sources.layout().height);
+	const margin = computed(() => sources.layout().margin);
+	const xAxes = computed(() => registeredAxes(sources.axes.xAxis.entries.value));
+	const yAxes = computed(() => registeredAxes(sources.axes.yAxis.entries.value));
+	const brushHeight = computed(() => sources.brush().height);
+	const legendSettings = computed(sources.legendSettings);
+	const legendSize = computed(sources.legendSize);
+	const offset = computed(() => chartOffset({
+		width: width.value,
+		height: height.value
+	}, margin.value, brushHeight.value, xAxes.value, yAxes.value, legendSettings.value, legendSize.value));
+	return {
+		width,
+		height,
+		margin,
+		offset,
+		viewBox: computed(() => chartViewBox(offset.value)),
+		axisViewBox: computed(() => ({
+			x: 0,
+			y: 0,
+			width: width.value,
+			height: height.value
+		})),
+		brushDimensions: computed(() => brushDimensions(sources.brush(), offset.value, margin.value))
+	};
+}
+//#endregion
+export { createLayout };

package/dist/es/model/legend.mjs

@@ -0,0 +1,30 @@
+import { createRegistry } from "./registry.mjs";
+import { computed } from "vue";
+//#region src/model/legend.ts
+function createChartLegend() {
+	const entries = createRegistry();
+	const bindings = createRegistry();
+	const size = computed(() => bindings.entries.value.at(-1)?.size ?? {
+		width: 0,
+		height: 0
+	});
+	const settings = computed(() => bindings.entries.value.at(-1)?.settings ?? {
+		layout: "horizontal",
+		align: "center",
+		verticalAlign: "middle"
+	});
+	const hidden = computed(() => new Set(bindings.entries.value.at(-1)?.hidden));
+	const payload = computed(() => entries.entries.value.flat());
+	return {
+		state: computed(() => ({
+			settings: settings.value,
+			hidden: hidden.value,
+			size: size.value
+		})),
+		entries,
+		payload,
+		register: bindings.register
+	};
+}
+//#endregion
+export { createChartLegend };

package/dist/es/model/options.mjs

@@ -0,0 +1,8 @@
+//#region src/model/options.ts
+var defaultChartCapabilities = {
+	categoryScale: "band",
+	cursor: "line",
+	series: []
+};
+//#endregion
+export { defaultChartCapabilities };

package/dist/es/model/polar.mjs

@@ -0,0 +1,29 @@
+import { getPercentValue } from "../utils/data.mjs";
+import { polarViewBox } from "../core/axis/polar.mjs";
+import { getMaxRadius } from "../utils/polar.mjs";
+import { computed } from "vue";
+//#region src/model/polar.ts
+function createPolarLayout(sources) {
+	const maxRadius = computed(() => getMaxRadius(sources.size().width, sources.size().height, sources.offset()));
+	const innerRadius = computed(() => {
+		const options = sources.polar();
+		return options == null ? void 0 : getPercentValue(options.innerRadius, maxRadius.value, 0);
+	});
+	const outerRadius = computed(() => {
+		const options = sources.polar();
+		return options == null ? void 0 : getPercentValue(options.outerRadius, maxRadius.value, maxRadius.value * .8);
+	});
+	return {
+		maxRadius,
+		innerRadius,
+		outerRadius,
+		angleRange: computed(() => {
+			const options = sources.polar();
+			return options ? [options.startAngle, options.endAngle] : [0, 0];
+		}),
+		radiusRange: computed(() => innerRadius.value == null || outerRadius.value == null ? void 0 : [innerRadius.value, outerRadius.value]),
+		viewBox: computed(() => polarViewBox(sources.layout(), sources.polar(), innerRadius.value, outerRadius.value, sources.size()))
+	};
+}
+//#endregion
+export { createPolarLayout };

package/dist/es/model/polarAxis.mjs

@@ -0,0 +1,48 @@
+import { getValueByDataKey } from "../core/data.mjs";
+import { axisKey } from "../core/axis/key.mjs";
+import { appliedValues, graphicalItemsData, graphicalItemsSettings, itemAxisPredicate } from "../core/axis/data.mjs";
+import { axisDomain, getDomainDefinition, numericalDomain } from "../core/axis/domain.mjs";
+import { createAxisScale } from "./axisScale.mjs";
+import { stackDomain, stackGroups } from "../core/axis/stacks.mjs";
+import { implicitAngleAxis, implicitRadialBarAngleAxis, implicitRadialBarRadiusAxis, implicitRadiusAxis } from "../core/axis/polarSettings.mjs";
+import { computed } from "vue";
+//#region src/model/polarAxis.ts
+function createPolarAxis(sources, type, id) {
+	const settings = computed(() => {
+		const axis = sources.axes[type].byId.value.get(axisKey(id));
+		if (axis) return axis;
+		if (sources.layout() === "radial") return type === "angleAxis" ? implicitRadialBarAngleAxis : implicitRadialBarRadiusAxis;
+		return type === "angleAxis" ? implicitAngleAxis : implicitRadiusAxis;
+	});
+	const items = computed(() => graphicalItemsSettings(sources.items.polar.entries.value, settings.value, itemAxisPredicate(type, id)));
+	const graphicalData = computed(() => graphicalItemsData(items.value));
+	const displayedData = computed(() => sources.dataRange.displayedData({ data: graphicalData.value }, "all") ?? []);
+	const appliedValues$1 = computed(() => appliedValues(displayedData.value, settings.value, items.value));
+	const domainDefinition = computed(() => getDomainDefinition(settings.value));
+	const numericalValues = computed(() => {
+		const data = displayedData.value;
+		const axis = settings.value;
+		if (items.value.length) return data.flatMap((row) => items.value.map((item) => ({
+			value: getValueByDataKey(row, axis.dataKey ?? item.dataKey),
+			errorDomain: []
+		})));
+		return data.map((row) => ({
+			value: axis.dataKey == null ? row : getValueByDataKey(row, axis.dataKey),
+			errorDomain: []
+		}));
+	});
+	const stackGroups$1 = computed(() => stackGroups(displayedData.value, items.value, sources.stackOffset(), sources.reverseStackOrder()));
+	const stackDomain$1 = computed(() => stackDomain(stackGroups$1.value, sources.dataRange.state.value, type));
+	const numericalDomain$1 = computed(() => numericalDomain(settings.value, domainDefinition.value, stackDomain$1.value, numericalValues.value, void 0));
+	const domain = computed(() => axisDomain(settings.value, sources.layout(), displayedData.value, appliedValues$1.value, sources.stackOffset(), type, numericalDomain$1.value));
+	const range = type === "angleAxis" ? sources.polarLayout.angleRange : sources.polarLayout.radiusRange;
+	return {
+		settings,
+		displayedData,
+		stackGroups: stackGroups$1,
+		domain,
+		...createAxisScale(sources, type, settings, domain, appliedValues$1, range)
+	};
+}
+//#endregion
+export { createPolarAxis };

package/dist/es/model/presentation.mjs

@@ -0,0 +1,13 @@
+import { inject, provide } from "vue";
+//#region src/model/presentation.ts
+var presentationKey = Symbol("vccs-chart-presentation");
+function provideChartPresentation(presentation) {
+	provide(presentationKey, presentation);
+}
+function useChartPresentation() {
+	const presentation = inject(presentationKey);
+	if (!presentation) throw new Error("vccs: presentation requires a chart.");
+	return presentation;
+}
+//#endregion
+export { provideChartPresentation, useChartPresentation };

package/dist/es/model/registries.mjs

@@ -0,0 +1,38 @@
+import { axisKey } from "../core/axis/key.mjs";
+import { createRegistry } from "./registry.mjs";
+import { computed } from "vue";
+//#region src/model/registries.ts
+function createAxisRegistry() {
+	const registry = createRegistry();
+	const byId = computed(() => {
+		const axes = /* @__PURE__ */ new Map();
+		for (const axis of registry.entries.value) axes.set(axisKey(axis.id ?? 0), axis);
+		return axes;
+	});
+	return {
+		...registry,
+		byId
+	};
+}
+function createRegistries() {
+	return {
+		items: {
+			cartesian: createRegistry(),
+			polar: createRegistry()
+		},
+		axes: {
+			xAxis: createAxisRegistry(),
+			yAxis: createAxisRegistry(),
+			zAxis: createAxisRegistry(),
+			angleAxis: createAxisRegistry(),
+			radiusAxis: createAxisRegistry()
+		},
+		references: {
+			dots: createRegistry(),
+			areas: createRegistry(),
+			lines: createRegistry()
+		}
+	};
+}
+//#endregion
+export { createRegistries };

package/dist/es/model/registry.mjs

@@ -0,0 +1,20 @@
+import { computed, onScopeDispose, shallowReactive } from "vue";
+//#region src/model/registry.ts
+function createRegistry() {
+	const registrations = shallowReactive(/* @__PURE__ */ new Set());
+	const entries = computed(() => [...registrations].flatMap((entry) => {
+		const value = entry.value;
+		return value === void 0 ? [] : [value];
+	}));
+	function register(entry) {
+		registrations.add(entry);
+		onScopeDispose(() => registrations.delete(entry));
+	}
+	return {
+		entries,
+		registrations: computed(() => [...registrations]),
+		register
+	};
+}
+//#endregion
+export { createRegistry };

package/dist/es/model/runtime.mjs

@@ -0,0 +1,156 @@
+import { useChartId } from "../hooks/useChartId.mjs";
+import { computed, getCurrentInstance, hasInjectionContext, inject, onMounted, onScopeDispose, provide, ref, ssrContextKey } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+//#region src/model/runtime.ts
+var runtimeKey = Symbol("v-charts-runtime");
+var chartSizeKey = Symbol("v-charts-size");
+var inViewKey = Symbol("v-charts-in-view");
+/**
+* Called by the chart's root: watches `el` and tells entrances once the chart is on screen, so a
+* chart further down the page plays its entrance when the reader gets there, not unseen at load.
+* On screen means half the chart is visible, or half the viewport for a chart taller than that: a
+* chart peeking in at the bottom edge would play its entrance mostly unseen. Without
+* IntersectionObserver (tests, old browsers) the chart counts as seen.
+*/
+function provideChartInView(el) {
+	const inView = ref(typeof IntersectionObserver === "undefined");
+	provide(inViewKey, inView);
+	const { resume, stop } = useIntersectionObserver(() => {
+		const element = el.value;
+		return element && (element instanceof HTMLElement || element instanceof SVGElement) ? element : null;
+	}, (entries) => {
+		const entry = entries.at(-1);
+		if (!entry) return;
+		const viewport = entry.rootBounds?.height ?? window.innerHeight;
+		if (entry.isIntersecting && (entry.intersectionRatio >= .5 || entry.intersectionRect.height >= viewport / 2)) {
+			inView.value = true;
+			stop();
+		}
+	}, {
+		immediate: false,
+		threshold: [
+			0,
+			.25,
+			.5,
+			.75,
+			1
+		]
+	});
+	onMounted(() => {
+		if (inView.value || !el.value) {
+			inView.value = true;
+			return;
+		}
+		resume();
+	});
+}
+/** Whether the chart has been on screen; always true outside a chart. */
+function useChartInView() {
+	return (hasInjectionContext() ? inject(inViewKey, null) : null) ?? ref(true);
+}
+/**
+* True while the user drags something that changes the chart continuously (a brush). Like a
+* resize, the chart then follows the pointer directly instead of trailing it.
+*/
+function useChartGesture() {
+	return (hasInjectionContext() ? inject(runtimeKey, null)?.gesture : null) ?? ref(false);
+}
+/**
+* Whether the chart's series animate. Each animated series registers its `isActive`; axes and
+* grids move only when at least one series does, so turning animation off on the series keeps
+* the whole chart still.
+*/
+function useSeriesMotion() {
+	const registry = hasInjectionContext() ? inject(runtimeKey, null)?.seriesMotion : null;
+	return {
+		register(isActive) {
+			registry?.add(isActive);
+			if (registry && getCurrentInstance()) onScopeDispose(() => registry.delete(isActive));
+		},
+		anyActive: () => registry != null && [...registry].some((isActive) => isActive())
+	};
+}
+/**
+* Called by the chart root with its settled size (undefined until a responsive chart has measured
+* its box). Motion uses it to tell a resize from a data change.
+* `null` while a responsive chart has not measured itself yet.
+*/
+function provideChartSize(size) {
+	provide(chartSizeKey, size);
+}
+/**
+* The chart's settled size, as an opaque string; changes only when the chart is resized.
+* `null` while a responsive chart has not measured itself, `undefined` outside a chart.
+*/
+function useChartSize() {
+	return hasInjectionContext() ? inject(chartSizeKey, () => void 0) : () => void 0;
+}
+/** Vue's server renderer provides an SSR context to the app; a client app has none. */
+function isServerRender() {
+	return inject(ssrContextKey, null) != null;
+}
+/**
+* True while Vue hydrates this component: Vue assigns the existing DOM node to the vnode before
+* setup runs. That `el` field is Vue internal state; this is its only reader. The standard pattern
+* (open the gate one frame after mount) changed entrance geometry, and the auto-width hydration
+* test (53eed3f) fails without this check (see internals/open-items.md). Call during setup.
+*/
+function isHydrating() {
+	return getCurrentInstance()?.vnode.el != null;
+}
+/**
+* Called by every chart root. The server sends the entrance start; hydration preserves that
+* geometry. The entrance plays after hydration when the chart is measured and on screen.
+*
+* Text measurement also waits so hydration reproduces the server layout before relayout.
+* The gate stays closed until the first frame after mount, because series move into their
+* teleported layers right after mount and re-create their animated children.
+*/
+function provideRenderPhase() {
+	const server = isServerRender();
+	const skip = ref(server || isHydrating());
+	if (skip.value && !server) onMounted(() => requestAnimationFrame(() => {
+		skip.value = false;
+	}));
+	provide(runtimeKey, {
+		renderPhase: skip,
+		seriesMotion: /* @__PURE__ */ new Set(),
+		gesture: ref(false)
+	});
+}
+/** True during server rendering or the first hydration frame. Call during setup. */
+function shouldSkipEntrance() {
+	return isServerRender() || (inject(runtimeKey, null)?.renderPhase.value ?? false);
+}
+/** Reactive permission for DOM text measurement. Call during setup. */
+function useCanMeasureText() {
+	const phase = inject(runtimeKey, null)?.renderPhase;
+	return computed(() => phase ? !phase.value : !isServerRender());
+}
+var clipPathKey = Symbol("v-charts-clip-path");
+function useClipPathId() {
+	const value = inject(clipPathKey);
+	if (value === void 0) throw new Error("vccs: clip paths require a chart runtime.");
+	return value;
+}
+var layersKey = Symbol("v-charts-layers");
+/** Provides layers to the subtree; layers that an outer component provided stay available. */
+function provideChartLayers(layers) {
+	provide(layersKey, {
+		...inject(layersKey, {}),
+		...layers
+	});
+}
+/** The named layer, or `null` outside a chart: the caller then renders in place. */
+function useChartLayer(name) {
+	return inject(layersKey, {})[name] ?? null;
+}
+/** Create the chart's SSR-stable clip-path id. */
+function provideClipPathId(props) {
+	const generatedId = useChartId("v-charts");
+	const clipPathId = `${props.id ?? generatedId}-clip`;
+	provide(clipPathKey, clipPathId);
+	return clipPathId;
+}
+//#endregion
+export { isHydrating, isServerRender, provideChartInView, provideChartLayers, provideChartSize, provideClipPathId, provideRenderPhase, shouldSkipEntrance, useCanMeasureText, useChartGesture, useChartInView, useChartLayer, useChartSize, useClipPathId, useSeriesMotion };