vccs 0.0.1 → 0.2.0

package/dist/es/hooks/useSetupGraphicalItem.mjs

@@ -0,0 +1,66 @@
+import { useIsPanorama } from "../context/PanoramaContextProvider.mjs";
+import { getTooltipNameProp } from "../utils/chart.mjs";
+import { SetCartesianGraphicalItem } from "../state/SetGraphicalItem.mjs";
+import { SetLegendPayload } from "../state/SetLegendPayload.mjs";
+import { SetTooltipEntrySettings } from "../state/SetTooltipEntrySettings.mjs";
+import { computed, useAttrs } from "vue";
+//#region src/hooks/useSetupGraphicalItem.ts
+function getLegendItemColor(stroke, fill) {
+	return stroke && stroke !== "none" ? stroke : fill;
+}
+function getItemColor(type, stroke, fill) {
+	if (type === "bar") return fill;
+	return getLegendItemColor(stroke, fill);
+}
+function useSetupGraphicalItem(props, type, options) {
+	const attrs = useAttrs();
+	const isPanorama = useIsPanorama();
+	const legendPayload = computed(() => {
+		return [{
+			inactive: props.hide,
+			dataKey: props.dataKey,
+			type: props.legendType,
+			color: getItemColor(type, attrs.stroke ?? props.stroke, attrs.fill ?? props.fill),
+			value: getTooltipNameProp(props.name, props.dataKey),
+			payload: { ...props }
+		}];
+	});
+	SetCartesianGraphicalItem(computed(() => {
+		return {
+			...props,
+			isPanorama,
+			type,
+			errorBars: options?.errorBars?.value
+		};
+	}));
+	SetLegendPayload(legendPayload);
+	if (!options?.skipTooltip) SetTooltipEntrySettings({
+		fn: getTooltipEntrySettings,
+		args: computed(() => ({
+			...props,
+			...attrs,
+			_itemType: type
+		}))
+	});
+}
+function getTooltipEntrySettings(props) {
+	const { dataKey, data, stroke, fill, name, hide, unit, _itemType } = props;
+	return {
+		dataDefinedOnItem: data,
+		positions: void 0,
+		settings: {
+			stroke,
+			strokeWidth: props["stroke-width"],
+			fill,
+			dataKey,
+			nameKey: void 0,
+			name: getTooltipNameProp(name, dataKey),
+			hide,
+			type: props.tooltipType,
+			color: getItemColor(_itemType, stroke, fill),
+			unit
+		}
+	};
+}
+//#endregion
+export { useSetupGraphicalItem };

package/dist/es/index.mjs

