vccs 0.6.0 → 1.0.0-beta.1

package/dist/es/cartesian/brush/components/Traveller.mjs

@@ -0,0 +1,46 @@
+import { Fragment, createVNode, defineComponent } from "vue";
+//#region src/cartesian/brush/components/Traveller.tsx
+var Traveller = /* @__PURE__ */ defineComponent({
+	name: "Traveller",
+	props: {
+		x: Number,
+		y: Number,
+		width: Number,
+		height: Number,
+		stroke: String
+	},
+	setup(props) {
+		return () => {
+			const { x, y, width, height, stroke } = props;
+			const lineY = Math.floor(y + height / 2) - 1;
+			return createVNode(Fragment, null, [
+				createVNode("rect", {
+					"x": x,
+					"y": y,
+					"width": width,
+					"height": height,
+					"fill": stroke,
+					"stroke": "none"
+				}, null),
+				createVNode("line", {
+					"x1": x + 1,
+					"y1": lineY,
+					"x2": x + width - 1,
+					"y2": lineY,
+					"fill": "none",
+					"stroke": "var(--v-charts-background, #fff)"
+				}, null),
+				createVNode("line", {
+					"x1": x + 1,
+					"y1": lineY + 2,
+					"x2": x + width - 1,
+					"y2": lineY + 2,
+					"fill": "none",
+					"stroke": "var(--v-charts-background, #fff)"
+				}, null)
+			]);
+		};
+	}
+});
+//#endregion
+export { Traveller };

package/dist/es/cartesian/brush/components/TravellerLayer.mjs

@@ -0,0 +1,68 @@
+import { Layer } from "../../../container/Layer.mjs";
+import { getTextOfTick } from "../utils.mjs";
+import { Traveller } from "./Traveller.mjs";
+import { computed, createVNode, defineComponent } from "vue";
+//#region src/cartesian/brush/components/TravellerLayer.tsx
+var TravellerLayer = /* @__PURE__ */ defineComponent({
+	name: "TravellerLayer",
+	props: {
+		id: String,
+		travellerX: Number,
+		otherProps: {
+			type: Object,
+			required: true
+		}
+	},
+	emits: [
+		"mouseenter",
+		"mouseleave",
+		"mousedown",
+		"touchstart",
+		"traveller-move-keyboard",
+		"focus",
+		"blur"
+	],
+	setup(props, { emit }) {
+		const x = computed(() => Math.max(props.travellerX, props.otherProps.x));
+		const travellerProps = computed(() => ({
+			x: x.value,
+			y: props.otherProps.y,
+			width: props.otherProps.travellerWidth,
+			height: props.otherProps.height,
+			stroke: props.otherProps.stroke
+		}));
+		const index = computed(() => props.id === "startX" ? props.otherProps.startIndex : props.otherProps.endIndex);
+		const category = computed(() => getTextOfTick({
+			index: index.value,
+			data: props.otherProps.data,
+			dataKey: props.otherProps.dataKey,
+			tickFormatter: props.otherProps.tickFormatter
+		}));
+		const handleKeyDown = (e) => {
+			if (!["ArrowLeft", "ArrowRight"].includes(e.key)) return;
+			e.preventDefault();
+			e.stopPropagation();
+			emit("traveller-move-keyboard", e.key === "ArrowRight" ? 1 : -1, props.id);
+		};
+		return () => createVNode(Layer, {
+			"tabindex": 0,
+			"role": "slider",
+			"aria-label": props.id === "startX" ? "Range start" : "Range end",
+			"aria-valuemin": 0,
+			"aria-valuemax": Math.max(0, props.otherProps.data.length - 1),
+			"aria-valuenow": index.value,
+			"aria-valuetext": String(category.value ?? ""),
+			"class": "v-charts-brush-traveller",
+			"onMouseenter": (e) => emit("mouseenter", e),
+			"onMouseleave": (e) => emit("mouseleave", e),
+			"onMousedown": (e) => emit("mousedown", e),
+			"onTouchstart": (e) => emit("touchstart", e),
+			"onKeydown": handleKeyDown,
+			"onFocus": () => emit("focus"),
+			"onBlur": () => emit("blur"),
+			"style": { cursor: "col-resize" }
+		}, { default: () => [createVNode(Traveller, travellerProps.value, null)] });
+	}
+});
+//#endregion
+export { TravellerLayer };

package/dist/es/cartesian/brush/hooks/useBrushHandlers.mjs

