vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/hooks/useActiveTooltipDataPoints.mjs

@@ -0,0 +1,10 @@
+import { useTooltipSource } from "../model/tooltip.mjs";
+import { computed } from "vue";
+//#region src/hooks/useActiveTooltipDataPoints.ts
+/** Currently displayed data points, deduplicated across series. Requires a tooltip source. */
+function useActiveTooltipDataPoints() {
+	const source = useTooltipSource();
+	return computed(() => Array.from(new Set(source.payload.value.map((entry) => entry.payload).filter((entry) => entry != null))));
+}
+//#endregion
+export { useActiveTooltipDataPoints };

package/dist/es/hooks/useChartId.mjs

@@ -0,0 +1,8 @@
+import { useId } from "vue";
+//#region src/hooks/useChartId.ts
+/** SSR-stable DOM id for `url(#...)` references. Call during setup. */
+function useChartId(prefix) {
+	return `${prefix}-${useId().replace(/[^\w-]/g, "_")}`;
+}
+//#endregion
+export { useChartId };

package/dist/es/hooks/useLayerTeleport.mjs

@@ -0,0 +1,10 @@
+import { Teleport, h } from "vue";
+import { useMounted } from "@vueuse/core";
+//#region src/hooks/useLayerTeleport.ts
+/** Keep the first render inline so hydration reproduces the server's SVG tree. */
+function useLayerTeleport() {
+	const mounted = useMounted();
+	return (content, target) => mounted.value && target?.value ? h(Teleport, { to: target.value }, content) : content;
+}
+//#endregion
+export { useLayerTeleport };

package/dist/es/hooks/useResponsiveSize.mjs

@@ -1,27 +1,84 @@
 import { validateWidthHeight } from "../utils/validate.mjs";
+import { provideChartSize } from "../model/runtime.mjs";
 import { useRoundedSize } from "./useRoundedSize.mjs";
-import { computed } from "vue";
+import { useInitialDimension } from "../container/useSizeContext.mjs";
+import { computed, ref } from "vue";
 //#region src/hooks/useResponsiveSize.ts
+var chartSizeProps = {
+	width: { type: Number },
+	height: { type: Number },
+	aspect: { type: Number },
+	initialDimension: { type: Object }
+};
 /**
-* Owns the chart's size resolution: in responsive mode the size is measured
-* from the wrapper div (via `handleResize`), otherwise it comes from props.
-*
-* Render gating (`return null` when the size is invalid) stays with the
-* caller — the rules differ between the compact and normal branches.
+* Resolves the chart size per dimension: a finite nonnegative `width` or `height` prop is fixed, a missing or invalid
+* one follows the measured box. The server and the first client render share the same initial
+* geometry, so hydration matches; measurement happens after mount.
 */
 function useResponsiveSize(props) {
-	const { size: responsiveSize, setSize: handleResize } = useRoundedSize();
-	const effectiveWidth = computed(() => props.responsive ? responsiveSize.value.width : props.width ?? 0);
-	const effectiveHeight = computed(() => props.responsive ? responsiveSize.value.height : props.height ?? 0);
+	const inheritedInitial = useInitialDimension(null);
+	const { size, setSize } = useRoundedSize();
+	const measured = ref(false);
+	const shown = ref(false);
+	const fixedWidth = computed(() => typeof props.width === "number" && Number.isFinite(props.width) && props.width >= 0 ? props.width : void 0);
+	const fixedHeight = computed(() => typeof props.height === "number" && Number.isFinite(props.height) && props.height >= 0 ? props.height : void 0);
+	const isResponsive = computed(() => fixedWidth.value === void 0 || fixedHeight.value === void 0);
+	const initial = computed(() => {
+		const base = props.initialDimension ?? inheritedInitial?.value;
+		const width = fixedWidth.value ?? base?.width ?? 640;
+		return {
+			width,
+			height: fixedHeight.value ?? base?.height ?? (props.aspect && props.aspect > 0 ? width / props.aspect : 360)
+		};
+	});
+	const effectiveWidth = computed(() => fixedWidth.value ?? (measured.value ? size.value.width : initial.value.width));
+	const effectiveHeight = computed(() => fixedHeight.value ?? (measured.value ? size.value.height : initial.value.height));
+	const hasValidSize = computed(() => validateWidthHeight({
+		width: effectiveWidth.value,
+		height: effectiveHeight.value
+	}));
+	provideChartSize(() => !isResponsive.value || measured.value ? `${effectiveWidth.value}x${effectiveHeight.value}` : null);
+	/**
+	* Style of the measured box: fixed dimensions in px, the others fill the parent or follow
+	* `aspect`. A responsive chart stays invisible until it has measured itself: the server's
+	* guess at its size would show as a squashed or stretched chart, so it appears at its real
+	* size and plays its entrance there. The box keeps its place in the layout meanwhile.
+	*/
+	const boxStyle = computed(() => ({
+		position: "relative",
+		cursor: "default",
+		...isResponsive.value && !shown.value ? {
+			visibility: "hidden",
+			overflow: "hidden"
+		} : {},
+		width: fixedWidth.value === void 0 ? "100%" : `${fixedWidth.value}px`,
+		height: fixedHeight.value === void 0 ? props.aspect ? "auto" : "100%" : `${fixedHeight.value}px`,
+		aspectRatio: fixedHeight.value === void 0 ? props.aspect : void 0
+	}));
+	function handleResize(width, height) {
+		const next = {
+			width: fixedWidth.value ?? width,
+			height: fixedHeight.value ?? height
+		};
+		if (!isResponsive.value || !validateWidthHeight(next)) return;
+		setSize(next.width, next.height);
+		if (!measured.value) {
+			measured.value = true;
+			if (typeof requestAnimationFrame === "function") requestAnimationFrame(() => {
+				shown.value = true;
+			});
+			else shown.value = true;
+		}
+	}
 	return {
 		effectiveWidth,
 		effectiveHeight,
-		hasValidSize: computed(() => validateWidthHeight({
-			width: effectiveWidth.value,
-			height: effectiveHeight.value
-		})),
-		handleResize
+		hasValidSize,
+		handleResize,
+		isResponsive,
+		measured,
+		boxStyle
 	};
 }
 //#endregion
