vccs 0.6.0 → 1.0.0-beta.2

package/dist/es/chart/sankeyUtils.mjs

@@ -1,11 +1,62 @@
+import { warn } from "../utils/log.mjs";
 import { toRaw } from "vue";
 import { sankey, sankeyLinkHorizontal } from "d3-sankey";
 //#region src/chart/sankeyUtils.ts
+function validLinks(data) {
+	const isNodeIndex = (index) => typeof index === "number" && Number.isInteger(index) && index >= 0 && index < data.nodes.length;
+	const links = data.links.flatMap((link) => {
+		const { source, target, value } = link;
+		if (!isNodeIndex(source) || !isNodeIndex(target) || !Number.isFinite(value) || value <= 0) return [];
+		return [{
+			...toRaw(link),
+			source,
+			target
+		}];
+	});
+	const outgoing = Array.from({ length: data.nodes.length }, () => []);
+	links.forEach((link, index) => outgoing[link.source].push(index));
+	const state = new Uint8Array(data.nodes.length);
+	const backEdges = /* @__PURE__ */ new Set();
+	for (let node = 0; node < data.nodes.length; node++) {
+		if (state[node]) continue;
+		state[node] = 1;
+		const stack = [{
+			node,
+			next: 0
+		}];
+		while (stack.length) {
+			const frame = stack[stack.length - 1];
+			const edge = outgoing[frame.node][frame.next++];
+			if (edge === void 0) {
+				state[frame.node] = 2;
+				stack.pop();
+				continue;
+			}
+			const target = links[edge].target;
+			if (state[target] === 1) backEdges.add(edge);
+			else if (state[target] === 0) {
+				state[target] = 1;
+				stack.push({
+					node: target,
+					next: 0
+				});
+			}
+		}
+	}
+	const kept = links.filter((_, index) => !backEdges.has(index));
+	const dropped = data.links.length - kept.length;
+	warn(dropped === 0, "Sankey dropped %s invalid or cyclic links.", dropped);
+	return kept;
+}
 function computeSankeyLayout(args) {
 	const { data, width, height, nodePadding, nodeWidth, iterations, margin } = args;
 	const cloned = {
 		nodes: data.nodes.map((n) => ({ ...toRaw(n) })),
-		links: data.links.map((l) => ({ ...toRaw(l) }))
+		links: validLinks(data)
+	};
+	if (!cloned.links.length) return {
+		nodes: [],
+		links: []
 	};
 	const result = sankey().nodeWidth(nodeWidth).nodePadding(nodePadding).extent([[margin.left, margin.top], [Math.max(margin.left + 1, width - margin.right), Math.max(margin.top + 1, height - margin.bottom)]]).iterations(iterations)(cloned);
 	const x0Min = margin.left;

package/dist/es/chart/shell.mjs

@@ -0,0 +1,30 @@
+import { defaultChartCapabilities } from "../model/options.mjs";
+import { get } from "es-toolkit/compat";
+//#region src/chart/shell.ts
+/** Hierarchies address tooltip items by path, e.g. `children[0].children[1]` or `links[2]`. */
+var pathPayloadSearcher = (data, payloadKey) => data && payloadKey ? get(data, payloadKey) : void 0;
+/** Chart options shared by every standalone chart: tooltips belong to a single item. */
+function standaloneChartOptions(chartName) {
+	return {
+		chartName,
+		capabilities: defaultChartCapabilities,
+		defaultTooltipEventType: "item",
+		validateTooltipEventTypes: ["item"],
+		tooltipPayloadSearcher: pathPayloadSearcher,
+		eventEmitter: void 0
+	};
+}
+/** Caller `class` and `style` for the chart box. Attributes are untyped, so they are narrowed here once. */
+function boxAttrs(attrs) {
+	return {
+		class: attrs.class,
+		style: attrs.style
+	};
+}
+/** Caller attributes for the SVG root: `class` and `style` go to the chart box instead. */
+function rootAttrs(attrs) {
+	const { class: _class, style: _style, ...rest } = attrs;
+	return rest;
+}
+//#endregion
+export { boxAttrs, rootAttrs, standaloneChartOptions };

package/dist/es/chart/sunburstUtils.mjs

@@ -1,3 +1,5 @@
+import { toFiniteNumber } from "../utils/validate.mjs";
+import { getValueByDataKey } from "../utils/chart.mjs";
 import { hierarchy, partition } from "d3-hierarchy";
 //#region src/chart/sunburstUtils.ts
 /**
@@ -26,23 +28,25 @@ function buildTooltipIndex(node) {
 	return parts.join(".");
 }
 function computeSunburstLayout(options) {
-	const { data, cx, cy, innerRadius, outerRadius, startAngle, endAngle, dataKey, ringPadding = 0, padding = 0 } = options;
+	const { data, cx, cy, innerRadius, outerRadius, startAngle, endAngle, dataKey, nameKey = "name", ringPadding = 0, padding = 0 } = options;
 	if (!data.children || data.children.length === 0) return [];
 	const root = hierarchy(data).sum((d) => {
 		if (d.children && d.children.length > 0) return 0;
-		const val = d[dataKey];
-		return typeof val === "number" && val > 0 ? val : 0;
+		const val = toFiniteNumber(getValueByDataKey(d, dataKey));
+		return val != null && val > 0 ? val : 0;
 	});
 	recordOriginalIndices(root);
 	root.sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
-	partition().size([1, 1])(root);
+	const layout = partition().size([1, 1])(root);
 	const angleRange = endAngle - startAngle;
 	const radiusRange = outerRadius - innerRadius;
 	const nodes = [];
-	root.descendants().forEach((d) => {
+	layout.descendants().forEach((d) => {
 		if (d.depth === 0) return;
-		const nodeStartAngle = startAngle + d.x0 * angleRange + padding / 2;
-		const nodeEndAngle = startAngle + d.x1 * angleRange - padding / 2;
+		const sectorAngle = (d.x1 - d.x0) * angleRange;
+		const sectorPadding = Math.min(Math.max(padding, 0), Math.abs(sectorAngle) / 2);
+		const nodeStartAngle = startAngle + d.x0 * angleRange + sectorPadding / 2;
+		const nodeEndAngle = startAngle + d.x1 * angleRange - sectorPadding / 2;
 		const nodeInnerRadius = innerRadius + d.y0 * radiusRange + ringPadding / 2;
 		const nodeOuterRadius = innerRadius + d.y1 * radiusRange - ringPadding / 2;
 		if (nodeEndAngle <= nodeStartAngle || nodeOuterRadius <= nodeInnerRadius) return;
@@ -54,11 +58,12 @@ function computeSunburstLayout(options) {
 			startAngle: nodeStartAngle,
 			endAngle: nodeEndAngle,
 			depth: d.depth,
-			name: d.data.name,
+			name: getValueByDataKey(d.data, nameKey, ""),
 			value: d.value ?? 0,
 			fill: d.data.fill,
 			payload: d.data,
-			tooltipIndex: buildTooltipIndex(d)
+			tooltipIndex: buildTooltipIndex(d),
+			path: d.ancestors().reverse().slice(1).map((a) => String(getValueByDataKey(a.data, nameKey, ""))).join("\0")
 		});
 	});
 	return nodes;

package/dist/es/chart/treemapUtils.mjs

@@ -1,15 +1,16 @@
+import { toFiniteNumber } from "../utils/validate.mjs";
+import { getValueByDataKey } from "../utils/chart.mjs";
 import { hierarchy, treemap, treemapSquarify } from "d3-hierarchy";
 //#region src/chart/treemapUtils.ts
 function computeTreemapLayout(options) {
-	const { data, width, height, dataKey, aspectRatio = 4 / 3, nameKey = "name", colorPanel } = options;
+	const { data, width, height, dataKey, tileAspectRatio = 4 / 3, nameKey = "name", colors } = options;
 	if (!data || data.length === 0 || width <= 0 || height <= 0) return [];
 	const root = hierarchy({ children: data }).sum((d) => {
-		if (d.children && d.children.length > 0) return 0;
-		const val = d[dataKey];
-		return typeof val === "number" && val > 0 ? val : 0;
+		if (Array.isArray(d.children) && d.children.length > 0) return 0;
+		const val = toFiniteNumber(getValueByDataKey(d, dataKey));
+		return val != null && val > 0 ? val : 0;
 	}).sort((a, b) => (b.value ?? 0) - (a.value ?? 0));
-	treemap().size([width, height]).tile(treemapSquarify.ratio(aspectRatio)).round(true)(root);
-	return root.leaves().map((leaf) => {
+	return treemap().size([width, height]).tile(treemapSquarify.ratio(tileAspectRatio)).round(true)(root).leaves().map((leaf) => {
 		const d = leaf.data;
 		let ancestor = leaf;
 		while (ancestor.depth > 1 && ancestor.parent) ancestor = ancestor.parent;
@@ -20,11 +21,12 @@ function computeTreemapLayout(options) {
 			width: leaf.x1 - leaf.x0,
 			height: leaf.y1 - leaf.y0,
 			depth: leaf.depth,
-			name: d[nameKey] ?? "",
+			name: getValueByDataKey(d, nameKey, ""),
 			value: leaf.value ?? 0,
 			payload: d,
 			root: rootIndex,
-			color: colorPanel ? colorPanel[rootIndex % colorPanel.length] : void 0
+			entryIndex: data.indexOf(ancestor.data),
+			color: colors ? colors[rootIndex % colors.length] : void 0
 		};
 	});
 }

package/dist/es/componentNames.mjs

@@ -0,0 +1,84 @@
+//#region src/componentNames.ts
+var componentNames = [
+	"Area",
+	"AreaChart",
+	"Bar",
+	"BarChart",
+	"BarList",
+	"Brush",
+	"CalendarHeatmap",
+	"CartesianAxis",
+	"CartesianGrid",
+	"Cell",
+	"CohortChart",
+	"ComposedChart",
+	"Cross",
+	"Curve",
+	"Customized",
+	"Dot",
+	"ErrorBar",
+	"Funnel",
+	"FunnelChart",
+	"Heatmap",
+	"JourneySankey",
+	"Label",
+	"LabelList",
+	"Legend",
+	"Line",
+	"LineChart",
+	"Pie",
+	"PieChart",
+	"PolarAngleAxis",
+	"PolarGrid",
+	"PolarRadiusAxis",
+	"Polygon",
+	"Radar",
+	"RadarChart",
+	"RadialBar",
+	"RadialBarChart",
+	"Rectangle",
+	"ReferenceArea",
+	"ReferenceDot",
+	"ReferenceLine",
+	"ResponsiveContainer",
+	"Sankey",
+	"Scatter",
+	"ScatterChart",
+	"Sector",
+	"Sparkline",
+	"SunburstChart",
+	"Symbols",
+	"Text",
+	"Tooltip",
+	"Tracker",
+	"Trapezoid",
+	"Treemap",
+	"XAxis",
+	"YAxis",
+	"ZAxis"
+];
+var composableNames = [
+	"useActiveTooltipCoordinate",
+	"useActiveTooltipDataPoints",
+	"useActiveTooltipLabel",
+	"useCartesianScale",
+	"useChartHeight",
+	"useChartWidth",
+	"useIsTooltipActive",
+	"useMargin",
+	"usePlotArea",
+	"useXAxisDomain",
+	"useXAxisInverseDataSnapScale",
+	"useXAxisInverseScale",
+	"useXAxisInverseTickSnapScale",
+	"useXAxisScale",
+	"useXAxisTicks",
+	"useYAxisDomain",
+	"useYAxisInverseDataSnapScale",
+	"useYAxisInverseScale",
+	"useYAxisInverseTickSnapScale",
+	"useYAxisScale",
+	"useYAxisTicks"
+];
+//#endregion
+export { componentNames, composableNames };

package/dist/es/components/Cell.mjs

@@ -1,3 +1,4 @@
+import { forwardsSvgAttributes } from "../utils/attributes.mjs";
 import { defineComponent } from "vue";
 //#region src/components/Cell.tsx
 /**
@@ -12,12 +13,12 @@ import { defineComponent } from "vue";
 * </Bar>
 * ```
 */
-var Cell = /* @__PURE__ */ defineComponent({
+var Cell = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
 	name: "Cell",
 	inheritAttrs: false,
 	setup() {
 		return () => null;
 	}
-});
+}));
 //#endregion
 export { Cell };

