vccs 0.6.0 → 1.0.0-beta.2

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

@@ -1,24 +1,25 @@
 import { isNumber } from "../../utils/validate.mjs";
+import { useChartPresentation } from "../../model/presentation.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 { getTicksOfAxis } from "../../core/axis/ticks.mjs";
+import { useChart } from "../../model/chart.mjs";
+import { useCanMeasureText } from "../../model/runtime.mjs";
+import { useDeferredView } from "../../hooks/deferredView.mjs";
+import { forwardsSvgAttributes } from "../../utils/attributes.mjs";
+import { useTickMotion } from "../../animation/useTickMotion.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 { CartesianGridDefaultProps } from "./const.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";
+import { computed, createVNode, defineComponent, h, mergeProps } from "vue";
 //#region src/cartesian/cartesian-grid/CartesianGrid.tsx
 var defaultHorizontalCoordinatesGenerator = ({ yAxis, width, height, offset }, syncWithTicks) => getCoordinatesOfGrid(getTicks({
-	...CartesianAxisDefaultProps,
+	...CartesianGridDefaultProps,
 	...yAxis,
 	ticks: getTicksOfAxis(yAxis, true),
 	viewBox: {
@@ -41,69 +42,125 @@ var defaultVerticalCoordinatesGenerator = ({ xAxis, width, height, offset }, syn
 		}
 	}), 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 CartesianGridViewProps = {
+	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: {
+		type: Array,
+		default: () => []
+	},
+	verticalPoints: {
+		type: Array,
+		default: () => []
+	},
+	horizontalValues: Array,
+	verticalValues: Array,
+	stroke: {
+		type: [String, Number],
+		default: "var(--v-charts-grid, #ccc)"
+	},
+	fill: {
+		type: String,
+		default: "none"
+	},
+	verticalFill: {
+		type: Array,
+		default: () => []
+	},
+	horizontalFill: {
+		type: Array,
+		default: () => []
+	},
+	fillOpacity: Number,
+	ry: Number,
+	verticalCoordinatesGenerator: Function,
+	horizontalCoordinatesGenerator: Function
 };
-var CartesianGrid = /* @__PURE__ */ defineComponent({
-	name: "CartesianGrid",
-	inheritAttrs: false,
+var CartesianGridView = /* @__PURE__ */ defineComponent({
+	name: "CartesianGridView",
+	slots: Object,
+	inheritAttrs: true,
 	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
+		item: {
+			type: Object,
+			required: 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
+		svgAttrs: {
+			type: Object,
+			required: true
+		}
 	},
-	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));
+	setup(view, { slots }) {
+		const chart = useChart();
+		const props = view.item;
+		const attrs = view.svgAttrs;
+		const chartWidth = useChartPresentation().width;
+		const chartHeight = useChartPresentation().height;
+		const offset = useChartPresentation().offset;
+		const canMeasureText = useCanMeasureText();
+		const xAxis = computed(() => chart.axis("xAxis", props.xAxisId).grid.value);
+		const yAxis = computed(() => chart.axis("yAxis", props.yAxisId).grid.value);
+		const gridItems = (axis, start, end, sync) => {
+			if (!axis.value) return [];
+			const items = getTicks({
+				...CartesianGridDefaultProps,
+				...axis.value,
+				ticks: getTicksOfAxis(axis.value, true),
+				viewBox: {
+					x: 0,
+					y: 0,
+					width: chartWidth.value,
+					height: chartHeight.value
+				}
+			}, void 0, void 0, canMeasureText.value).map((tick) => ({
+				value: tick.value,
+				coordinate: tick.coordinate
+			}));
+			if (!sync) {
+				if (!items.some((item) => item.coordinate === start)) items.push({
+					value: "\0start",
+					coordinate: start
+				});
+				if (!items.some((item) => item.coordinate === end)) items.push({
+					value: "\0end",
+					coordinate: end
+				});
+			}
+			return items;
+		};
+		const usesDefault = (points, generator, values) => (!points || !points.length) && !generator && !(values && values.length);
+		const horizontal = useTickMotion(() => usesDefault(props.horizontalPoints, props.horizontalCoordinatesGenerator, props.horizontalValues) ? gridItems(yAxis, offset.value.top, offset.value.top + offset.value.height, props.syncWithTicks) : [], () => yAxis.value?.scale, () => [offset.value.top, offset.value.top + offset.value.height]);
+		const vertical = useTickMotion(() => usesDefault(props.verticalPoints, props.verticalCoordinatesGenerator, props.verticalValues) ? gridItems(xAxis, offset.value.left, offset.value.left + offset.value.width, props.syncWithTicks) : [], () => xAxis.value?.scale, () => [offset.value.left, offset.value.left + offset.value.width]);
+		const moving = computed(() => ({
+			horizontal: horizontal.items.value.map((item) => item.value),
+			vertical: vertical.items.value.map((item) => item.value)
+		}));
 		return () => {
 			const propsIncludingDefaults = {
-				...resolveDefaultProps({
-					...props,
-					...attrs
-				}, defaultProps),
+				...props,
+				...attrs,
 				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,
@@ -113,6 +170,16 @@ var CartesianGrid = /* @__PURE__ */ defineComponent({
 			const verticalCoordinatesGenerator = propsIncludingDefaults.verticalCoordinatesGenerator || defaultVerticalCoordinatesGenerator;
 			const horizontalCoordinatesGenerator = propsIncludingDefaults.horizontalCoordinatesGenerator || defaultHorizontalCoordinatesGenerator;
 			let { horizontalPoints, verticalPoints } = propsIncludingDefaults;
+			let horizontalOpacity;
+			let verticalOpacity;
+			if (moving.value.horizontal.length) {
+				horizontalPoints = moving.value.horizontal.map((item) => item.coordinate);
+				horizontalOpacity = moving.value.horizontal.map((item) => item.opacity);
+			}
+			if (moving.value.vertical.length) {
+				verticalPoints = moving.value.vertical.map((item) => item.coordinate);
+				verticalOpacity = moving.value.vertical.map((item) => item.opacity);
+			}
 			if ((!horizontalPoints || !horizontalPoints.length) && typeof horizontalCoordinatesGenerator === "function") {
 				const isHorizontalValues = horizontalValues && horizontalValues.length;
 				const generatorResult = horizontalCoordinatesGenerator({
@@ -142,7 +209,10 @@ var CartesianGrid = /* @__PURE__ */ defineComponent({
 				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" }, [
+			return createVNode("g", {
+				"data-slot": "grid",
+				"class": "v-charts-cartesian-grid"
+			}, [
 				createVNode(Background, {
 					"fill": propsIncludingDefaults.fill,
 					"fillOpacity": propsIncludingDefaults.fillOpacity,
@@ -157,18 +227,33 @@ var CartesianGrid = /* @__PURE__ */ defineComponent({
 				createVNode(HorizontalGridLines, mergeProps(propsIncludingDefaults, {
 					"offset": offset.value,
 					"horizontalPoints": horizontalPoints,
+					"pointOpacity": horizontalOpacity,
 					"xAxis": xAxis.value,
 					"yAxis": yAxis.value
-				}), { default: () => [slots.horizontal ? { horizontal: slots.horizontal } : void 0] }),
+				}), slots.horizontal ? { horizontal: slots.horizontal } : void 0),
 				createVNode(VerticalGridLines, mergeProps(propsIncludingDefaults, {
-					"offset": offset,
+					"offset": offset.value,
 					"verticalPoints": verticalPoints,
-					"xAxis": xAxis,
-					"yAxis": yAxis
-				}), { default: () => [slots.vertical ? { vertical: slots.vertical } : void 0] })
+					"pointOpacity": verticalOpacity,
+					"xAxis": xAxis.value,
+					"yAxis": yAxis.value
+				}), slots.vertical ? { vertical: slots.vertical } : void 0)
 			]);
 		};
 	}
 });
+var CartesianGrid = /* @__PURE__ */ forwardsSvgAttributes(/* @__PURE__ */ defineComponent({
+	slots: Object,
+	name: "CartesianGrid",
+	inheritAttrs: false,
+	props: CartesianGridViewProps,
+	setup(props, { attrs, slots }) {
+		const View = useDeferredView(CartesianGridView);
+		return () => h(View, {
+			item: props,
+			svgAttrs: attrs
+		}, slots);
+	}
+}));
 //#endregion
 export { CartesianGrid };

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

@@ -3,12 +3,15 @@ import { createVNode, defineComponent } from "vue";
 //#region src/cartesian/cartesian-grid/HorizontalGridLines.tsx
 var HorizontalGridLines = /* @__PURE__ */ defineComponent({
 	name: "HorizontalGridLines",
+	slots: Object,
 	inheritAttrs: false,
 	props: {
 		x: Number,
 		width: Number,
 		horizontal: [Boolean, Object],
 		horizontalPoints: Array,
+		/** Per-line opacity while lines fade in or out with their ticks. */
+		pointOpacity: Array,
 		xAxisId: {
 			type: [String, Number],
 			default: 0
@@ -38,7 +41,8 @@ var HorizontalGridLines = /* @__PURE__ */ defineComponent({
 					x2: x + width,
 					y2: entry,
 					key: `line-${i}`,
-					index: i
+					index: i,
+					...props.pointOpacity?.[i] != null && props.pointOpacity[i] < 1 ? { opacity: props.pointOpacity[i] } : {}
 				};
 				return renderLineItem(slots.horizontal, horizontal, lineItemProps);
 			});

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

@@ -3,6 +3,7 @@ import { createVNode, defineComponent } from "vue";
 //#region src/cartesian/cartesian-grid/VerticalGridLines.tsx
 var VerticalGridLines = /* @__PURE__ */ defineComponent({
 	name: "VerticalGridLines",
+	slots: Object,
 	inheritAttrs: false,
 	props: {
 		x: Number,
@@ -10,6 +11,8 @@ var VerticalGridLines = /* @__PURE__ */ defineComponent({
 		width: Number,
 		height: Number,
 		verticalPoints: Array,
+		/** Per-line opacity while lines fade in or out with their ticks. */
+		pointOpacity: Array,
 		xAxisId: [String, Number],
 		yAxisId: [String, Number],
 		offset: Object,
@@ -33,7 +36,8 @@ var VerticalGridLines = /* @__PURE__ */ defineComponent({
 					x2: entry,
 					y2: y + height,
 					key: `line-${i}`,
-					index: i
+					index: i,
+					...props.pointOpacity?.[i] != null && props.pointOpacity[i] < 1 ? { opacity: props.pointOpacity[i] } : {}
 				};
 				return renderLineItem(slots.vertical, vertical, lineItemProps);
 			});

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

@@ -1,5 +1,5 @@
 //#region src/cartesian/cartesian-grid/const.ts
-var CartesianAxisDefaultProps = {
+var CartesianGridDefaultProps = {
 	x: 0,
 	y: 0,
 	width: 0,
@@ -12,7 +12,7 @@ var CartesianAxisDefaultProps = {
 	},
 	orientation: "bottom",
 	ticks: [],
-	stroke: "#666",
+	stroke: "var(--v-charts-axis, #666)",
 	tickLine: true,
 	axisLine: true,
 	mirror: false,
@@ -21,322 +21,5 @@ var CartesianAxisDefaultProps = {
 	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",
-	"stroke-dashoffset",
-	"strokeLinecap",
-	"stroke-linecap",
-	"strokeLinejoin",
-	"stroke-linejoin",
-	"strokeMiterlimit",
-	"stroke-miterlimit",
-	"strokeOpacity",
-	"stroke-opacity",
-	"strokeWidth",
-	"stroke-width",
-	"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 };
+export { CartesianGridDefaultProps };

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

@@ -8,7 +8,7 @@ import { createVNode, mergeProps } from "vue";
 function renderLineItem(slot, option, props) {
 	if (slot) return slot(props);
 	const { x1, y1, x2, y2, key, ...others } = { ...props };
-	const { offset: __, ...restOfFilteredProps } = filterProps(others, false);
+	const { x: _x, y: _y, width: _width, height: _height, offset: _offset, ...restOfFilteredProps } = filterProps(others, false);
 	return createVNode("line", mergeProps(restOfFilteredProps, {
 		"x1": x1,
 		"y1": y1,