vccs 0.5.0 → 1.0.0-beta.1

package/dist/es/cartesian/axis/AxisProps.mjs

@@ -0,0 +1,94 @@
+//#region src/cartesian/axis/AxisProps.ts
+/** Settings and presentation shared by the public cartesian axes. */
+var AxisVueProps = {
+	type: { type: String },
+	allowDataOverflow: {
+		type: Boolean,
+		default: false
+	},
+	allowDecimals: {
+		type: Boolean,
+		default: true
+	},
+	allowDuplicatedCategory: {
+		type: Boolean,
+		default: true
+	},
+	includeHidden: {
+		type: Boolean,
+		default: false
+	},
+	hide: {
+		type: Boolean,
+		default: false
+	},
+	mirror: {
+		type: Boolean,
+		default: false
+	},
+	reversed: {
+		type: Boolean,
+		default: false
+	},
+	scale: {
+		type: [String, Function],
+		default: "auto"
+	},
+	tickCount: {
+		type: Number,
+		default: 5
+	},
+	dataKey: { type: [
+		String,
+		Number,
+		Function
+	] },
+	domain: { type: [Array, Function] },
+	axisLine: {
+		type: [Boolean, Object],
+		default: true
+	},
+	tickLine: {
+		type: [Boolean, Object],
+		default: true
+	},
+	tick: {
+		type: [Boolean, Object],
+		default: true
+	},
+	ticks: { type: Array },
+	interval: {
+		type: [String, Number],
+		default: "preserveEnd"
+	},
+	unit: String,
+	name: String,
+	angle: {
+		type: Number,
+		default: 0
+	},
+	label: { type: [
+		String,
+		Number,
+		Object
+	] },
+	stroke: {
+		type: String,
+		default: "var(--v-charts-axis, #666)"
+	},
+	tickSize: {
+		type: Number,
+		default: 6
+	},
+	tickMargin: {
+		type: Number,
+		default: 2
+	},
+	minTickGap: {
+		type: Number,
+		default: 5
+	},
+	tickFormatter: Function
+};
+//#endregion
+export { AxisVueProps };

package/dist/es/cartesian/axis/XAxis.mjs

@@ -1,10 +1,10 @@
-import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
-import { selectAxisViewBox } from "../../state/selectors/selectChartOffset.mjs";
-import { implicitXAxis, selectAxisScale, selectTicksOfAxis, selectXAxisPosition, selectXAxisSize } from "../../state/selectors/axisSelectors.mjs";
-import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
-import { addXAxis, removeXAxis } from "../../state/cartesianAxisSlice.mjs";
+import { implicitXAxis } from "../../core/axis/settings.mjs";
+import { useChart } from "../../model/chart.mjs";
+import { useDeferredView } from "../../hooks/deferredView.mjs";
+import { forwardsSvgAttributes } from "../../utils/attributes.mjs";
 import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
-import { createVNode, defineComponent, mergeProps, watchEffect } from "vue";
+import { AxisVueProps } from "./AxisProps.mjs";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
 //#region src/cartesian/axis/XAxis.tsx
 /**
 * @fileOverview X Axis
@@ -19,13 +19,13 @@ var XAxisImpl = /* @__PURE__ */ defineComponent({
 	},
 	inheritAttrs: false,
 	setup(props, { attrs, slots }) {
-		const isPanorama = useIsPanorama();
+		const chart = useChart();
 		const axisType = "xAxis";
-		const scale = useAppSelector((state) => selectAxisScale(state, axisType, props.xAxisId, isPanorama));
-		const axisSize = useAppSelector((state) => selectXAxisSize(state, props.xAxisId));
-		const position = useAppSelector((state) => selectXAxisPosition(state, props.xAxisId));
-		const cartesianTickItems = useAppSelector((state) => selectTicksOfAxis(state, axisType, props.xAxisId, isPanorama));
-		const viewBox = useAppSelector(selectAxisViewBox);
+		const scale = computed(() => chart.axis(axisType, props.xAxisId).scale.value);
+		const axisSize = computed(() => chart.axis("xAxis", props.xAxisId).size.value);
+		const position = computed(() => chart.axis("xAxis", props.xAxisId).position.value);
+		const cartesianTickItems = computed(() => chart.axis(axisType, props.xAxisId).ticks.value);
+		const viewBox = computed(() => chart.axisViewBox.value);
 		return () => {
 			const { ticks, ...allOtherProps } = props;
 			if (axisSize.value == null || position.value == null) return null;
@@ -37,167 +37,51 @@ var XAxisImpl = /* @__PURE__ */ defineComponent({
 				"width": axisSize.value?.width,
 				"height": axisSize.value?.height,
 				"ticks": cartesianTickItems.value,
-				"class": ["v-charts-xAxis xAxis"]
-			}), { default: () => [slots.tick ? { tick: slots.tick } : void 0] });
+				"data-slot": "x-axis",
+				"class": "v-charts-x-axis"
+			}), slots.tick ? { tick: slots.tick } : void 0);
 		};
 	}
 });
