vccs 0.1.0 → 0.3.0

package/dist/es/chart/treemapUtils.mjs

@@ -0,0 +1,32 @@
+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;
+	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;
+	}).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) => {
+		const d = leaf.data;
+		let ancestor = leaf;
+		while (ancestor.depth > 1 && ancestor.parent) ancestor = ancestor.parent;
+		const rootIndex = ancestor.parent ? ancestor.parent.children.indexOf(ancestor) : 0;
+		return {
+			x: leaf.x0,
+			y: leaf.y0,
+			width: leaf.x1 - leaf.x0,
+			height: leaf.y1 - leaf.y0,
+			depth: leaf.depth,
+			name: d[nameKey] ?? "",
+			value: leaf.value ?? 0,
+			payload: d,
+			root: rootIndex,
+			color: colorPanel ? colorPanel[rootIndex % colorPanel.length] : void 0
+		};
+	});
+}
+//#endregion
+export { computeTreemapLayout };

package/dist/es/components/Cell.mjs

@@ -1,11 +1,23 @@
-import { defineComponent as e } from "vue";
+import { defineComponent } from "vue";
 //#region src/components/Cell.tsx
-var t = /* @__PURE__ */ e({
+/**
+* Cell is a marker component used to define per-item colors and styles.
+* It renders nothing — parent components (Bar, Pie, etc.) read Cell
+* children from the default slot and apply their props by index.
+*
+* Usage:
+* ```vue
+* <Bar data-key="value">
+*   <Cell v-for="(entry, index) in data" :key="index" :fill="COLORS[index]" />
+* </Bar>
+* ```
+*/
+var Cell = /* @__PURE__ */ defineComponent({
 	name: "Cell",
-	inheritAttrs: !1,
+	inheritAttrs: false,
 	setup() {
 		return () => null;
 	}
 });
 //#endregion
-export { t as Cell };
+export { Cell };

package/dist/es/components/Customized.mjs

@@ -0,0 +1,43 @@
+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 { computed, defineComponent } from "vue";
+//#region src/components/Customized.tsx
+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);
+		const formattedGraphicalItems = computed(() => {
+			const items = [];
+			for (const item of cartesianItems.value) items.push({
+				type: item.type,
+				dataKey: item.dataKey,
+				props: item
+			});
+			for (const item of polarItems.value) items.push({
+				type: item.type,
+				dataKey: item.dataKey,
+				props: item
+			});
+			return items;
+		});
+		return () => {
+			if (!slots.default) return null;
+			return slots.default({
+				formattedGraphicalItems: formattedGraphicalItems.value,
+				chartWidth: chartWidth.value,
+				chartHeight: chartHeight.value,
+				offset: offset.value
+			});
+		};
+	}
+});
+//#endregion
+export { Customized };

package/dist/es/components/Text.mjs

@@ -1,5 +1,5 @@
-import e from "./Text.vue_vue_type_script_setup_true_lang.mjs";
+import Text_vue_vue_type_script_setup_true_lang_default from "./Text.vue_vue_type_script_setup_true_lang.mjs";
 //#region src/components/Text.vue
-var t = e;
+var Text_default = Text_vue_vue_type_script_setup_true_lang_default;
 //#endregion
-export { t as default };
+export { Text_default as default };

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

@@ -1,14 +1,16 @@
-import { getStringSize as e } from "../utils/attrs.mjs";
-import { reduceCSSCalc as t } from "../utils/ReduceCSSCalc.mjs";
-import { Fragment as n, computed as r, createElementBlock as i, defineComponent as a, normalizeStyle as o, openBlock as s, renderList as c, toDisplayString as l } from "vue";
+import { getStringSize } from "../utils/attrs.mjs";
+import { reduceCSSCalc } from "../utils/ReduceCSSCalc.mjs";
+import { Fragment, computed, createElementBlock, defineComponent, normalizeStyle, openBlock, renderList, toDisplayString } from "vue";
 //#region src/components/Text.vue?vue&type=script&setup=true&lang.ts
