vccs 0.0.1 → 0.2.0

package/dist/es/cartesian/reference-line/ReferenceLine.mjs

@@ -0,0 +1,165 @@
+import { isNumOrStr, isWellBehavedNumber } from "../../utils/validate.mjs";
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { selectAxisScale, selectXAxisSettings, selectYAxisSettings } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { useViewBox } from "../../context/chartLayoutContext.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { Label } from "../../components/label/Label.mjs";
+import { addLine, removeLine } from "../../state/referenceElementsSlice.mjs";
+import { useClipPathId } from "../../chart/provideClipPathId.mjs";
+import { computed, createVNode, defineComponent, mergeProps, onMounted, onUnmounted, reactive } from "vue";
+//#region src/cartesian/reference-line/ReferenceLine.tsx
+function scaleCoord(scale, value) {
+	const coord = scale(value);
+	if (!isWellBehavedNumber(coord)) return;
+	return coord + (scale.bandwidth?.() ?? 0) / 2;
+}
+function isInRange(scale, coord) {
+	const r = scale.range();
+	const min = Math.min(r[0], r[1]);
+	const max = Math.max(r[0], r[1]);
+	return coord >= min && coord <= max;
+}
+var ReferenceLine = /* @__PURE__ */ defineComponent({
+	name: "ReferenceLine",
+	props: {
+		x: {
+			type: [Number, String],
+			default: void 0
+		},
+		y: {
+			type: [Number, String],
+			default: void 0
+		},
+		xAxisId: {
+			type: [Number, String],
+			default: 0
+		},
+		yAxisId: {
+			type: [Number, String],
+			default: 0
+		},
+		stroke: {
+			type: String,
+			default: "#ccc"
+		},
+		strokeWidth: {
+			type: [Number, String],
+			default: 1
+		},
+		fill: {
+			type: String,
+			default: "none"
+		},
+		label: {
+			type: [
+				String,
+				Number,
+				Boolean,
+				Object
+			],
+			default: void 0
+		},
+		ifOverflow: {
+			type: String,
+			default: "discard"
+		},
+		className: {
+			type: String,
+			default: void 0
+		}
+	},
+	inheritAttrs: false,
+	setup(props, { attrs }) {
+		const dispatch = useAppDispatch();
+		const isPanorama = useIsPanorama();
+		const clipPathId = useClipPathId();
+		const viewBox = useViewBox();
+		const settings = reactive({
+			xAxisId: props.xAxisId,
+			yAxisId: props.yAxisId,
+			ifOverflow: props.ifOverflow,
+			x: props.x,
+			y: props.y
+		});
+		onMounted(() => {
+			dispatch(addLine(settings));
+		});
+		onUnmounted(() => {
+			dispatch(removeLine(settings));
+		});
+		const xAxisSettings = useAppSelector((state) => selectXAxisSettings(state, props.xAxisId));
+		const yAxisSettings = useAppSelector((state) => selectYAxisSettings(state, props.yAxisId));
+		const xAxisScale = useAppSelector((state) => selectAxisScale(state, "xAxis", props.xAxisId, isPanorama));
+		const yAxisScale = useAppSelector((state) => selectAxisScale(state, "yAxis", props.yAxisId, isPanorama));
+		const endPoints = computed(() => {
+			const vb = viewBox.value;
+			const xScale = xAxisScale.value;
+			const yScale = yAxisScale.value;
+			if (!vb || !xScale || !yScale) return null;
+			if (isNumOrStr(props.y)) {
+				const coord = scaleCoord(yScale, props.y);
+				if (coord == null) return null;
+				if (props.ifOverflow === "discard" && !isInRange(yScale, coord)) return null;
+				const yOrientation = yAxisSettings.value?.orientation;
+				const points = [{
+					x: vb.x + vb.width,
+					y: coord
+				}, {
+					x: vb.x,
+					y: coord
+				}];
+				return yOrientation === "left" ? points.reverse() : points;
+			}
+			if (isNumOrStr(props.x)) {
+				const coord = scaleCoord(xScale, props.x);
+				if (coord == null) return null;
+				if (props.ifOverflow === "discard" && !isInRange(xScale, coord)) return null;
+				const xOrientation = xAxisSettings.value?.orientation;
+				const points = [{
+					x: coord,
+					y: vb.y + vb.height
+				}, {
+					x: coord,
+					y: vb.y
+				}];
+				return xOrientation === "top" ? points.reverse() : points;
+			}
+			return null;
+		});
+		return () => {
+			const pts = endPoints.value;
+			if (!pts || pts.length < 2) return null;
+			const [p1, p2] = pts;
+			if (!isWellBehavedNumber(p1.x) || !isWellBehavedNumber(p1.y) || !isWellBehavedNumber(p2.x) || !isWellBehavedNumber(p2.y)) return null;
+			const clipPath = props.ifOverflow === "hidden" ? `url(#${clipPathId})` : void 0;
+			const svgAttrs = {
+				...attrs,
+				stroke: props.stroke,
+				"stroke-width": props.strokeWidth,
+				fill: props.fill
+			};
+			const labelViewBox = {
+				x: Math.min(p1.x, p2.x),
+				y: Math.min(p1.y, p2.y),
+				width: Math.abs(p2.x - p1.x),
+				height: Math.abs(p2.y - p1.y)
+			};
+			const labelValue = props.label;
+			const labelProps = typeof labelValue === "object" && labelValue !== null ? labelValue : {};
+			return createVNode(Layer, { "class": ["v-charts-reference-line", props.className] }, { default: () => [createVNode("line", mergeProps(svgAttrs, {
+				"clip-path": clipPath,
+				"x1": p1.x,
+				"y1": p1.y,
+				"x2": p2.x,
+				"y2": p2.y,
+				"class": "v-charts-reference-line-line"
+			}), null), labelValue != null && labelValue !== false && createVNode(Label, mergeProps({
+				"viewBox": labelViewBox,
+				"value": typeof labelValue === "string" || typeof labelValue === "number" ? labelValue : void 0
+			}, labelProps), null)] });
+		};
+	}
+});
+//#endregion
+export { ReferenceLine };