package/dist/es/components/Customized.mjs

@@ -1,19 +1,24 @@
-import { selectChartOffset } from "../state/selectors/selectChartOffset.mjs";
-import { selectUnfilteredCartesianItems } from "../state/selectors/axisSelectors.mjs";
-import { useAppSelector } from "../state/hooks.mjs";
-import { useChartHeight, useChartWidth } from "../context/chartLayoutContext.mjs";
+import { useChartPresentation } from "../model/presentation.mjs";
+import { warnOnce } from "../utils/log.mjs";
+import { useChart } from "../model/chart.mjs";
 import { computed, defineComponent } from "vue";
 //#region src/components/Customized.tsx
+/**
+* @deprecated Use the chart's default slot with `usePlotArea()` and the other chart composables.
+* Removed in 2.0 (see internals/migrations.md).
+*/
 var Customized = /* @__PURE__ */ defineComponent({
 	name: "Customized",
 	inheritAttrs: false,
 	slots: Object,
 	setup(_props, { slots }) {
-		const chartWidth = useChartWidth();
-		const chartHeight = useChartHeight();
-		const offset = useAppSelector(selectChartOffset);
-		const cartesianItems = useAppSelector(selectUnfilteredCartesianItems);
-		const polarItems = useAppSelector((state) => state.graphicalItems.polarItems);
+		warnOnce("[vccs] Customized is deprecated and will be removed in 2.0. Use the chart's default slot with usePlotArea() and the other chart composables.");
+		const chart = useChart();
+		const chartWidth = useChartPresentation().width;
+		const chartHeight = useChartPresentation().height;
+		const offset = chart.offset;
+		const cartesianItems = chart.items.cartesian.entries;
+		const polarItems = chart.items.polar.entries;
 		const formattedGraphicalItems = computed(() => {
 			const items = [];
 			for (const item of cartesianItems.value) items.push({

package/dist/es/components/Text.vue_vue_type_script_setup_true_lang.mjs

@@ -1,6 +1,8 @@
+import { useCanMeasureText } from "../model/runtime.mjs";
+import { svgAttrs } from "../utils/VueUtils.mjs";
 import { getStringSize } from "../utils/attrs.mjs";
 import { reduceCSSCalc } from "../utils/ReduceCSSCalc.mjs";
-import { Fragment, computed, createElementBlock, defineComponent, normalizeStyle, openBlock, renderList, renderSlot, toDisplayString } from "vue";
+import { Fragment, computed, createElementBlock, defineComponent, mergeProps, openBlock, renderList, renderSlot, toDisplayString, useAttrs } from "vue";
 //#region src/components/Text.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"x",
@@ -10,7 +12,8 @@ var _hoisted_1 = [
 	"fill"
 ];
 var _hoisted_2 = ["x", "dy"];
-var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Text_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	inheritAttrs: false,
 	__name: "Text",
 	props: {
 		x: {
@@ -51,7 +54,7 @@ var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 		},
 		fill: {
 			type: String,
-			default: "#808080"
+			default: "var(--v-charts-text, #808080)"
 		},
 		angle: {
 			type: Number,
@@ -80,6 +83,9 @@ var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 	},
 	setup(__props) {
 		const props = __props;
+		const attrs = useAttrs();
+		const elementAttrs = computed(() => svgAttrs(attrs));
+		const canMeasureText = useCanMeasureText();
 		const BREAKING_SPACES = /[ \f\n\r\t\v\u2028\u2029]+/;
 		function calculateWordWidths(children, breakAll, style) {
 			let words = [];
@@ -87,9 +93,9 @@ var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			return {
 				wordsWithComputedWidth: words.map((word) => ({
 					word,
-					width: getStringSize(word, style).width
+					width: getStringSize(word, style, canMeasureText.value).width
 				})),
-				spaceWidth: breakAll ? 0 : getStringSize("\xA0", style).width
+				spaceWidth: breakAll ? 0 : getStringSize("\xA0", style, canMeasureText.value).width
 			};
 		}
 		function calculateWordsByLines(maxLines, value, style, breakAll, initialWordsWithComputedWidth, spaceWidth, lineWidth, scaleToFit) {
@@ -169,21 +175,21 @@ var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 			return arr.join(" ");
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("text", {
+			return openBlock(), createElementBlock("text", mergeProps(elementAttrs.value, {
 				x: x.value,
 				y: y.value,
 				transform: transforms.value || void 0,
 				"text-anchor": props.textAnchor,
-				fill: props.fill && props.fill.includes("url") ? "#808080" : props.fill,
+				fill: props.fill && props.fill.includes("url") ? "var(--v-charts-text, #808080)" : props.fill,
 				class: "v-charts-text",
-				style: normalizeStyle(props.style)
-			}, [renderSlot(_ctx.$slots, "default", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(wordsByLines.value, (line, index) => {
+				style: props.style
+			}), [renderSlot(_ctx.$slots, "default", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(wordsByLines.value, (line, index) => {
 				return openBlock(), createElementBlock("tspan", {
 					key: index,
 					x: x.value,
 					dy: index === 0 ? startDy.value : props.lineHeight
 				}, toDisplayString(line.words.join(props.breakAll ? "" : " ")), 9, _hoisted_2);
-			}), 128))])], 12, _hoisted_1);
+			}), 128))])], 16, _hoisted_1);
 		};
 	}
 });

