vccs 0.0.1 → 0.2.0

package/dist/es/cartesian/bar/utils.mjs

@@ -0,0 +1,111 @@
+import { isNullish, isNumber } from "../../utils/validate.mjs";
+import { mathSign } from "../../utils/data.mjs";
+import { getBaseValueOfBar, getCateCoordinateOfBar, getValueByDataKey, truncateByDomain } from "../../utils/chart.mjs";
+import { toRaw } from "vue";
+import { isNaN } from "es-toolkit/compat";
+import { invariant } from "es-toolkit";
+//#region src/cartesian/bar/utils.ts
+/**
+* Safely gets minPointSize from the minPointSize prop if it is a function
+* @param minPointSize minPointSize as passed to the Bar component
+* @param defaultValue default minPointSize
+* @returns minPointSize
+*/
+function minPointSizeCallback(minPointSize, defaultValue = 0) {
+	return (value, index) => {
+		if (isNumber(minPointSize)) return minPointSize;
+		const isValueNumberOrNil = isNumber(value) || isNullish(value);
+		if (isValueNumberOrNil) return minPointSize(value, index);
+		invariant(isValueNumberOrNil, `minPointSize callback function received a value with type of ${typeof value}. Currently only numbers or null/undefined are supported.`);
+		return defaultValue;
+	};
+}
+var defaultMinPointSize = 0;
+function computeBarRectangles({ layout, barSettings: { dataKey, minPointSize: minPointSizeProp }, pos, bandSize, xAxis, yAxis, xAxisTicks, yAxisTicks, stackedData, displayedData, offset }) {
+	const parentViewBox = {
+		x: offset.left,
+		y: offset.top,
+		width: offset.width,
+		height: offset.height
+	};
+	const numericAxis = layout === "horizontal" ? yAxis : xAxis;
+	const stackedDomain = stackedData ? numericAxis.scale.domain() : null;
+	const baseValue = getBaseValueOfBar({ numericAxis });
+	const stackedBarStart = numericAxis.scale(baseValue);
+	return displayedData.map((rawEntry, index) => {
+		const entry = toRaw(rawEntry);
+		let value, x, y, width, height, background;
+		if (stackedData) value = truncateByDomain(stackedData[index], stackedDomain);
+		else {
+			value = getValueByDataKey(entry, dataKey);
+			if (!Array.isArray(value)) value = [baseValue, value];
+		}
+		const minPointSize = minPointSizeCallback(minPointSizeProp, defaultMinPointSize)(value[1], index);
+		if (layout === "horizontal") {
+			const [baseValueScale, currentValueScale] = [yAxis.scale(value[0]), yAxis.scale(value[1])];
+			x = getCateCoordinateOfBar({
+				axis: xAxis,
+				ticks: xAxisTicks,
+				bandSize,
+				offset: pos.offset,
+				entry,
+				index
+			});
+			y = currentValueScale ?? baseValueScale ?? void 0;
+			width = pos.size;
+			const computedHeight = baseValueScale - currentValueScale;
+			height = isNaN(computedHeight) ? 0 : computedHeight;
+			background = {
+				x,
+				y: offset.top,
+				width,
+				height: offset.height
+			};
+			if (Math.abs(minPointSize) > 0 && Math.abs(height) < Math.abs(minPointSize)) {
+				const delta = mathSign(height || minPointSize) * (Math.abs(minPointSize) - Math.abs(height));
+				y -= delta;
+				height += delta;
+			}
+		} else {
+			const [baseValueScale, currentValueScale] = [xAxis.scale(value[0]), xAxis.scale(value[1])];
+			x = baseValueScale;
+			y = getCateCoordinateOfBar({
+				axis: yAxis,
+				ticks: yAxisTicks,
+				bandSize,
+				offset: pos.offset,
+				entry,
+				index
+			});
+			width = currentValueScale - baseValueScale;
+			height = pos.size;
+			background = {
+				x: offset.left,
+				y,
+				width: offset.width,
+				height
+			};
+			if (Math.abs(minPointSize) > 0 && Math.abs(width) < Math.abs(minPointSize)) {
+				const delta = mathSign(width || minPointSize) * (Math.abs(minPointSize) - Math.abs(width));
+				width += delta;
+			}
+		}
+		return {
+			x,
+			y,
+			width,
+			height,
+			stackedBarStart: stackedBarStart ?? 0,
+			value: stackedData ? value : value[1],
+			payload: entry,
+			background,
+			tooltipPosition: {
+				x: x + width / 2,
+				y: y + height / 2
+			},
+			parentViewBox
+		};
+	});
+}
+//#endregion
+export { computeBarRectangles };