package/dist/es/cartesian/scatter/Scatter.mjs

@@ -0,0 +1,280 @@
+import { Curve } from "../../shape/Curve.mjs";
+import { getTooltipNameProp, getValueByDataKey } from "../../utils/chart.mjs";
+import { mouseLeaveChart, setActiveMouseOverItemIndex, setMouseOverAxisIndex } from "../../state/tooltipSlice.mjs";
+import { selectActiveTooltipDataKey, selectActiveTooltipIndex } from "../../state/selectors/tooltipSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { LabelList } from "../../components/label/LabelList.mjs";
+import { Animate } from "../../animation/Animate.mjs";
+import { SetTooltipEntrySettings } from "../../state/SetTooltipEntrySettings.mjs";
+import { useSetupGraphicalItem } from "../../hooks/useSetupGraphicalItem.mjs";
+import { useGraphicalLayerRef } from "../../context/graphicalLayerContext.mjs";
+import { createErrorBarRegistry, provideErrorBarContext, provideErrorBarRegistry } from "../error-bar/ErrorBarContext.mjs";
+import { useScatter } from "./hooks/useScatter.mjs";
+import { Symbols } from "../../shape/Symbols.mjs";
+import { getLinearRegression } from "../../utils/getLinearRegression.mjs";
+import { Fragment, Teleport, computed, createVNode, defineComponent, isVNode, mergeProps, useAttrs } from "vue";
+//#region src/cartesian/scatter/Scatter.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var interpolateNumber = (from, to) => (t) => from + (to - from) * t;
+var errorBarDataPointFormatter = (dataPoint, dataKey, direction) => ({
+	x: dataPoint.cx,
+	y: dataPoint.cy,
+	value: direction === "x" ? Number(dataPoint.node.x) : Number(dataPoint.node.y),
+	errorVal: getValueByDataKey(dataPoint.payload, dataKey)
+});
+var Scatter = /* @__PURE__ */ defineComponent({
+	name: "Scatter",
+	props: {
+		xAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		yAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		zAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		dataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			default: void 0
+		},
+		data: {
+			type: Array,
+			default: void 0
+		},
+		name: {
+			type: [String, Number],
+			default: void 0
+		},
+		hide: {
+			type: Boolean,
+			default: false
+		},
+		fill: {
+			type: String,
+			default: void 0
+		},
+		shape: {
+			type: String,
+			default: "circle"
+		},
+		isAnimationActive: {
+			type: Boolean,
+			default: true
+		},
+		line: {
+			type: [Boolean, Object],
+			default: false
+		},
+		lineType: {
+			type: String,
+			default: "joint"
+		},
+		lineJointType: {
+			type: [String, Function],
+			default: "linear"
+		},
+		label: {
+			type: [Boolean, Object],
+			default: false
+		},
+		legendType: {
+			type: String,
+			default: "circle"
+		},
+		tooltipType: {
+			type: String,
+			default: void 0
+		},
+		transition: {
+			type: Object,
+			default: void 0
+		}
+	},
+	inheritAttrs: false,
+	slots: Object,
+	setup(props, { attrs, slots }) {
+		const errorBarRegistry = createErrorBarRegistry();
+		provideErrorBarRegistry(errorBarRegistry);
+		useSetupGraphicalItem(props, "scatter", {
+			skipTooltip: true,
+			errorBars: errorBarRegistry.errorBars
+		});
+		const { shouldRender, points } = useScatter(props);
+		const graphicalLayerRef = useGraphicalLayerRef();
+		const svgAttrs = useAttrs();
+		const dispatch = useAppDispatch();
+		const activeIndex = useAppSelector(selectActiveTooltipIndex);
+		const activeDataKey = useAppSelector(selectActiveTooltipDataKey);
+		SetTooltipEntrySettings({
+			fn: (input) => ({
+				dataDefinedOnItem: input.points?.map((p) => p.tooltipPayload),
+				positions: void 0,
+				settings: {
+					stroke: input.stroke,
+					strokeWidth: input.strokeWidth,
+					fill: input.fill,
+					dataKey: input.dataKey,
+					nameKey: void 0,
+					name: getTooltipNameProp(input.name, input.dataKey),
+					hide: input.hide,
+					type: input.tooltipType,
+					color: input.fill,
+					unit: ""
+				}
+			}),
+			args: computed(() => ({
+				points: points.value,
+				fill: svgAttrs.fill ?? props.fill,
+				stroke: svgAttrs.stroke,
+				strokeWidth: svgAttrs["stroke-width"],
+				name: props.name,
+				dataKey: props.dataKey,
+				hide: props.hide,
+				tooltipType: props.tooltipType
+			}))
+		});
+		provideErrorBarContext({
+			data: points,
+			xAxisId: props.xAxisId,
+			yAxisId: props.yAxisId,
+			dataPointFormatter: errorBarDataPointFormatter,
+			errorBarOffset: computed(() => 0)
+		});
+		let previousPoints = null;
+		let animationId = 0;
+		const dispatchScatterHover = (point, index) => {
+			const payload = {
+				activeDataKey: props.dataKey,
+				activeIndex: String(index),
+				activeCoordinate: point.tooltipPosition
+			};
+			dispatch(setMouseOverAxisIndex(payload));
+			dispatch(setActiveMouseOverItemIndex(payload));
+		};
+		const onMouseLeaveSymbol = () => {
+			dispatch(mouseLeaveChart());
+		};
+		const renderSymbols = (data, svgAttrs) => {
+			const currentActiveIndex = activeIndex.value;
+			const currentActiveDataKey = activeDataKey.value;
+			return data.map((point, i) => {
+				if (point.cx == null || point.cy == null) return null;
+				const isActive = currentActiveIndex === String(i) && currentActiveDataKey === props.dataKey;
+				const symbolProps = {
+					...svgAttrs,
+					...props.fill != null ? { fill: props.fill } : {},
+					cx: point.cx,
+					cy: point.cy,
+					size: isActive ? (point.size ?? 64) * 1.6 : point.size,
+					type: props.shape,
+					...isActive ? {
+						stroke: "#fff",
+						"stroke-width": 2
+					} : {}
+				};
+				return createVNode("g", {
+					"class": "v-charts-scatter-symbol",
+					"onMouseenter": () => dispatchScatterHover(point, i),
+					"onMousemove": (e) => {
+						e.stopPropagation();
+						dispatchScatterHover(point, i);
+					},
+					"onMouseleave": onMouseLeaveSymbol
+				}, [Symbols(symbolProps)]);
+			});
+		};
+		const renderLine = (data, svgAttrs) => {
+			if (!props.line) return null;
+			let linePoints;
+			if (props.lineType === "joint") linePoints = data.map((p) => ({
+				x: p.cx ?? 0,
+				y: p.cy ?? 0
+			}));
+			else {
+				const { xmin, xmax, a, b } = getLinearRegression(data);
+				linePoints = [{
+					x: xmin,
+					y: a * xmin + b
+				}, {
+					x: xmax,
+					y: a * xmax + b
+				}];
+			}
+			const lineProps = {
+				fill: "none",
+				stroke: svgAttrs.stroke ?? props.fill,
+				...typeof props.line === "object" ? props.line : {},
+				points: linePoints
+			};
+			return createVNode(Layer, {
+				"class": "v-charts-scatter-line",
+				"style": { pointerEvents: "none" }
+			}, { default: () => [createVNode(Curve, mergeProps(lineProps, { "type": props.lineJointType }), null)] });
+		};
+		return () => {
+			if (!shouldRender.value) return null;
+			const svgAttrs = attrs;
+			const data = points.value;
+			const isAnimationActive = props.isAnimationActive;
+			let symbolsContent;
+			if (isAnimationActive && previousPoints !== data) {
+				const prevData = previousPoints;
+				animationId++;
+				symbolsContent = createVNode(Animate, {
+					"key": animationId,
+					"transition": props.transition,
+					"isActive": isAnimationActive
+				}, { default: (t) => {
+					const stepData = t === 1 ? data : data.map((entry, index) => {
+						const prev = prevData && prevData[index];
+						if (prev) return {
+							...entry,
+							cx: entry.cx == null ? void 0 : interpolateNumber(prev.cx ?? 0, entry.cx)(t),
+							cy: entry.cy == null ? void 0 : interpolateNumber(prev.cy ?? 0, entry.cy)(t),
+							size: interpolateNumber(prev.size ?? 0, entry.size ?? 0)(t)
+						};
+						return {
+							...entry,
+							size: interpolateNumber(0, entry.size ?? 0)(t)
+						};
+					});
+					if (t > 0) previousPoints = stepData;
+					return createVNode(Fragment, null, [renderLine(stepData, svgAttrs), renderSymbols(stepData, svgAttrs)]);
+				} });
+			} else {
+				previousPoints = data;
+				symbolsContent = createVNode(Fragment, null, [renderLine(data, svgAttrs), renderSymbols(data, svgAttrs)]);
+			}
+			const content = createVNode(Layer, { "class": "v-charts-scatter" }, { default: () => [
+				slots.default?.(),
+				symbolsContent,
+				props.label && (() => {
+					const labelData = data.map((point) => ({
+						x: point.cx ?? 0,
+						y: point.cy ?? 0,
+						width: 0,
+						height: 0,
+						value: void 0,
+						payload: point.payload
+					}));
+					return createVNode(LabelList, mergeProps(typeof props.label === "object" ? props.label : {}, { "data": labelData }), null);
+				})()
+			] });
+			if (graphicalLayerRef?.value) return createVNode(Teleport, { "to": graphicalLayerRef.value }, _isSlot(content) ? content : { default: () => [content] });
+			return content;
+		};
+	}
+});
+//#endregion
+export { Scatter };