-var XAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
-	props: {
-		interval: [String, Number],
-		xAxisId: [String, Number],
-		scale: [String, Function],
-		type: String,
-		padding: Object,
-		allowDataOverflow: Boolean,
-		domain: { type: Array },
-		dataKey: { type: [
-			String,
-			Number,
-			Function
-		] },
-		allowDuplicatedCategory: Boolean,
-		allowDecimals: Boolean,
-		tickCount: Number,
-		includeHidden: Boolean,
-		reversed: Boolean,
-		ticks: Array,
-		height: Number,
-		orientation: String,
-		mirror: Boolean,
-		hide: Boolean,
-		unit: String,
-		name: String,
-		angle: Number,
-		minTickGap: Number,
-		tick: {
-			type: [Boolean, Object],
-			default: true
-		},
-		tickFormatter: Function
-	},
-	setup(props, { slots: dispatcherSlots }) {
-		const dispatch = useAppDispatch();
-		watchEffect((onCleanup) => {
-			const settings = {
-				interval: props.interval ?? "preserveEnd",
-				id: props.xAxisId,
-				scale: props.scale,
-				type: props.type,
-				padding: props.padding,
-				allowDataOverflow: props.allowDataOverflow,
-				domain: props.domain,
-				dataKey: props.dataKey,
-				allowDuplicatedCategory: props.allowDuplicatedCategory,
-				allowDecimals: props.allowDecimals,
-				tickCount: props.tickCount,
-				includeHidden: props.includeHidden ?? false,
-				reversed: props.reversed,
-				ticks: props.ticks,
-				height: props.height,
-				orientation: props.orientation,
-				mirror: props.mirror,
-				hide: props.hide,
-				unit: props.unit,
-				name: props.name,
-				angle: props.angle ?? 0,
-				minTickGap: props.minTickGap ?? 5,
-				tick: props.tick ?? true,
-				tickFormatter: props.tickFormatter
-			};
-			dispatch(addXAxis(settings));
-			onCleanup(() => {
-				dispatch(removeXAxis(settings));
-			});
-		});
-		return () => createVNode(XAxisImpl, props, { default: () => [dispatcherSlots.tick ? { tick: dispatcherSlots.tick } : void 0] });
-	}
-});
-var XAxis = /* @__PURE__ */ defineComponent({
+var XAxis = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
 	name: "XAxis",
 	props: {
-		allowDataOverflow: {
-			type: Boolean,
-			default: implicitXAxis.allowDataOverflow
-		},
-		allowDecimals: {
-			type: Boolean,
-			default: implicitXAxis.allowDecimals
-		},
-		allowDuplicatedCategory: {
-			type: Boolean,
-			default: implicitXAxis.allowDuplicatedCategory
+		...AxisVueProps,
+		xAxisId: {
+			type: [String, Number],
+			default: 0
 		},
 		height: {
 			type: Number,
 			default: implicitXAxis.height
 		},
-		hide: {
-			type: Boolean,
-			default: false
-		},
-		mirror: {
-			type: Boolean,
-			default: implicitXAxis.mirror
-		},
 		orientation: {
 			type: String,
 			default: implicitXAxis.orientation
 		},
 		padding: {
-			type: Object,
-			default: implicitXAxis.padding
-		},
-		reversed: {
-			type: Boolean,
-			default: implicitXAxis.reversed
-		},
-		scale: {
-			type: [String, Function],
-			default: implicitXAxis.scale
-		},
-		tickCount: {
-			type: Number,
-			default: implicitXAxis.tickCount
+			type: [String, Object],
+			default: () => ({
+				left: 0,
+				right: 0
+			})
 		},
 		type: {
-			type: String,
+			...AxisVueProps.type,
 			default: implicitXAxis.type
-		},
-		xAxisId: {
-			type: [String, Number],
-			default: 0
-		},
-		dataKey: {
-			type: [
-				String,
-				Number,
-				Function
-			],
-			default: void 0
-		},
-		domain: { type: Array },
-		axisLine: {
-			type: [Boolean, Object],
-			default: true
-		},
-		ticks: { type: Array },
-		interval: { type: [String, Number] },
-		unit: { type: String },
-		tickLine: {
-			type: [Boolean, Object],
-			default: true
-		},
-		tickMargin: Number,
-		minTickGap: {
-			type: Number,
-			default: 5
-		},
-		tickFormatter: Function
+		}
 	},
+	inheritAttrs: false,
+	slots: Object,
 	setup(props, { attrs, slots }) {
-		return () => createVNode(XAxisSettingsDispatcher, mergeProps(props, attrs), { default: () => [slots.tick ? { tick: slots.tick } : void 0] });
+		const settings = computed(() => ({
+			...props,
+			id: props.xAxisId
+		}));
+		useChart().axes.xAxis.register(settings);
+		const View = useDeferredView(XAxisImpl);
+		return () => createVNode(View, mergeProps(props, attrs), slots);
 	}
-});
+}));
 //#endregion
 export { XAxis };