-export { useResponsiveSize };
+export { chartSizeProps, useResponsiveSize };

package/dist/es/hooks/useRoundedSize.mjs

@@ -4,9 +4,6 @@ import { ref } from "vue";
 * Shared size-state core: a size ref plus a setter that rounds to
 * integers and ignores no-change updates.
 *
-* Adapters: `useResponsiveSize` (chart sizing) and `ResponsiveContainer`.
-* ResponsiveContainer is planned for removal (see ADR-0001); when it goes,
-* this module stays behind as the chart's size-state implementation.
 */
 function useRoundedSize(initial = {
 	width: 0,

package/dist/es/hooks/useSeriesProps.mjs

@@ -0,0 +1,32 @@
+import { useChartAnimation } from "../model/animation.mjs";
+import { useChart } from "../model/chart.mjs";
+import { seriesColor } from "../utils/theme.mjs";
+import { computed } from "vue";
+//#region src/hooks/useSeriesProps.ts
+var seriesIds = /* @__PURE__ */ new WeakMap();
+function getSeriesId(props) {
+	return seriesIds.get(props);
+}
+/** Share effective settings between series rendering and registration. */
+function useSeriesProps(props, colors = []) {
+	const chart = useChart();
+	const legend = chart.legend;
+	const id = Symbol("series-color");
+	const color = computed(() => {
+		const items = chart.items.cartesian.entries.value.length ? chart.items.cartesian.entries.value : chart.items.polar.entries.value.filter((item) => item.type === "radar");
+		return seriesColor(items.findIndex((item) => item.seriesId === id));
+	});
+	const animation = useChartAnimation();
+	const hide = computed(() => props.hide || props.dataKey !== void 0 && legend.state.value.hidden.has(String(props.dataKey)));
+	const resolved = new Proxy(props, { get(target, key, receiver) {
+		if ((key === "fill" || key === "stroke") && colors.includes(key)) return Reflect.get(target, key, receiver) ?? color.value;
+		if (key === "hide") return hide.value;
+		if (key === "isAnimationActive") return props.isAnimationActive ?? animation.isAnimationActive ?? true;
+		if (key === "transition") return props.transition ?? animation.transition;
+		return Reflect.get(target, key, receiver);
+	} });
+	if (colors.length) seriesIds.set(resolved, id);
+	return resolved;
+}
+//#endregion
+export { getSeriesId, useSeriesProps };

package/dist/es/hooks/useSetupGraphicalItem.mjs

@@ -1,66 +1,96 @@
-import { useIsPanorama } from "../context/PanoramaContextProvider.mjs";
-import { getTooltipNameProp } from "../utils/chart.mjs";
-import { SetCartesianGraphicalItem } from "../state/SetGraphicalItem.mjs";
-import { SetLegendPayload } from "../state/SetLegendPayload.mjs";
-import { SetTooltipEntrySettings } from "../state/SetTooltipEntrySettings.mjs";
-import { computed, useAttrs } from "vue";
+import { getTooltipNameProp } from "../core/tooltip.mjs";
+import { provideTooltipEntry } from "../model/tooltip.mjs";
+import { useTrackedData } from "./useTrackedData.mjs";
+import { useChart } from "../model/chart.mjs";
+import { getSeriesId } from "./useSeriesProps.mjs";
+import { getNormalizedStackId } from "../core/coordinates.mjs";
+import { mainColor } from "../core/color.mjs";
+import { computed } from "vue";
 //#region src/hooks/useSetupGraphicalItem.ts
-function getLegendItemColor(stroke, fill) {
-	return stroke && stroke !== "none" ? stroke : fill;
-}
-function getItemColor(type, stroke, fill) {
-	if (type === "bar") return fill;
-	return getLegendItemColor(stroke, fill);
-}
 function useSetupGraphicalItem(props, type, options) {
-	const attrs = useAttrs();
-	const isPanorama = useIsPanorama();
+	const data = useTrackedData(() => props.data);
 	const legendPayload = computed(() => {
 		return [{
 			inactive: props.hide,
 			dataKey: props.dataKey,
 			type: props.legendType,
-			color: getItemColor(type, attrs.stroke ?? props.stroke, attrs.fill ?? props.fill),
+			color: mainColor(type, props),
 			value: getTooltipNameProp(props.name, props.dataKey),
-			payload: { ...props }
+			payload: {
+				...props,
+				data: data.value
+			}
 		}];
 	});
-	SetCartesianGraphicalItem(computed(() => {
+	const settings = computed(() => {
 		return {
-			...props,
-			isPanorama,
+			seriesId: getSeriesId(props),
+			data: data.value,
+			dataKey: props.dataKey,
+			stackId: getNormalizedStackId(props.stackId),
+			hide: props.hide ?? false,
+			xAxisId: props.xAxisId ?? 0,
+			yAxisId: props.yAxisId ?? 0,
+			zAxisId: props.zAxisId,
+			barSize: props.barSize,
+			minPointSize: props.minPointSize,
 			type,
 			errorBars: options?.errorBars?.value
 		};
-	}));
-	SetLegendPayload(legendPayload);
-	if (!options?.skipTooltip) SetTooltipEntrySettings({
-		fn: getTooltipEntrySettings,
-		args: computed(() => ({
-			...props,
-			...attrs,
-			_itemType: type
-		}))
 	});
-}
-function getTooltipEntrySettings(props) {
-	const { dataKey, data, stroke, fill, name, hide, unit, _itemType } = props;
+	useChart().items.cartesian.register(settings);
+	useChart().legend.entries.register(legendPayload);
+	if (!options?.skipTooltip) useSetupTooltipEntry(props, type, data);
 	return {
-		dataDefinedOnItem: data,
-		positions: void 0,
+		data,
+		settings
+	};
+}
+/**
+* Registers a polar series (Pie, Radar, RadialBar, Funnel) and its legend items. The hook owns
+* the shared fields: the series type, its dataKey, and `hide`, which also marks the legend
+* items inactive. `settings` adds the series' own fields (axis ids, bar sizing, data).
+*/
+function useSetupPolarItem(props, type, options) {
+	const chart = useChart();
+	chart.items.polar.register(computed(() => ({
+		data: void 0,
+		stackId: void 0,
+		barSize: void 0,
+		angleAxisId: 0,
+		radiusAxisId: 0,
+		...options.settings?.(),
+		type,
+		dataKey: props.dataKey,
+		hide: props.hide
+	})));
+	chart.legend.entries.register(computed(() => options.legend().map((entry) => ({
+		...entry,
+		dataKey: props.dataKey,
+		inactive: props.hide
+	}))));
+}
+function useSetupTooltipEntry(props, type, data, positions, model) {
+	const entry = computed(() => ({
+		dataDefinedOnItem: data.value,
+		positions: positions?.(),
+		model,
 		settings: {
-			stroke,
-			strokeWidth: props["stroke-width"],
-			fill,
-			dataKey,
+			stroke: props.stroke,
+			strokeWidth: props.strokeWidth,
+			fill: props.fill,
+			dataKey: props.dataKey,
 			nameKey: void 0,
-			name: getTooltipNameProp(name, dataKey),
-			hide,
+			name: getTooltipNameProp(props.name, props.dataKey),
+			hide: props.hide,
 			type: props.tooltipType,
-			color: getItemColor(_itemType, stroke, fill),
-			unit
+			color: mainColor(type, props),
+			unit: props.unit
 		}
-	};
+	}));
+	useChart().tooltip.entries.register(entry);
+	provideTooltipEntry(entry);
+	return entry;
 }
 //#endregion
-export { useSetupGraphicalItem };
+export { useSetupGraphicalItem, useSetupPolarItem, useSetupTooltipEntry };

package/dist/es/hooks/useTrackedData.mjs

@@ -0,0 +1,17 @@
+import { computed, shallowRef, toRaw, watch } from "vue";
+//#region src/hooks/useTrackedData.ts
+/** Track each data owner once, including values consumed only by raw calculations. */
+function useTrackedData(source) {
+	const revision = shallowRef(0);
+	watch(source, () => revision.value++, {
+		deep: true,
+		flush: "sync"
+	});
+	return computed(() => {
+		revision.value;
+		const data = source();
+		return data === void 0 ? void 0 : toRaw(data).map((item) => toRaw(item));
+	});
+}
+//#endregion
+export { useTrackedData };

package/dist/es/index.mjs

@@ -1,22 +1,22 @@
-import { Global } from "./utils/Global.mjs";
-import { Curve, CurveVueProps, getPath } from "./shape/Curve.mjs";
-import { useActiveTooltipDataPoints } from "./state/hooks.mjs";
-import { useChartHeight, useChartWidth, useMargin, useOffset } from "./context/chartLayoutContext.mjs";
+import { chartThemeTokens } from "./utils/theme.mjs";
+import { Curve } from "./shape/Curve.mjs";
 import { Dot } from "./shape/Dot.mjs";
 import Text_default from "./components/Text.mjs";
-import { Label } from "./components/label/Label.mjs";
+import { forwardsSvgAttributes } from "./utils/attributes.mjs";
 import { LabelList } from "./components/label/LabelList.mjs";
 import { Area } from "./cartesian/area/Area.mjs";
+import { Label } from "./components/label/Label.mjs";
 import { CartesianAxis } from "./cartesian/cartesian-axis/CartesianAxis.mjs";
 import { XAxis } from "./cartesian/axis/XAxis.mjs";
 import { YAxis } from "./cartesian/axis/YAxis.mjs";
 import { Rectangle } from "./shape/Rectangle.mjs";
-import { createErrorBarRegistry, provideErrorBarContext, provideErrorBarRegistry, useErrorBarContext, useErrorBarRegistry } from "./cartesian/error-bar/ErrorBarContext.mjs";
 import { Cell } from "./components/Cell.mjs";
 import { Bar } from "./cartesian/bar/Bar.mjs";
+import { Brush } from "./cartesian/brush/Brush.mjs";
 import { CartesianGrid } from "./cartesian/cartesian-grid/CartesianGrid.mjs";
-import { ErrorBar, ErrorBarVueProps } from "./cartesian/error-bar/ErrorBar.mjs";
-import { LineContextKey, provideLineContext, useLine, useLineContext } from "./cartesian/line/hooks/useLine.mjs";
+import { ErrorBar } from "./cartesian/error-bar/ErrorBar.mjs";
+import { Trapezoid } from "./shape/Trapezoid.mjs";
+import { Funnel } from "./cartesian/funnel/Funnel.mjs";
 import { Line } from "./cartesian/line/Line.mjs";
 import { ReferenceArea } from "./cartesian/reference-area/ReferenceArea.mjs";
 import { ReferenceDot } from "./cartesian/reference-dot/ReferenceDot.mjs";
@@ -24,34 +24,48 @@ import { ReferenceLine } from "./cartesian/reference-line/ReferenceLine.mjs";
 import { Symbols } from "./shape/Symbols.mjs";
 import { Scatter } from "./cartesian/scatter/Scatter.mjs";
 import { ZAxis } from "./cartesian/z-axis/ZAxis.mjs";
-import { Trapezoid } from "./shape/Trapezoid.mjs";
-import { FunnelVueProps } from "./cartesian/funnel/type.mjs";
-import { Funnel } from "./cartesian/funnel/Funnel.mjs";
 import { AreaChart } from "./chart/AreaChart.mjs";
 import { BarChart } from "./chart/BarChart.mjs";
+import { BarList } from "./chart/BarList.mjs";
+import { CalendarHeatmap } from "./chart/CalendarHeatmap.mjs";
+import { Heatmap } from "./chart/Heatmap.mjs";
+import { CohortChart } from "./chart/CohortChart.mjs";
 import { ComposedChart } from "./chart/ComposedChart.mjs";
+import { FunnelChart } from "./chart/FunnelChart.mjs";
+import { JourneySankey } from "./chart/JourneySankey.mjs";
 import { LineChart } from "./chart/LineChart.mjs";
 import { PieChart } from "./chart/PieChart.mjs";
 import { RadarChart } from "./chart/RadarChart.mjs";
-import { ScatterChart } from "./chart/ScatterChart.mjs";
 import { RadialBarChart } from "./chart/RadialBarChart.mjs";
-import { FunnelChart } from "./chart/FunnelChart.mjs";
-import { Treemap, TreemapVueProps, treemapPayloadSearcher } from "./chart/Treemap.mjs";
-import { Sankey, SankeyVueProps, sankeyPayloadSearcher } from "./chart/Sankey.mjs";
+import { Sankey } from "./chart/Sankey.mjs";
+import { ScatterChart } from "./chart/ScatterChart.mjs";
+import { Sparkline } from "./chart/Sparkline.mjs";
 import { Sector } from "./shape/Sector.mjs";
-import { SunburstChart, SunburstChartVueProps, sunburstPayloadSearcher } from "./chart/SunburstChart.mjs";
+import { SunburstChart } from "./chart/SunburstChart.mjs";
+import { Tracker } from "./chart/Tracker.mjs";
+import { Treemap } from "./chart/Treemap.mjs";
 import ResponsiveContainer_default from "./container/ResponsiveContainer.mjs";
 import { Customized } from "./components/Customized.mjs";
-import Legend_default from "./components/legend/Legend.mjs";
+import Legend from "./components/legend/Legend.mjs";
 import { Cross } from "./shape/Cross.mjs";
-import Tooltip, { getUniqPayload } from "./components/Tooltip.mjs";
-import { PieVueProps } from "./polar/pie/type.mjs";
+import { Tooltip } from "./components/tooltip/Tooltip.mjs";
 import { Pie } from "./polar/pie/Pie.mjs";
-import { Radar } from "./polar/radar/Radar.mjs";
-import { PolarGrid } from "./polar/radar/PolarGrid.mjs";
 import { PolarAngleAxis } from "./polar/radar/PolarAngleAxis.mjs";
+import { PolarGrid } from "./polar/radar/PolarGrid.mjs";
 import { PolarRadiusAxis } from "./polar/radar/PolarRadiusAxis.mjs";
+import { Radar } from "./polar/radar/Radar.mjs";
 import { RadialBar } from "./polar/radial-bar/RadialBar.mjs";
 import { Polygon } from "./shape/Polygon.mjs";
-import { useActiveTooltipCoordinate, useActiveTooltipLabel, useCartesianScale, useIsTooltipActive, usePlotArea, useXAxisDomain, useXAxisInverseDataSnapScale, useXAxisInverseScale, useXAxisInverseTickSnapScale, useXAxisScale, useXAxisTicks, useYAxisDomain, useYAxisInverseDataSnapScale, useYAxisInverseScale, useYAxisInverseTickSnapScale, useYAxisScale, useYAxisTicks } from "./hooks/publicHooks.mjs";
-export { Area, AreaChart, Bar, BarChart, CartesianAxis, CartesianGrid, Cell, ComposedChart, Cross, Curve, CurveVueProps, Customized, Dot, ErrorBar, ErrorBarVueProps, Funnel, FunnelChart, FunnelVueProps, Global, Label, LabelList, Legend_default as Legend, Line, LineChart, LineContextKey, Pie, PieChart, PieVueProps, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Polygon, Radar, RadarChart, RadialBar, RadialBarChart, Rectangle, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer_default as ResponsiveContainer, Sankey, SankeyVueProps, Scatter, ScatterChart, Sector, SunburstChart, SunburstChartVueProps, Symbols, Text_default as Text, Tooltip, Trapezoid, Treemap, TreemapVueProps, XAxis, YAxis, ZAxis, createErrorBarRegistry, getPath, getUniqPayload, provideErrorBarContext, provideErrorBarRegistry, provideLineContext, sankeyPayloadSearcher, sunburstPayloadSearcher, treemapPayloadSearcher, useActiveTooltipCoordinate, useActiveTooltipDataPoints, useActiveTooltipLabel, useCartesianScale, useChartHeight, useChartWidth, useErrorBarContext, useErrorBarRegistry, useIsTooltipActive, useLine, useLineContext, useMargin, useOffset, usePlotArea, useXAxisDomain, useXAxisInverseDataSnapScale, useXAxisInverseScale, useXAxisInverseTickSnapScale, useXAxisScale, useXAxisTicks, useYAxisDomain, useYAxisInverseDataSnapScale, useYAxisInverseScale, useYAxisInverseTickSnapScale, useYAxisScale, useYAxisTicks };
+import { useActiveTooltipCoordinate, useActiveTooltipLabel, useCartesianScale, useChartHeight, useChartWidth, useIsTooltipActive, useMargin, usePlotArea, useXAxisDomain, useXAxisInverseDataSnapScale, useXAxisInverseScale, useXAxisInverseTickSnapScale, useXAxisScale, useXAxisTicks, useYAxisDomain, useYAxisInverseDataSnapScale, useYAxisInverseScale, useYAxisInverseTickSnapScale, useYAxisScale, useYAxisTicks } from "./hooks/publicHooks.mjs";
+import { useActiveTooltipDataPoints } from "./hooks/useActiveTooltipDataPoints.mjs";
+import { defineChartComponents } from "./typed.mjs";
+//#region src/index.ts
+/**
+* @deprecated Charts are responsive by default: remove the wrapper and set `width`, `height`
+* or `aspect` on the chart. Removed in 2.0 (see internals/migrations.md).
+*/
+var ResponsiveContainer = ResponsiveContainer_default;
+/** SVG text with wrapping and scaling; forwards SVG attributes such as `font-size`. */
+var Text = /* @__PURE__ */ forwardsSvgAttributes(Text_default);
+//#endregion
+export { Area, AreaChart, Bar, BarChart, BarList, Brush, CalendarHeatmap, CartesianAxis, CartesianGrid, Cell, CohortChart, ComposedChart, Cross, Curve, Customized, Dot, ErrorBar, Funnel, FunnelChart, Heatmap, JourneySankey, Label, LabelList, Legend, Line, LineChart, Pie, PieChart, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Polygon, Radar, RadarChart, RadialBar, RadialBarChart, Rectangle, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Sankey, Scatter, ScatterChart, Sector, Sparkline, SunburstChart, Symbols, Text, Tooltip, Tracker, Trapezoid, Treemap, XAxis, YAxis, ZAxis, chartThemeTokens, defineChartComponents, useActiveTooltipCoordinate, useActiveTooltipDataPoints, useActiveTooltipLabel, useCartesianScale, useChartHeight, useChartWidth, useIsTooltipActive, useMargin, usePlotArea, useXAxisDomain, useXAxisInverseDataSnapScale, useXAxisInverseScale, useXAxisInverseTickSnapScale, useXAxisScale, useXAxisTicks, useYAxisDomain, useYAxisInverseDataSnapScale, useYAxisInverseScale, useYAxisInverseTickSnapScale, useYAxisScale, useYAxisTicks };

package/dist/es/model/animation.mjs

@@ -0,0 +1,11 @@
+import { inject, provide } from "vue";
+//#region src/model/animation.ts
+var chartAnimationKey = Symbol("vccs-chart-animation");
+function provideChartAnimation(props) {
+	provide(chartAnimationKey, props);
+}
+function useChartAnimation() {
+	return inject(chartAnimationKey, {});
+}
+//#endregion
+export { provideChartAnimation, useChartAnimation };

package/dist/es/model/axis.mjs

@@ -0,0 +1,85 @@
+import { axisKey } from "../core/axis/key.mjs";
+import { appliedValues, filterGraphicalNotStackedItems, graphicalItemsData, graphicalItemsSettings, itemAxisPredicate, numericalValuesWithErrors } from "../core/axis/data.mjs";
+import { axisDomain, getDomainDefinition, mergeDomains, numericalDomain } from "../core/axis/domain.mjs";
+import { createAxisLayout } from "./axisLayout.mjs";
+import { calculatedPadding, smallestDistance, xAxisRange, yAxisRange } from "../core/axis/range.mjs";
+import { createAxisScale } from "./axisScale.mjs";
+import { stackDomain, stackGroups } from "../core/axis/stacks.mjs";
+import { createPolarAxis } from "./polarAxis.mjs";
+import { areasDomain, dotsDomain, filterReferenceElements, linesDomain } from "../core/axis/references.mjs";
+import { implicitXAxis, implicitYAxis, implicitZAxis } from "../core/axis/settings.mjs";
+import { computed, onScopeDispose } from "vue";
+//#region src/model/axis.ts
+function createAxis(sources, type, id, registry, implicit, readRange) {
+	const settings = computed(() => registry.byId.value.get(axisKey(id)) ?? implicit);
+	const items = computed(() => graphicalItemsSettings(sources.items.cartesian.entries.value, settings.value, itemAxisPredicate(type, id)));
+	const unstacked = computed(() => filterGraphicalNotStackedItems(items.value));
+	const dataWithIndexes = sources.dataRange.state;
+	const graphicalData = computed(() => graphicalItemsData(items.value));
+	const displayedData = computed(() => sources.dataRange.displayedData({ data: graphicalData.value }) ?? []);
+	const appliedValues$1 = computed(() => appliedValues(displayedData.value, settings.value, items.value));
+	const domainDefinition = computed(() => getDomainDefinition(settings.value));
+	const stackGroups$1 = computed(() => stackGroups(displayedData.value, items.value, sources.stackOffset(), sources.reverseStackOrder()));
+	const stackDomain$1 = computed(() => stackDomain(stackGroups$1.value, dataWithIndexes.value, type));
+	const numericalValues = computed(() => numericalValuesWithErrors(displayedData.value, settings.value, unstacked.value, type));
+	const dots = computed(() => filterReferenceElements(sources.references.dots.entries.value, type, id));
+	const lines = computed(() => filterReferenceElements(sources.references.lines.entries.value, type, id));
+	const areas = computed(() => filterReferenceElements(sources.references.areas.entries.value, type, id));
+	const referencesDomain = computed(() => mergeDomains(dotsDomain(dots.value, type), areasDomain(areas.value, type), linesDomain(lines.value, type)));
+	const numericalDomain$1 = computed(() => numericalDomain(settings.value, domainDefinition.value, stackDomain$1.value, numericalValues.value, referencesDomain.value));
+	const domain = computed(() => axisDomain(settings.value, sources.layout(), displayedData.value, appliedValues$1.value, sources.stackOffset(), type, numericalDomain$1.value));
+	const range = computed(() => readRange(settings.value, appliedValues$1.value));
+	return {
+		...createAxisScale(sources, type, settings, domain, appliedValues$1, range),
+		settings,
+		displayedData,
+		stackGroups: stackGroups$1,
+		domain
+	};
+}
+function keyed(scope, build) {
+	const cache = /* @__PURE__ */ new Map();
+	onScopeDispose(() => cache.clear());
+	return (id) => {
+		const existing = cache.get(axisKey(id));
+		if (existing !== void 0) return existing;
+		const model = scope.run(() => build(id));
+		if (model === void 0) throw new Error("vccs: cannot read an axis after its chart is disposed.");
+		cache.set(axisKey(id), model);
+		return model;
+	};
+}
+function createAxes(scope, sources) {
+	const lookup = {
+		xAxis: keyed(scope, (id) => {
+			const model = createAxis(sources, "xAxis", id, sources.axes.xAxis, implicitXAxis, (axis, values) => {
+				const offset = sources.offset();
+				const calculated = typeof axis.padding === "string" ? calculatedPadding(smallestDistance(values, axis), sources.layout(), sources.barCategoryGap(), offset, axis.padding) : 0;
+				return xAxisRange(offset, axis.padding, calculated);
+			});
+			return {
+				...model,
+				...createAxisLayout(sources, model, "xAxis", id)
+			};
+		}),
+		yAxis: keyed(scope, (id) => {
+			const model = createAxis(sources, "yAxis", id, sources.axes.yAxis, implicitYAxis, (axis, values) => {
+				const offset = sources.offset();
+				const calculated = typeof axis.padding === "string" ? calculatedPadding(smallestDistance(values, axis), sources.layout(), sources.barCategoryGap(), offset, axis.padding) : 0;
+				return yAxisRange(offset, sources.layout(), axis.padding, calculated);
+			});
+			return {
+				...model,
+				...createAxisLayout(sources, model, "yAxis", id)
+			};
+		}),
+		zAxis: keyed(scope, (id) => createAxis(sources, "zAxis", id, sources.axes.zAxis, implicitZAxis, (axis) => axis.range)),
+		angleAxis: keyed(scope, (id) => createPolarAxis(sources, "angleAxis", id)),
+		radiusAxis: keyed(scope, (id) => createPolarAxis(sources, "radiusAxis", id))
+	};
+	return function axis(type, id) {
+		return lookup[type](id);
+	};
+}
+//#endregion
+export { createAxes };

package/dist/es/model/axisLayout.mjs

@@ -0,0 +1,27 @@
+import { gridAxis, xAxisPosition, yAxisPosition } from "../core/axis/position.mjs";
+import { computed } from "vue";
+//#region src/model/axisLayout.ts
+function createAxisLayout(sources, axis, type, id) {
+	return {
+		size: computed(() => {
+			const settings = axis.settings.value;
+			const offset = sources.offset();
+			if ("height" in settings) return {
+				width: offset.width,
+				height: settings.height
+			};
+			return {
+				width: typeof settings.width === "number" ? settings.width : 60,
+				height: offset.height
+			};
+		}),
+		position: computed(() => {
+			const settings = axis.settings.value;
+			if ("height" in settings) return xAxisPosition(sources.axes.xAxis.entries.value, settings, sources.offset(), sources.size().height, id);
+			return yAxisPosition(sources.axes.yAxis.entries.value, settings, sources.offset(), sources.size().width, id);
+		}),
+		grid: computed(() => gridAxis(axis.settings.value, sources.layout(), type, axis.categoricalDomain.value, axis.duplicateDomain.value, axis.niceTicks.value, axis.range.value, axis.realScaleType.value, axis.scale.value))
+	};
+}
+//#endregion
+export { createAxisLayout };

package/dist/es/model/axisScale.mjs

@@ -0,0 +1,52 @@
+import { axisDomainWithNiceTicks, categoricalDomain, duplicateDomain, getBandSizeOfAxis, graphicalItemTicks, inverseTickScale, niceTicks, realScaleType, scaleFunction, sortBy } from "../core/axis/scale.mjs";
+import { tooltipTicks } from "../core/tooltip.mjs";
+import { axisTicks } from "../core/axis/ticks.mjs";
+import { axisRangeWithReverse } from "../core/axis/range.mjs";
+import { createCategoricalInverse, inverseScaleFunction } from "../utils/createCategoricalInverse.mjs";
+import { computed } from "vue";
+//#region src/model/axisScale.ts
+function createAxisScale(sources, type, settings, domain, appliedValues, range) {
+	const realScaleType$1 = computed(() => realScaleType(settings.value, sources.hasBar(), sources.categoryScale()));
+	const tickSettings = computed(() => ({
+		...settings.value,
+		tickCount: settings.value.tickCount,
+		ticks: settings.value.ticks,
+		allowDecimals: settings.value.allowDecimals === true
+	}));
+	const niceTicks$1 = computed(() => niceTicks(domain.value, tickSettings.value, realScaleType$1.value));
+	const niceDomain = computed(() => type === "zAxis" ? domain.value : axisDomainWithNiceTicks(settings.value, domain.value, niceTicks$1.value, type));
+	const reversedRange = computed(() => axisRangeWithReverse(settings.value, range.value));
+	const scale = computed(() => scaleFunction(settings.value, realScaleType$1.value, niceDomain.value, reversedRange.value));
+	const duplicateDomain$1 = computed(() => duplicateDomain(sources.layout(), appliedValues.value, settings.value, type));
+	const categoricalDomain$1 = computed(() => type === "zAxis" ? void 0 : categoricalDomain(sources.layout(), appliedValues.value, tickSettings.value, type));
+	const ticks = computed(() => axisTicks(sources.layout(), tickSettings.value, realScaleType$1.value, scale.value, niceTicks$1.value, range.value, duplicateDomain$1.value, categoricalDomain$1.value, type));
+	const graphicalTicks = computed(() => type === "zAxis" ? null : graphicalItemTicks(sources.layout(), tickSettings.value, scale.value, range.value, duplicateDomain$1.value, categoricalDomain$1.value, type));
+	const tooltipTicks$1 = computed(() => type === "zAxis" ? null : tooltipTicks(sources.layout(), settings.value, realScaleType$1.value, scale.value, range.value, duplicateDomain$1.value, categoricalDomain$1.value, type));
+	const withScale = computed(() => scale.value ? {
+		...settings.value,
+		scale: scale.value
+	} : void 0);
+	const bandSize = computed(() => getBandSizeOfAxis(withScale.value, graphicalTicks.value ?? void 0));
+	const barBandSize = computed(() => getBandSizeOfAxis(withScale.value, graphicalTicks.value ?? void 0, true));
+	const sortedValues = computed(() => appliedValues.value.map((item) => item.value).sort(sortBy));
+	return {
+		realScaleType: realScaleType$1,
+		niceTicks: niceTicks$1,
+		range,
+		reversedRange,
+		scale,
+		duplicateDomain: duplicateDomain$1,
+		categoricalDomain: categoricalDomain$1,
+		ticks,
+		graphicalTicks,
+		tooltipTicks: tooltipTicks$1,
+		withScale,
+		bandSize,
+		barBandSize,
+		inverseScale: computed(() => inverseScaleFunction(scale.value)),
+		inverseDataScale: computed(() => createCategoricalInverse(scale.value, sortedValues.value)),
+		inverseTickScale: computed(() => inverseTickScale(ticks.value))
+	};
+}
+//#endregion
+export { createAxisScale };

package/dist/es/model/brush.mjs

@@ -0,0 +1,27 @@
+import { createRegistry } from "./registry.mjs";
+import { computed } from "vue";
+//#region src/model/brush.ts
+function createChartBrush() {
+	const settings = createRegistry();
+	const registered = computed(() => settings.entries.value.at(-1));
+	return {
+		state: computed(() => registered.value ?? {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0,
+			padding: {
+				top: 0,
+				right: 0,
+				bottom: 0,
+				left: 0
+			},
+			range: null,
+			onRangeChange: void 0
+		}),
+		range: computed(() => registered.value?.range),
+		register: settings.register
+	};
+}
+//#endregion
+export { createChartBrush };