package/dist/es/cartesian/scatter/hooks/useScatter.mjs

@@ -0,0 +1,23 @@
+import { useIsPanorama } from "../../../context/PanoramaContextProvider.mjs";
+import { useAppSelector } from "../../../state/hooks.mjs";
+import { selectScatterPoints } from "../../../state/selectors/scatterSelectors.mjs";
+import { computed } from "vue";
+//#region src/cartesian/scatter/hooks/useScatter.ts
+function useScatter(props) {
+	const isPanorama = useIsPanorama();
+	const scatterSettings = computed(() => ({
+		data: props.data,
+		dataKey: props.dataKey,
+		tooltipType: props.tooltipType,
+		name: props.name ?? String(props.dataKey ?? "")
+	}));
+	const points = useAppSelector((state) => selectScatterPoints(state, props.xAxisId ?? 0, props.yAxisId ?? 0, props.zAxisId ?? 0, scatterSettings.value, isPanorama));
+	return {
+		shouldRender: computed(() => {
+			return !props.hide && points.value != null && points.value.length > 0;
+		}),
+		points
+	};
+}
+//#endregion
+export { useScatter };

package/dist/es/cartesian/useNeedsClip.mjs

@@ -0,0 +1,23 @@
+import { selectXAxisSettings, selectYAxisSettings } from "../state/selectors/axisSelectors.mjs";
+import { useAppSelector } from "../state/hooks.mjs";
+import { computed } from "vue";
+//#region src/cartesian/useNeedsClip.ts
+function useNeedsClip(xAxisId, yAxisId) {
+	const xAxis = useAppSelector((state) => selectXAxisSettings(state, xAxisId));
+	const yAxis = useAppSelector((state) => selectYAxisSettings(state, yAxisId));
+	const needClipX = computed(() => {
+		return xAxis.value && xAxis.value.allowDataOverflow;
+	});
+	const needClipY = computed(() => {
+		return yAxis.value && yAxis.value.allowDataOverflow;
+	});
+	return {
+		needClip: computed(() => {
+			return needClipX.value || needClipY.value;
+		}),
+		needClipX,
+		needClipY
+	};
+}
+//#endregion
+export { useNeedsClip };