@@ -0,0 +1,158 @@
+import { getIndex } from "../utils.mjs";
+import { onUnmounted } from "vue";
+import { useEventListener, useTimeoutFn } from "@vueuse/core";
+//#region src/cartesian/brush/hooks/useBrushHandlers.ts
+function useBrushHandlers(brushState, props, onChange, chartData) {
+	const leaveTimer = useTimeoutFn(handleDragEnd, () => props.leaveTimeOut, { immediate: false });
+	let stopDragListeners = [];
+	function attachDragEndListener() {
+		leaveTimer.stop();
+		detachDragEndListener();
+		stopDragListeners = [
+			useEventListener(window, "mouseup", handleDragEnd, true),
+			useEventListener(window, "touchend", handleDragEnd, true),
+			useEventListener(window, "mousemove", handleMouseDrag, true)
+		];
+	}
+	function detachDragEndListener() {
+		stopDragListeners.forEach((stop) => stop());
+		stopDragListeners = [];
+	}
+	function handleDrag(e) {
+		leaveTimer.stop();
+		if (brushState.value.isTravellerMoving) handleTravellerMove(e);
+		else if (brushState.value.isSlideMoving) handleSlideDrag(e);
+	}
+	function handleMouseDrag(e) {
+		handleDrag(e);
+	}
+	function handleSlideDrag(e) {
+		const { slideMoveStartX, startX, endX, scaleValues } = brushState.value;
+		if (scaleValues == null || slideMoveStartX == null || startX == null || endX == null) return;
+		const { x, width, travellerWidth, startIndex, endIndex, gap } = props;
+		const data = chartData();
+		let delta = e.pageX - slideMoveStartX;
+		if (delta > 0) delta = Math.min(delta, x + width - travellerWidth - endX, x + width - travellerWidth - startX);
+		else if (delta < 0) delta = Math.max(delta, x - startX, x - endX);
+		const newIndex = getIndex({
+			startX: startX + delta,
+			endX: endX + delta,
+			data,
+			gap,
+			scaleValues
+		});
+		if ((newIndex.startIndex !== startIndex || newIndex.endIndex !== endIndex) && onChange) onChange(newIndex);
+		brushState.value.startX = startX + delta;
+		brushState.value.endX = endX + delta;
+		brushState.value.slideMoveStartX = e.pageX;
+	}
+	function handleTravellerMove(e) {
+		const { brushMoveStartX, movingTravellerId, endX, startX, scaleValues } = brushState.value;
+		if (movingTravellerId == null || scaleValues == null || brushMoveStartX == null || startX == null || endX == null) return;
+		const prevValue = brushState.value[movingTravellerId];
+		if (prevValue == null) return;
+		const { x, width, travellerWidth, gap } = props;
+		const data = chartData();
+		const params = {
+			startX: brushState.value.startX,
+			endX: brushState.value.endX,
+			data,
+			gap,
+			scaleValues
+		};
+		let delta = e.pageX - brushMoveStartX;
+		if (delta > 0) delta = Math.min(delta, x + width - travellerWidth - prevValue);
+		else if (delta < 0) delta = Math.max(delta, x - prevValue);
+		params[movingTravellerId] = prevValue + delta;
+		const newIndex = getIndex(params);
+		const { startIndex, endIndex } = newIndex;
+		const isFullGap = () => {
+			const lastIndex = data.length - 1;
+			if (movingTravellerId === "startX" && (endX > startX ? startIndex % gap === 0 : endIndex % gap === 0) || endX < startX && endIndex === lastIndex || movingTravellerId === "endX" && (endX > startX ? endIndex % gap === 0 : startIndex % gap === 0) || endX > startX && endIndex === lastIndex) return true;
+			return false;
+		};
+		brushState.value[movingTravellerId] = prevValue + delta;
+		brushState.value.brushMoveStartX = e.pageX;
+		if (onChange && isFullGap()) onChange(newIndex);
+	}
+	function handleLeaveWrapper() {
+		if (brushState.value.isTravellerMoving || brushState.value.isSlideMoving) leaveTimer.start();
+	}
+	function handleTouchMove(e) {
+		const touch = e.changedTouches?.[0];
+		if (touch != null) handleDrag(touch);
+	}
+	function handleEnterSlideOrTraveller() {
+		brushState.value.isTextActive = true;
+	}
+	function handleLeaveSlideOrTraveller() {
+		brushState.value.isTextActive = false;
+	}
+	function handleSlideDragStart(e) {
+		const event = e instanceof TouchEvent ? e.changedTouches[0] : e;
+		if (event == null) return;
+		brushState.value.isTravellerMoving = false;
+		brushState.value.isSlideMoving = true;
+		brushState.value.slideMoveStartX = event.pageX;
+		attachDragEndListener();
+	}
+	function handleTravellerDragStart(id, e) {
+		const event = e instanceof TouchEvent ? e.changedTouches[0] : e;
+		if (event == null) return;
+		brushState.value.isSlideMoving = false;
+		brushState.value.isTravellerMoving = true;
+		brushState.value.movingTravellerId = id;
+		brushState.value.brushMoveStartX = event.pageX;
+		attachDragEndListener();
+	}
+	function handleTravellerMoveKeyboard(direction, id) {
+		const { scaleValues, startX, endX } = brushState.value;
+		if (scaleValues == null) return;
+		const data = chartData();
+		const { gap, startIndex, endIndex } = props;
+		let currentIndex = -1;
+		if (id === "startX") currentIndex = startIndex;
+		else if (id === "endX") currentIndex = endIndex;
+		if (currentIndex < 0 || currentIndex >= data.length) return;
+		const newIndex = currentIndex + direction;
+		if (newIndex < 0 || newIndex >= scaleValues.length) return;
+		const newScaleValue = scaleValues[newIndex];
+		if (newScaleValue == null) return;
+		if (id === "startX" && newScaleValue >= endX || id === "endX" && newScaleValue <= startX) return;
+		brushState.value[id] = newScaleValue;
+		onChange(getIndex({
+			startX: brushState.value.startX,
+			endX: brushState.value.endX,
+			data,
+			gap,
+			scaleValues
+		}));
+	}
+	function handleDragEnd() {
+		leaveTimer.stop();
+		brushState.value.isTravellerMoving = false;
+		brushState.value.isSlideMoving = false;
+		detachDragEndListener();
+		const { startIndex, endIndex } = props;
+		props.onDragEnd?.({
+			startIndex,
+			endIndex
+		});
+	}
+	onUnmounted(() => {
+		leaveTimer.stop();
+		detachDragEndListener();
+	});
+	return {
+		handleLeaveWrapper,
+		handleTouchMove,
+		handleEnterSlideOrTraveller,
+		handleLeaveSlideOrTraveller,
+		handleSlideDragStart,
+		handleTravellerDragStart,
+		handleTravellerMoveKeyboard,
+		handleDragEnd
+	};
+}
+//#endregion
+export { useBrushHandlers };

