vccs 0.0.1 → 0.2.0

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

@@ -0,0 +1,97 @@
+//#region src/polar/radial-bar/type.ts
+var RadialBarVueProps = {
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		required: true
+	},
+	name: {
+		type: String,
+		default: void 0
+	},
+	angleAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	radiusAxisId: {
+		type: [String, Number],
+		default: 0
+	},
+	fill: {
+		type: String,
+		default: void 0
+	},
+	stroke: {
+		type: String,
+		default: void 0
+	},
+	fillOpacity: {
+		type: Number,
+		default: void 0
+	},
+	strokeWidth: {
+		type: Number,
+		default: void 0
+	},
+	strokeDasharray: {
+		type: String,
+		default: void 0
+	},
+	hide: {
+		type: Boolean,
+		default: false
+	},
+	legendType: {
+		type: String,
+		default: "rect"
+	},
+	tooltipType: {
+		type: String,
+		default: void 0
+	},
+	background: {
+		type: [Boolean, Object],
+		default: false
+	},
+	label: {
+		type: [Boolean, Object],
+		default: false
+	},
+	isAnimationActive: {
+		type: Boolean,
+		default: true
+	},
+	minPointSize: {
+		type: Number,
+		default: 0
+	},
+	maxBarSize: {
+		type: Number,
+		default: void 0
+	},
+	barSize: {
+		type: [Number, String],
+		default: void 0
+	},
+	stackId: {
+		type: [String, Number],
+		default: void 0
+	},
+	cornerRadius: {
+		type: [Number, String],
+		default: 0
+	},
+	forceCornerRadius: {
+		type: Boolean,
+		default: false
+	},
+	cornerIsExternal: {
+		type: Boolean,
+		default: false
+	}
+};
+//#endregion
+export { RadialBarVueProps };

package/dist/es/shape/Cross.mjs

@@ -0,0 +1,16 @@
+import { isNumber } from "../utils/validate.mjs";
+import { createVNode, mergeProps } from "vue";
+//#region src/shape/Cross.tsx
+function getCrossPath(x, y, width, height, top, left) {
+	return `M${x},${top}v${height}M${left},${y}h${width}`;
+}
+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 { Cross };

package/dist/es/shape/Curve.mjs