package/dist/es/cartesian/utils/get-ticks.mjs

@@ -0,0 +1,118 @@
+import { isNumber, isSsr, isVisible } from "../../utils/validate.mjs";
+import { mathSign } from "../../utils/data.mjs";
+import { getStringSize } from "../../utils/attrs.mjs";
+import { getAngledTickWidth, getNumberIntervalTicks, getTickBoundaries } from "../../utils/tick.mjs";
+import { getEquidistantTicks } from "../../utils/cartesian.mjs";
+//#region src/cartesian/utils/get-ticks.ts
+function getTicksEnd(sign, boundaries, getTickSize, ticks, minTickGap) {
+	const result = (ticks || []).slice();
+	const len = result.length;
+	const { start } = boundaries;
+	let { end } = boundaries;
+	for (let i = len - 1; i >= 0; i--) {
+		let entry = result[i];
+		let size;
+		const getSize = () => {
+			if (size === void 0) size = getTickSize(entry, i);
+			return size;
+		};
+		if (i === len - 1) {
+			const gap = sign * (entry.coordinate + sign * getSize() / 2 - end);
+			result[i] = entry = {
+				...entry,
+				tickCoord: gap > 0 ? entry.coordinate - gap * sign : entry.coordinate
+			};
+		} else result[i] = entry = {
+			...entry,
+			tickCoord: entry.coordinate
+		};
+		if (isVisible(sign, entry.tickCoord, getSize, start, end)) {
+			end = entry.tickCoord - sign * (getSize() / 2 + minTickGap);
+			result[i] = {
+				...entry,
+				isShow: true
+			};
+		}
+	}
+	return result;
+}
+function getTicksStart(sign, boundaries, getTickSize, ticks, minTickGap, preserveEnd) {
+	const result = (ticks || []).slice();
+	const len = result.length;
+	let { start, end } = boundaries;
+	if (preserveEnd) {
+		let tail = ticks[len - 1];
+		const tailSize = getTickSize(tail, len - 1);
+		const tailGap = sign * (tail.coordinate + sign * tailSize / 2 - end);
+		result[len - 1] = tail = {
+			...tail,
+			tickCoord: tailGap > 0 ? tail.coordinate - tailGap * sign : tail.coordinate
+		};
+		if (isVisible(sign, tail.tickCoord, () => tailSize, start, end)) {
+			end = tail.tickCoord - sign * (tailSize / 2 + minTickGap);
+			result[len - 1] = {
+				...tail,
+				isShow: true
+			};
+		}
+	}
+	const count = preserveEnd ? len - 1 : len;
+	for (let i = 0; i < count; i++) {
+		let entry = result[i];
+		let size;
+		const getSize = () => {
+			if (size === void 0) size = getTickSize(entry, i);
+			return size;
+		};
+		if (i === 0) {
+			const gap = sign * (entry.coordinate - sign * getSize() / 2 - start);
+			result[i] = entry = {
+				...entry,
+				tickCoord: gap < 0 ? entry.coordinate - gap * sign : entry.coordinate
+			};
+		} else result[i] = entry = {
+			...entry,
+			tickCoord: entry.coordinate
+		};
+		if (isVisible(sign, entry.tickCoord, getSize, start, end)) {
+			start = entry.tickCoord + sign * (getSize() / 2 + minTickGap);
+			result[i] = {
+				...entry,
+				isShow: true
+			};
+		}
+	}
+	return result;
+}
+function getTicks(props, fontSize, letterSpacing) {
+	const { tick, ticks, viewBox, minTickGap, orientation, interval, tickFormatter, unit, angle } = props;
+	if (!ticks || !ticks.length || !tick) return [];
+	if (isNumber(interval) || isSsr) return getNumberIntervalTicks(ticks, isNumber(interval) ? interval : 0) ?? [];
+	let candidates = [];
+	const sizeKey = orientation === "top" || orientation === "bottom" ? "width" : "height";
+	const unitSize = unit && sizeKey === "width" ? getStringSize(unit, {
+		fontSize,
+		letterSpacing
+	}) : {
+		width: 0,
+		height: 0
+	};
+	const getTickSize = (content, index) => {
+		const value = typeof tickFormatter === "function" ? tickFormatter(content.value, index) : content.value;
+		return sizeKey === "width" ? getAngledTickWidth(getStringSize(value, {
+			fontSize,
+			letterSpacing
+		}), unitSize, angle) : getStringSize(value, {
+			fontSize,
+			letterSpacing
+		})[sizeKey];
+	};
+	const sign = ticks.length >= 2 ? mathSign(ticks[1].coordinate - ticks[0].coordinate) : 1;
+	const boundaries = getTickBoundaries(viewBox, sign, sizeKey);
+	if (interval === "equidistantPreserveStart") return getEquidistantTicks(sign, boundaries, getTickSize, ticks, minTickGap);
+	if (interval === "preserveStart" || interval === "preserveStartEnd") candidates = getTicksStart(sign, boundaries, getTickSize, ticks, minTickGap, interval === "preserveStartEnd");
+	else candidates = getTicksEnd(sign, boundaries, getTickSize, ticks, minTickGap);
+	return candidates.filter((entry) => entry.isShow);
+}
+//#endregion
+export { getTicks };