@@ -0,0 +1,46 @@
+import { Curve, CurveVueProps, getPath } from "./shape/Curve.mjs";
+import { Dot } from "./shape/Dot.mjs";
+import { Label } from "./components/label/Label.mjs";
+import { LabelList } from "./components/label/LabelList.mjs";
+import { Area } from "./cartesian/area/Area.mjs";
+import { CartesianAxis } from "./cartesian/cartesian-axis/CartesianAxis.mjs";
+import { XAxis } from "./cartesian/axis/XAxis.mjs";
+import { YAxis } from "./cartesian/axis/YAxis.mjs";
+import { Rectangle } from "./shape/Rectangle.mjs";
+import { createErrorBarRegistry, provideErrorBarContext, provideErrorBarRegistry, useErrorBarContext, useErrorBarRegistry } from "./cartesian/error-bar/ErrorBarContext.mjs";
+import { Cell } from "./components/Cell.mjs";
+import { Bar } from "./cartesian/bar/Bar.mjs";
+import { CartesianGrid } from "./cartesian/cartesian-grid/CartesianGrid.mjs";
+import { ErrorBar, ErrorBarVueProps } from "./cartesian/error-bar/ErrorBar.mjs";
+import { LineContextKey, provideLineContext, useLine, useLineContext } from "./cartesian/line/hooks/useLine.mjs";
+import { Line } from "./cartesian/line/Line.mjs";
+import { ReferenceArea } from "./cartesian/reference-area/ReferenceArea.mjs";
+import { ReferenceLine } from "./cartesian/reference-line/ReferenceLine.mjs";
+import { Symbols } from "./shape/Symbols.mjs";
+import { Scatter } from "./cartesian/scatter/Scatter.mjs";
+import { ZAxis } from "./cartesian/z-axis/ZAxis.mjs";
+import { Trapezoid } from "./shape/Trapezoid.mjs";
+import { FunnelVueProps } from "./cartesian/funnel/type.mjs";
+import { Funnel } from "./cartesian/funnel/Funnel.mjs";
+import { AreaChart } from "./chart/AreaChart.mjs";
+import { BarChart } from "./chart/BarChart.mjs";
+import { ComposedChart } from "./chart/ComposedChart.mjs";
+import { LineChart } from "./chart/LineChart.mjs";
+import { PieChart } from "./chart/PieChart.mjs";
+import { RadarChart } from "./chart/RadarChart.mjs";
+import { ScatterChart } from "./chart/ScatterChart.mjs";
+import { RadialBarChart } from "./chart/RadialBarChart.mjs";
+import { FunnelChart } from "./chart/FunnelChart.mjs";
+import ResponsiveContainer_default from "./container/ResponsiveContainer.mjs";
+import Legend_default from "./components/legend/Legend.mjs";
+import { Cross } from "./shape/Cross.mjs";
+import { Sector } from "./shape/Sector.mjs";
+import Tooltip, { getUniqPayload } from "./components/Tooltip.mjs";
+import { PieVueProps } from "./polar/pie/type.mjs";
+import { Pie } from "./polar/pie/Pie.mjs";
+import { Radar } from "./polar/radar/Radar.mjs";
+import { PolarGrid } from "./polar/radar/PolarGrid.mjs";
+import { PolarAngleAxis } from "./polar/radar/PolarAngleAxis.mjs";
+import { PolarRadiusAxis } from "./polar/radar/PolarRadiusAxis.mjs";
+import { RadialBar } from "./polar/radial-bar/RadialBar.mjs";
+export { Area, AreaChart, Bar, BarChart, CartesianAxis, CartesianGrid, Cell, ComposedChart, Cross, Curve, CurveVueProps, Dot, ErrorBar, ErrorBarVueProps, Funnel, FunnelChart, FunnelVueProps, Label, LabelList, Legend_default as Legend, Line, LineChart, LineContextKey, Pie, PieChart, PieVueProps, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, RadarChart, RadialBar, RadialBarChart, Rectangle, ReferenceArea, ReferenceLine, ResponsiveContainer_default as ResponsiveContainer, Scatter, ScatterChart, Sector, Symbols, Tooltip, Trapezoid, XAxis, YAxis, ZAxis, createErrorBarRegistry, getPath, getUniqPayload, provideErrorBarContext, provideErrorBarRegistry, provideLineContext, useErrorBarContext, useErrorBarRegistry, useLine, useLineContext };

package/dist/es/polar/pie/Pie.mjs

