vccs 0.1.0 → 0.3.0

package/dist/es/shape/Rectangle.mjs

@@ -1,10 +1,9 @@
-import { createVNode as e, defineComponent as t, mergeProps as n } from "vue";
+import { createVNode, defineComponent, mergeProps } from "vue";
 //#region src/shape/Rectangle.tsx
-var r = {
-	className: {
-		type: String,
-		default: void 0
-	},
+/**
+* @fileOverview Rectangle
+*/
+var RectangleVueProps = {
 	x: {
 		type: Number,
 		default: 0
@@ -26,43 +25,55 @@ var r = {
 		default: void 0
 	}
 };
-function i(e, t, n, r, i) {
-	let a = Math.min(Math.abs(n) / 2, Math.abs(r) / 2), o = r >= 0 ? 1 : -1, s = n >= 0 ? 1 : -1, c = r >= 0 && n >= 0 || r < 0 && n < 0 ? 1 : 0;
-	if (a > 0 && Array.isArray(i)) {
-		let l = [
+function getRectanglePath(x, y, width, height, radius) {
+	const maxRadius = Math.min(Math.abs(width) / 2, Math.abs(height) / 2);
+	const ySign = height >= 0 ? 1 : -1;
+	const xSign = width >= 0 ? 1 : -1;
+	const clockWise = height >= 0 && width >= 0 || height < 0 && width < 0 ? 1 : 0;
+	if (maxRadius > 0 && Array.isArray(radius)) {
+		const newRadius = [
 			0,
 			0,
 			0,
 			0
 		];
-		for (let e = 0; e < 4; e++) {
-			let t = i[e] ?? 0;
-			l[e] = t > a ? a : t;
+		for (let i = 0; i < 4; i++) {
+			const r = radius[i] ?? 0;
+			newRadius[i] = r > maxRadius ? maxRadius : r;
 		}
-		let u = `M${e},${t + o * l[0]}`;
-		return l[0] > 0 && (u += `A ${l[0]},${l[0]},0,0,${c},${e + s * l[0]},${t}`), u += `L ${e + n - s * l[1]},${t}`, l[1] > 0 && (u += `A ${l[1]},${l[1]},0,0,${c},${e + n},${t + o * l[1]}`), u += `L ${e + n},${t + r - o * l[2]}`, l[2] > 0 && (u += `A ${l[2]},${l[2]},0,0,${c},${e + n - s * l[2]},${t + r}`), u += `L ${e + s * l[3]},${t + r}`, l[3] > 0 && (u += `A ${l[3]},${l[3]},0,0,${c},${e},${t + r - o * l[3]}`), u += "Z", u;
+		let path = `M${x},${y + ySign * newRadius[0]}`;
+		if (newRadius[0] > 0) path += `A ${newRadius[0]},${newRadius[0]},0,0,${clockWise},${x + xSign * newRadius[0]},${y}`;
+		path += `L ${x + width - xSign * newRadius[1]},${y}`;
+		if (newRadius[1] > 0) path += `A ${newRadius[1]},${newRadius[1]},0,0,${clockWise},${x + width},${y + ySign * newRadius[1]}`;
+		path += `L ${x + width},${y + height - ySign * newRadius[2]}`;
+		if (newRadius[2] > 0) path += `A ${newRadius[2]},${newRadius[2]},0,0,${clockWise},${x + width - xSign * newRadius[2]},${y + height}`;
+		path += `L ${x + xSign * newRadius[3]},${y + height}`;
+		if (newRadius[3] > 0) path += `A ${newRadius[3]},${newRadius[3]},0,0,${clockWise},${x},${y + height - ySign * newRadius[3]}`;
+		path += "Z";
+		return path;
 	}
-	if (a > 0 && typeof i == "number" && i > 0) {
-		let l = Math.min(a, i);
-		return `M ${e},${t + o * l}A ${l},${l},0,0,${c},${e + s * l},${t}L ${e + n - s * l},${t}A ${l},${l},0,0,${c},${e + n},${t + o * l}L ${e + n},${t + r - o * l}A ${l},${l},0,0,${c},${e + n - s * l},${t + r}L ${e + s * l},${t + r}A ${l},${l},0,0,${c},${e},${t + r - o * l} Z`;
+	if (maxRadius > 0 && typeof radius === "number" && radius > 0) {
+		const r = Math.min(maxRadius, radius);
+		return `M ${x},${y + ySign * r}A ${r},${r},0,0,${clockWise},${x + xSign * r},${y}L ${x + width - xSign * r},${y}A ${r},${r},0,0,${clockWise},${x + width},${y + ySign * r}L ${x + width},${y + height - ySign * r}A ${r},${r},0,0,${clockWise},${x + width - xSign * r},${y + height}L ${x + xSign * r},${y + height}A ${r},${r},0,0,${clockWise},${x},${y + height - ySign * r} Z`;
 	}
-	return `M ${e},${t} h ${n} v ${r} h ${-n} Z`;
+	return `M ${x},${y} h ${width} v ${height} h ${-width} Z`;
 }
-var a = /* @__PURE__ */ t({
+var Rectangle = /* @__PURE__ */ defineComponent({
 	name: "Rectangle",
-	props: r,
-	setup(t, { attrs: r }) {
+	props: RectangleVueProps,
+	setup(props, { attrs }) {
 		return () => {
-			let { x: a, y: o, width: s, height: c, radius: l } = t;
-			return a !== +a || o !== +o || s !== +s || c !== +c || s === 0 || c === 0 ? null : e("path", n(r, {
-				x: a,
-				y: o,
-				width: s,
-				height: c,
-				d: i(a, o, s, c, l)
+			const { x, y, width, height, radius } = props;
+			if (x !== +x || y !== +y || width !== +width || height !== +height || width === 0 || height === 0) return null;
+			return createVNode("path", mergeProps(attrs, {
+				"x": x,
+				"y": y,
+				"width": width,
+				"height": height,
+				"d": getRectanglePath(x, y, width, height, radius)
 			}), null);
 		};
 	}
 });
 //#endregion
-export { a as Rectangle };
+export { Rectangle };

package/dist/es/shape/Sector.mjs

@@ -1,8 +1,12 @@
-import { RADIAN as e, polarToCartesian as t } from "../utils/polar.mjs";
-import { getPercentValue as n, mathSign as r } from "../utils/data.mjs";
-import { createVNode as i, defineComponent as a, mergeProps as o } from "vue";
+import { classProp } from "../types/common.mjs";
+import { RADIAN, polarToCartesian } from "../utils/polar.mjs";
+import { getPercentValue, mathSign } from "../utils/data.mjs";
+import { createVNode, defineComponent, mergeProps } from "vue";
 //#region src/shape/Sector.tsx
-var s = {
+/**
+* @fileOverview Sector - SVG arc path shape for pie/donut chart segments
+*/
+var SectorVueProps = {
 	cx: {
 		type: Number,
 		default: 0
@@ -33,96 +37,118 @@ var s = {
 	},
 	forceCornerRadius: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
 	cornerIsExternal: {
 		type: Boolean,
-		default: !1
+		default: false
 	},
-	className: {
-		type: String,
-		default: void 0
-	}
+	class: classProp
 };
-function c(e, t) {
-	return r(t - e) * Math.min(Math.abs(t - e), 359.999);
+function getDeltaAngle(startAngle, endAngle) {
+	return mathSign(endAngle - startAngle) * Math.min(Math.abs(endAngle - startAngle), 359.999);
 }
-function l({ cx: n, cy: r, radius: i, angle: a, sign: o, isExternal: s, cornerRadius: c, cornerIsExternal: l }) {
-	let u = c * (s ? 1 : -1) + i, d = Math.asin(c / u) / e, f = l ? a : a + o * d, p = t(n, r, u, f), m = t(n, r, i, f), h = l ? a - o * d : a;
+function getTangentCircle({ cx, cy, radius, angle, sign, isExternal, cornerRadius, cornerIsExternal }) {
+	const centerRadius = cornerRadius * (isExternal ? 1 : -1) + radius;
+	const theta = Math.asin(cornerRadius / centerRadius) / RADIAN;
+	const centerAngle = cornerIsExternal ? angle : angle + sign * theta;
+	const center = polarToCartesian(cx, cy, centerRadius, centerAngle);
+	const circleTangency = polarToCartesian(cx, cy, radius, centerAngle);
+	const lineTangencyAngle = cornerIsExternal ? angle - sign * theta : angle;
 	return {
-		center: p,
-		circleTangency: m,
-		lineTangency: t(n, r, u * Math.cos(d * e), h),
-		theta: d
+		center,
+		circleTangency,
+		lineTangency: polarToCartesian(cx, cy, centerRadius * Math.cos(theta * RADIAN), lineTangencyAngle),
+		theta
 	};
 }
-function u(e, n, r, i, a, o) {
-	let s = c(a, o), l = a + s, u = t(e, n, i, a), d = t(e, n, i, l), f = +(Math.abs(s) > 180), p = +(a > l), m = `M ${u.x},${u.y} A ${i},${i},0,${f},${p},${d.x},${d.y}`;
-	if (r > 0) {
-		let i = t(e, n, r, a), o = t(e, n, r, l), s = +(a <= l);
-		m += ` L ${o.x},${o.y} A ${r},${r},0,${f},${s},${i.x},${i.y} Z`;
-	} else m += ` L ${e},${n} Z`;
-	return m;
+function getSectorPath(cx, cy, innerRadius, outerRadius, startAngle, endAngle) {
+	const angle = getDeltaAngle(startAngle, endAngle);
+	const tempEndAngle = startAngle + angle;
+	const outerStart = polarToCartesian(cx, cy, outerRadius, startAngle);
+	const outerEnd = polarToCartesian(cx, cy, outerRadius, tempEndAngle);
+	const largeArcFlag = +(Math.abs(angle) > 180);
+	const sweepOuter = +(startAngle > tempEndAngle);
+	let path = `M ${outerStart.x},${outerStart.y} A ${outerRadius},${outerRadius},0,${largeArcFlag},${sweepOuter},${outerEnd.x},${outerEnd.y}`;
+	if (innerRadius > 0) {
+		const innerStart = polarToCartesian(cx, cy, innerRadius, startAngle);
+		const innerEnd = polarToCartesian(cx, cy, innerRadius, tempEndAngle);
+		const sweepInner = +(startAngle <= tempEndAngle);
+		path += ` L ${innerEnd.x},${innerEnd.y} A ${innerRadius},${innerRadius},0,${largeArcFlag},${sweepInner},${innerStart.x},${innerStart.y} Z`;
+	} else path += ` L ${cx},${cy} Z`;
+	return path;
 }
-function d(e, t, n, i, a, o, s, c, d) {
-	let f = r(d - c), { circleTangency: p, lineTangency: m, theta: h } = l({
-		cx: e,
-		cy: t,
-		radius: i,
-		angle: c,
-		sign: f,
-		cornerRadius: a,
-		cornerIsExternal: s
-	}), { circleTangency: g, lineTangency: _, theta: v } = l({
-		cx: e,
-		cy: t,
-		radius: i,
-		angle: d,
-		sign: -f,
-		cornerRadius: a,
-		cornerIsExternal: s
-	}), y = s ? Math.abs(c - d) : Math.abs(c - d) - h - v;
-	if (y < 0) return o ? `M ${m.x},${m.y} a${a},${a},0,0,1,${a * 2},0 a${a},${a},0,0,1,${-a * 2},0` : u(e, t, n, i, c, d);
-	let b = `M ${m.x},${m.y} A${a},${a},0,0,${+(f < 0)},${p.x},${p.y} A${i},${i},0,${+(y > 180)},${+(f < 0)},${g.x},${g.y} A${a},${a},0,0,${+(f < 0)},${_.x},${_.y}`;
-	if (n > 0) {
-		let { circleTangency: r, lineTangency: i, theta: o } = l({
-			cx: e,
-			cy: t,
-			radius: n,
-			angle: c,
-			sign: f,
-			isExternal: !0,
-			cornerRadius: a,
-			cornerIsExternal: s
-		}), { circleTangency: u, lineTangency: p, theta: m } = l({
-			cx: e,
-			cy: t,
-			radius: n,
-			angle: d,
-			sign: -f,
-			isExternal: !0,
-			cornerRadius: a,
-			cornerIsExternal: s
-		}), h = s ? Math.abs(c - d) : Math.abs(c - d) - o - m;
-		if (h < 0 && a === 0) return `${b}L${e},${t}Z`;
-		b += `L${p.x},${p.y} A${a},${a},0,0,${+(f < 0)},${u.x},${u.y} A${n},${n},0,${+(h > 180)},${+(f > 0)},${r.x},${r.y} A${a},${a},0,0,${+(f < 0)},${i.x},${i.y}Z`;
-	} else b += `L${e},${t}Z`;
-	return b;
+function getSectorWithCorner(cx, cy, innerRadius, outerRadius, cornerRadius, forceCornerRadius, cornerIsExternal, startAngle, endAngle) {
+	const sign = mathSign(endAngle - startAngle);
+	const { circleTangency: soct, lineTangency: solt, theta: sot } = getTangentCircle({
+		cx,
+		cy,
+		radius: outerRadius,
+		angle: startAngle,
+		sign,
+		cornerRadius,
+		cornerIsExternal
+	});
+	const { circleTangency: eoct, lineTangency: eolt, theta: eot } = getTangentCircle({
+		cx,
+		cy,
+		radius: outerRadius,
+		angle: endAngle,
+		sign: -sign,
+		cornerRadius,
+		cornerIsExternal
+	});
+	const outerArcAngle = cornerIsExternal ? Math.abs(startAngle - endAngle) : Math.abs(startAngle - endAngle) - sot - eot;
+	if (outerArcAngle < 0) {
+		if (forceCornerRadius) return `M ${solt.x},${solt.y} a${cornerRadius},${cornerRadius},0,0,1,${cornerRadius * 2},0 a${cornerRadius},${cornerRadius},0,0,1,${-cornerRadius * 2},0`;
+		return getSectorPath(cx, cy, innerRadius, outerRadius, startAngle, endAngle);
+	}
+	let path = `M ${solt.x},${solt.y} A${cornerRadius},${cornerRadius},0,0,${+(sign < 0)},${soct.x},${soct.y} A${outerRadius},${outerRadius},0,${+(outerArcAngle > 180)},${+(sign < 0)},${eoct.x},${eoct.y} A${cornerRadius},${cornerRadius},0,0,${+(sign < 0)},${eolt.x},${eolt.y}`;
+	if (innerRadius > 0) {
+		const { circleTangency: sict, lineTangency: silt, theta: sit } = getTangentCircle({
+			cx,
+			cy,
+			radius: innerRadius,
+			angle: startAngle,
+			sign,
+			isExternal: true,
+			cornerRadius,
+			cornerIsExternal
+		});
+		const { circleTangency: eict, lineTangency: eilt, theta: eit } = getTangentCircle({
+			cx,
+			cy,
+			radius: innerRadius,
+			angle: endAngle,
+			sign: -sign,
+			isExternal: true,
+			cornerRadius,
+			cornerIsExternal
+		});
+		const innerArcAngle = cornerIsExternal ? Math.abs(startAngle - endAngle) : Math.abs(startAngle - endAngle) - sit - eit;
+		if (innerArcAngle < 0 && cornerRadius === 0) return `${path}L${cx},${cy}Z`;
+		path += `L${eilt.x},${eilt.y} A${cornerRadius},${cornerRadius},0,0,${+(sign < 0)},${eict.x},${eict.y} A${innerRadius},${innerRadius},0,${+(innerArcAngle > 180)},${+(sign > 0)},${sict.x},${sict.y} A${cornerRadius},${cornerRadius},0,0,${+(sign < 0)},${silt.x},${silt.y}Z`;
+	} else path += `L${cx},${cy}Z`;
+	return path;
 }
-var f = /* @__PURE__ */ a({
+var Sector = /* @__PURE__ */ defineComponent({
 	name: "Sector",
-	props: s,
-	setup(e, { attrs: t }) {
+	props: SectorVueProps,
+	setup(props, { attrs }) {
 		return () => {
-			let { cx: r, cy: a, innerRadius: s, outerRadius: c, startAngle: l, endAngle: f, cornerRadius: p, forceCornerRadius: m, cornerIsExternal: h, className: g } = e;
-			if (c <= 0 || c < s || l === f) return null;
-			let _ = c - s, v = n(p, _, 0, !0), y;
-			return y = v > 0 && Math.abs(l - f) < 360 ? d(r, a, s, c, Math.min(v, _ / 2), m, h, l, f) : u(r, a, s, c, l, f), i("path", o(t, {
-				class: ["v-charts-sector", g],
-				d: y
+			const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, cornerRadius, forceCornerRadius, cornerIsExternal } = props;
+			if (outerRadius <= 0 || outerRadius < innerRadius || startAngle === endAngle) return null;
+			const deltaRadius = outerRadius - innerRadius;
+			const cr = getPercentValue(cornerRadius, deltaRadius, 0, true);
+			let path;
+			if (cr > 0 && Math.abs(startAngle - endAngle) < 360) path = getSectorWithCorner(cx, cy, innerRadius, outerRadius, Math.min(cr, deltaRadius / 2), forceCornerRadius, cornerIsExternal, startAngle, endAngle);
+			else path = getSectorPath(cx, cy, innerRadius, outerRadius, startAngle, endAngle);
+			return createVNode("path", mergeProps(attrs, {
+				"class": ["v-charts-sector", props.class],
+				"d": path
 			}), null);
 		};
 	}
 });
 //#endregion
-export { f as Sector };
+export { Sector };

package/dist/es/shape/Symbols.mjs

@@ -1,41 +1,52 @@
-import { isNumber as e } from "../utils/validate.mjs";
-import { createVNode as t, mergeProps as n } from "vue";
-import { symbol as r, symbolCircle as i, symbolCross as a, symbolDiamond as o, symbolSquare as s, symbolStar as c, symbolTriangle as l, symbolWye as u } from "victory-vendor/d3-shape";
-import { upperFirst as d } from "es-toolkit/compat";
+import { isNumber } from "../utils/validate.mjs";
+import { createVNode, mergeProps } from "vue";
+import { symbol, symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, symbolWye } from "victory-vendor/d3-shape";
+import { upperFirst } from "es-toolkit/compat";
 //#region src/shape/Symbols.tsx
-var f = {
-	symbolCircle: i,
-	symbolCross: a,
-	symbolDiamond: o,
-	symbolSquare: s,
-	symbolStar: c,
-	symbolTriangle: l,
-	symbolWye: u
-}, p = Math.PI / 180, m = (e) => f[`symbol${d(e)}`] || i, h = (e, t, n) => {
-	if (t === "area") return e;
-	switch (n) {
-		case "cross": return 5 * e * e / 9;
-		case "diamond": return .5 * e * e / Math.sqrt(3);
-		case "square": return e * e;
+var symbolFactories = {
+	symbolCircle,
+	symbolCross,
+	symbolDiamond,
+	symbolSquare,
+	symbolStar,
+	symbolTriangle,
+	symbolWye
+};
+var RADIAN = Math.PI / 180;
+var getSymbolFactory = (type) => {
+	return symbolFactories[`symbol${upperFirst(type)}`] || symbolCircle;
+};
+var calculateAreaSize = (size, sizeType, type) => {
+	if (sizeType === "area") return size;
+	switch (type) {
+		case "cross": return 5 * size * size / 9;
+		case "diamond": return .5 * size * size / Math.sqrt(3);
+		case "square": return size * size;
 		case "star": {
-			let t = 18 * p;
-			return 1.25 * e * e * (Math.tan(t) - Math.tan(t * 2) * Math.tan(t) ** 2);
+			const angle = 18 * RADIAN;
+			return 1.25 * size * size * (Math.tan(angle) - Math.tan(angle * 2) * Math.tan(angle) ** 2);
 		}
-		case "triangle": return Math.sqrt(3) * e * e / 4;
-		case "wye": return (21 - 10 * Math.sqrt(3)) * e * e / 8;
-		default: return Math.PI * e * e / 4;
+		case "triangle": return Math.sqrt(3) * size * size / 4;
+		case "wye": return (21 - 10 * Math.sqrt(3)) * size * size / 8;
+		default: return Math.PI * size * size / 4;
 	}
 };
-function g(i) {
-	let { type: a = "circle", size: o = 64, sizeType: s = "area", cx: c, cy: l, className: u, ...d } = i, f = "circle";
-	return typeof a == "string" && (f = a), e(c) && e(l) && e(o) ? t("path", n(d, {
-		class: ["v-charts-symbols", u].filter(Boolean).join(" "),
-		transform: `translate(${c}, ${l})`,
-		d: (() => {
-			let e = m(f), t = r().type(e).size(h(o, s, f))();
-			if (t !== null) return t;
-		})()
-	}), null) : null;
+function Symbols(props) {
+	const { type = "circle", size = 64, sizeType = "area", cx, cy, class: className, ...rest } = props;
+	let realType = "circle";
+	if (typeof type === "string") realType = type;
+	const getPath = () => {
+		const symbolFactory = getSymbolFactory(realType);
+		const s = symbol().type(symbolFactory).size(calculateAreaSize(size, sizeType, realType))();
+		if (s === null) return;
+		return s;
+	};
+	if (isNumber(cx) && isNumber(cy) && isNumber(size)) return createVNode("path", mergeProps(rest, {
+		"class": ["v-charts-symbols", className].filter(Boolean).join(" "),
+		"transform": `translate(${cx}, ${cy})`,
+		"d": getPath()
+	}), null);
+	return null;
 }
 //#endregion
-export { g as Symbols };
+export { Symbols };

package/dist/es/shape/Trapezoid.mjs

@@ -0,0 +1,50 @@
+import { classProp } from "../types/common.mjs";
+import { createVNode, defineComponent, mergeProps } from "vue";
+//#region src/shape/Trapezoid.tsx
+var TrapezoidVueProps = {
+	x: {
+		type: Number,
+		default: 0
+	},
+	y: {
+		type: Number,
+		default: 0
+	},
+	upperWidth: {
+		type: Number,
+		default: 0
+	},
+	lowerWidth: {
+		type: Number,
+		default: 0
+	},
+	height: {
+		type: Number,
+		default: 0
+	},
+	class: classProp
+};
+function getTrapezoidPath(x, y, upperWidth, lowerWidth, height) {
+	const upperLeft = x;
+	const upperRight = x + upperWidth;
+	const lowerLeft = x + (upperWidth - lowerWidth) / 2;
+	const lowerRight = x + (upperWidth + lowerWidth) / 2;
+	const bottom = y + height;
+	return `M ${upperLeft},${y} L ${upperRight},${y} L ${lowerRight},${bottom} L ${lowerLeft},${bottom} Z`;
+}
+var Trapezoid = /* @__PURE__ */ defineComponent({
+	name: "Trapezoid",
+	props: TrapezoidVueProps,
+	setup(props, { attrs }) {
+		return () => {
+			const { x, y, upperWidth, lowerWidth, height } = props;
+			if (x !== +x || y !== +y || upperWidth !== +upperWidth || lowerWidth !== +lowerWidth || height !== +height || height === 0) return null;
+			return createVNode("path", mergeProps(attrs, {
+				"class": ["v-charts-trapezoid", props.class],
+				"d": getTrapezoidPath(x, y, upperWidth, lowerWidth, height)
+			}), null);
+		};
+	}
+});
+//#endregion
+export { Trapezoid };

package/dist/es/state/ReportChartProps.mjs

@@ -1,13 +1,14 @@
-import { useAppDispatch as e } from "./hooks.mjs";
-import { updateOptions as t } from "./rootPropsSlice.mjs";
-import { defineComponent as n, watchEffect as r } from "vue";
+import { classProp } from "../types/common.mjs";
+import { useAppDispatch } from "./hooks.mjs";
+import { updateOptions } from "./rootPropsSlice.mjs";
+import { defineComponent, watchEffect } from "vue";
 //#region src/state/ReportChartProps.tsx
-var i = /* @__PURE__ */ n({
+var ReportChartProps_default = /* @__PURE__ */ defineComponent({
 	name: "ReportChartProps",
 	props: {
 		accessibilityLayer: {
 			type: Boolean,
-			default: !0
+			default: true
 		},
 		barCategoryGap: {
 			type: [Number, String],
@@ -21,10 +22,7 @@ var i = /* @__PURE__ */ n({
 			type: [String, Number],
 			default: void 0
 		},
-		class: {
-			type: String,
-			default: void 0
-		},
+		class: classProp,
 		maxBarSize: {
 			type: Number,
 			default: void 0
@@ -42,22 +40,23 @@ var i = /* @__PURE__ */ n({
 			default: "index"
 		}
 	},
-	setup(n) {
-		let i = e();
-		return r(() => {
-			i(t({
-				accessibilityLayer: n.accessibilityLayer,
-				barCategoryGap: n.barCategoryGap,
-				barGap: n.barGap,
-				barSize: n.barSize,
-				class: n.class,
-				maxBarSize: n.maxBarSize,
-				stackOffset: n.stackOffset,
-				syncId: n.syncId,
-				syncMethod: n.syncMethod
+	setup(props) {
+		const dispatch = useAppDispatch();
+		watchEffect(() => {
+			dispatch(updateOptions({
+				accessibilityLayer: props.accessibilityLayer,
+				barCategoryGap: props.barCategoryGap,
+				barGap: props.barGap,
+				barSize: props.barSize,
+				class: props.class,
+				maxBarSize: props.maxBarSize,
+				stackOffset: props.stackOffset,
+				syncId: props.syncId,
+				syncMethod: props.syncMethod
 			}));
-		}), () => null;
+		});
+		return () => null;
 	}
 });
 //#endregion
-export { i as default };
+export { ReportChartProps_default as default };

package/dist/es/state/ReportMainChartProps.mjs

@@ -1,41 +1,46 @@
-import { useAppDispatch as e } from "./hooks.mjs";
-import { setChartSize as t, setLayout as n, setMargin as r } from "./layoutSlice.mjs";
-import { defineComponent as i, watch as a } from "vue";
+import { useAppDispatch } from "./hooks.mjs";
+import { setChartSize, setLayout, setMargin } from "./layoutSlice.mjs";
+import { defineComponent, watch } from "vue";
 //#region src/state/ReportMainChartProps.ts
-var o = i({
+var ReportMainChartProps = defineComponent({
 	name: "ReportMainChartProps",
 	props: {
 		width: {
 			type: Number,
-			required: !0
+			required: true
 		},
 		height: {
 			type: Number,
-			required: !0
+			required: true
 		},
 		layout: {
 			type: String,
-			required: !0
+			required: true
 		},
 		margin: {
 			type: Object,
-			required: !0
+			required: true
 		}
 	},
-	setup(i) {
-		let o = e();
-		return a([
-			() => i.width,
-			() => i.height,
-			() => i.layout,
-			() => i.margin
+	setup(props) {
+		const dispatch = useAppDispatch();
+		watch([
+			() => props.width,
+			() => props.height,
+			() => props.layout,
+			() => props.margin
 		], () => {
-			o(n(i.layout)), o(t({
-				width: i.width,
-				height: i.height
-			})), o(r(i.margin));
-		}, { immediate: !0 }), () => null;
+			dispatch(setLayout(props.layout));
+			dispatch(setChartSize({
+				width: props.width,
+				height: props.height
+			}));
+			dispatch(setMargin(props.margin));
+		}, { immediate: true });
+		return () => {
+			return null;
+		};
 	}
 });
 //#endregion
-export { o as ReportMainChartProps };
+export { ReportMainChartProps };

package/dist/es/state/ReportPolarOptions.mjs

@@ -1,8 +1,8 @@
-import { useAppDispatch as e } from "./hooks.mjs";
-import { updatePolarOptions as t } from "./polarOptionsSlice.mjs";
-import { defineComponent as n, watch as r } from "vue";
+import { useAppDispatch } from "./hooks.mjs";
+import { updatePolarOptions } from "./polarOptionsSlice.mjs";
+import { defineComponent, watch } from "vue";
 //#region src/state/ReportPolarOptions.tsx
-var i = /* @__PURE__ */ n({
+var ReportPolarOptions = /* @__PURE__ */ defineComponent({
 	name: "ReportPolarOptions",
 	props: {
 		cx: {
@@ -30,26 +30,27 @@ var i = /* @__PURE__ */ n({
 			default: "80%"
 		}
 	},
-	setup(n) {
-		let i = e();
-		return r([
-			() => n.cx,
-			() => n.cy,
-			() => n.startAngle,
-			() => n.endAngle,
-			() => n.innerRadius,
-			() => n.outerRadius
+	setup(props) {
+		const dispatch = useAppDispatch();
+		watch([
+			() => props.cx,
+			() => props.cy,
+			() => props.startAngle,
+			() => props.endAngle,
+			() => props.innerRadius,
+			() => props.outerRadius
 		], () => {
-			i(t({
-				cx: n.cx,
-				cy: n.cy,
-				startAngle: n.startAngle,
-				endAngle: n.endAngle,
-				innerRadius: n.innerRadius,
-				outerRadius: n.outerRadius
+			dispatch(updatePolarOptions({
+				cx: props.cx,
+				cy: props.cy,
+				startAngle: props.startAngle,
+				endAngle: props.endAngle,
+				innerRadius: props.innerRadius,
+				outerRadius: props.outerRadius
 			}));
-		}, { immediate: !0 }), () => null;
+		}, { immediate: true });
+		return () => null;
 	}
 });
 //#endregion
-export { i as ReportPolarOptions };
+export { ReportPolarOptions };