vccs 0.0.1 → 0.2.0

package/dist/es/cartesian/cartesian-grid/HorizontalStripes.mjs

@@ -0,0 +1,43 @@
+import { createVNode, defineComponent } from "vue";
+//#region src/cartesian/cartesian-grid/HorizontalStripes.tsx
+var HorizontalStripes = /* @__PURE__ */ defineComponent({
+	name: "HorizontalStripes",
+	inheritAttrs: false,
+	props: {
+		horizontalFill: Array,
+		fillOpacity: Number,
+		x: Number,
+		y: Number,
+		width: Number,
+		height: Number,
+		horizontalPoints: Array,
+		horizontal: [Boolean, Object]
+	},
+	setup(props) {
+		return () => {
+			const { horizontalFill, fillOpacity, x, y, width, height, horizontalPoints, horizontal = true } = props;
+			if (!horizontal || !horizontalFill || !horizontalFill.length) return null;
+			const roundedSortedHorizontalPoints = horizontalPoints?.map((e) => Math.round(e + y - y)).sort((a, b) => a - b);
+			if (y !== roundedSortedHorizontalPoints?.[0]) roundedSortedHorizontalPoints?.unshift(0);
+			const items = roundedSortedHorizontalPoints?.map((entry, i) => {
+				const lineHeight = !roundedSortedHorizontalPoints[i + 1] ? y + height - entry : roundedSortedHorizontalPoints[i + 1] - entry;
+				if (lineHeight <= 0) return null;
+				const colorIndex = i % horizontalFill.length;
+				return createVNode("rect", {
+					"key": `react-${i}`,
+					"y": entry,
+					"x": x,
+					"height": lineHeight,
+					"width": width,
+					"stroke": "none",
+					"fill": horizontalFill[colorIndex],
+					"fill-opacity": fillOpacity,
+					"class": "v-charts-cartesian-grid-bg"
+				}, null);
+			});
+			return createVNode("g", { "class": "v-charts-cartesian-gridstripes-horizontal" }, [items]);
+		};
+	}
+});
+//#endregion
+export { HorizontalStripes as default };

package/dist/es/cartesian/cartesian-grid/VerticalGridLines.mjs

@@ -0,0 +1,45 @@
+import { renderLineItem } from "./utils.mjs";
+import { createVNode, defineComponent } from "vue";
+//#region src/cartesian/cartesian-grid/VerticalGridLines.tsx
+var VerticalGridLines = /* @__PURE__ */ defineComponent({
+	name: "VerticalGridLines",
+	inheritAttrs: false,
+	props: {
+		x: Number,
+		y: Number,
+		width: Number,
+		height: Number,
+		verticalPoints: Array,
+		xAxisId: [String, Number],
+		yAxisId: [String, Number],
+		offset: Object,
+		xAxis: Object,
+		yAxis: Object,
+		vertical: [Boolean, Object]
+	},
+	setup(props, { attrs, slots }) {
+		return () => {
+			const { y, height, vertical = true, verticalPoints } = props;
+			if (!vertical || !verticalPoints || !verticalPoints.length) return null;
+			const { xAxisId, yAxisId, ...otherLineItemProps } = {
+				...props,
+				...attrs
+			};
+			const items = verticalPoints.map((entry, i) => {
+				const lineItemProps = {
+					...otherLineItemProps,
+					x1: entry,
+					y1: y,
+					x2: entry,
+					y2: y + height,
+					key: `line-${i}`,
+					index: i
+				};
+				return renderLineItem(slots.vertical, vertical, lineItemProps);
+			});
+			return createVNode("g", { "class": "v-charts-cartesian-grid-vertical" }, [items]);
+		};
+	}
+});
+//#endregion
+export { VerticalGridLines as default };

package/dist/es/cartesian/cartesian-grid/VerticalStripes.mjs

