vccs 0.1.0 → 0.2.0

package/dist/es/polar/radial-bar/RadialBar.mjs

@@ -1,176 +1,197 @@
-import { interpolate as e } from "../../utils/data-utils.mjs";
-import { mouseLeaveItem as t, setActiveMouseOverItemIndex as n } from "../../state/tooltipSlice.mjs";
-import { useAppDispatch as r, useAppSelector as i } from "../../state/hooks.mjs";
-import { Layer as a } from "../../container/Layer.mjs";
-import { provideCartesianLabelListData as o } from "../../context/cartesianLabelListContext.mjs";
-import { LabelList as s } from "../../components/label/LabelList.mjs";
-import { Animate as c } from "../../animation/Animate.mjs";
-import { SetPolarGraphicalItem as l } from "../../state/SetGraphicalItem.mjs";
-import { SetLegendPayload as u } from "../../state/SetLegendPayload.mjs";
-import { SetTooltipEntrySettings as d } from "../../state/SetTooltipEntrySettings.mjs";
-import { Sector as f } from "../../shape/Sector.mjs";
-import { selectRadialBarLegendPayload as p, selectRadialBarSectors as m } from "../../state/selectors/radialBarSelectors.mjs";
-import { RadialBarVueProps as h } from "./type.mjs";
-import { Fragment as g, computed as _, createVNode as v, defineComponent as y, mergeProps as b, ref as x } from "vue";
+import { interpolate } from "../../utils/data-utils.mjs";
+import { mouseLeaveItem, setActiveMouseOverItemIndex } from "../../state/tooltipSlice.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { useIsAnimating } from "../../hooks/useIsAnimating.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { provideCartesianLabelListData } from "../../context/cartesianLabelListContext.mjs";
+import { LabelList } from "../../components/label/LabelList.mjs";
+import { Animate } from "../../animation/Animate.mjs";
+import { SetPolarGraphicalItem } from "../../state/SetGraphicalItem.mjs";
+import { SetLegendPayload } from "../../state/SetLegendPayload.mjs";
+import { SetTooltipEntrySettings } from "../../state/SetTooltipEntrySettings.mjs";
+import { Sector } from "../../shape/Sector.mjs";
+import { selectRadialBarLegendPayload, selectRadialBarSectors } from "../../state/selectors/radialBarSelectors.mjs";
+import { RadialBarVueProps } from "./type.mjs";
+import { Fragment, computed, createVNode, defineComponent, mergeProps } from "vue";
 //#region src/polar/radial-bar/RadialBar.tsx
