vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/cartesian/bar/hooks/useBar.mjs

@@ -1,52 +1,88 @@
-import { uniqueId } from "../../../utils/data-utils.mjs";
-import { useIsPanorama } from "../../../context/PanoramaContextProvider.mjs";
-import { getNormalizedStackId } from "../../../utils/chart.mjs";
-import { useAppSelector } from "../../../state/hooks.mjs";
-import { useChartLayout } from "../../../context/chartLayoutContext.mjs";
+import { sameAxis } from "../../../core/axis/key.mjs";
+import { useChartPresentation } from "../../../model/presentation.mjs";
+import { useChart } from "../../../model/chart.mjs";
+import { useChartId } from "../../../hooks/useChartId.mjs";
 import { useNeedsClip } from "../../useNeedsClip.mjs";
-import { selectBarRectangles } from "../../../state/selectors/barSelectors.mjs";
-import { computed, ref, shallowRef, useAttrs } from "vue";
-import { createContext } from "motion-v";
+import { computeBarRectangles } from "../../../core/bar.mjs";
+import { barPositions, barSizeList, stackedData } from "../../../core/barSizing.mjs";
+import { computed, inject, provide, shallowRef } from "vue";
 //#region src/cartesian/bar/hooks/useBar.ts
-var [useBarContext, provideBarContext] = createContext("BarContext");
-function useBar(props, shapeSlot, activeBarSlot) {
-	const isPanorama = useIsPanorama();
-	const attrs = useAttrs();
-	const layout = useChartLayout();
-	const { needClip } = useNeedsClip(props.xAxisId, props.yAxisId);
-	const barSettings = computed(() => ({
-		barSize: props.barSize,
-		data: props.data,
-		dataKey: props.dataKey,
-		maxBarSize: props.maxBarSize,
-		minPointSize: props.minPointSize,
-		stackId: getNormalizedStackId(props.stackId)
-	}));
-	const rects = useAppSelector((state) => selectBarRectangles(state, props.xAxisId, props.yAxisId, isPanorama, barSettings.value));
+var barKey = Symbol("v-charts-bar-context");
+function provideBarContext(value) {
+	provide(barKey, value);
+	return value;
+}
+function useBarContext(fallback) {
+	const value = inject(barKey, fallback);
+	if (value === void 0) throw new Error("vccs: useBarContext requires its provider.");
+	return value;
+}
+function useBar(props, settings, shapeSlot, activeBarSlot) {
+	const chart = useChart();
+	const layout = useChartPresentation().layout;
+	const { needClip } = useNeedsClip(() => props.xAxisId, () => props.yAxisId);
+	const xAxis = computed(() => chart.axis("xAxis", props.xAxisId));
+	const yAxis = computed(() => chart.axis("yAxis", props.yAxisId));
+	const categoricalAxis = computed(() => layout.value === "horizontal" ? xAxis.value : yAxis.value);
+	const numericAxis = computed(() => layout.value === "horizontal" ? yAxis.value : xAxis.value);
+	const visibleBars = computed(() => chart.items.cartesian.entries.value.filter((item) => item.type === "bar" && !item.hide && (layout.value === "horizontal" ? sameAxis(item.xAxisId, props.xAxisId) : sameAxis(item.yAxisId, props.yAxisId))));
+	const sizeList = computed(() => barSizeList(visibleBars.value, chart.options.value.barSize, layout.value === "horizontal" ? categoricalAxis.value.size.value.width : categoricalAxis.value.size.value.height));
+	const bandSize = computed(() => categoricalAxis.value.bandSize.value);
+	const barBandSize = computed(() => categoricalAxis.value.barBandSize.value ?? props.maxBarSize ?? chart.options.value.maxBarSize ?? 0);
+	const positions = computed(() => barPositions(sizeList.value, chart.options.value.maxBarSize, chart.options.value.barGap, chart.options.value.barCategoryGap, barBandSize.value, bandSize.value, props.maxBarSize));
+	const position = computed(() => positions.value?.find((item) => item.stackId === settings.value.stackId && item.dataKeys.includes(props.dataKey))?.position);
+	const stackedData$1 = computed(() => stackedData(numericAxis.value.stackGroups.value, settings.value));
+	const rects = computed(() => {
+		const x = xAxis.value.withScale.value;
+		const y = yAxis.value.withScale.value;
+		const xTicks = xAxis.value.graphicalTicks.value;
+		const yTicks = yAxis.value.graphicalTicks.value;
+		const pos = position.value;
+		const displayedData = chart.dataRange.displayedData(props);
+		const type = layout.value;
+		if (!pos || !x || !y || !xTicks || !yTicks || !displayedData || type !== "horizontal" && type !== "vertical") return;
+		return computeBarRectangles({
+			layout: type,
+			barSettings: settings.value,
+			pos,
+			bandSize: bandSize.value,
+			xAxis: x,
+			yAxis: y,
+			xAxisTicks: xTicks,
+			yAxisTicks: yTicks,
+			stackedData: stackedData$1.value,
+			displayedData,
+			offset: chart.offset.value
+		});
+	});
+	const band = computed(() => position.value && bandSize.value ? {
+		offset: position.value.offset,
+		size: bandSize.value
+	} : void 0);
 	const shouldRender = computed(() => {
-		return (layout.value === "vertical" || layout.value === "horizontal") && !props.hide;
+		return layout.value === "vertical" || layout.value === "horizontal";
 	});
-	const clipPathId = uniqueId("v-charts-bar-");
-	const isAnimating = ref(false);
+	const clipPathId = useChartId("v-charts-bar");
 	const cellPropsRef = shallowRef([]);
+	const drawn = shallowRef([]);
 	provideBarContext({
 		clipPathId,
 		layout,
 		props,
-		attrs,
 		data: rects,
-		isAnimating,
 		shapeSlot,
 		activeBarSlot,
-		cellProps: cellPropsRef
+		cellProps: cellPropsRef,
+		band,
+		drawn
 	});
 	return {
 		shouldRender,
 		needClip,
 		clipPathId,
 		barData: rects,
-		isAnimating,
-		cellProps: cellPropsRef
+		cellProps: cellPropsRef,
+		drawn
 	};
 }
 //#endregion

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

@@ -25,7 +25,7 @@ var BarVueProps = {
 	},
 	strokeWidth: {
 		type: Number,
-		default: 0
+		default: void 0
 	},
 	unit: {
 		type: [String, Number],
@@ -57,17 +57,9 @@ var BarVueProps = {
 		type: [Number, Array],
 		default: void 0
 	},
-	onAnimationStart: {
-		type: Function,
-		default: void 0
-	},
-	onAnimationEnd: {
-		type: Function,
-		default: void 0
-	},
 	isAnimationActive: {
 		type: Boolean,
-		default: true
+		default: void 0
 	},
 	activeBar: {
 		type: [
@@ -81,10 +73,6 @@ var BarVueProps = {
 		type: Number,
 		default: void 0
 	},
-	id: {
-		type: String,
-		default: void 0
-	},
 	stackId: {
 		type: [String, Number],
 		default: void 0
@@ -97,16 +85,10 @@ var BarVueProps = {
 		type: [String, Number],
 		default: 0
 	},
+	/** Overrides the default motion (see animation/motion.ts). */
 	transition: {
 		type: Object,
-		default: {
-			duration: .4,
-			ease: "easeOut"
-		}
-	},
-	needClip: {
-		type: Boolean,
-		default: false
+		default: void 0
 	},
 	label: {
 		type: [Boolean, Object],

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

@@ -0,0 +1,294 @@
+import { isNumber } from "../../utils/validate.mjs";
+import { normalizeBrushRange } from "../../model/dataRange.mjs";
+import { useChart } from "../../model/chart.mjs";
+import { useChartGesture } from "../../model/runtime.mjs";
+import { useDeferredView } from "../../hooks/deferredView.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { forwardsSvgAttributes } from "../../utils/attributes.mjs";
+import { BrushVueProps } from "./type.mjs";
+import { Background } from "./components/Background.mjs";
+import { Panorama } from "./components/Panorama.mjs";
+import { Slide } from "./components/Slide.mjs";
+import { TravellerLayer } from "./components/TravellerLayer.mjs";
+import { BrushText } from "./components/BrushText.mjs";
+import { useBrushState } from "./hooks/useBrushState.mjs";
+import { useBrushHandlers } from "./hooks/useBrushHandlers.mjs";
+import { useBrushChartSynchronisation } from "../../events/sync.mjs";
+import { Fragment, computed, createVNode, defineComponent, h, mergeProps, nextTick, reactive, shallowRef, watch } from "vue";
+//#region src/cartesian/brush/Brush.tsx
+var brushEmits = {
+	"update:range": (_range) => true,
+	"change": (_indexes) => true,
+	"drag-end": (_indexes) => true
+};
+var BrushView = /* @__PURE__ */ defineComponent({
+	name: "BrushView",
+	emits: brushEmits,
+	inheritAttrs: false,
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		svgAttrs: {
+			type: Object,
+			required: true
+		},
+		range: {
+			type: Object,
+			default: null
+		},
+		controlled: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(view, { slots, emit }) {
+		const chart = useChart();
+		const props = view.item;
+		const attrs = view.svgAttrs;
+		const chartData = computed(() => chart.dataRange.state.value.chartData);
+		const brushDimensions = computed(() => chart.brushDimensions.value);
+		const x = computed(() => props.x ?? brushDimensions.value?.x);
+		const y = computed(() => props.y ?? brushDimensions.value?.y);
+		const width = computed(() => props.width ?? brushDimensions.value?.width);
+		const startIndex = computed(() => view.range?.startIndex ?? 0);
+		const endIndex = computed(() => view.range?.endIndex ?? Math.max(0, (chartData.value?.length ?? 0) - 1));
+		const calculatedY = computed(() => (y.value ?? 0) + (props.dy ?? 0));
+		function onChange(nextState) {
+			if (sameRange(nextState, view.range)) return;
+			emit("update:range", nextState);
+			emit("change", nextState);
+			nextTick(restoreControlledPositions);
+		}
+		const { brushState } = useBrushState(() => x.value, () => width.value, () => props.travellerWidth, () => chartData.value, () => startIndex.value, () => endIndex.value);
+		const gesture = useChartGesture();
+		watch(() => brushState.value.isSlideMoving || brushState.value.isTravellerMoving, (moving) => {
+			gesture.value = moving;
+		});
+		function restoreControlledPositions() {
+			if (!view.controlled()) return;
+			brushState.value.startX = brushState.value.scale?.(startIndex.value);
+			brushState.value.endX = brushState.value.scale?.(endIndex.value);
+		}
+		watch(() => view.range, restoreControlledPositions);
+		const handlerProps = reactive({
+			get x() {
+				return x.value;
+			},
+			get width() {
+				return width.value;
+			},
+			get travellerWidth() {
+				return props.travellerWidth;
+			},
+			get gap() {
+				return props.gap;
+			},
+			get startIndex() {
+				return startIndex.value;
+			},
+			get endIndex() {
+				return endIndex.value;
+			},
+			get leaveTimeOut() {
+				return props.leaveTimeOut;
+			},
+			onDragEnd: (indexes) => {
+				emit("drag-end", indexes);
+				nextTick(restoreControlledPositions);
+			}
+		});
+		const handlers = useBrushHandlers(brushState, handlerProps, onChange, () => chartData.value ?? []);
+		const moveKeyboard = (direction, id) => {
+			handlers.handleTravellerMoveKeyboard(direction, id);
+			nextTick(restoreControlledPositions);
+		};
+		const startXDragStart = (e) => handlers.handleTravellerDragStart("startX", e);
+		const endXDragStart = (e) => handlers.handleTravellerDragStart("endX", e);
+		return () => {
+			const data = chartData.value;
+			const xVal = x.value;
+			const yVal = calculatedY.value;
+			const wVal = width.value;
+			const hVal = props.height;
+			if (!data || !data.length || !isNumber(xVal) || !isNumber(yVal) || !isNumber(wVal) || !isNumber(hVal) || wVal <= 0 || hVal <= 0) return null;
+			const { startX, endX, isTextActive, isSlideMoving, isTravellerMoving, isTravellerFocused } = brushState.value;
+			const showText = isTextActive || isSlideMoving || isTravellerMoving || isTravellerFocused || props.alwaysShowText;
+			const travellerOtherProps = {
+				...props,
+				x: xVal,
+				y: yVal,
+				width: wVal,
+				data,
+				startIndex: startIndex.value,
+				endIndex: endIndex.value
+			};
+			return createVNode(Layer, mergeProps(attrs, {
+				"data-slot": "brush",
+				"class": ["v-charts-brush", props.class],
+				"style": {
+					userSelect: "none",
+					...attrs.style
+				},
+				"onMouseleave": handlers.handleLeaveWrapper,
+				"onTouchmove": handlers.handleTouchMove
+			}), { default: () => [
+				createVNode(Background, {
+					"x": xVal,
+					"y": yVal,
+					"width": wVal,
+					"height": hVal,
+					"fill": props.fill,
+					"stroke": props.stroke
+				}, null),
+				createVNode(Panorama, {
+					"x": xVal,
+					"y": yVal,
+					"width": wVal,
+					"height": hVal,
+					"data": data,
+					"padding": props.padding
+				}, { default: slots.default }),
+				view.range != null && createVNode(Fragment, null, [
+					createVNode(Slide, {
+						"y": yVal,
+						"height": hVal,
+						"stroke": props.stroke,
+						"travellerWidth": props.travellerWidth,
+						"startX": startX,
+						"endX": endX,
+						"onMouseenter": handlers.handleEnterSlideOrTraveller,
+						"onMouseleave": handlers.handleLeaveSlideOrTraveller,
+						"onMousedown": handlers.handleSlideDragStart,
+						"onTouchstart": handlers.handleSlideDragStart
+					}, null),
+					createVNode(TravellerLayer, mergeProps({
+						"travellerX": startX,
+						"id": "startX",
+						"otherProps": travellerOtherProps,
+						"onMouseenter": handlers.handleEnterSlideOrTraveller,
+						"onMouseleave": handlers.handleLeaveSlideOrTraveller,
+						"onMousedown": startXDragStart,
+						"onTouchstart": startXDragStart
+					}, { "onTraveller-move-keyboard": (direction, id) => moveKeyboard(direction, id) }, {
+						"onFocus": () => {
+							brushState.value.isTravellerFocused = true;
+						},
+						"onBlur": () => {
+							brushState.value.isTravellerFocused = false;
+						}
+					}), null),
+					createVNode(TravellerLayer, mergeProps({
+						"travellerX": endX,
+						"id": "endX",
+						"otherProps": travellerOtherProps,
+						"onMouseenter": handlers.handleEnterSlideOrTraveller,
+						"onMouseleave": handlers.handleLeaveSlideOrTraveller,
+						"onMousedown": endXDragStart,
+						"onTouchstart": endXDragStart
+					}, { "onTraveller-move-keyboard": (direction, id) => moveKeyboard(direction, id) }, {
+						"onFocus": () => {
+							brushState.value.isTravellerFocused = true;
+						},
+						"onBlur": () => {
+							brushState.value.isTravellerFocused = false;
+						}
+					}), null),
+					showText && createVNode(BrushText, {
+						"startIndex": startIndex.value,
+						"endIndex": endIndex.value,
+						"y": yVal,
+						"height": hVal,
+						"travellerWidth": props.travellerWidth,
+						"stroke": props.stroke,
+						"tickFormatter": props.tickFormatter,
+						"dataKey": props.dataKey,
+						"data": data,
+						"startX": startX,
+						"endX": endX
+					}, null)
+				])
+			] });
+		};
+	}
+});
+var Brush = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
+	name: "Brush",
+	emits: brushEmits,
+	props: BrushVueProps,
+	inheritAttrs: false,
+	slots: Object,
+	setup(props, { attrs, slots, emit }) {
+		const chart = useChart();
+		const View = useDeferredView(BrushView);
+		const controlled = () => props.range !== void 0;
+		const length = computed(() => chart.dataRange.state.value.chartData?.length ?? 0);
+		const local = shallowRef(null);
+		const fullRange = (rows) => ({
+			startIndex: 0,
+			endIndex: rows - 1
+		});
+		/** What the Brush shows: `null` hides the travellers (controlled `null` or empty data). */
+		const range = computed(() => normalizeBrushRange(controlled() ? props.range : local.value ?? fullRange(length.value), length.value));
+		chart.brush.register(computed(() => ({
+			x: props.x,
+			y: props.y,
+			width: props.width,
+			height: props.height,
+			padding: props.padding,
+			range: controlled() ? props.range : local.value,
+			onRangeChange: updateRange
+		})));
+		useBrushChartSynchronisation(chart);
+		let emptied = false;
+		function announce(value) {
+			emptied = value === null && length.value === 0;
+			emit("update:range", value);
+		}
+		watch(length, (rows, previous) => {
+			if (emptied && previous === 0 && rows > 0) {
+				emptied = false;
+				if (!controlled() || props.range === null) return emit("update:range", fullRange(rows));
+			}
+			if (controlled()) return;
+			const shown = normalizeBrushRange(local.value ?? fullRange(previous), previous);
+			const window = local.value;
+			if (window && rows === 0) local.value = null;
+			else if (window && rows > previous && window.endIndex === previous - 1) local.value = {
+				startIndex: window.startIndex + rows - previous,
+				endIndex: rows - 1
+			};
+			else if (window && rows < previous) local.value = normalizeBrushRange(window, rows);
+			if ((rows < previous || local.value !== window) && !sameRange(shown, range.value)) announce(range.value);
+		}, { flush: "sync" });
+		watch(() => [
+			props.range === null,
+			props.range?.startIndex,
+			props.range?.endIndex,
+			length.value
+		], () => {
+			if (controlled() && !sameRange(props.range, range.value)) announce(range.value);
+		}, { immediate: true });
+		function updateRange(value) {
+			const next = normalizeBrushRange(value, length.value);
+			if (sameRange(next, range.value)) return;
+			if (!controlled()) local.value = next == null || sameRange(next, fullRange(length.value)) ? null : next;
+			emit("update:range", next);
+		}
+		return () => h(View, {
+			"item": props,
+			"svgAttrs": attrs,
+			"range": range.value,
+			controlled,
+			"onChange": (indexes) => emit("change", indexes),
+			"onDrag-end": (indexes) => emit("drag-end", indexes),
+			"onUpdate:range": updateRange
+		}, slots);
+	}
+}));
+function sameRange(left, right) {
+	return left === right || left != null && right != null && left.startIndex === right.startIndex && left.endIndex === right.endIndex;
+}
+//#endregion
+export { Brush };

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

@@ -0,0 +1,25 @@
+import { createVNode, defineComponent } from "vue";
+//#region src/cartesian/brush/components/Background.tsx
+var Background = /* @__PURE__ */ defineComponent({
+	name: "Background",
+	props: {
+		x: Number,
+		y: Number,
+		width: Number,
+		height: Number,
+		fill: String,
+		stroke: String
+	},
+	setup(props) {
+		return () => createVNode("rect", {
+			"stroke": props.stroke,
+			"fill": props.fill,
+			"x": props.x,
+			"y": props.y,
+			"width": props.width,
+			"height": props.height
+		}, null);
+	}
+});
+//#endregion
+export { Background };

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

@@ -0,0 +1,55 @@
+import { Layer } from "../../../container/Layer.mjs";
+import Text_default from "../../../components/Text.mjs";
+import { getTextOfTick } from "../utils.mjs";
+import { createVNode, defineComponent, mergeProps } from "vue";
+//#region src/cartesian/brush/components/BrushText.tsx
+var BrushText = /* @__PURE__ */ defineComponent({
+	name: "BrushText",
+	props: {
+		startIndex: Number,
+		endIndex: Number,
+		y: Number,
+		height: Number,
+		travellerWidth: Number,
+		stroke: String,
+		tickFormatter: Function,
+		dataKey: [String, Function],
+		data: Array,
+		startX: Number,
+		endX: Number
+	},
+	setup(props) {
+		const offset = 5;
+		return () => {
+			const attrs = {
+				pointerEvents: "none",
+				fill: "var(--v-charts-text, #666)"
+			};
+			return createVNode(Layer, { "class": "v-charts-brush-texts" }, { default: () => [createVNode(Text_default, mergeProps({
+				"textAnchor": "end",
+				"verticalAnchor": "middle",
+				"x": Math.min(props.startX, props.endX) - offset,
+				"y": props.y + props.height / 2,
+				"value": getTextOfTick({
+					index: props.startIndex,
+					tickFormatter: props.tickFormatter,
+					dataKey: props.dataKey,
+					data: props.data
+				})
+			}, attrs), null), createVNode(Text_default, mergeProps({
+				"textAnchor": "start",
+				"verticalAnchor": "middle",
+				"x": Math.max(props.startX, props.endX) + props.travellerWidth + offset,
+				"y": props.y + props.height / 2,
+				"value": getTextOfTick({
+					index: props.endIndex,
+					tickFormatter: props.tickFormatter,
+					dataKey: props.dataKey,
+					data: props.data
+				})
+			}, attrs), null)] });
+		};
+	}
+});
+//#endregion
+export { BrushText };

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

@@ -0,0 +1,54 @@
+import { cloneVNode, defineComponent } from "vue";
+//#region src/cartesian/brush/components/Panorama.tsx
+var Panorama = /* @__PURE__ */ defineComponent({
+	name: "Panorama",
+	props: {
+		x: {
+			type: Number,
+			required: true
+		},
+		y: {
+			type: Number,
+			required: true
+		},
+		width: {
+			type: Number,
+			required: true
+		},
+		height: {
+			type: Number,
+			required: true
+		},
+		data: {
+			type: Array,
+			required: true
+		},
+		padding: {
+			type: Object,
+			default: () => ({
+				top: 1,
+				right: 1,
+				bottom: 1,
+				left: 1
+			})
+		}
+	},
+	setup(props, { slots }) {
+		return () => {
+			const children = slots.default?.();
+			if (!children || children.length !== 1) return null;
+			const chartElement = children[0];
+			return cloneVNode(chartElement, {
+				x: props.x,
+				y: props.y,
+				width: props.width,
+				height: props.height,
+				margin: props.padding,
+				compact: true,
+				data: props.data
+			});
+		};
+	}
+});
+//#endregion
+export { Panorama };

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

@@ -0,0 +1,40 @@
+import { computed, createVNode, defineComponent } from "vue";
+//#region src/cartesian/brush/components/Slide.tsx
+var Slide = /* @__PURE__ */ defineComponent({
+	name: "Slide",
+	props: {
+		y: Number,
+		height: Number,
+		stroke: String,
+		travellerWidth: Number,
+		startX: Number,
+		endX: Number
+	},
+	emits: [
+		"mouseenter",
+		"mouseleave",
+		"mousedown",
+		"touchstart"
+	],
+	setup(props, { emit }) {
+		const x = computed(() => Math.min(props.startX, props.endX) + props.travellerWidth);
+		const width = computed(() => Math.max(Math.abs(props.endX - props.startX) - props.travellerWidth, 0));
+		return () => createVNode("rect", {
+			"class": "v-charts-brush-slide",
+			"onMouseenter": (e) => emit("mouseenter", e),
+			"onMouseleave": (e) => emit("mouseleave", e),
+			"onMousedown": (e) => emit("mousedown", e),
+			"onTouchstart": (e) => emit("touchstart", e),
+			"style": { cursor: "move" },
+			"stroke": "none",
+			"fill": props.stroke,
+			"fill-opacity": .2,
+			"x": x.value,
+			"y": props.y,
+			"width": width.value,
+			"height": props.height
+		}, null);
+	}
+});
+//#endregion
+export { Slide };