@@ -0,0 +1,43 @@
+import { createVNode, defineComponent } from "vue";
+//#region src/cartesian/cartesian-grid/VerticalStripes.tsx
+var VerticalStripes = /* @__PURE__ */ defineComponent({
+	name: "VerticalStripes",
+	inheritAttrs: false,
+	props: {
+		verticalFill: Array,
+		fillOpacity: Number,
+		x: Number,
+		y: Number,
+		width: Number,
+		height: Number,
+		verticalPoints: Array,
+		vertical: [Boolean, Object]
+	},
+	setup(props) {
+		return () => {
+			const { verticalFill, fillOpacity, x, y, width, height, verticalPoints, vertical = true } = props;
+			if (!vertical || !verticalFill || !verticalFill.length) return null;
+			const roundedSortedVerticalPoints = verticalPoints?.map((e) => Math.round(e + x - x)).sort((a, b) => a - b);
+			if (x !== roundedSortedVerticalPoints?.[0]) roundedSortedVerticalPoints?.unshift(0);
+			const items = roundedSortedVerticalPoints?.map((entry, i) => {
+				const lineWidth = !roundedSortedVerticalPoints[i + 1] ? x + width - entry : roundedSortedVerticalPoints[i + 1] - entry;
+				if (lineWidth <= 0) return null;
+				const colorIndex = i % verticalFill.length;
+				return createVNode("rect", {
+					"key": `react-${i}`,
+					"x": entry,
+					"y": y,
+					"width": lineWidth,
+					"height": height,
+					"stroke": "none",
+					"fill": verticalFill[colorIndex],
+					"fill-opacity": fillOpacity,
+					"class": "v-charts-cartesian-grid-bg"
+				}, null);
+			});
+			return createVNode("g", { "class": "v-charts-cartesian-gridstripes-vertical" }, [items]);
+		};
+	}
+});
+//#endregion
+export { VerticalStripes as default };

package/dist/es/cartesian/cartesian-grid/const.mjs