@@ -0,0 +1,161 @@
+import { selectChartOffset } from "../../state/selectors/selectChartOffset.mjs";
+import { polarToCartesian } from "../../utils/polar.mjs";
+import { mouseLeaveItem, setActiveMouseOverItemIndex } from "../../state/tooltipSlice.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import { Layer } from "../../container/Layer.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 { computePieSectors, selectDisplayedData, selectPieLegend, selectSynchronisedPieSettings } from "../../state/selectors/pieSelectors.mjs";
+import { PieVueProps } from "./type.mjs";
+import { computed, createVNode, defineComponent, mergeProps, ref, watch } from "vue";
+//#region src/polar/pie/Pie.tsx
+var LABEL_OFFSET = 20;
+var Pie = /* @__PURE__ */ defineComponent({
+	name: "Pie",
+	props: PieVueProps,
+	inheritAttrs: false,
+	slots: Object,
+	setup(props, { attrs, slots }) {
+		const dispatch = useAppDispatch();
+		const isControlled = computed(() => props.activeIndex !== -1);
+		const activeIndex = ref(props.activeIndex);
+		watch(() => props.activeIndex, (val) => {
+			activeIndex.value = val;
+		});
+		const pieSettings = computed(() => ({
+			data: props.data,
+			dataKey: props.dataKey,
+			nameKey: props.nameKey,
+			cx: props.cx,
+			cy: props.cy,
+			innerRadius: props.innerRadius,
+			outerRadius: props.outerRadius,
+			startAngle: props.startAngle,
+			endAngle: props.endAngle,
+			paddingAngle: props.paddingAngle,
+			minAngle: props.minAngle,
+			fill: props.fill,
+			legendType: props.legendType,
+			tooltipType: props.tooltipType,
+			presentationProps: {}
+		}));
+		SetPolarGraphicalItem(computed(() => ({
+			type: "pie",
+			data: props.data ?? [],
+			dataKey: props.dataKey,
+			hide: props.hide,
+			angleAxisId: 0,
+			radiusAxisId: 0
+		})));
+		const displayedData = useAppSelector((state) => selectDisplayedData(state, pieSettings.value));
+		const synchronisedSettings = useAppSelector((state) => selectSynchronisedPieSettings(state, pieSettings.value));
+		const offset = useAppSelector((state) => selectChartOffset(state));
+		const legendPayload = useAppSelector((state) => selectPieLegend(state, pieSettings.value));
+		SetLegendPayload(computed(() => legendPayload.value ?? []));
+		const sectors = computed(() => {
+			if (synchronisedSettings.value == null || displayedData.value == null) return;
+			return computePieSectors({
+				offset: offset.value,
+				pieSettings: pieSettings.value,
+				displayedData: displayedData.value
+			});
+		});
+		SetTooltipEntrySettings({
+			fn: (v) => v,
+			args: computed(() => ({
+				dataDefinedOnItem: displayedData.value ?? [],
+				positions: sectors.value?.map((s) => s.tooltipPosition),
+				settings: {
+					dataKey: props.dataKey,
+					nameKey: props.nameKey,
+					name: String(props.dataKey ?? ""),
+					hide: props.hide,
+					type: props.tooltipType,
+					color: props.fill,
+					fill: props.fill,
+					stroke: props.stroke,
+					unit: ""
+				}
+			}))
+		});
+		function handleSectorEnter(sector, index) {
+			if (!isControlled.value) activeIndex.value = index;
+			dispatch(setActiveMouseOverItemIndex({
+				activeIndex: String(index),
+				activeDataKey: props.dataKey,
+				activeCoordinate: sector.tooltipPosition
+			}));
+		}
+		function handleSectorLeave() {
+			if (!isControlled.value) activeIndex.value = -1;
+			dispatch(mouseLeaveItem());
+		}
+		function renderLabel(sector, index) {
+			const edgePoint = polarToCartesian(sector.cx, sector.cy, sector.outerRadius, sector.midAngle);
+			const pos = polarToCartesian(sector.cx, sector.cy, sector.outerRadius + LABEL_OFFSET, sector.midAngle);
+			const anchor = pos.x > sector.cx ? "start" : pos.x < sector.cx ? "end" : "middle";
+			return createVNode("g", { "key": `label-${index}` }, [createVNode("line", {
+				"x1": edgePoint.x,
+				"y1": edgePoint.y,
+				"x2": pos.x,
+				"y2": pos.y,
+				"stroke": sector.fill,
+				"fill": "none"
+			}, null), createVNode("text", {
+				"x": pos.x,
+				"y": pos.y,
+				"text-anchor": anchor,
+				"dominant-baseline": "middle",
+				"fill": sector.fill
+			}, [String(sector.value)])]);
+		}
+		return () => {
+			const sectorList = sectors.value;
+			if (!sectorList || sectorList.length === 0) return null;
+			const stroke = attrs.stroke ?? props.stroke;
+			return createVNode(Layer, { "class": ["v-charts-pie", props.className] }, { default: () => [createVNode(Animate, {
+				"isActive": props.isAnimationActive,
+				"from": 0,
+				"to": 1,
+				"transition": { duration: 1.5 }
+			}, { default: (progress) => {
+				let curAngle = sectorList[0]?.startAngle ?? 0;
+				const sectorNodes = sectorList.map((sector, i) => {
+					const paddingAngle = i > 0 ? sector.paddingAngle : 0;
+					const deltaAngle = (sector.endAngle - sector.startAngle) * progress;
+					const animatedStartAngle = curAngle + paddingAngle;
+					const animatedEndAngle = curAngle + deltaAngle + paddingAngle;
+					curAngle = animatedEndAngle;
+					const content = slots.shape ? slots.shape({
+						...sector,
+						startAngle: animatedStartAngle,
+						endAngle: animatedEndAngle,
+						stroke,
+						isActive: activeIndex.value === i
+					}) : createVNode(Sector, mergeProps(attrs, {
+						"cx": sector.cx,
+						"cy": sector.cy,
+						"innerRadius": sector.innerRadius,
+						"outerRadius": sector.outerRadius,
+						"startAngle": animatedStartAngle,
+						"endAngle": animatedEndAngle,
+						"fill": sector.fill,
+						"stroke": stroke
+					}), null);
+					return createVNode("g", {
+						"key": `sector-${i}`,
+						"onMouseenter": () => handleSectorEnter(sector, i),
+						"onMouseleave": handleSectorLeave
+					}, [content]);
+				});
+				if (progress >= 1 && props.label) sectorNodes.push(...sectorList.map(renderLabel));
+				return sectorNodes;
+			} })] });
+		};
+	}
+});
+//#endregion
+export { Pie };