package/dist/es/components/label/Label.mjs

@@ -1,40 +1,22 @@
-import { isNullish } from "../../utils/validate.mjs";
-import { useViewBox } from "../../context/chartLayoutContext.mjs";
 import { LabelVueProps } from "./types.mjs";
-import { usePolarLabelViewBox } from "../../context/polarLabelViewBoxContext.mjs";
-import { getAttrsOfCartesianLabel, getAttrsOfPolarLabel, isPolar, renderRadialLabel } from "./utils.mjs";
-import Text_default from "../Text.mjs";
-import { createVNode, defineComponent, mergeProps } from "vue";
+import { LabelView } from "./LabelView.mjs";
+import { forwardsSvgAttributes } from "../../utils/attributes.mjs";
+import { defineComponent, h } from "vue";
 //#region src/components/label/Label.tsx
-var Label = /* @__PURE__ */ defineComponent({
+var Label = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
 	name: "Label",
 	props: LabelVueProps,
+	inheritAttrs: false,
 	slots: Object,
-	setup(props, { slots, attrs }) {
-		const viewBoxFromContext = useViewBox();
-		const polarLabelViewBox = usePolarLabelViewBox();
+	setup(props, { attrs, slots }) {
 		return () => {
-			const { viewBox: viewBoxFromProps, value, position, textBreakAll, formatter } = props;
-			const viewBox = viewBoxFromProps || polarLabelViewBox.value || viewBoxFromContext.value;
-			if (!viewBox || isNullish(value) && !slots.content) return null;
-			const isPolarLabel = isPolar(viewBox);
-			if (slots.content) return slots.content({
-				...props,
-				viewBox
-			});
-			let label = value;
-			if (typeof formatter === "function") label = formatter(label);
-			if (isPolarLabel && (position === "insideStart" || position === "insideEnd" || position === "end")) return renderRadialLabel(props, position, label, attrs, viewBox);
-			const positionAttrs = isPolarLabel ? getAttrsOfPolarLabel(props, viewBox) : getAttrsOfCartesianLabel(props, viewBox);
-			const textAnchor = attrs.textAnchor != null && (attrs.textAnchor === "start" || attrs.textAnchor === "middle" || attrs.textAnchor === "end") ? attrs.textAnchor : positionAttrs.textAnchor;
-			return createVNode(Text_default, mergeProps({ "class": ["v-charts-label", props.class] }, attrs, positionAttrs, {
-				"textAnchor": textAnchor,
-				"angle": props.angle,
-				"breakAll": textBreakAll,
-				"value": label
-			}), null);
+			const { parentViewBox: _parentViewBox, "parent-view-box": _parentBox, index: _index, ...svgAttrs } = attrs;
+			return h(LabelView, {
+				...svgAttrs,
+				...props
+			}, slots);
 		};
 	}
-});
+}));
 //#endregion
 export { Label };