package/dist/es/cartesian/z-axis/ZAxis.mjs

@@ -0,0 +1,72 @@
+import { implicitZAxis } from "../../state/selectors/axisSelectors.mjs";
+import { useAppDispatch } from "../../state/hooks.mjs";
+import { addZAxis, removeZAxis } from "../../state/cartesianAxisSlice.mjs";
+import { defineComponent, watchEffect } from "vue";
+//#region src/cartesian/z-axis/ZAxis.tsx
+var ZAxis = /* @__PURE__ */ defineComponent({
+	name: "ZAxis",
+	props: {
+		zAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		dataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			default: void 0
+		},
+		type: {
+			type: String,
+			default: implicitZAxis.type
+		},
+		range: {
+			type: Array,
+			default: () => implicitZAxis.range
+		},
+		domain: {
+			type: [Array, String],
+			default: void 0
+		},
+		scale: {
+			type: [String, Function],
+			default: implicitZAxis.scale
+		},
+		name: {
+			type: String,
+			default: void 0
+		},
+		unit: {
+			type: String,
+			default: void 0
+		}
+	},
+	setup(props) {
+		const dispatch = useAppDispatch();
+		watchEffect((onCleanup) => {
+			const settings = {
+				id: props.zAxisId,
+				dataKey: props.dataKey,
+				type: props.type,
+				range: props.range,
+				domain: props.domain,
+				scale: props.scale,
+				name: props.name,
+				unit: props.unit,
+				allowDuplicatedCategory: implicitZAxis.allowDuplicatedCategory,
+				allowDataOverflow: implicitZAxis.allowDataOverflow,
+				reversed: implicitZAxis.reversed,
+				includeHidden: implicitZAxis.includeHidden
+			};
+			dispatch(addZAxis(settings));
+			onCleanup(() => {
+				dispatch(removeZAxis(settings));
+			});
+		});
+		return () => null;
+	}
+});
+//#endregion
+export { ZAxis };

package/dist/es/chart/AreaChart.mjs

@@ -0,0 +1,9 @@
+import { arrayTooltipSearcher } from "../state/optionsSlice.mjs";
+import { generateCategoricalChart } from "./generateCategoricalChart.mjs";
+//#region src/chart/AreaChart.ts
+var AreaChart = generateCategoricalChart({
+	chartName: "AreaChart",
+	tooltipPayloadSearcher: arrayTooltipSearcher
+});
+//#endregion
+export { AreaChart };

package/dist/es/chart/BarChart.mjs

@@ -0,0 +1,10 @@
+import { arrayTooltipSearcher } from "../state/optionsSlice.mjs";
+import { generateCategoricalChart } from "./generateCategoricalChart.mjs";
+var BarChart = generateCategoricalChart({
+	chartName: "BarChart",
+	defaultTooltipEventType: "axis",
+	tooltipPayloadSearcher: arrayTooltipSearcher,
+	validateTooltipEventTypes: ["axis", "item"]
+});
+//#endregion
+export { BarChart };