@@ -0,0 +1,336 @@
+//#region src/cartesian/cartesian-grid/const.ts
+var CartesianAxisDefaultProps = {
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0,
+	viewBox: {
+		x: 0,
+		y: 0,
+		width: 0,
+		height: 0
+	},
+	orientation: "bottom",
+	ticks: [],
+	stroke: "#666",
+	tickLine: true,
+	axisLine: true,
+	mirror: false,
+	minTickGap: 5,
+	tickSize: 6,
+	tickMargin: 2,
+	interval: "preserveEnd"
+};
+var SVGContainerPropKeys = ["viewBox"];
+var PolyElementKeys = ["points", "pathLength"];
+/** map of svg element types to unique svg attributes that belong to that element */
+var FilteredElementKeyMap = {
+	svg: SVGContainerPropKeys,
+	polygon: PolyElementKeys,
+	polyline: PolyElementKeys
+};
+var SVGElementPropKeys = [
+	"aria-activedescendant",
+	"aria-atomic",
+	"aria-autocomplete",
+	"aria-busy",
+	"aria-checked",
+	"aria-colcount",
+	"aria-colindex",
+	"aria-colspan",
+	"aria-controls",
+	"aria-current",
+	"aria-describedby",
+	"aria-details",
+	"aria-disabled",
+	"aria-errormessage",
+	"aria-expanded",
+	"aria-flowto",
+	"aria-haspopup",
+	"aria-hidden",
+	"aria-invalid",
+	"aria-keyshortcuts",
+	"aria-label",
+	"aria-labelledby",
+	"aria-level",
+	"aria-live",
+	"aria-modal",
+	"aria-multiline",
+	"aria-multiselectable",
+	"aria-orientation",
+	"aria-owns",
+	"aria-placeholder",
+	"aria-posinset",
+	"aria-pressed",
+	"aria-readonly",
+	"aria-relevant",
+	"aria-required",
+	"aria-roledescription",
+	"aria-rowcount",
+	"aria-rowindex",
+	"aria-rowspan",
+	"aria-selected",
+	"aria-setsize",
+	"aria-sort",
+	"aria-valuemax",
+	"aria-valuemin",
+	"aria-valuenow",
+	"aria-valuetext",
+	"class",
+	"color",
+	"height",
+	"id",
+	"lang",
+	"max",
+	"media",
+	"method",
+	"min",
+	"name",
+	"style",
+	"target",
+	"width",
+	"role",
+	"tabIndex",
+	"accentHeight",
+	"accumulate",
+	"additive",
+	"alignmentBaseline",
+	"allowReorder",
+	"alphabetic",
+	"amplitude",
+	"arabicForm",
+	"ascent",
+	"attributeName",
+	"attributeType",
+	"autoReverse",
+	"azimuth",
+	"baseFrequency",
+	"baselineShift",
+	"baseProfile",
+	"bbox",
+	"begin",
+	"bias",
+	"by",
+	"calcMode",
+	"capHeight",
+	"clip",
+	"clipPath",
+	"clipPathUnits",
+	"clipRule",
+	"colorInterpolation",
+	"colorInterpolationFilters",
+	"colorProfile",
+	"colorRendering",
+	"contentScriptType",
+	"contentStyleType",
+	"cursor",
+	"cx",
+	"cy",
+	"d",
+	"decelerate",
+	"descent",
+	"diffuseConstant",
+	"direction",
+	"display",
+	"divisor",
+	"dominantBaseline",
+	"dur",
+	"dx",
+	"dy",
+	"edgeMode",
+	"elevation",
+	"enableBackground",
+	"end",
+	"exponent",
+	"externalResourcesRequired",
+	"fill",
+	"fillOpacity",
+	"fillRule",
+	"filter",
+	"filterRes",
+	"filterUnits",
+	"floodColor",
+	"floodOpacity",
+	"focusable",
+	"fontFamily",
+	"fontSize",
+	"fontSizeAdjust",
+	"fontStretch",
+	"fontStyle",
+	"fontVariant",
+	"fontWeight",
+	"format",
+	"from",
+	"fx",
+	"fy",
+	"g1",
+	"g2",
+	"glyphName",
+	"glyphOrientationHorizontal",
+	"glyphOrientationVertical",
+	"glyphRef",
+	"gradientTransform",
+	"gradientUnits",
+	"hanging",
+	"horizAdvX",
+	"horizOriginX",
+	"href",
+	"ideographic",
+	"imageRendering",
+	"in2",
+	"in",
+	"intercept",
+	"k1",
+	"k2",
+	"k3",
+	"k4",
+	"k",
+	"kernelMatrix",
+	"kernelUnitLength",
+	"kerning",
+	"keyPoints",
+	"keySplines",
+	"keyTimes",
+	"lengthAdjust",
+	"letterSpacing",
+	"lightingColor",
+	"limitingConeAngle",
+	"local",
+	"markerEnd",
+	"markerHeight",
+	"markerMid",
+	"markerStart",
+	"markerUnits",
+	"markerWidth",
+	"mask",
+	"maskContentUnits",
+	"maskUnits",
+	"mathematical",
+	"mode",
+	"numOctaves",
+	"offset",
+	"opacity",
+	"operator",
+	"order",
+	"orient",
+	"orientation",
+	"origin",
+	"overflow",
+	"overlinePosition",
+	"overlineThickness",
+	"paintOrder",
+	"panose1",
+	"pathLength",
+	"patternContentUnits",
+	"patternTransform",
+	"patternUnits",
+	"pointerEvents",
+	"pointsAtX",
+	"pointsAtY",
+	"pointsAtZ",
+	"preserveAlpha",
+	"preserveAspectRatio",
+	"primitiveUnits",
+	"r",
+	"radius",
+	"refX",
+	"refY",
+	"renderingIntent",
+	"repeatCount",
+	"repeatDur",
+	"requiredExtensions",
+	"requiredFeatures",
+	"restart",
+	"result",
+	"rotate",
+	"rx",
+	"ry",
+	"seed",
+	"shapeRendering",
+	"slope",
+	"spacing",
+	"specularConstant",
+	"specularExponent",
+	"speed",
+	"spreadMethod",
+	"startOffset",
+	"stdDeviation",
+	"stemh",
+	"stemv",
+	"stitchTiles",
+	"stopColor",
+	"stopOpacity",
+	"strikethroughPosition",
+	"strikethroughThickness",
+	"string",
+	"stroke",
+	"stroke-dasharray",
+	"strokeDashoffset",
+	"strokeLinecap",
+	"strokeLinejoin",
+	"strokeMiterlimit",
+	"strokeOpacity",
+	"strokeWidth",
+	"surfaceScale",
+	"systemLanguage",
+	"tableValues",
+	"targetX",
+	"targetY",
+	"textAnchor",
+	"textDecoration",
+	"textLength",
+	"textRendering",
+	"to",
+	"transform",
+	"u1",
+	"u2",
+	"underlinePosition",
+	"underlineThickness",
+	"unicode",
+	"unicodeBidi",
+	"unicodeRange",
+	"unitsPerEm",
+	"vAlphabetic",
+	"values",
+	"vectorEffect",
+	"version",
+	"vertAdvY",
+	"vertOriginX",
+	"vertOriginY",
+	"vHanging",
+	"vIdeographic",
+	"viewTarget",
+	"visibility",
+	"vMathematical",
+	"widths",
+	"wordSpacing",
+	"writingMode",
+	"x1",
+	"x2",
+	"x",
+	"xChannelSelector",
+	"xHeight",
+	"xlinkActuate",
+	"xlinkArcrole",
+	"xlinkHref",
+	"xlinkRole",
+	"xlinkShow",
+	"xlinkTitle",
+	"xlinkType",
+	"xmlBase",
+	"xmlLang",
+	"xmlns",
+	"xmlnsXlink",
+	"xmlSpace",
+	"y1",
+	"y2",
+	"y",
+	"yChannelSelector",
+	"z",
+	"zoomAndPan",
+	"ref",
+	"key",
+	"angle"
+];
+//#endregion
+export { CartesianAxisDefaultProps, FilteredElementKeyMap, SVGElementPropKeys };