package/dist/es/components/label/LabelList.mjs

@@ -1,55 +1,20 @@
-import { isNullish } from "../../utils/validate.mjs";
-import { getValueByDataKey } from "../../utils/chart.mjs";
-import { Layer } from "../../container/Layer.mjs";
+import { useDeferredView } from "../../hooks/deferredView.mjs";
 import { LabelListVueProps } from "./types.mjs";
-import { parseViewBox } from "./utils.mjs";
-import { Label } from "./Label.mjs";
-import { useLabelLayerRef } from "../../context/labelLayerContext.mjs";
-import { useCartesianLabelListData } from "../../context/cartesianLabelListContext.mjs";
-import { Teleport, createVNode, defineComponent, isVNode, mergeProps } from "vue";
+import { LabelListView } from "./LabelListView.mjs";
+import { forwardsSvgAttributes } from "../../utils/attributes.mjs";
+import { defineComponent, h } from "vue";
 //#region src/components/label/LabelList.tsx
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-var LabelList = /* @__PURE__ */ defineComponent({
+var LabelList = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
+	name: "LabelList",
 	props: LabelListVueProps,
+	slots: Object,
 	setup(props, { attrs, slots }) {
-		const labelLayerRef = useLabelLayerRef(null);
-		const contextData = useCartesianLabelListData(null);
-		return () => {
-			let _slot;
-			const { dataKey, valueAccessor, clockWise, id, ...others } = props;
-			const data = props.data ?? contextData?.value;
-			if (!data || !data.length) return null;
-			const content = createVNode(Layer, { "class": "v-charts-label-list" }, _isSlot(_slot = data.map((entry, index) => {
-				const value = isNullish(dataKey) ? valueAccessor(entry, index) : getValueByDataKey(entry && entry.payload, dataKey);
-				const idProps = isNullish(id) ? void 0 : `${id}-${index}`;
-				const viewBox = parseViewBox(isNullish(clockWise) ? entry : {
-					...entry,
-					clockWise
-				});
-				if (slots.label) return slots.label({
-					...others,
-					...attrs,
-					...viewBox,
-					value,
-					index,
-					key: `label-${index}`
-				});
-				const entryFill = entry.fill != null && !("fill" in others) && !("fill" in attrs) ? entry.fill : void 0;
-				return createVNode(Label, mergeProps(others, attrs, entryFill != null ? { fill: entryFill } : {}, {
-					"id": idProps,
-					"parentViewBox": entry.parentViewBox,
-					"value": value,
-					"viewBox": viewBox,
-					"key": `label-${index}`,
-					"index": index
-				}), null);
-			})) ? _slot : { default: () => [_slot] });
-			if (labelLayerRef?.value) return createVNode(Teleport, { "to": labelLayerRef.value }, _isSlot(content) ? content : { default: () => [content] });
-			return content;
-		};
+		const View = useDeferredView(LabelListView);
+		return () => h(View, {
+			item: props,
+			svgAttrs: attrs
+		}, slots);
 	}
-});
+}));
 //#endregion
 export { LabelList };