package/dist/es/cartesian/axis/YAxis.mjs

@@ -1,11 +1,13 @@
-import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
-import { selectAxisViewBox } from "../../state/selectors/selectChartOffset.mjs";
-import { implicitYAxis, selectAxisScale, selectTicksOfAxis, selectYAxisPosition, selectYAxisSize } from "../../state/selectors/axisSelectors.mjs";
-import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
-import { addYAxis, removeYAxis, updateYAxisWidth } from "../../state/cartesianAxisSlice.mjs";
+import { axisKey } from "../../core/axis/key.mjs";
+import { implicitYAxis } from "../../core/axis/settings.mjs";
+import { useChart } from "../../model/chart.mjs";
+import { useCanMeasureText } from "../../model/runtime.mjs";
+import { useDeferredView } from "../../hooks/deferredView.mjs";
+import { forwardsSvgAttributes } from "../../utils/attributes.mjs";
 import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
+import { AxisVueProps } from "./AxisProps.mjs";
 import { getCalculatedYAxisWidth } from "../../utils/YAxisUtils.mjs";
-import { createVNode, defineComponent, isVNode, mergeProps, nextTick, ref, watch, watchEffect } from "vue";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, nextTick, ref, shallowRef, watch } from "vue";
 //#region src/cartesian/axis/YAxis.tsx
 var YAxisImpl = /* @__PURE__ */ defineComponent({
 	props: { yAxisId: {
@@ -13,49 +15,47 @@ var YAxisImpl = /* @__PURE__ */ defineComponent({
 		default: 0
 	} },
 	inheritAttrs: false,
-	setup(props, { attrs }) {
-		const isPanorama = useIsPanorama();
+	emits: ["measure-width"],
+	setup(props, { attrs, slots, emit }) {
+		const chart = useChart();
+		const canMeasureText = useCanMeasureText();
 		const axisType = "yAxis";
-		const dispatch = useAppDispatch();
-		const scale = useAppSelector((state) => selectAxisScale(state, axisType, props.yAxisId, isPanorama));
-		const axisSize = useAppSelector((state) => selectYAxisSize(state, props.yAxisId));
-		const position = useAppSelector((state) => selectYAxisPosition(state, props.yAxisId));
-		const cartesianTickItems = useAppSelector((state) => selectTicksOfAxis(state, axisType, props.yAxisId, isPanorama));
-		const viewBox = useAppSelector(selectAxisViewBox);
-		const chartDataLengthEmpty = useAppSelector((state) => !state.chartData.chartData?.length);
+		const scale = computed(() => chart.axis(axisType, props.yAxisId).scale.value);
+		const axisSize = computed(() => chart.axis("yAxis", props.yAxisId).size.value);
+		const position = computed(() => chart.axis("yAxis", props.yAxisId).position.value);
+		const cartesianTickItems = computed(() => chart.axis(axisType, props.yAxisId).ticks.value);
+		const viewBox = computed(() => chart.axisViewBox.value);
+		const chartDataLengthEmpty = computed(() => !chart.dataRange.state.value.chartData?.length);
 		const cartesianAxisRef = ref(null);
 		const isAutoWidth = () => attrs.width === "auto";
 		const measureAxisWidth = () => {
 			const el = cartesianAxisRef.value?.$el;
-			if (!el) return;
+			if (!(el instanceof Element)) return;
 			const ticks = el.getElementsByClassName("v-charts-cartesian-axis-tick-value");
 			const label = el.getElementsByClassName("v-charts-label")[0];
+			const tickSize = typeof attrs.tickSize === "number" ? attrs.tickSize : 6;
+			const tickMargin = typeof attrs.tickMargin === "number" ? attrs.tickMargin : 2;
 			return getCalculatedYAxisWidth({
 				ticks,
 				label,
 				labelGapWithTick: 5,
-				tickSize: typeof attrs.tickSize === "number" ? attrs.tickSize : 6,
-				tickMargin: typeof attrs.tickMargin === "number" ? attrs.tickMargin : 2
+				tickSize,
+				tickMargin
 			});
 		};
 		watch(chartDataLengthEmpty, (empty) => {
-			if (empty === false && isAutoWidth()) dispatch(updateYAxisWidth({
-				id: props.yAxisId,
-				width: 60
-			}));
+			if (empty === false && isAutoWidth()) emit("measure-width", 60);
 		});
 		const updateAutoWidth = () => {
-			if (!isAutoWidth() || axisSize.value == null) return;
+			if (!canMeasureText.value || !isAutoWidth() || axisSize.value == null) return;
 			const label = attrs.label;
 			if (typeof label === "function" || isVNode(label)) return;
 			const updatedYAxisWidth = measureAxisWidth();
 			if (updatedYAxisWidth == null) return;
-			if (Math.round(axisSize.value.width) !== Math.round(updatedYAxisWidth)) dispatch(updateYAxisWidth({
-				id: props.yAxisId,
-				width: updatedYAxisWidth
-			}));
+			if (Math.round(axisSize.value.width) !== Math.round(updatedYAxisWidth)) emit("measure-width", updatedYAxisWidth);
 		};
 		watch([
+			canMeasureText,
 			axisSize,
 			cartesianTickItems,
 			() => attrs.label
@@ -77,163 +77,65 @@ var YAxisImpl = /* @__PURE__ */ defineComponent({
 				"height": axisSize.value?.height,
 				"ticks": cartesianTickItems.value,
 				"tickTextProps": isAutoWidth() ? { width: void 0 } : { width: axisSize.value?.width },
-				"class": ["v-charts-yAxis yAxis"],
+				"data-slot": "y-axis",
+				"class": "v-charts-y-axis",
 				"ref": cartesianAxisRef
-			}), null);
+			}), { tick: slots.tick });
 		};
 	}
 });