package/dist/es/cartesian/brush/hooks/useBrushState.mjs

@@ -0,0 +1,67 @@
+import { ref, watch } from "vue";
+import { scalePoint } from "d3-scale";
+import range from "es-toolkit/compat/range";
+//#region src/cartesian/brush/hooks/useBrushState.ts
+function useBrushState(getX, getWidth, getTravellerWidth, chartData, startIndex, endIndex) {
+	const brushState = ref({
+		isTravellerMoving: false,
+		isTravellerFocused: false,
+		isSlideMoving: false,
+		isTextActive: false,
+		startX: void 0,
+		endX: void 0,
+		slideMoveStartX: void 0,
+		movingTravellerId: void 0,
+		brushMoveStartX: void 0,
+		scale: void 0,
+		scaleValues: void 0
+	});
+	let prevX;
+	let prevWidth;
+	let prevTravellerWidth;
+	const createScale = (data, si, ei, x, width, tw) => {
+		if (!data?.length) return null;
+		const scale = scalePoint().domain(range(0, data.length)).range([x, x + width - tw]);
+		const scaleValues = scale.domain().map((entry) => scale(entry));
+		return {
+			startX: scale(si),
+			endX: scale(ei),
+			scale,
+			scaleValues
+		};
+	};
+	watch([
+		chartData,
+		getX,
+		getWidth,
+		getTravellerWidth,
+		startIndex,
+		endIndex
+	], ([data, x, width, tw, si, ei]) => {
+		if (!data?.length || x == null || width == null) return;
+		const result = createScale(data, si, ei, x, width, tw);
+		if (!result) return;
+		const isDimensionChange = x !== prevX || width !== prevWidth || tw !== prevTravellerWidth;
+		prevX = x;
+		prevWidth = width;
+		prevTravellerWidth = tw;
+		const isInteracting = brushState.value.isSlideMoving || brushState.value.isTravellerMoving || brushState.value.isTravellerFocused;
+		if (isDimensionChange) {
+			brushState.value.startX = result.startX;
+			brushState.value.endX = result.endX;
+			brushState.value.scale = result.scale;
+			brushState.value.scaleValues = result.scaleValues;
+		} else if (isInteracting) {
+			brushState.value.scale = result.scale;
+			brushState.value.scaleValues = result.scaleValues;
+		} else {
+			brushState.value.startX = result.startX;
+			brushState.value.endX = result.endX;
+			brushState.value.scale = result.scale;
+			brushState.value.scaleValues = result.scaleValues;
+		}
+	}, { immediate: true });
+	return { brushState };
+}
+//#endregion
+export { useBrushState };