package/dist/es/components/label/LabelListView.mjs

@@ -0,0 +1,73 @@
+import { isNullish } from "../../utils/validate.mjs";
+import { useLayerTeleport } from "../../hooks/useLayerTeleport.mjs";
+import { useChartLayer } from "../../model/runtime.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { getValueByDataKey } from "../../utils/chart.mjs";
+import { parseViewBox } from "./utils.mjs";
+import { LabelView } from "./LabelView.mjs";
+import { useCartesianLabelListData } from "../../context/cartesianLabelListContext.mjs";
+import { createVNode, defineComponent, isVNode, mergeProps } from "vue";
+//#region src/components/label/LabelListView.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var LabelListView = /* @__PURE__ */ defineComponent({
+	name: "LabelListView",
+	inheritAttrs: true,
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		svgAttrs: {
+			type: Object,
+			required: true
+		}
+	},
+	setup(view, { slots }) {
+		const teleport = useLayerTeleport();
+		const labelLayerRef = useChartLayer("label");
+		const contextData = useCartesianLabelListData(null);
+		return () => {
+			let _slot;
+			const props = view.item;
+			const attrs = view.svgAttrs;
+			const { dataKey, valueAccessor, clockWise, id, formatter, ...others } = props;
+			const data = props.data ?? contextData?.value;
+			if (!data || !data.length) return null;
+			const content = createVNode(Layer, { "class": "v-charts-label-list" }, _isSlot(_slot = data.map((entry, index) => {
+				const raw = isNullish(dataKey) ? valueAccessor(entry, index) : getValueByDataKey(entry && entry.payload, dataKey);
+				const text = typeof raw === "number" || typeof raw === "string" ? raw : void 0;
+				const idProps = isNullish(id) ? void 0 : `${id}-${index}`;
+				const viewBox = parseViewBox(isNullish(clockWise) ? entry : {
+					...entry,
+					clockWise
+				});
+				const entryOpacity = typeof entry.opacity === "number" ? { opacity: entry.opacity } : void 0;
+				const contentSlot = slots.content ?? slots.label;
+				if (contentSlot) return contentSlot({
+					...others,
+					formatter,
+					...attrs,
+					...entryOpacity,
+					...viewBox,
+					value: formatter ? raw : text,
+					index,
+					key: `label-${String(entry.key ?? index)}`
+				});
+				const entryFill = entry.fill != null && !("fill" in others) && !("fill" in attrs) ? entry.fill : void 0;
+				return createVNode(LabelView, mergeProps(others, attrs, entryFill != null ? { fill: entryFill } : {}, entryOpacity, {
+					"id": idProps,
+					"parentViewBox": entry.parentViewBox,
+					"value": formatter ? formatter(raw) : text,
+					"viewBox": viewBox,
+					"key": `label-${String(entry.key ?? index)}`,
+					"index": index
+				}), null);
+			})) ? _slot : { default: () => [_slot] });
+			return teleport(content, labelLayerRef);
+		};
+	}
+});
+//#endregion
+export { LabelListView };