package/dist/es/cartesian/cartesian-axis/CartesianAxis.mjs

@@ -0,0 +1,296 @@
+import { isNumber } from "../../utils/validate.mjs";
+import { filterProps } from "../../utils/VueUtils.mjs";
+import { Layer } from "../../container/Layer.mjs";
+import Text_default from "../../components/Text.mjs";
+import { Label } from "../../components/label/Label.mjs";
+import { getTicks } from "../utils/get-ticks.mjs";
+import { createVNode, defineComponent, mergeProps, reactive } from "vue";
+import { get } from "es-toolkit/compat";
+//#region src/cartesian/cartesian-axis/CartesianAxis.tsx
+/**
+* @fileOverview Cartesian Axis
+*/
+/** The orientation of the axis in correspondence to the chart */
+/** A unit to be appended to a value */
+/** The formatter function of tick */
+var CartesianAxis = /* @__PURE__ */ defineComponent({
+	name: "CartesianAxis",
+	props: {
+		x: {
+			type: Number,
+			default: 0
+		},
+		y: {
+			type: Number,
+			default: 0
+		},
+		width: {
+			type: Number,
+			default: 0
+		},
+		height: {
+			type: Number,
+			default: 0
+		},
+		unit: [String, Number],
+		orientation: {
+			type: String,
+			default: "bottom"
+		},
+		viewBox: {
+			type: Object,
+			default: () => ({
+				x: 0,
+				y: 0,
+				width: 0,
+				height: 0
+			})
+		},
+		tick: {
+			type: Boolean,
+			default: true
+		},
+		axisLine: {
+			type: [Boolean, Object],
+			default: () => true
+		},
+		tickLine: {
+			type: [Boolean, Object],
+			default: () => true
+		},
+		mirror: {
+			type: Boolean,
+			default: false
+		},
+		tickMargin: {
+			type: Number,
+			default: 2
+		},
+		hide: Boolean,
+		label: null,
+		minTickGap: {
+			type: Number,
+			default: 5
+		},
+		ticks: {
+			type: Array,
+			default: () => []
+		},
+		tickSize: {
+			type: Number,
+			default: 6
+		},
+		tickFormatter: Function,
+		interval: {
+			type: [String, Number],
+			default: "preserveEnd"
+		},
+		angle: Number,
+		scale: { type: [Function] },
+		stroke: {
+			type: String,
+			default: "#666"
+		}
+	},
+	inheritAttrs: false,
+	setup(props, { attrs, slots }) {
+		const state = reactive({
+			fontSize: "",
+			letterSpacing: ""
+		});
+		const getTickLineCoord = (data) => {
+			const { x, y, width, height, orientation, tickSize, mirror, tickMargin } = props;
+			let x1, x2, y1, y2, tx, ty;
+			const sign = mirror ? -1 : 1;
+			const finalTickSize = data.tickSize || tickSize;
+			const tickCoord = isNumber(data.tickCoord) ? data.tickCoord : data.coordinate;
+			switch (orientation) {
+				case "top":
+					x1 = x2 = data.coordinate;
+					y2 = y + +!mirror * height;
+					y1 = y2 - sign * finalTickSize;
+					ty = y1 - sign * tickMargin;
+					tx = tickCoord;
+					break;
+				case "left":
+					y1 = y2 = data.coordinate;
+					x2 = x + +!mirror * width;
+					x1 = x2 - sign * finalTickSize;
+					tx = x1 - sign * tickMargin;
+					ty = tickCoord;
+					break;
+				case "right":
+					y1 = y2 = data.coordinate;
+					x2 = x + +mirror * width;
+					x1 = x2 + sign * finalTickSize;
+					tx = x1 + sign * tickMargin;
+					ty = tickCoord;
+					break;
+				default:
+					x1 = x2 = data.coordinate;
+					y2 = y + +mirror * height;
+					y1 = y2 + sign * finalTickSize;
+					ty = y1 + sign * tickMargin;
+					tx = tickCoord;
+					break;
+			}
+			return {
+				line: {
+					x1,
+					y1,
+					x2,
+					y2
+				},
+				tick: {
+					x: tx,
+					y: ty
+				}
+			};
+		};
+		const getTickTextAnchor = () => {
+			const { orientation, mirror } = props;
+			let textAnchor;
+			switch (orientation) {
+				case "left":
+					textAnchor = mirror ? "start" : "end";
+					break;
+				case "right":
+					textAnchor = mirror ? "end" : "start";
+					break;
+				default:
+					textAnchor = "middle";
+					break;
+			}
+			return textAnchor;
+		};
+		const getTickVerticalAnchor = () => {
+			const { orientation, mirror } = props;
+			switch (orientation) {
+				case "left":
+				case "right": return "middle";
+				case "top": return mirror ? "start" : "end";
+				default: return mirror ? "end" : "start";
+			}
+		};
+		const renderAxisLine = () => {
+			const { x, y, width, height, orientation, mirror, axisLine } = props;
+			let lineProps = {
+				...filterProps(props, false),
+				...filterProps(axisLine, false),
+				fill: "none",
+				x1: 0,
+				y1: 0,
+				x2: 0,
+				y2: 0
+			};
+			if (orientation === "top" || orientation === "bottom") {
+				const needHeight = +(orientation === "top" && !mirror || orientation === "bottom" && mirror);
+				lineProps = {
+					...lineProps,
+					x1: x,
+					y1: y + needHeight * height,
+					x2: x + width,
+					y2: y + needHeight * height
+				};
+			} else {
+				const needWidth = +(orientation === "left" && !mirror || orientation === "right" && mirror);
+				lineProps = {
+					...lineProps,
+					x1: x + needWidth * width,
+					y1: y,
+					x2: x + needWidth * width,
+					y2: y + height
+				};
+			}
+			return createVNode("line", mergeProps(lineProps, { "class": ["v-charts-cartesian-axis-line", get(axisLine, "class")] }), null);
+		};
+		function renderTickItem(props, value) {
+			const className = ["v-charts-cartesian-axis-tick-value", props.class];
+			return createVNode(Text_default, mergeProps(props, {
+				"class": className,
+				"value": value
+			}), null);
+		}
+		const renderTicks = (props, fontSize, letterSpacing) => {
+			const { tickLine, stroke, tick, tickFormatter, unit } = props;
+			const finalTicks = getTicks(props, fontSize, letterSpacing);
+			const textAnchor = getTickTextAnchor();
+			const verticalAnchor = getTickVerticalAnchor();
+			const axisProps = filterProps(props, false);
+			const customTickProps = filterProps(tick, false);
+			const tickLineProps = {
+				...axisProps,
+				fill: "none",
+				...filterProps(tickLine, false)
+			};
+			const items = finalTicks.map((entry, i) => {
+				const { line: lineCoord, tick: tickCoord } = getTickLineCoord(entry);
+				const tickProps = {
+					textAnchor,
+					verticalAnchor,
+					...axisProps,
+					stroke: "none",
+					fill: stroke,
+					...customTickProps,
+					...tickCoord,
+					index: i,
+					payload: entry,
+					visibleTicksCount: finalTicks.length,
+					tickFormatter
+				};
+				return createVNode(Layer, {
+					"class": "v-charts-cartesian-axis-tick",
+					"key": `tick-${entry.value}-${entry.coordinate}-${entry.tickCoord}`
+				}, { default: () => [tickLine && createVNode("line", mergeProps(tickLineProps, lineCoord, { "class": ["v-charts-cartesian-axis-tick-line", get(tickLine, "class")] }), null), tick && (slots.tick ? slots.tick({
+					...tickProps,
+					value: entry.value
+				}) : renderTickItem(tickProps, `${typeof tickFormatter === "function" ? tickFormatter(entry.value, i) : entry.value}${unit || ""}`))] });
+			});
+			return items.length > 0 ? createVNode("g", { "class": "v-charts-cartesian-axis-ticks" }, [items]) : null;
+		};
+		const renderLabel = () => {
+			const { label, x, y, width, height } = props;
+			if (!label) return null;
+			const axisViewBox = {
+				x,
+				y,
+				width,
+				height
+			};
+			if (typeof label === "string" || typeof label === "number") return createVNode(Label, {
+				"value": label,
+				"viewBox": axisViewBox
+			}, null);
+			if (typeof label === "object") return createVNode(Label, mergeProps(label, { "viewBox": axisViewBox }), null);
+			return null;
+		};
+		return () => {
+			const { axisLine, width, height, hide } = props;
+			if (hide) return null;
+			if (width != null && width <= 0 || height != null && height <= 0) return null;
+			return createVNode(Layer, {
+				"class": ["v-charts-cartesian-axis", attrs.class],
+				"ref": (ref) => {
+					const elm = ref?.$el;
+					if (elm) {
+						const tick = elm?.getElementsByClassName("v-charts-cartesian-axis-tick-value")[0];
+						if (tick) {
+							const calculatedFontSize = window.getComputedStyle(tick).fontSize;
+							const calculatedLetterSpacing = window.getComputedStyle(tick).letterSpacing;
+							if (calculatedFontSize !== state.fontSize || calculatedLetterSpacing !== state.letterSpacing) {
+								state.fontSize = window.getComputedStyle(tick).fontSize;
+								state.letterSpacing = window.getComputedStyle(tick).letterSpacing;
+							}
+						}
+					}
+				}
+			}, { default: () => [
+				axisLine && renderAxisLine(),
+				renderTicks(props, state.fontSize, state.letterSpacing),
+				renderLabel()
+			] });
+		};
+	}
+});
+//#endregion
+export { CartesianAxis };

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