-function S(e, t) {
-	return t;
+function getLegendItemColor(stroke, fill) {
+	return fill;
 }
-var C = /* @__PURE__ */ y({
+var RadialBar = /* @__PURE__ */ defineComponent({
 	name: "RadialBar",
-	props: h,
-	inheritAttrs: !1,
-	setup(h, { slots: y }) {
-		let C = r(), w = _(() => ({
-			dataKey: h.dataKey,
-			minPointSize: h.minPointSize,
-			stackId: h.stackId,
-			maxBarSize: h.maxBarSize,
-			barSize: h.barSize
+	props: RadialBarVueProps,
+	inheritAttrs: false,
+	setup(props, { slots }) {
+		const dispatch = useAppDispatch();
+		const radialBarSettings = computed(() => ({
+			dataKey: props.dataKey,
+			minPointSize: props.minPointSize,
+			stackId: props.stackId,
+			maxBarSize: props.maxBarSize,
+			barSize: props.barSize
 		}));
-		l(_(() => ({
+		SetPolarGraphicalItem(computed(() => ({
 			type: "radialBar",
 			data: void 0,
-			dataKey: h.dataKey,
-			hide: h.hide,
-			angleAxisId: h.angleAxisId,
-			radiusAxisId: h.radiusAxisId,
-			barSize: h.barSize,
-			stackId: h.stackId,
-			minPointSize: h.minPointSize,
-			maxBarSize: h.maxBarSize
+			dataKey: props.dataKey,
+			hide: props.hide,
+			angleAxisId: props.angleAxisId,
+			radiusAxisId: props.radiusAxisId,
+			barSize: props.barSize,
+			stackId: props.stackId,
+			minPointSize: props.minPointSize,
+			maxBarSize: props.maxBarSize
 		})));
-		let T = i((e) => p(e, h.legendType));
-		u(_(() => T.value ?? []));
-		let E = i((e) => m(e, h.radiusAxisId, h.angleAxisId, w.value));
-		d({
-			fn: (e) => e,
-			args: _(() => ({
+		const legendPayload = useAppSelector((state) => selectRadialBarLegendPayload(state, props.legendType));
+		SetLegendPayload(computed(() => legendPayload.value ?? []));
+		const sectors = useAppSelector((state) => selectRadialBarSectors(state, props.radiusAxisId, props.angleAxisId, radialBarSettings.value));
+		SetTooltipEntrySettings({
+			fn: (v) => v,
+			args: computed(() => ({
 				dataDefinedOnItem: void 0,
 				positions: void 0,
 				settings: {
-					dataKey: h.dataKey,
+					dataKey: props.dataKey,
 					nameKey: void 0,
-					name: h.name ?? String(h.dataKey ?? ""),
-					hide: h.hide,
-					type: h.tooltipType,
-					color: S(h.stroke, h.fill),
-					fill: h.fill,
-					stroke: h.stroke,
+					name: props.name ?? String(props.dataKey ?? ""),
+					hide: props.hide,
+					type: props.tooltipType,
+					color: getLegendItemColor(props.stroke, props.fill),
+					fill: props.fill,
+					stroke: props.stroke,
 					unit: ""
 				}
 			}))
 		});
-		let D = x(h.isAnimationActive);
-		o(_(() => {
-			if (h.isAnimationActive && D.value) return;
-			let e = E.value;
-			if (!e) return;
-			let t = h.fill;
-			return e.map((e) => ({
-				value: e.value ?? "",
-				payload: e.payload,
+		const isAnimating = useIsAnimating(() => props.isAnimationActive);
+		provideCartesianLabelListData(computed(() => {
+			if (props.isAnimationActive && isAnimating.value) return void 0;
+			const data = sectors.value;
+			if (!data) return void 0;
+			const defaultFill = props.fill;
+			return data.map((sector) => ({
+				value: sector.value ?? "",
+				payload: sector.payload,
 				parentViewBox: void 0,
-				fill: e.fill ?? t,
-				cx: e.cx,
-				cy: e.cy,
-				innerRadius: e.innerRadius,
-				outerRadius: e.outerRadius,
-				startAngle: e.startAngle,
-				endAngle: e.endAngle,
-				clockWise: !1
+				fill: sector.fill ?? defaultFill,
+				cx: sector.cx,
+				cy: sector.cy,
+				innerRadius: sector.innerRadius,
+				outerRadius: sector.outerRadius,
+				startAngle: sector.startAngle,
+				endAngle: sector.endAngle,
+				clockWise: false
 			}));
 		}));
-		let O = null, k = 0, A, j = (e) => {
-			let r = h.fill, i = h.stroke, o = !!h.background, s = typeof h.background == "object" ? h.background : {};
-			return v(a, { class: "v-charts-radial-bar" }, { default: () => [o && e.map((e, t) => {
-				if (!e.background) return null;
-				let n = e.background;
-				return v(f, b({
-					key: `bg-${t}`,
-					cx: n.cx,
-					cy: n.cy,
-					innerRadius: n.innerRadius,
-					outerRadius: n.outerRadius,
-					startAngle: n.startAngle,
-					endAngle: n.endAngle,
-					cornerRadius: h.cornerRadius,
-					forceCornerRadius: h.forceCornerRadius,
-					cornerIsExternal: h.cornerIsExternal,
-					fill: "#eee",
+		let prevSectors = null;
+		let animationId = 0;
+		let lastSectors;
+		const renderSectors = (sectorData) => {
+			const defaultFill = props.fill;
+			const defaultStroke = props.stroke;
+			const showBackground = !!props.background;
+			const backgroundProps = typeof props.background === "object" ? props.background : {};
+			return createVNode(Layer, { "class": "v-charts-radial-bar" }, { default: () => [showBackground && sectorData.map((sector, i) => {
+				if (!sector.background) return null;
+				const bg = sector.background;
+				return createVNode(Sector, mergeProps({
+					"key": `bg-${i}`,
+					"cx": bg.cx,
+					"cy": bg.cy,
+					"innerRadius": bg.innerRadius,
+					"outerRadius": bg.outerRadius,
+					"startAngle": bg.startAngle,
+					"endAngle": bg.endAngle,
+					"cornerRadius": props.cornerRadius,
+					"forceCornerRadius": props.forceCornerRadius,
+					"cornerIsExternal": props.cornerIsExternal,
+					"fill": "#eee",
 					"fill-opacity": .5
-				}, s), null);
-			}), e.map((e, a) => {
-				if (e.innerRadius == null || e.outerRadius == null || e.startAngle == null || e.endAngle == null) return null;
-				let o = e.fill ?? r, s = () => {
-					C(n({
-						activeIndex: String(a),
-						activeDataKey: h.dataKey
+				}, backgroundProps), null);
+			}), sectorData.map((sector, i) => {
+				if (sector.innerRadius == null || sector.outerRadius == null || sector.startAngle == null || sector.endAngle == null) return null;
+				const sectorFill = sector.fill ?? defaultFill;
+				const onMouseenter = () => {
+					dispatch(setActiveMouseOverItemIndex({
+						activeIndex: String(i),
+						activeDataKey: props.dataKey
 					}));
-				}, c = () => {
-					C(t());
 				};
-				return v(f, {
-					key: `sector-${a}`,
-					cx: e.cx,
-					cy: e.cy,
-					innerRadius: e.innerRadius,
-					outerRadius: e.outerRadius,
-					startAngle: e.startAngle,
-					endAngle: e.endAngle,
-					cornerRadius: h.cornerRadius,
-					forceCornerRadius: h.forceCornerRadius,
-					cornerIsExternal: h.cornerIsExternal,
-					fill: o,
-					"fill-opacity": h.fillOpacity,
-					stroke: i ?? o,
-					"stroke-width": h.strokeWidth,
-					"stroke-dasharray": h.strokeDasharray,
-					onMouseenter: s,
-					onMouseleave: c
+				const onMouseleave = () => {
+					dispatch(mouseLeaveItem());
+				};
+				return createVNode(Sector, {
+					"key": `sector-${i}`,
+					"cx": sector.cx,
+					"cy": sector.cy,
+					"innerRadius": sector.innerRadius,
+					"outerRadius": sector.outerRadius,
+					"startAngle": sector.startAngle,
+					"endAngle": sector.endAngle,
+					"cornerRadius": props.cornerRadius,
+					"forceCornerRadius": props.forceCornerRadius,
+					"cornerIsExternal": props.cornerIsExternal,
+					"fill": sectorFill,
+					"fill-opacity": props.fillOpacity,
+					"stroke": defaultStroke ?? sectorFill,
+					"stroke-width": props.strokeWidth,
+					"stroke-dasharray": props.strokeDasharray,
+					"onMouseenter": onMouseenter,
+					"onMouseleave": onMouseleave
 				}, null);
 			})] });
 		};
 		return () => {
-			if (h.hide) return null;
-			let t = E.value;
-			if (t == null || t.length === 0) return null;
-			let n = t, r = !D.value && h.label ? v(s, typeof h.label == "object" ? h.label : {}, null) : null, i = D.value ? null : y.default?.();
-			if (!h.isAnimationActive) return O = n, v(g, null, [
-				j(n),
-				r,
-				i
-			]);
-			let a = O;
-			return t !== A && (k++, A = t), v(g, null, [
-				v(c, {
-					key: k,
-					isActive: !0,
-					onAnimationStart: () => {
-						D.value = !0;
+			if (props.hide) return null;
+			const data = sectors.value;
+			if (data == null || data.length === 0) return null;
+			const sectorData = data;
+			const labelEl = !isAnimating.value && props.label ? createVNode(LabelList, typeof props.label === "object" ? props.label : {}, null) : null;
+			const slotChildren = !isAnimating.value ? slots.default?.() : null;
+			if (!props.isAnimationActive) {
+				prevSectors = sectorData;
+				return createVNode(Fragment, null, [
+					renderSectors(sectorData),
+					labelEl,
+					slotChildren
+				]);
+			}
+			const prevSects = prevSectors;
+			if (data !== lastSectors) {
+				animationId++;
+				lastSectors = data;
+			}
+			return createVNode(Fragment, null, [
+				createVNode(Animate, {
+					"key": animationId,
+					"isActive": true,
+					"onAnimationStart": () => {
+						isAnimating.value = true;
 					},
-					onAnimationEnd: () => {
-						D.value = !1;
+					"onAnimationEnd": () => {
+						isAnimating.value = false;
 					}
 				}, { default: (t) => {
-					let r = t === 1 ? n : n.map((n, r) => {
-						let i = a && a[r];
-						return i ? {
-							...n,
-							startAngle: i.startAngle != null && n.startAngle != null ? e(i.startAngle, n.startAngle, t) : n.startAngle,
-							endAngle: e(i.endAngle ?? 0, n.endAngle, t)
-						} : {
-							...n,
-							endAngle: e(n.startAngle ?? 0, n.endAngle, t)
+					const stepSectors = t === 1 ? sectorData : sectorData.map((sector, i) => {
+						const prev = prevSects && prevSects[i];
+						if (!prev) return {
+							...sector,
+							endAngle: interpolate(sector.startAngle ?? 0, sector.endAngle, t)
+						};
+						return {
+							...sector,
+							startAngle: prev.startAngle != null && sector.startAngle != null ? interpolate(prev.startAngle, sector.startAngle, t) : sector.startAngle,
+							endAngle: interpolate(prev.endAngle ?? 0, sector.endAngle, t)
 						};
 					});
-					return t > 0 && (O = r), j(r);
+					if (t > 0) prevSectors = stepSectors;
+					return renderSectors(stepSectors);
 				} }),
-				r,
-				i
+				labelEl,
+				slotChildren
 			]);
 		};
 	}
 });
 //#endregion
-export { C as RadialBar };
+export { RadialBar };

package/dist/es/polar/radial-bar/type.mjs

@@ -1,12 +1,12 @@
 //#region src/polar/radial-bar/type.ts
-var e = {
+var RadialBarVueProps = {
 	dataKey: {
 		type: [
 			String,
 			Number,
 			Function
 		],
-		required: !0
+		required: true
 	},
 	name: {
 		type: String,
@@ -42,7 +42,7 @@ var e = {
 	},
 	hide: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	legendType: {
 		type: String,
@@ -54,15 +54,15 @@ var e = {
 	},
 	background: {
 		type: [Boolean, Object],
-		default: !1
+		default: false
 	},
 	label: {
 		type: [Boolean, Object],
-		default: !1
+		default: false
 	},
 	isAnimationActive: {
 		type: Boolean,
-		default: !0
+		default: true
 	},
 	minPointSize: {
 		type: Number,
@@ -86,12 +86,12 @@ var e = {
 	},
 	forceCornerRadius: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	cornerIsExternal: {
 		type: Boolean,
-		default: !1
+		default: false
 	}
 };
 //#endregion
-export { e as RadialBarVueProps };
+export { RadialBarVueProps };

package/dist/es/shape/Cross.mjs

@@ -1,15 +1,16 @@
-import { isNumber as e } from "../utils/validate.mjs";
-import { createVNode as t, mergeProps as n } from "vue";
+import { isNumber } from "../utils/validate.mjs";
+import { createVNode, mergeProps } from "vue";
 //#region src/shape/Cross.tsx
-function r(e, t, n, r, i, a) {
-	return `M${e},${i}v${r}M${a},${t}h${n}`;
+function getCrossPath(x, y, width, height, top, left) {
+	return `M${x},${top}v${height}M${left},${y}h${width}`;
 }
-function i(i) {
-	let { x: a = 0, y: o = 0, top: s = 0, left: c = 0, width: l = 0, height: u = 0, ...d } = i;
-	return !e(a) || !e(o) || !e(l) || !e(u) || !e(s) || !e(c) ? null : t("path", n(d, {
-		class: "v-charts-cross",
-		d: r(a, o, l, u, s, c)
+function Cross(props) {
+	const { x = 0, y = 0, top = 0, left = 0, width = 0, height = 0, ...rest } = props;
+	if (!isNumber(x) || !isNumber(y) || !isNumber(width) || !isNumber(height) || !isNumber(top) || !isNumber(left)) return null;
+	return createVNode("path", mergeProps(rest, {
+		"class": "v-charts-cross",
+		"d": getCrossPath(x, y, width, height, top, left)
 	}), null);
 }
 //#endregion
-export { i as Cross };
+export { Cross };

package/dist/es/shape/Curve.mjs

@@ -1,40 +1,61 @@
-import { isNumber as e } from "../utils/validate.mjs";
-import { computed as t, createVNode as n, defineComponent as r, mergeProps as i } from "vue";
-import { area as a, curveBasis as o, curveBasisClosed as s, curveBasisOpen as c, curveBumpX as l, curveBumpY as u, curveLinear as d, curveLinearClosed as f, curveMonotoneX as p, curveMonotoneY as m, curveNatural as h, curveStep as g, curveStepAfter as _, curveStepBefore as v, line as y } from "victory-vendor/d3-shape";
-import { upperFirst as b } from "es-toolkit/compat";
+import { isNumber } from "../utils/validate.mjs";
+import { computed, createVNode, defineComponent, mergeProps } from "vue";
+import { area, curveBasis, curveBasisClosed, curveBasisOpen, curveBumpX, curveBumpY, curveLinear, curveLinearClosed, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore, line } from "victory-vendor/d3-shape";
+import { upperFirst } from "es-toolkit/compat";
 //#region src/shape/Curve.tsx
-var x = {
-	curveBasisClosed: s,
-	curveBasisOpen: c,
-	curveBasis: o,
-	curveBumpX: l,
-	curveBumpY: u,
-	curveLinearClosed: f,
-	curveLinear: d,
-	curveMonotoneX: p,
-	curveMonotoneY: m,
-	curveNatural: h,
-	curveStep: g,
-	curveStepAfter: _,
-	curveStepBefore: v
-}, S = (e) => e.x === +e.x && e.y === +e.y, C = (e) => e.x, w = (e) => e.y;
-function T(e, t) {
-	if (typeof e == "function") return e;
-	let n = `curve${b(e)}`;
-	return (n === "curveMonotone" || n === "curveBump") && t ? x[`${n}${t === "vertical" ? "Y" : "X"}`] : x[n] || d;
+/**
+* @fileOverview Curve
+*/
+var CURVE_FACTORIES = {
+	curveBasisClosed,
+	curveBasisOpen,
+	curveBasis,
+	curveBumpX,
+	curveBumpY,
+	curveLinearClosed,
+	curveLinear,
+	curveMonotoneX,
+	curveMonotoneY,
+	curveNatural,
+	curveStep,
+	curveStepAfter,
+	curveStepBefore
+};
+var defined = (p) => p.x === +p.x && p.y === +p.y;
+var getX = (p) => p.x;
+var getY = (p) => p.y;
+function getCurveFactory(type, layout) {
+	if (typeof type === "function") return type;
+	const name = `curve${upperFirst(type)}`;
+	if ((name === "curveMonotone" || name === "curveBump") && layout) return CURVE_FACTORIES[`${name}${layout === "vertical" ? "Y" : "X"}`];
+	return CURVE_FACTORIES[name] || curveLinear;
 }
-function E({ type: t = "linear", points: n = [], baseLine: r, layout: i, connectNulls: o = !1 }) {
-	let s = T(t, i), c = o ? n.filter((e) => S(e)) : n, l;
-	if (Array.isArray(r)) {
-		let e = o ? r.filter((e) => S(e)) : r, t = c.map((t, n) => ({
-			...t,
-			base: e[n]
+/**
+* Calculate the path of curve. Returns null if points is an empty array.
+* @return path or null
+*/
+function getPath({ type = "linear", points = [], baseLine, layout, connectNulls = false }) {
+	const curveFactory = getCurveFactory(type, layout);
+	const formatPoints = connectNulls ? points.filter((entry) => defined(entry)) : points;
+	let lineFunction;
+	if (Array.isArray(baseLine)) {
+		const formatBaseLine = connectNulls ? baseLine.filter((base) => defined(base)) : baseLine;
+		const areaPoints = formatPoints.map((entry, index) => ({
+			...entry,
+			base: formatBaseLine[index]
 		}));
-		return l = i === "vertical" ? a().y(w).x1(C).x0((e) => e.base.x) : a().x(C).y1(w).y0((e) => e.base.y), l.defined(S).curve(s), l(t);
+		if (layout === "vertical") lineFunction = area().y(getY).x1(getX).x0((d) => d.base.x);
+		else lineFunction = area().x(getX).y1(getY).y0((d) => d.base.y);
+		lineFunction.defined(defined).curve(curveFactory);
+		return lineFunction(areaPoints);
 	}
-	return l = i === "vertical" && e(r) ? a().y(w).x1(C).x0(r) : e(r) ? a().x(C).y1(w).y0(r) : y().x(C).y(w), l.defined(S).curve(s), l(c);
+	if (layout === "vertical" && isNumber(baseLine)) lineFunction = area().y(getY).x1(getX).x0(baseLine);
+	else if (isNumber(baseLine)) lineFunction = area().x(getX).y1(getY).y0(baseLine);
+	else lineFunction = line().x(getX).y(getY);
+	lineFunction.defined(defined).curve(curveFactory);
+	return lineFunction(formatPoints);
 }
-var D = {
+var CurveVueProps = {
 	type: { type: [String, Function] },
 	layout: { type: String },
 	baseLine: { type: [Number, Array] },
@@ -42,19 +63,24 @@ var D = {
 	connectNulls: { type: Boolean },
 	path: { type: String },
 	class: { type: [String, Array] }
-}, O = /* @__PURE__ */ r({
+};
+var Curve = /* @__PURE__ */ defineComponent({
 	name: "Curve",
-	props: D,
-	inheritAttrs: !1,
-	setup(e, { attrs: r }) {
-		let a = t(() => {
-			if (!((!e.points || !e.points.length) && !e.path)) return e.points && e.points.length ? E(e) : e.path;
+	props: CurveVueProps,
+	inheritAttrs: false,
+	setup(props, { attrs }) {
+		const realPath = computed(() => {
+			if ((!props.points || !props.points.length) && !props.path) return;
+			return props.points && props.points.length ? getPath(props) : props.path;
 		});
-		return () => a.value === null && !e.path ? null : n("path", i(r, {
-			class: ["v-charts-curve", e.class],
-			d: a.value
-		}), null);
+		return () => {
+			if (realPath.value === null && !props.path) return null;
+			return createVNode("path", mergeProps(attrs, {
+				"class": ["v-charts-curve", props.class],
+				"d": realPath.value
+			}), null);
+		};
 	}
 });
 //#endregion
-export { O as Curve, D as CurveVueProps, E as getPath };
+export { Curve, CurveVueProps, getPath };

package/dist/es/shape/Dot.mjs

@@ -1,5 +1,5 @@
-import { createVNode as e, defineComponent as t } from "vue";
-var n = /* @__PURE__ */ t({
+import { createVNode, defineComponent } from "vue";
+var Dot = /* @__PURE__ */ defineComponent({
 	name: "Dot",
 	props: {
 		cx: { type: [Number, String] },
@@ -7,17 +7,18 @@ var n = /* @__PURE__ */ t({
 		r: { type: [Number, String] },
 		clipDot: { type: Boolean }
 	},
-	setup(t) {
+	setup(props) {
 		return () => {
-			let { cx: n, cy: r, r: i } = t;
-			return n === +n && r === +r && i === +i ? e("circle", {
-				class: ["v-charts-dot", t.class],
-				cx: n,
-				cy: r,
-				r: i
-			}, null) : null;
+			const { cx, cy, r } = props;
+			if (cx === +cx && cy === +cy && r === +r) return createVNode("circle", {
+				"class": ["v-charts-dot", props.class],
+				"cx": cx,
+				"cy": cy,
+				"r": r
+			}, null);
+			return null;
 		};
 	}
 });
 //#endregion
-export { n as Dot };
+export { Dot };