package/dist/es/components/label/LabelView.mjs

@@ -0,0 +1,45 @@
+import { isNullish } from "../../utils/validate.mjs";
+import { useChartPresentation } from "../../model/presentation.mjs";
+import { useChartId } from "../../hooks/useChartId.mjs";
+import { LabelViewVueProps } from "./types.mjs";
+import { usePolarLabelViewBox } from "../../context/polarLabelViewBoxContext.mjs";
+import { getAttrsOfCartesianLabel, getAttrsOfPolarLabel, isPolar, normalizeViewBox, renderRadialLabel } from "./utils.mjs";
+import Text_default from "../Text.mjs";
+import { createVNode, defineComponent, mergeProps } from "vue";
+//#region src/components/label/LabelView.tsx
+var LabelView = /* @__PURE__ */ defineComponent({
+	name: "LabelView",
+	props: LabelViewVueProps,
+	slots: Object,
+	setup(props, { slots, attrs }) {
+		const radialLabelId = useChartId("v-charts-radial-line");
+		const viewBoxFromContext = useChartPresentation().viewBox;
+		const polarLabelViewBox = usePolarLabelViewBox();
+		return () => {
+			const { viewBox: viewBoxFromProps, value, position, textBreakAll, formatter } = props;
+			const source = viewBoxFromProps || polarLabelViewBox.value || viewBoxFromContext.value;
+			if (!source || isNullish(value) && !slots.content) return null;
+			const viewBox = normalizeViewBox(source);
+			if (slots.content) return slots.content({
+				...props,
+				viewBox
+			});
+			let label = value;
+			if (typeof formatter === "function") label = formatter(label);
+			if (isPolar(viewBox) && (position === "insideStart" || position === "insideEnd" || position === "end")) return renderRadialLabel(props, position, label, attrs, viewBox, radialLabelId);
+			const positionAttrs = isPolar(viewBox) ? getAttrsOfPolarLabel(props, viewBox) : getAttrsOfCartesianLabel(props, viewBox);
+			const textAnchor = attrs.textAnchor != null && (attrs.textAnchor === "start" || attrs.textAnchor === "middle" || attrs.textAnchor === "end") ? attrs.textAnchor : positionAttrs.textAnchor;
+			return createVNode(Text_default, mergeProps({
+				"data-slot": "label",
+				"class": ["v-charts-label", props.class]
+			}, attrs, positionAttrs, {
+				"textAnchor": textAnchor,
+				"angle": props.angle,
+				"breakAll": textBreakAll,
+				"value": label
+			}), null);
+		};
+	}
+});
+//#endregion
+export { LabelView };