@@ -0,0 +1,33 @@
+import { createVNode, defineComponent } from "vue";
+//#region src/cartesian/cartesian-grid/Background.tsx
+var Background = /* @__PURE__ */ defineComponent({
+	name: "Background",
+	inheritAttrs: false,
+	props: {
+		fill: String,
+		fillOpacity: Number,
+		x: Number,
+		y: Number,
+		width: Number,
+		height: Number,
+		ry: Number
+	},
+	setup(props) {
+		return () => {
+			if (!props.fill || props.fill === "none") return null;
+			return createVNode("rect", {
+				"x": props.x,
+				"y": props.y,
+				"ry": props.ry,
+				"width": props.width,
+				"height": props.height,
+				"stroke": "none",
+				"fill": props.fill,
+				"fill-opacity": props.fillOpacity,
+				"class": "v-charts-cartesian-grid-bg"
+			}, null);
+		};
+	}
+});
+//#endregion
+export { Background as default };

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

@@ -0,0 +1,174 @@
+import { isNumber } from "../../utils/validate.mjs";
+import { warn } from "../../utils/log.mjs";
+import { useIsPanorama } from "../../context/PanoramaContextProvider.mjs";
+import { getTicksOfAxis } from "../../utils/chart.mjs";
+import { selectAxisPropsNeededForCartesianGridTicksGenerator } from "../../state/selectors/axisSelectors.mjs";
+import { useAppSelector } from "../../state/hooks.mjs";
+import { useChartHeight, useChartWidth, useOffset } from "../../context/chartLayoutContext.mjs";
+import { CartesianAxisDefaultProps } from "./const.mjs";
+import { getTicks } from "../utils/get-ticks.mjs";
+import { CartesianAxis } from "../cartesian-axis/CartesianAxis.mjs";
+import { resolveDefaultProps } from "../../utils/resolveDefaultProps.mjs";
+import { getCoordinatesOfGrid } from "../../utils/grid.mjs";
+import Background from "./Background.mjs";
+import HorizontalStripes from "./HorizontalStripes.mjs";
+import VerticalStripes from "./VerticalStripes.mjs";
+import HorizontalGridLines from "./HorizontalGridLines.mjs";
+import VerticalGridLines from "./VerticalGridLines.mjs";
+import { createVNode, defineComponent, mergeProps } from "vue";
+//#region src/cartesian/cartesian-grid/CartesianGrid.tsx
+var defaultHorizontalCoordinatesGenerator = ({ yAxis, width, height, offset }, syncWithTicks) => getCoordinatesOfGrid(getTicks({
+	...CartesianAxisDefaultProps,
+	...yAxis,
+	ticks: getTicksOfAxis(yAxis, true),
+	viewBox: {
+		x: 0,
+		y: 0,
+		width,
+		height
+	}
+}), offset.top, offset.top + offset.height, syncWithTicks);
+var defaultVerticalCoordinatesGenerator = ({ xAxis, width, height, offset }, syncWithTicks) => {
+	return getCoordinatesOfGrid(getTicks({
+		...CartesianAxis.defaultProps,
+		...xAxis,
+		ticks: getTicksOfAxis(xAxis, true),
+		viewBox: {
+			x: 0,
+			y: 0,
+			width,
+			height
+		}
+	}), offset.left, offset.left + offset.width, syncWithTicks);
+};
+var defaultProps = {
+	horizontal: true,
+	vertical: true,
+	horizontalPoints: [],
+	verticalPoints: [],
+	stroke: "#ccc",
+	fill: "none",
+	verticalFill: [],
+	horizontalFill: [],
+	xAxisId: 0,
+	yAxisId: 0
+};
+var CartesianGrid = /* @__PURE__ */ defineComponent({
+	name: "CartesianGrid",
+	inheritAttrs: false,
+	props: {
+		xAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		yAxisId: {
+			type: [String, Number],
+			default: 0
+		},
+		x: Number,
+		y: Number,
+		width: Number,
+		height: Number,
+		syncWithTicks: {
+			type: Boolean,
+			default: void 0
+		},
+		horizontal: {
+			type: [Boolean, Object],
+			default: true
+		},
+		vertical: {
+			type: [Boolean, Object],
+			default: true
+		},
+		horizontalPoints: Array,
+		verticalPoints: Array,
+		horizontalValues: Array,
+		verticalValues: Array,
+		fill: String,
+		fillOpacity: Number,
+		ry: Number,
+		verticalCoordinatesGenerator: Function,
+		horizontalCoordinatesGenerator: Function
+	},
+	setup(props, { attrs, slots }) {
+		const chartWidth = useChartWidth();
+		const chartHeight = useChartHeight();
+		const offset = useOffset();
+		const isPanorama = useIsPanorama();
+		const xAxis = useAppSelector((state) => selectAxisPropsNeededForCartesianGridTicksGenerator(state, "xAxis", props.xAxisId, isPanorama));
+		const yAxis = useAppSelector((state) => selectAxisPropsNeededForCartesianGridTicksGenerator(state, "yAxis", props.yAxisId, isPanorama));
+		return () => {
+			const propsIncludingDefaults = {
+				...resolveDefaultProps({
+					...props,
+					...attrs
+				}, defaultProps),
+				x: isNumber(props.x) ? props.x : offset.value.left,
+				y: isNumber(props.y) ? props.y : offset.value.top,
+				width: isNumber(props.width) ? props.width : offset.value.width,
+				height: isNumber(props.height) ? props.height : offset.value.height
+			};
+			const { x, y, width, height, syncWithTicks, horizontalValues, verticalValues } = propsIncludingDefaults;
+			const verticalCoordinatesGenerator = propsIncludingDefaults.verticalCoordinatesGenerator || defaultVerticalCoordinatesGenerator;
+			const horizontalCoordinatesGenerator = propsIncludingDefaults.horizontalCoordinatesGenerator || defaultHorizontalCoordinatesGenerator;
+			let { horizontalPoints, verticalPoints } = propsIncludingDefaults;
+			if ((!horizontalPoints || !horizontalPoints.length) && typeof horizontalCoordinatesGenerator === "function") {
+				const isHorizontalValues = horizontalValues && horizontalValues.length;
+				const generatorResult = horizontalCoordinatesGenerator({
+					yAxis: yAxis.value ? {
+						...yAxis.value,
+						ticks: isHorizontalValues ? horizontalValues : yAxis.value?.ticks
+					} : void 0,
+					width: chartWidth.value,
+					height: chartHeight.value,
+					offset: offset.value
+				}, isHorizontalValues ? true : syncWithTicks);
+				warn(Array.isArray(generatorResult), `horizontalCoordinatesGenerator should return Array but instead it returned [${typeof generatorResult}]`);
+				if (Array.isArray(generatorResult)) horizontalPoints = generatorResult;
+			}
+			if ((!verticalPoints || !verticalPoints.length) && typeof verticalCoordinatesGenerator === "function") {
+				const isVerticalValues = verticalValues && verticalValues.length;
+				const generatorResult = verticalCoordinatesGenerator({
+					xAxis: xAxis.value ? {
+						...xAxis.value,
+						ticks: isVerticalValues ? verticalValues : xAxis.value?.ticks
+					} : void 0,
+					width: chartWidth.value,
+					height: chartHeight.value,
+					offset: offset.value
+				}, isVerticalValues ? true : syncWithTicks);
+				warn(Array.isArray(generatorResult), `verticalCoordinatesGenerator should return Array but instead it returned [${typeof generatorResult}]`);
+				if (Array.isArray(generatorResult)) verticalPoints = generatorResult;
+			}
+			if (!isNumber(width) || width <= 0 || !isNumber(height) || height <= 0 || !isNumber(x) || x !== +x || !isNumber(y) || y !== +y) return null;
+			return createVNode("g", { "class": "v-charts-cartesian-grid" }, [
+				createVNode(Background, {
+					"fill": propsIncludingDefaults.fill,
+					"fillOpacity": propsIncludingDefaults.fillOpacity,
+					"x": propsIncludingDefaults.x,
+					"y": propsIncludingDefaults.y,
+					"width": propsIncludingDefaults.width,
+					"height": propsIncludingDefaults.height,
+					"ry": propsIncludingDefaults.ry
+				}, null),
+				createVNode(HorizontalStripes, mergeProps(propsIncludingDefaults, { "horizontalPoints": horizontalPoints }), null),
+				createVNode(VerticalStripes, mergeProps(propsIncludingDefaults, { "verticalPoints": verticalPoints }), null),
+				createVNode(HorizontalGridLines, mergeProps(propsIncludingDefaults, {
+					"offset": offset.value,
+					"horizontalPoints": horizontalPoints,
+					"xAxis": xAxis.value,
+					"yAxis": yAxis.value
+				}), { default: () => [slots.horizontal ? { horizontal: slots.horizontal } : void 0] }),
+				createVNode(VerticalGridLines, mergeProps(propsIncludingDefaults, {
+					"offset": offset,
+					"verticalPoints": verticalPoints,
+					"xAxis": xAxis,
+					"yAxis": yAxis
+				}), { default: () => [slots.vertical ? { vertical: slots.vertical } : void 0] })
+			]);
+		};
+	}
+});
+//#endregion
+export { CartesianGrid };

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

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