-var u = [
+var _hoisted_1 = [
 	"x",
 	"y",
 	"transform",
 	"text-anchor",
 	"fill"
-], d = ["x", "dy"], f = /* @__PURE__ */ a({
+];
+var _hoisted_2 = ["x", "dy"];
+var Text_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
 	__name: "Text",
 	props: {
 		x: {
@@ -37,7 +39,7 @@ var u = [
 		},
 		scaleToFit: {
 			type: Boolean,
-			default: !1
+			default: false
 		},
 		textAnchor: {
 			type: String,
@@ -61,7 +63,7 @@ var u = [
 		},
 		breakAll: {
 			type: Boolean,
-			default: !1
+			default: false
 		},
 		maxLines: {
 			type: Number,
@@ -76,79 +78,114 @@ var u = [
 			default: ""
 		}
 	},
-	setup(a) {
-		let f = a, p = /[ \f\n\r\t\v\u2028\u2029]+/;
-		function m(t, n, r) {
-			let i = [];
-			return t != null && (i = n ? t.toString().split("") : t.toString().split(p)), {
-				wordsWithComputedWidth: i.map((t) => ({
-					word: t,
-					width: e(t, r).width
+	setup(__props) {
+		const props = __props;
+		const BREAKING_SPACES = /[ \f\n\r\t\v\u2028\u2029]+/;
+		function calculateWordWidths(children, breakAll, style) {
+			let words = [];
+			if (children !== void 0 && children !== null) words = breakAll ? children.toString().split("") : children.toString().split(BREAKING_SPACES);
+			return {
+				wordsWithComputedWidth: words.map((word) => ({
+					word,
+					width: getStringSize(word, style).width
 				})),
-				spaceWidth: n ? 0 : e("\xA0", r).width
+				spaceWidth: breakAll ? 0 : getStringSize("\xA0", style).width
 			};
 		}
-		function h(e, t, n, r, i, a, o, s) {
-			let c = typeof e == "number", l = t, u = (e = []) => e.reduce((e, { word: t, width: n }) => {
-				let r = e[e.length - 1];
-				return r && (o == null || s || r.width + n + a < Number(o)) ? (r.words.push(t), r.width += n + a) : e.push({
-					words: [t],
-					width: n
-				}), e;
-			}, []), d = u(i), f = (e) => e.reduce((e, t) => e.width > t.width ? e : t);
-			if (!c || s || !(d.length > e || f(d).width > Number(o))) return d;
-			let p = (t) => {
-				let { wordsWithComputedWidth: i } = m(l.slice(0, t) + "…", r, n), a = u(i);
-				return [a.length > e || f(a).width > Number(o), a];
-			}, h = 0, g = l.length - 1, _ = 0, v;
-			for (; h <= g && _ <= l.length - 1;) {
-				let e = Math.floor((h + g) / 2), [t, n] = p(e - 1), [r] = p(e);
-				if (!t && !r && (h = e + 1), t && r && (g = e - 1), !t && r) {
-					v = n;
+		function calculateWordsByLines(maxLines, value, style, breakAll, initialWordsWithComputedWidth, spaceWidth, lineWidth, scaleToFit) {
+			const shouldLimitLines = typeof maxLines === "number";
+			const text = value;
+			const calculate = (words = []) => {
+				return words.reduce((result, { word, width }) => {
+					const currentLine = result[result.length - 1];
+					if (currentLine && (lineWidth == null || scaleToFit || currentLine.width + width + spaceWidth < Number(lineWidth))) {
+						currentLine.words.push(word);
+						currentLine.width += width + spaceWidth;
+					} else result.push({
+						words: [word],
+						width
+					});
+					return result;
+				}, []);
+			};
+			const originalResult = calculate(initialWordsWithComputedWidth);
+			const findLongestLine = (words) => words.reduce((a, b) => a.width > b.width ? a : b);
+			if (!shouldLimitLines || scaleToFit) return originalResult;
+			if (!(originalResult.length > maxLines || findLongestLine(originalResult).width > Number(lineWidth))) return originalResult;
+			const suffix = "…";
+			const checkOverflow = (index) => {
+				const { wordsWithComputedWidth } = calculateWordWidths(text.slice(0, index) + suffix, breakAll, style);
+				const result = calculate(wordsWithComputedWidth);
+				return [result.length > maxLines || findLongestLine(result).width > Number(lineWidth), result];
+			};
+			let start = 0;
+			let end = text.length - 1;
+			let iterations = 0;
+			let trimmedResult;
+			while (start <= end && iterations <= text.length - 1) {
+				const middle = Math.floor((start + end) / 2);
+				const [doesPrevOverflow, result] = checkOverflow(middle - 1);
+				const [doesMiddleOverflow] = checkOverflow(middle);
+				if (!doesPrevOverflow && !doesMiddleOverflow) start = middle + 1;
+				if (doesPrevOverflow && doesMiddleOverflow) end = middle - 1;
+				if (!doesPrevOverflow && doesMiddleOverflow) {
+					trimmedResult = result;
 					break;
 				}
-				_++;
+				iterations++;
 			}
-			return v || d;
+			return trimmedResult || originalResult;
 		}
-		function g({ width: e, scaleToFit: t, value: n, style: r, breakAll: i, maxLines: a }) {
-			if (e || t) {
-				let o = m(n, i, r), s = o.wordsWithComputedWidth, c = o.spaceWidth;
-				return h(a, n, r, i, s, c, e, t);
+		function getWordsByLines({ width, scaleToFit, value, style, breakAll, maxLines }) {
+			if (width || scaleToFit) {
+				const wordWidths = calculateWordWidths(value, breakAll, style);
+				const wordsWithComputedWidth = wordWidths.wordsWithComputedWidth;
+				const spaceWidth = wordWidths.spaceWidth;
+				return calculateWordsByLines(maxLines, value, style, breakAll, wordsWithComputedWidth, spaceWidth, width, scaleToFit);
 			}
-			return [{ words: n == null ? [] : n.toString().split(p) }];
+			return [{ words: value !== void 0 && value !== null ? value.toString().split(BREAKING_SPACES) : [] }];
 		}
-		let _ = r(() => g({
-			width: f.width,
-			scaleToFit: f.scaleToFit,
-			value: f.value,
-			style: f.style,
-			breakAll: f.breakAll,
-			maxLines: f.maxLines
-		})), v = r(() => Number(f.x) + (typeof f.dx == "number" ? f.dx : 0)), y = r(() => Number(f.y) + (typeof f.dy == "number" ? f.dy : 0)), b = r(() => {
-			switch (f.verticalAnchor) {
-				case "start": return t(`calc(${f.capHeight})`);
-				case "middle": return t(`calc(${(_.value.length - 1) / 2} * -${f.lineHeight} + (${f.capHeight} / 2))`);
-				default: return t(`calc(${_.value.length - 1} * -${f.lineHeight})`);
+		const wordsByLines = computed(() => getWordsByLines({
+			width: props.width,
+			scaleToFit: props.scaleToFit,
+			value: props.value,
+			style: props.style,
+			breakAll: props.breakAll,
+			maxLines: props.maxLines
+		}));
+		const x = computed(() => Number(props.x) + (typeof props.dx === "number" ? props.dx : 0));
+		const y = computed(() => Number(props.y) + (typeof props.dy === "number" ? props.dy : 0));
+		const startDy = computed(() => {
+			switch (props.verticalAnchor) {
+				case "start": return reduceCSSCalc(`calc(${props.capHeight})`);
+				case "middle": return reduceCSSCalc(`calc(${(wordsByLines.value.length - 1) / 2} * -${props.lineHeight} + (${props.capHeight} / 2))`);
+				default: return reduceCSSCalc(`calc(${wordsByLines.value.length - 1} * -${props.lineHeight})`);
 			}
-		}), x = r(() => {
-			let e = [];
-			return f.scaleToFit && _.value[0]?.width && f.width && e.push(`scale(${Number(f.width) / _.value[0].width})`), f.angle && e.push(`rotate(${f.angle}, ${v.value}, ${y.value})`), e.join(" ");
 		});
-		return (e, t) => (s(), i("text", {
-			x: v.value,
-			y: y.value,
-			transform: x.value || void 0,
-			"text-anchor": f.textAnchor,
-			fill: f.fill && f.fill.includes("url") ? "#808080" : f.fill,
-			class: "v-charts-text",
-			style: o(f.style)
-		}, [(s(!0), i(n, null, c(_.value, (e, t) => (s(), i("tspan", {
-			key: t,
-			x: v.value,
-			dy: t === 0 ? b.value : f.lineHeight
-		}, l(e.words.join(f.breakAll ? "" : " ")), 9, d))), 128))], 12, u));
+		const transforms = computed(() => {
+			const arr = [];
+			if (props.scaleToFit && wordsByLines.value[0]?.width && props.width) arr.push(`scale(${Number(props.width) / wordsByLines.value[0].width})`);
+			if (props.angle) arr.push(`rotate(${props.angle}, ${x.value}, ${y.value})`);
+			return arr.join(" ");
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("text", {
+				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,
+				class: "v-charts-text",
+				style: normalizeStyle(props.style)
+			}, [(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);
+		};
 	}
 });
 //#endregion
-export { f as default };
+export { Text_vue_vue_type_script_setup_true_lang_default as default };