-var YAxisSettingsDispatcher = /* @__PURE__ */ defineComponent({
+var YAxis = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
+	name: "YAxis",
 	props: {
-		interval: [String, Number],
+		...AxisVueProps,
 		yAxisId: {
 			type: [String, Number],
 			default: 0
 		},
-		scale: [String, Function],
-		type: String,
-		padding: Object,
-		allowDataOverflow: Boolean,
-		allowDuplicatedCategory: Boolean,
-		allowDecimals: Boolean,
-		tickCount: Number,
-		includeHidden: Boolean,
-		reversed: Boolean,
-		ticks: Array,
-		width: [Number, String],
-		orientation: String,
-		mirror: Boolean,
-		hide: Boolean,
-		unit: String,
-		name: String,
-		angle: Number,
-		minTickGap: Number,
-		tick: {
-			type: [Boolean, Object],
-			default: true
-		},
-		tickFormatter: Function,
-		domain: Array,
-		dataKey: {
-			type: [
-				String,
-				Number,
-				Function
-			],
-			default: void 0
-		}
-	},
-	setup(props) {
-		const dispatch = useAppDispatch();
-		watchEffect((onCleanup) => {
-			const settings = {
-				...props,
-				interval: props.interval ?? "preserveEnd",
-				id: props.yAxisId,
-				dataKey: props.dataKey,
-				includeHidden: props.includeHidden ?? false,
-				angle: props.angle ?? 0,
-				minTickGap: props.minTickGap ?? 5,
-				tick: props.tick ?? true
-			};
-			dispatch(addYAxis(settings));
-			onCleanup(() => {
-				dispatch(removeYAxis(settings));
-			});
-		});
-		return () => createVNode(YAxisImpl, props, null);
-	}
-});
-var YAxis = /* @__PURE__ */ defineComponent({
-	name: "YAxis",
-	props: {
-		allowDataOverflow: {
-			type: Boolean,
-			default: implicitYAxis.allowDataOverflow
-		},
-		allowDecimals: {
-			type: Boolean,
-			default: implicitYAxis.allowDecimals
-		},
-		allowDuplicatedCategory: {
-			type: Boolean,
-			default: implicitYAxis.allowDuplicatedCategory
-		},
 		width: {
 			type: [Number, String],
 			default: implicitYAxis.width
 		},
-		hide: {
-			type: Boolean,
-			default: false
-		},
-		mirror: {
-			type: Boolean,
-			default: implicitYAxis.mirror
-		},
 		orientation: {
 			type: String,
 			default: implicitYAxis.orientation
 		},
 		padding: {
-			type: Object,
-			default: implicitYAxis.padding
-		},
-		reversed: {
-			type: Boolean,
-			default: implicitYAxis.reversed
-		},
-		scale: {
-			type: [String, Function],
-			default: implicitYAxis.scale
-		},
-		tickCount: {
-			type: Number,
-			default: implicitYAxis.tickCount
+			type: [String, Object],
+			default: () => ({
+				top: 0,
+				bottom: 0
+			})
 		},
 		type: {
-			type: String,
+			...AxisVueProps.type,
 			default: implicitYAxis.type
-		},
-		yAxisId: { type: [String, Number] },
-		dataKey: {
-			type: [
-				String,
-				Number,
-				Function
-			],
-			default: void 0
-		},
-		tickFormatter: {
-			type: Function,
-			default: void 0
-		},
-		unit: {
-			type: String,
-			default: void 0
-		},
-		interval: { type: [String, Number] },
-		domain: {
-			type: Array,
-			default: void 0
-		},
-		axisLine: {
-			type: [Boolean, Object],
-			default: true
-		},
-		tickLine: {
-			type: [Boolean, Object],
-			default: true
-		},
-		tickMargin: Number,
-		minTickGap: {
-			type: Number,
-			default: 5
 		}
 	},
-	setup(props, { attrs }) {
-		return () => createVNode(YAxisSettingsDispatcher, mergeProps(props, attrs), null);
+	inheritAttrs: false,
+	slots: Object,
+	setup(props, { attrs, slots }) {
+		const measured = shallowRef();
+		function updateWidth(width) {
+			const previous = measured.value?.id === axisKey(props.yAxisId) ? measured.value : void 0;
+			if (previous?.width === width) return;
+			const history = previous?.history ?? [];
+			if (history.length === 3 && history[0] === history[2] && width === history[1] && Math.abs(width - history[0]) <= 1) return;
+			measured.value = {
+				id: axisKey(props.yAxisId),
+				width,
+				history: [...history, width].slice(-3)
+			};
+		}
+		const settings = computed(() => ({
+			...props,
+			id: props.yAxisId,
+			width: props.width === "auto" && measured.value?.id === axisKey(props.yAxisId) ? measured.value.width : props.width
+		}));
+		useChart().axes.yAxis.register(settings);
+		const View = useDeferredView(YAxisImpl);
+		return () => createVNode(View, mergeProps(props, attrs, { "onMeasure-width": updateWidth }), slots);
 	}
-});
+}));
 //#endregion
 export { YAxis };