@@ -0,0 +1,86 @@
+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
+/**
+* @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;
+}
+/**
+* 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]
+		}));
+		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);
+	}
+	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 CurveVueProps = {
+	type: { type: [String, Function] },
+	layout: { type: String },
+	baseLine: { type: [Number, Array] },
+	points: { type: Array },
+	connectNulls: { type: Boolean },
+	path: { type: String },
+	class: { type: [String, Array] }
+};
+var Curve = /* @__PURE__ */ defineComponent({
+	name: "Curve",
+	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 () => {
+			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 { Curve, CurveVueProps, getPath };

package/dist/es/shape/Dot.mjs

@@ -0,0 +1,24 @@
+import { createVNode, defineComponent } from "vue";
+var Dot = /* @__PURE__ */ defineComponent({
+	name: "Dot",
+	props: {
+		cx: { type: [Number, String] },
+		cy: { type: [Number, String] },
+		r: { type: [Number, String] },
+		clipDot: { type: Boolean }
+	},
+	setup(props) {
+		return () => {
+			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 { Dot };

package/dist/es/shape/Rectangle.mjs

@@ -0,0 +1,83 @@
+import { createVNode, defineComponent, mergeProps } from "vue";
+//#region src/shape/Rectangle.tsx
+/**
+* @fileOverview Rectangle
+*/
+var RectangleVueProps = {
+	className: {
+		type: String,
+		default: void 0
+	},
+	x: {
+		type: Number,
+		default: 0
+	},
+	y: {
+		type: Number,
+		default: 0
+	},
+	width: {
+		type: Number,
+		default: 0
+	},
+	height: {
+		type: Number,
+		default: 0
+	},
+	radius: {
+		type: [Number, Array],
+		default: void 0
+	}
+};
+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 i = 0; i < 4; i++) {
+			const r = radius[i] ?? 0;
+			newRadius[i] = r > maxRadius ? maxRadius : r;
+		}
+		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 (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 ${x},${y} h ${width} v ${height} h ${-width} Z`;
+}
+var Rectangle = /* @__PURE__ */ defineComponent({
+	name: "Rectangle",
+	props: RectangleVueProps,
+	setup(props, { attrs }) {
+		return () => {
+			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 { Rectangle };

package/dist/es/shape/Sector.mjs

@@ -0,0 +1,156 @@
+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
+/**
+* @fileOverview Sector - SVG arc path shape for pie/donut chart segments
+*/
+var SectorVueProps = {
+	cx: {
+		type: Number,
+		default: 0
+	},
+	cy: {
+		type: Number,
+		default: 0
+	},
+	innerRadius: {
+		type: Number,
+		default: 0
+	},
+	outerRadius: {
+		type: Number,
+		default: 0
+	},
+	startAngle: {
+		type: Number,
+		default: 0
+	},
+	endAngle: {
+		type: Number,
+		default: 0
+	},
+	cornerRadius: {
+		type: [Number, String],
+		default: 0
+	},
+	forceCornerRadius: {
+		type: Boolean,
+		default: false
+	},
+	cornerIsExternal: {
+		type: Boolean,
+		default: false
+	},
+	className: {
+		type: String,
+		default: void 0
+	}
+};
+function getDeltaAngle(startAngle, endAngle) {
+	return mathSign(endAngle - startAngle) * Math.min(Math.abs(endAngle - startAngle), 359.999);
+}
+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,
+		circleTangency,
+		lineTangency: polarToCartesian(cx, cy, centerRadius * Math.cos(theta * RADIAN), lineTangencyAngle),
+		theta
+	};
+}
+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 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 Sector = /* @__PURE__ */ defineComponent({
+	name: "Sector",
+	props: SectorVueProps,
+	setup(props, { attrs }) {
+		return () => {
+			const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, cornerRadius, forceCornerRadius, cornerIsExternal, className } = 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", className],
+				"d": path
+			}), null);
+		};
+	}
+});
+//#endregion
+export { Sector };

package/dist/es/shape/Symbols.mjs

@@ -0,0 +1,52 @@
+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 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": {
+			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) * size * size / 4;
+		case "wye": return (21 - 10 * Math.sqrt(3)) * size * size / 8;
+		default: return Math.PI * size * size / 4;
+	}
+};
+function Symbols(props) {
+	const { type = "circle", size = 64, sizeType = "area", cx, cy, 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 { Symbols };

package/dist/es/shape/Trapezoid.mjs

@@ -0,0 +1,52 @@
+import { createVNode, defineComponent, mergeProps } from "vue";
+//#region src/shape/Trapezoid.tsx
+var TrapezoidVueProps = {
+	className: {
+		type: String,
+		default: void 0
+	},
+	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
+	}
+};
+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, className } = 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", className],
+				"d": getTrapezoidPath(x, y, upperWidth, lowerWidth, height)
+			}), null);
+		};
+	}
+});
+//#endregion
+export { Trapezoid };

package/dist/es/state/ReportChartProps.mjs

@@ -0,0 +1,64 @@
+import { useAppDispatch } from "./hooks.mjs";
+import { updateOptions } from "./rootPropsSlice.mjs";
+import { defineComponent, watchEffect } from "vue";
+//#region src/state/ReportChartProps.tsx
+var ReportChartProps_default = /* @__PURE__ */ defineComponent({
+	name: "ReportChartProps",
+	props: {
+		accessibilityLayer: {
+			type: Boolean,
+			default: true
+		},
+		barCategoryGap: {
+			type: [Number, String],
+			default: "10%"
+		},
+		barGap: {
+			type: Number,
+			default: 4
+		},
+		barSize: {
+			type: [String, Number],
+			default: void 0
+		},
+		class: {
+			type: String,
+			default: void 0
+		},
+		maxBarSize: {
+			type: Number,
+			default: void 0
+		},
+		stackOffset: {
+			type: String,
+			default: "none"
+		},
+		syncId: {
+			type: [Number, String],
+			default: void 0
+		},
+		syncMethod: {
+			type: [String, Function],
+			default: "index"
+		}
+	},
+	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
+			}));
+		});
+		return () => null;
+	}
+});
+//#endregion
+export { ReportChartProps_default as default };

package/dist/es/state/ReportMainChartProps.mjs

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