package/dist/es/cartesian/brush/type.mjs

@@ -0,0 +1,54 @@
+import { classProp } from "../../types/common.mjs";
+//#region src/cartesian/brush/type.ts
+var BrushVueProps = {
+	height: {
+		type: Number,
+		default: 40
+	},
+	travellerWidth: {
+		type: Number,
+		default: 5
+	},
+	gap: {
+		type: Number,
+		default: 1
+	},
+	fill: {
+		type: String,
+		default: "var(--v-charts-background, #fff)"
+	},
+	stroke: {
+		type: String,
+		default: "var(--v-charts-axis, #666)"
+	},
+	padding: {
+		type: Object,
+		default: () => ({
+			top: 1,
+			right: 1,
+			bottom: 1,
+			left: 1
+		})
+	},
+	leaveTimeOut: {
+		type: Number,
+		default: 1e3
+	},
+	alwaysShowText: {
+		type: Boolean,
+		default: false
+	},
+	x: { type: Number },
+	y: { type: Number },
+	dy: { type: Number },
+	width: { type: Number },
+	class: classProp,
+	dataKey: [String, Function],
+	range: {
+		type: Object,
+		default: void 0
+	},
+	tickFormatter: { type: Function }
+};
+//#endregion
+export { BrushVueProps };

package/dist/es/cartesian/brush/utils.mjs

@@ -0,0 +1,30 @@
+import { getValueByDataKey } from "../../utils/chart.mjs";
+//#region src/cartesian/brush/utils.ts
+function getIndexInRange(valueRange, x) {
+	const len = valueRange.length;
+	let start = 0;
+	let end = len - 1;
+	while (end - start > 1) {
+		const middle = Math.floor((start + end) / 2);
+		if (valueRange[middle] > x) end = middle;
+		else start = middle;
+	}
+	return x >= valueRange[end] ? end : start;
+}
+function getIndex({ startX, endX, scaleValues, gap, data }) {
+	const lastIndex = data.length - 1;
+	const min = Math.min(startX, endX);
+	const max = Math.max(startX, endX);
+	const minIndex = getIndexInRange(scaleValues, min);
+	const maxIndex = getIndexInRange(scaleValues, max);
+	return {
+		startIndex: minIndex - minIndex % gap,
+		endIndex: maxIndex === lastIndex ? lastIndex : maxIndex - maxIndex % gap
+	};
+}
+function getTextOfTick({ index, data, tickFormatter, dataKey }) {
+	const text = getValueByDataKey(data?.[index], dataKey, index);
+	return typeof tickFormatter === "function" ? tickFormatter(text, index) : text;
+}
+//#endregion
+export { getIndex, getTextOfTick };

package/dist/es/cartesian/cartesian-axis/CartesianAxis.mjs

@@ -1,10 +1,13 @@
 import { isNumber } from "../../utils/validate.mjs";
+import { useCanMeasureText } from "../../model/runtime.mjs";
 import { filterProps } from "../../utils/VueUtils.mjs";
 import { Layer } from "../../container/Layer.mjs";
 import Text_default from "../../components/Text.mjs";
+import { forwardsSvgAttributes } from "../../utils/attributes.mjs";
+import { useTickMotion } from "../../animation/useTickMotion.mjs";
 import { Label } from "../../components/label/Label.mjs";
 import { getTicks } from "../utils/get-ticks.mjs";
-import { createVNode, defineComponent, mergeProps, reactive } from "vue";
+import { computed, createVNode, defineComponent, mergeProps, reactive } from "vue";
 import { get } from "es-toolkit/compat";
 //#region src/cartesian/cartesian-axis/CartesianAxis.tsx
 /**
@@ -12,8 +15,7 @@ import { get } from "es-toolkit/compat";
 */
 /** The orientation of the axis in correspondence to the chart */
 /** A unit to be appended to a value */