package/dist/es/cartesian/cartesian-grid/utils.mjs

@@ -0,0 +1,22 @@
+import { filterProps } from "../../utils/VueUtils.mjs";
+import { createVNode, mergeProps } from "vue";
+//#region src/cartesian/cartesian-grid/utils.tsx
+/**
+* Render a grid line item.
+* Priority: slot > default <line> with optional SVG attr overrides from `option`.
+*/
+function renderLineItem(slot, option, props) {
+	if (slot) return slot(props);
+	const { x1, y1, x2, y2, key, ...others } = { ...props };
+	const { offset: __, ...restOfFilteredProps } = filterProps(others, false);
+	return createVNode("line", mergeProps(restOfFilteredProps, {
+		"x1": x1,
+		"y1": y1,
+		"x2": x2,
+		"y2": y2,
+		"fill": "none",
+		"key": key
+	}), null);
+}
+//#endregion
+export { renderLineItem };

package/dist/es/cartesian/error-bar/ErrorBar.mjs

@@ -0,0 +1,143 @@
+import { selectAxisWithScale } from "../../state/selectors/axisSelectors.mjs";
+import { useAppSelector } from "../../state/hooks.mjs";
+import { useChartLayout } from "../../context/chartLayoutContext.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import { useErrorBarContext, useErrorBarRegistry } from "./ErrorBarContext.mjs";
+import { createVNode, defineComponent, isVNode, onUnmounted } from "vue";
+//#region src/cartesian/error-bar/ErrorBar.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var ErrorBarVueProps = {
+	dataKey: {
+		type: [
+			String,
+			Number,
+			Function
+		],
+		required: true
+	},
+	width: {
+		type: Number,
+		default: 5
+	},
+	direction: { type: String },
+	stroke: {
+		type: String,
+		default: "black"
+	},
+	strokeWidth: {
+		type: [Number, String],
+		default: 1.5
+	}
+};
+var ErrorBar = /* @__PURE__ */ defineComponent({
+	name: "ErrorBar",
+	props: ErrorBarVueProps,
+	setup(props) {
+		const layout = useChartLayout();
+		const { data, dataPointFormatter, xAxisId, yAxisId, errorBarOffset } = useErrorBarContext();
+		const registry = useErrorBarRegistry(null);
+		if (registry) {
+			const settings = {
+				direction: props.direction ?? (layout.value === "horizontal" ? "y" : "x"),
+				dataKey: props.dataKey
+			};
+			registry.register(settings);
+			onUnmounted(() => registry.unregister(settings));
+		}
+		const xAxis = useAppSelector((state) => selectAxisWithScale(state, "xAxis", xAxisId, false));
+		const yAxis = useAppSelector((state) => selectAxisWithScale(state, "yAxis", yAxisId, false));
+		return () => {
+			const xAxisVal = xAxis.value;
+			const yAxisVal = yAxis.value;
+			if (xAxisVal?.scale == null || yAxisVal?.scale == null || data.value == null) return null;
+			const direction = props.direction ?? (layout.value === "horizontal" ? "y" : "x");
+			if (direction === "x" && xAxisVal.type !== "number") return null;
+			const offset = errorBarOffset.value;
+			const errorBars = data.value.map((entry, dataIndex) => {
+				let _slot;
+				const { x, y, value, errorVal } = dataPointFormatter(entry, props.dataKey, direction);
+				if (!errorVal || x == null || y == null) return null;
+				const lineCoordinates = [];
+				let lowBound, highBound;
+				if (Array.isArray(errorVal)) {
+					const [low, high] = errorVal;
+					if (low == null || high == null) return null;
+					lowBound = low;
+					highBound = high;
+				} else lowBound = highBound = errorVal;
+				if (direction === "x") {
+					const { scale } = xAxisVal;
+					const yMid = y + offset;
+					const yMin = yMid + props.width;
+					const yMax = yMid - props.width;
+					const xMin = scale(value - lowBound);
+					const xMax = scale(value + highBound);
+					if (xMin != null && xMax != null) {
+						lineCoordinates.push({
+							x1: xMax,
+							y1: yMin,
+							x2: xMax,
+							y2: yMax
+						});
+						lineCoordinates.push({
+							x1: xMin,
+							y1: yMid,
+							x2: xMax,
+							y2: yMid
+						});
+						lineCoordinates.push({
+							x1: xMin,
+							y1: yMin,
+							x2: xMin,
+							y2: yMax
+						});
+					}
+				} else if (direction === "y") {
+					const { scale } = yAxisVal;
+					const xMid = x + offset;
+					const xMin = xMid - props.width;
+					const xMax = xMid + props.width;
+					const yMin = scale(value - lowBound);
+					const yMax = scale(value + highBound);
+					if (yMin != null && yMax != null) {
+						lineCoordinates.push({
+							x1: xMin,
+							y1: yMax,
+							x2: xMax,
+							y2: yMax
+						});
+						lineCoordinates.push({
+							x1: xMid,
+							y1: yMin,
+							x2: xMid,
+							y2: yMax
+						});
+						lineCoordinates.push({
+							x1: xMin,
+							y1: yMin,
+							x2: xMax,
+							y2: yMin
+						});
+					}
+				}
+				return createVNode(Layer, {
+					"class": "v-charts-errorBar",
+					"key": `bar-${x}-${y}-${value}-${dataIndex}`
+				}, _isSlot(_slot = lineCoordinates.map((c, lineIndex) => createVNode("line", {
+					"key": `errorbar-${dataIndex}-${c.x1}-${c.y1}-${c.x2}-${c.y2}-${lineIndex}`,
+					"x1": c.x1,
+					"y1": c.y1,
+					"x2": c.x2,
+					"y2": c.y2,
+					"stroke": props.stroke,
+					"stroke-width": props.strokeWidth
+				}, null))) ? _slot : { default: () => [_slot] });
+			});
+			return createVNode(Layer, { "class": "v-charts-errorBars" }, _isSlot(errorBars) ? errorBars : { default: () => [errorBars] });
+		};
+	}
+});
+//#endregion
+export { ErrorBar, ErrorBarVueProps };

package/dist/es/cartesian/error-bar/ErrorBarContext.mjs

@@ -0,0 +1,20 @@
+import { createContext as createContext$1 } from "../../utils/createContext.mjs";
+import { shallowRef } from "vue";
+import { createContext } from "motion-v";
+//#region src/cartesian/error-bar/ErrorBarContext.ts
+var [useErrorBarContext, provideErrorBarContext] = createContext("ErrorBarContext");
+var [useErrorBarRegistry, provideErrorBarRegistry] = createContext$1("ErrorBarRegistry");
+function createErrorBarRegistry() {
+	const errorBars = shallowRef([]);
+	return {
+		errorBars,
+		register(settings) {
+			errorBars.value = [...errorBars.value, settings];
+		},
+		unregister(settings) {
+			errorBars.value = errorBars.value.filter((s) => s !== settings);
+		}
+	};
+}
+//#endregion
+export { createErrorBarRegistry, provideErrorBarContext, provideErrorBarRegistry, useErrorBarContext, useErrorBarRegistry };