package/dist/es/polar/pie/type.mjs

@@ -0,0 +1,97 @@
+//#region src/polar/pie/type.ts
+var PieVueProps = {
+	data: {
+		type: Array,
+		default: void 0
+	},
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		required: true
+	},
+	nameKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		default: "name"
+	},
+	cx: {
+		type: [Number, String],
+		default: "50%"
+	},
+	cy: {
+		type: [Number, String],
+		default: "50%"
+	},
+	innerRadius: {
+		type: [Number, String],
+		default: 0
+	},
+	outerRadius: {
+		type: [
+			Number,
+			String,
+			Function
+		],
+		default: "80%"
+	},
+	startAngle: {
+		type: Number,
+		default: 0
+	},
+	endAngle: {
+		type: Number,
+		default: 360
+	},
+	paddingAngle: {
+		type: Number,
+		default: 0
+	},
+	minAngle: {
+		type: Number,
+		default: 0
+	},
+	fill: {
+		type: String,
+		default: "#808080"
+	},
+	stroke: {
+		type: String,
+		default: "#fff"
+	},
+	legendType: {
+		type: String,
+		default: "rect"
+	},
+	tooltipType: {
+		type: String,
+		default: void 0
+	},
+	hide: {
+		type: Boolean,
+		default: false
+	},
+	activeIndex: {
+		type: Number,
+		default: -1
+	},
+	isAnimationActive: {
+		type: Boolean,
+		default: true
+	},
+	label: {
+		type: Boolean,
+		default: false
+	},
+	className: {
+		type: String,
+		default: void 0
+	}
+};
+//#endregion
+export { PieVueProps };

package/dist/es/polar/radar/PolarAngleAxis.mjs