-/** The formatter function of tick */
-var CartesianAxis = /* @__PURE__ */ defineComponent({
+var CartesianAxis = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
 	name: "CartesianAxis",
 	props: {
 		x: {
@@ -47,7 +49,7 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 			})
 		},
 		tick: {
-			type: Boolean,
+			type: [Boolean, Object],
 			default: true
 		},
 		axisLine: {
@@ -89,14 +91,16 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 		scale: { type: [Function] },
 		stroke: {
 			type: String,
-			default: "#666"
+			default: "var(--v-charts-axis, #666)"
 		},
+		/** Additional props to spread to each tick Text element. */
 		tickTextProps: {
 			type: Object,
 			default: void 0
 		}
 	},
 	setup(props, { slots }) {
+		const canMeasureText = useCanMeasureText();
 		const state = reactive({
 			fontSize: "",
 			letterSpacing: ""
@@ -135,7 +139,6 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 					y1 = y2 + sign * finalTickSize;
 					ty = y1 + sign * tickMargin;
 					tx = tickCoord;
-					break;
 			}
 			return {
 				line: {
@@ -160,9 +163,7 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 				case "right":
 					textAnchor = mirror ? "end" : "start";
 					break;
-				default:
-					textAnchor = "middle";
-					break;
+				default: textAnchor = "middle";
 			}
 			return textAnchor;
 		};
@@ -214,9 +215,14 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 				"value": value
 			}), null);
 		}
-		const renderTicks = (props, fontSize, letterSpacing) => {
+		const targetTicks = computed(() => getTicks({
+			...props,
+			angle: props.angle ?? 0
+		}, state.fontSize, state.letterSpacing, canMeasureText.value));
+		const { items: movingTicks } = useTickMotion(() => props.hide ? [] : targetTicks.value, () => props.scale, () => props.orientation === "left" || props.orientation === "right" ? [props.y, props.y + props.height] : [props.x, props.x + props.width]);
+		function renderTicks() {
 			const { tickLine, stroke, tick, tickFormatter, unit } = props;
-			const finalTicks = getTicks(props, fontSize, letterSpacing);
+			const finalTicks = movingTicks.value;
 			const textAnchor = getTickTextAnchor();
 			const verticalAnchor = getTickVerticalAnchor();
 			const axisProps = filterProps(props, false);
@@ -226,14 +232,14 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 				fill: "none",
 				...filterProps(tickLine, false)
 			};
-			const items = finalTicks.map((entry, i) => {
+			const items = finalTicks.map(({ key, value: entry }, i) => {
 				const { line: lineCoord, tick: tickCoord } = getTickLineCoord(entry);
 				const tickProps = {
 					textAnchor,
 					verticalAnchor,
 					...axisProps,
 					stroke: "none",
-					fill: stroke,
+					fill: "var(--v-charts-text, #666)",
 					...customTickProps,
 					...tickCoord,
 					index: i,
@@ -244,14 +250,15 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 				};
 				return createVNode(Layer, {
 					"class": "v-charts-cartesian-axis-tick",
-					"key": `tick-${entry.value}-${entry.coordinate}-${entry.tickCoord}`
+					"key": key,
+					"opacity": entry.opacity < 1 ? entry.opacity : void 0
 				}, { default: () => [tickLine && createVNode("line", mergeProps(tickLineProps, lineCoord, { "class": ["v-charts-cartesian-axis-tick-line", get(tickLine, "class")] }), null), tick && (slots.tick ? slots.tick({
 					...tickProps,
 					value: entry.value
 				}) : renderTickItem(tickProps, `${typeof tickFormatter === "function" ? tickFormatter(entry.value, i) : entry.value}${unit || ""}`))] });
 			});
 			return items.length > 0 ? createVNode("g", { "class": "v-charts-cartesian-axis-ticks" }, [items]) : null;
-		};
+		}
 		const renderLabel = () => {
 			const { label, x, y, width, height } = props;
 			if (!label) return null;
@@ -275,9 +282,9 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 			return createVNode(Layer, {
 				"class": ["v-charts-cartesian-axis"],
 				"ref": (ref) => {
-					const elm = ref?.$el;
-					if (elm) {
-						const tick = elm?.getElementsByClassName("v-charts-cartesian-axis-tick-value")[0];
+					const elm = ref instanceof Element ? ref : ref?.$el;
+					if (elm instanceof Element && !state.fontSize) {
+						const tick = elm.getElementsByClassName("v-charts-cartesian-axis-tick-value")[0];
 						if (tick) {
 							const calculatedFontSize = window.getComputedStyle(tick).fontSize;
 							const calculatedLetterSpacing = window.getComputedStyle(tick).letterSpacing;
@@ -290,11 +297,11 @@ var CartesianAxis = /* @__PURE__ */ defineComponent({
 				}
 			}, { default: () => [
 				axisLine && renderAxisLine(),
-				renderTicks(props, state.fontSize, state.letterSpacing),
+				renderTicks(),
 				renderLabel()
 			] });
 		};
 	}
-});
+}));
 //#endregion
 export { CartesianAxis };