@@ -0,0 +1,180 @@
+import { RADIAN, polarToCartesian } from "../../utils/polar.mjs";
+import { selectPolarViewBox } from "../../state/selectors/polarAxisSelectors.mjs";
+import { useAppDispatch, useAppSelector } from "../../state/hooks.mjs";
+import Text_default from "../../components/Text.mjs";
+import { addAngleAxis, removeAngleAxis } from "../../state/polarAxisSlice.mjs";
+import { selectPolarAxisTicks } from "../../state/selectors/polarScaleSelectors.mjs";
+import { createVNode, defineComponent, onUnmounted, watchEffect } from "vue";
+//#region src/polar/radar/PolarAngleAxis.tsx
+var eps = 1e-5;
+var COS_45 = Math.cos(45 * RADIAN);
+function getTickTextAnchor(coordinate, orientation) {
+	const cos = Math.cos(-coordinate * RADIAN);
+	if (cos > eps) return orientation === "outer" ? "start" : "end";
+	if (cos < -eps) return orientation === "outer" ? "end" : "start";
+	return "middle";
+}
+function getTickVerticalAnchor(coordinate) {
+	const cos = Math.cos(-coordinate * RADIAN);
+	const sin = Math.sin(-coordinate * RADIAN);
+	if (Math.abs(cos) <= COS_45) return sin > 0 ? "start" : "end";
+	return "middle";
+}
+var PolarAngleAxis = /* @__PURE__ */ defineComponent({
+	name: "PolarAngleAxis",
+	props: {
+		angleAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		dataKey: {
+			type: [
+				String,
+				Number,
+				Function
+			],
+			default: void 0
+		},
+		tick: {
+			type: Boolean,
+			default: true
+		},
+		tickLine: {
+			type: Boolean,
+			default: true
+		},
+		tickSize: {
+			type: Number,
+			default: 8
+		},
+		axisLine: {
+			type: Boolean,
+			default: true
+		},
+		axisLineType: {
+			type: String,
+			default: "polygon"
+		},
+		orientation: {
+			type: String,
+			default: "outer"
+		},
+		tickFormatter: {
+			type: Function,
+			default: void 0
+		},
+		ticks: {
+			type: Array,
+			default: void 0
+		},
+		stroke: {
+			type: String,
+			default: void 0
+		},
+		type: {
+			type: String,
+			default: "category"
+		},
+		domain: {
+			type: Array,
+			default: void 0
+		},
+		tickCount: {
+			type: Number,
+			default: void 0
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const dispatch = useAppDispatch();
+		let prevSettings = null;
+		watchEffect(() => {
+			const settings = {
+				id: props.angleAxisId,
+				type: props.type,
+				dataKey: props.dataKey,
+				scale: "auto",
+				allowDuplicatedCategory: true,
+				allowDataOverflow: false,
+				reversed: false,
+				includeHidden: false,
+				domain: props.domain,
+				unit: void 0,
+				name: void 0,
+				allowDecimals: false,
+				tickCount: props.tickCount,
+				ticks: props.ticks,
+				tick: props.tick
+			};
+			dispatch(addAngleAxis(settings));
+			prevSettings = settings;
+		});
+		onUnmounted(() => {
+			if (prevSettings) {
+				dispatch(removeAngleAxis(prevSettings));
+				prevSettings = null;
+			}
+		});
+		const polarViewBox = useAppSelector((state) => selectPolarViewBox(state));
+		const ticks = useAppSelector((state) => selectPolarAxisTicks(state, "angleAxis", props.angleAxisId, false));
+		return () => {
+			const viewBox = polarViewBox.value;
+			const tickItems = ticks.value;
+			if (viewBox == null || tickItems == null || tickItems.length === 0) return null;
+			const { cx, cy, outerRadius: radius, startAngle: vbStart, endAngle: vbEnd } = viewBox;
+			const { orientation, tickSize, axisLine, axisLineType, tickLine, tick, tickFormatter, stroke } = props;
+			const filteredTicks = Math.abs((vbEnd ?? 0) - (vbStart ?? 0)) === 360 && tickItems.length > 1 && Math.abs(tickItems[tickItems.length - 1].coordinate - tickItems[0].coordinate) % 360 === 0 ? tickItems.slice(0, -1) : tickItems;
+			return createVNode("g", { "class": "v-charts-polar-angle-axis" }, [axisLine && (axisLineType === "circle" ? createVNode("circle", {
+				"cx": cx,
+				"cy": cy,
+				"r": radius,
+				"fill": "none",
+				"stroke": stroke
+			}, null) : createVNode("polygon", {
+				"points": filteredTicks.map((t) => {
+					const p = polarToCartesian(cx, cy, radius, t.coordinate);
+					return `${p.x},${p.y}`;
+				}).join(" "),
+				"fill": "none",
+				"stroke": stroke
+			}, null)), createVNode("g", { "class": "v-charts-polar-angle-axis-ticks" }, [filteredTicks.map((entry, i) => {
+				const p1 = polarToCartesian(cx, cy, radius, entry.coordinate);
+				const p2 = polarToCartesian(cx, cy, radius + (orientation === "inner" ? -1 : 1) * tickSize, entry.coordinate);
+				const textAnchor = getTickTextAnchor(entry.coordinate, orientation);
+				const verticalAnchor = getTickVerticalAnchor(entry.coordinate);
+				const value = tickFormatter ? tickFormatter(entry.value, i) : entry.value;
+				return createVNode("g", {
+					"key": `tick-${entry.coordinate}`,
+					"class": "v-charts-polar-angle-axis-tick"
+				}, [tickLine && createVNode("line", {
+					"class": "v-charts-polar-angle-axis-tick-line",
+					"x1": p1.x,
+					"y1": p1.y,
+					"x2": p2.x,
+					"y2": p2.y,
+					"stroke": stroke,
+					"fill": "none"
+				}, null), tick && (slots.tick ? slots.tick({
+					x: p2.x,
+					y: p2.y,
+					value,
+					index: i,
+					textAnchor,
+					payload: entry,
+					cx,
+					cy
+				}) : createVNode(Text_default, {
+					"class": "v-charts-polar-angle-axis-tick-value",
+					"x": p2.x,
+					"y": p2.y,
+					"textAnchor": textAnchor,
+					"verticalAnchor": verticalAnchor,
+					"fill": stroke,
+					"value": String(value)
+				}, null))]);
+			})])]);
+		};
+	}
+});
+//#endregion
+export { PolarAngleAxis };

package/dist/es/polar/radar/PolarGrid.mjs

@@ -0,0 +1,115 @@
+import { polarToCartesian } from "../../utils/polar.mjs";
+import { selectPolarViewBox } from "../../state/selectors/polarAxisSelectors.mjs";
+import { useAppSelector } from "../../state/hooks.mjs";
+import { selectPolarGridAngles, selectPolarGridRadii } from "../../state/selectors/polarGridSelectors.mjs";
+import { computed, createVNode, defineComponent } from "vue";
+//#region src/polar/radar/PolarGrid.tsx
+function getPolygonPath(radius, cx, cy, polarAngles) {
+	let path = "";
+	polarAngles.forEach((angle, i) => {
+		const point = polarToCartesian(cx, cy, radius, angle);
+		path += i === 0 ? `M ${point.x},${point.y}` : `L ${point.x},${point.y}`;
+	});
+	return `${path}Z`;
+}
+var PolarGrid = /* @__PURE__ */ defineComponent({
+	name: "PolarGrid",
+	props: {
+		angleAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		radiusAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		gridType: {
+			type: String,
+			default: "polygon"
+		},
+		radialLines: {
+			type: Boolean,
+			default: true
+		},
+		stroke: {
+			type: String,
+			default: "#ccc"
+		},
+		fill: {
+			type: String,
+			default: "none"
+		},
+		polarRadius: {
+			type: Array,
+			default: void 0
+		},
+		strokeWidth: {
+			type: Number,
+			default: void 0
+		}
+	},
+	inheritAttrs: false,
+	setup(props, { attrs }) {
+		const polarViewBox = useAppSelector((state) => selectPolarViewBox(state));
+		const polarAngles = useAppSelector((state) => selectPolarGridAngles(state, props.angleAxisId));
+		const polarRadiiFromRedux = useAppSelector((state) => selectPolarGridRadii(state, props.radiusAxisId));
+		const polarRadii = computed(() => {
+			if (Array.isArray(props.polarRadius)) return props.polarRadius;
+			return polarRadiiFromRedux.value;
+		});
+		return () => {
+			const viewBox = polarViewBox.value;
+			const angles = polarAngles.value;
+			const radii = polarRadii.value;
+			if (viewBox == null || angles == null || radii == null || viewBox.outerRadius <= 0) return null;
+			const { cx, cy, innerRadius } = viewBox;
+			const { stroke, gridType, fill, strokeWidth } = props;
+			const shapeClass = attrs.class;
+			const renderBackground = fill && fill !== "none";
+			return createVNode("g", { "class": "v-charts-polar-grid" }, [createVNode("g", { "class": "v-charts-polar-grid-concentric" }, [renderBackground && (gridType === "circle" ? createVNode("circle", {
+				"class": ["v-charts-polar-grid-concentric-circle", shapeClass],
+				"cx": cx,
+				"cy": cy,
+				"r": Math.max(...radii),
+				"stroke": stroke,
+				"fill": fill,
+				"stroke-width": strokeWidth
+			}, null) : createVNode("path", {
+				"class": ["v-charts-polar-grid-concentric-polygon", shapeClass],
+				"d": getPolygonPath(Math.max(...radii), cx, cy, angles),
+				"stroke": stroke,
+				"fill": fill,
+				"stroke-width": strokeWidth
+			}, null)), radii.map((radius, i) => gridType === "circle" ? createVNode("circle", {
+				"key": `circle-${i}`,
+				"class": ["v-charts-polar-grid-concentric-circle", shapeClass],
+				"cx": cx,
+				"cy": cy,
+				"r": radius,
+				"stroke": stroke,
+				"fill": "none",
+				"stroke-width": strokeWidth
+			}, null) : createVNode("path", {
+				"key": `polygon-${i}`,
+				"class": ["v-charts-polar-grid-concentric-polygon", shapeClass],
+				"d": getPolygonPath(radius, cx, cy, angles),
+				"stroke": stroke,
+				"fill": "none",
+				"stroke-width": strokeWidth
+			}, null))]), props.radialLines && angles.length > 0 && createVNode("g", { "class": "v-charts-polar-grid-angle" }, [angles.map((angle) => {
+				const start = polarToCartesian(cx, cy, innerRadius, angle);
+				const end = polarToCartesian(cx, cy, viewBox.outerRadius, angle);
+				return createVNode("line", {
+					"key": `line-${angle}`,
+					"x1": start.x,
+					"y1": start.y,
+					"x2": end.x,
+					"y2": end.y,
+					"stroke": stroke
+				}, null);
+			})])]);
+		};
+	}
+});
+//#endregion
+export { PolarGrid };