@lionad/cx-comps-tanstack-charts 0.1.0-alpha.18 → 0.1.0-alpha.20

package/dist/chart/src/motion-chart.vue.d.ts

@@ -0,0 +1,15 @@
+import type { CxChartSpec } from '../../shared/translate';
+interface Props {
+    /** 运行时 DomChartDefinition(translateChartSpec 产物,已含 chart 级 motion 时序) */
+    definition: Record<string, unknown>;
+    ariaLabel: string;
+    /** spec.motion 的 renderer 级选项(initial/resize);transition/delay 已在 definition.motion */
+    motionOptions?: CxChartSpec['motion'];
+    height?: number;
+    width?: number;
+    aspectRatio?: number;
+    className?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/index.mjs

@@ -1,10 +1,10 @@
 import { define } from "@lionad/cx-definition";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, renderList, unref, useAttrs } from "vue";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, unref, useAttrs, useId, watch } from "vue";
 import { Chart } from "@tanstack/charts/vue";
 import { useCxBEM } from "@lionad/cx-vue";
 import { areaX, areaY, arrow, bandX, bandY, barX, barY, binX, binXY, binY, boxRows, boxX, boxY, cell, colorGradientLegend, colorLegend, cumulative, d3Curve, defaultChartTheme, defineChart, delta, deviation, differenceX, differenceY, dodgeX, dodgeY, dot, first, fold, frame, group, groupBy, hexagon, last, lineX, lineY, linearRegressionRowsX, linearRegressionRowsY, linearRegressionX, linearRegressionY, link, median, mosaicX, mosaicY, normalize, quantile, rank, ratio, rect, ridgelineX, ridgelineY, rollingWindow, ruleX, ruleY, select, stack, stackRowsX, stackRowsY, text, tickX, tickY, variance, vector, violinX, violinY, waffleX, waffleY, waterfall } from "@tanstack/charts";
 import { d3AreaXCurve } from "@tanstack/charts/d3/area-x";
-import { curveBasis, curveCatmullRom, curveLinear, curveLinearClosed, curveMonotoneX, curveNatural, curveStep, curveStepAfter, curveStepBefore } from "d3-shape";
+import { curveBasis, curveBumpX, curveCatmullRom, curveLinear, curveLinearClosed, curveMonotoneX, curveNatural, curveStep, curveStepAfter, curveStepBefore } from "d3-shape";
 import { scaleLinear } from "@tanstack/charts/scales/linear";
 import { scaleOrdinal } from "@tanstack/charts/scales/ordinal";
 import { scalePoint } from "@tanstack/charts/scales/point";
@@ -27,9 +27,12 @@ import { geoAlbersUsa, geoEqualEarth, geoEquirectangular, geoIdentity, geoMercat
 import { decorative } from "@tanstack/charts/mark/decorative";
 import { tooltip } from "@tanstack/charts/tooltip";
 import { viewGrid } from "@tanstack/charts/view";
+import "@tanstack/charts/adapter";
+import { createChartRendererAdapter } from "@tanstack/charts/adapter/renderer";
+import { motion } from "@tanstack/charts/motion";
 import { compileTrigger, createTriggerRegistry } from "@lionad/cx-stream";
 //#region src/shared/chart-skeleton.vue
-const _sfc_main$6 = /*@__PURE__*/ defineComponent({
+const _sfc_main$7 = /*@__PURE__*/ defineComponent({
 	__name: "chart-skeleton",
 	props: { height: { default: 320 } },
 	setup(__props) {
@@ -910,6 +913,18 @@ function hierarchyOptions(spec, idKey) {
 function hierarchyFieldChannel(field) {
 	return (node) => node?.data?.[field];
 }
+/**
+* sankey 布局行顶层只有 canonical 字段（key/width/坐标），原 datum 收纳在 .data 下；
+* 声明式样式字段名（如 stroke:"色调"、color:"id"）须穿透到原 datum 解析，
+* 否则 channel 按顶层查表得 undefined 而静默退回默认样式。
+*/
+function sankeyDatumField(field) {
+	return (row) => {
+		const record = row;
+		if (record.data != null && field in record.data) return record.data[field];
+		return record[field];
+	};
+}
 /** sankey：固化 marks 回调 = link(布局连线) + rect(布局节点)，样式取自声明 */
 function translateSankey(spec, datasets) {
 	const nodes = resolveMarkData(spec.nodes, datasets);
@@ -922,25 +937,30 @@ function translateSankey(spec, datasets) {
 		source: spec.source,
 		target: spec.target,
 		value: spec.value,
-		marks: (context) => [looseLink(context.links, {
-			x1: "x1",
-			y1: "y1",
-			x2: "x2",
-			y2: "y2",
-			key: "key",
-			strokeWidth: "width",
-			lineCap: "butt",
-			stroke: spec.stroke ?? void 0,
-			strokeOpacity: spec.strokeOpacity ?? .55
-		}), looseRect(context.nodes, {
-			x1: "x0",
-			x2: "x1",
-			y1: "y0",
-			y2: "y1",
-			key: "key",
-			color: spec.color ?? "key",
-			fillOpacity: spec.fillOpacity ?? void 0
-		})]
+		marks: (context) => {
+			const strokeField = typeof spec.stroke === "string" && context.links.some((l) => l?.data?.[spec.stroke] !== void 0) ? spec.stroke : null;
+			return [looseLink(context.links, {
+				x1: "x1",
+				y1: "y1",
+				x2: "x2",
+				y2: "y2",
+				key: "key",
+				strokeWidth: (row) => Math.max(1, Number(row.width) || 1),
+				lineCap: "butt",
+				curve: d3Curve(curveBumpX),
+				color: strokeField ? sankeyDatumField(strokeField) : void 0,
+				stroke: strokeField ? void 0 : spec.stroke ?? void 0,
+				strokeOpacity: spec.strokeOpacity ?? .55
+			}), looseRect(context.nodes, {
+				x1: "x0",
+				x2: "x1",
+				y1: "y0",
+				y2: "y1",
+				key: "key",
+				color: typeof spec.color === "string" ? sankeyDatumField(spec.color) : spec.color ?? "key",
+				fillOpacity: spec.fillOpacity ?? void 0
+			})];
+		}
 	};
 	if (spec.id !== void 0) options.id = spec.id;
 	if (spec.align !== void 0) options.align = spec.align;
@@ -1422,7 +1442,8 @@ function buildDefinition(spec, datasets, rowsOverride, mode = "host") {
 			"pointer",
 			"keyboard",
 			"focusRing",
-			"focus"
+			"focus",
+			"motion"
 		]) if (spec[key] !== void 0) throw new Error(`translateViewGrid 子视图不得声明 "${key}"（host 权属字段，配置在外层 spec）`);
 		return definition;
 	}
@@ -1430,6 +1451,12 @@ function buildDefinition(spec, datasets, rowsOverride, mode = "host") {
 	if (spec.keyboard !== void 0) definition.keyboard = spec.keyboard;
 	if (spec.focusRing !== void 0) definition.focusRing = spec.focusRing;
 	if (spec.focus !== void 0) definition.focus = spec.focus;
+	if (spec.motion !== void 0) {
+		const timing = {};
+		if (spec.motion.transition !== void 0) timing.transition = spec.motion.transition;
+		if (spec.motion.delay !== void 0) timing.delay = spec.motion.delay;
+		definition.motion = timing;
+	}
 	const tooltip$2 = spec.tooltip === void 0 ? tooltip : translateTooltip(spec.tooltip);
 	if (tooltip$2 !== void 0) definition.tooltip = tooltip$2;
 	return definition;
@@ -1460,6 +1487,77 @@ function translateChartSpec(spec, datasets) {
 	return defineChart(buildDefinition(spec, datasets));
 }
 //#endregion
+//#region src/chart/src/motion-chart.vue
+const _hoisted_1 = ["innerHTML"];
+const _sfc_main$6 = /*@__PURE__*/ defineComponent({
+	__name: "motion-chart",
+	props: {
+		definition: {},
+		ariaLabel: {},
+		motionOptions: {},
+		height: {},
+		width: {},
+		aspectRatio: {},
+		className: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const idPrefix = `ts-chart-${useId().replaceAll(/[^a-zA-Z0-9_-]/g, "")}`;
+		const hostStyle = computed(() => ({
+			position: "relative",
+			width: props.width === void 0 ? "100%" : `${props.width}px`,
+			height: props.height ?? (props.aspectRatio === void 0 ? 320 : void 0),
+			aspectRatio: props.height === void 0 ? props.aspectRatio : void 0
+		}));
+		/** host options 组装:与库 vue adapter toHostOptions 同构,renderer 固定为 motion() */
+		function toHostOptions() {
+			return {
+				definition: props.definition,
+				ariaLabel: props.ariaLabel,
+				height: props.height,
+				width: props.width,
+				aspectRatio: props.aspectRatio,
+				className: props.className,
+				idPrefix,
+				renderer: motion({
+					initial: props.motionOptions?.initial ?? true,
+					resize: props.motionOptions?.resize
+				})
+			};
+		}
+		const adapter = createChartRendererAdapter(toHostOptions());
+		const initialMarkup = adapter.prerender();
+		const container = ref();
+		onMounted(() => {
+			if (!container.value) return;
+			adapter.update(toHostOptions());
+			adapter.mount(container.value);
+		});
+		watch(() => [
+			props.definition,
+			props.height,
+			props.width,
+			props.aspectRatio
+		], () => adapter.update(toHostOptions()));
+		onBeforeUnmount(() => adapter.destroy());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "ts-chart-host",
+				style: normalizeStyle(hostStyle.value)
+			}, [createCommentVNode(" 首帧 markup 只注入一次：mount 后 DOM 由 motion renderer 接管（含动画态),\n         若随重渲染重设 innerHTML 会摧毁动画状态，故用非响应式常量 "), createElementVNode("div", {
+				ref_key: "container",
+				ref: container,
+				class: "ts-chart-surface",
+				style: {
+					"width": "100%",
+					"height": "100%"
+				},
+				innerHTML: unref(initialMarkup)
+			}, null, 8, _hoisted_1)], 4);
+		};
+	}
+});
+//#endregion
 //#region src/chart/src/index.vue
 const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 	name: "CxTanstackChartsChart",
@@ -1479,10 +1577,18 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" 库根元素 inheritAttrs:false 且多根（host + tooltip Teleport），testid/BEM 类须由本层 wrapper 承担。\n       cx-charts 为主题桥作用域类（cx-comps charts-theme 映射 design token 到 --ts-chart-N/--chart-N）：\n       随组件自动声明，宿主无需手动加类——shadcn 系 spec 的 var(--chart-N, ...) 引用在此获得色板 "), createElementVNode("div", {
 				class: normalizeClass([unref(ns).b(), "cx-charts"]),
 				"data-testid": "cx-tanstack-charts-chart"
-			}, [createCommentVNode(" definition 未闭合期间骨架占位：空壳帧的空 marks 只渲染不可见空 svg，无反馈等同未渲染 "), isStreaming.value ? (openBlock(), createBlock(_sfc_main$6, {
+			}, [createCommentVNode(" definition 未闭合期间骨架占位：空壳帧的空 marks 只渲染不可见空 svg，无反馈等同未渲染 "), isStreaming.value ? (openBlock(), createBlock(_sfc_main$7, {
 				key: 0,
 				height: skeletonHeight.value
-			}, null, 8, ["height"])) : (openBlock(), createBlock(unref(Chart), mergeProps({ key: 1 }, unref(hostProps), {
+			}, null, 8, ["height"])) : unref(spec).motion !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" motion 声明走自研挂载分支：库 vue adapter 无 motion renderer 注入口子 "), createVNode(_sfc_main$6, mergeProps({
+				definition: definition.value,
+				ariaLabel: unref(ariaLabel),
+				"motion-options": unref(spec).motion
+			}, unref(hostProps)), null, 16, [
+				"definition",
+				"ariaLabel",
+				"motion-options"
+			])], 2112)) : (openBlock(), createBlock(unref(Chart), mergeProps({ key: 2 }, unref(hostProps), {
 				definition: definition.value,
 				"aria-label": unref(ariaLabel)
 			}), null, 16, ["definition", "aria-label"]))], 2)], 2112);

package/dist/shared/translate/types.d.ts

@@ -550,4 +550,27 @@ export interface CxChartSpec {
     keyboard?: boolean;
     focusRing?: boolean;
     focus?: 'nearest' | 'nearest-x' | 'nearest-y' | 'group-x' | 'group-y';
+    /**
+     * 动效声明（可 JSON 化子集）。声明即走 motion 挂载分支：库 vue adapter 未暴露
+     * motion renderer 注入，cx 组件层自组装 renderer adapter。transition/delay 翻译为
+     * 库 definition.motion 的 chart 级默认时序；initial/resize 为 renderer 级选项。
+     * mark 级 per-datum motion 回调不可 JSON 化，不收。
+     */
+    motion?: {
+        transition?: {
+            type: 'tween';
+            duration?: number;
+            easing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
+        } | {
+            type: 'spring';
+            stiffness?: number;
+            damping?: number;
+            mass?: number;
+            restSpeed?: number;
+            restDelta?: number;
+        };
+        delay?: number;
+        initial?: boolean | 'always';
+        resize?: boolean;
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lionad/cx-comps-tanstack-charts",
-  "version": "0.1.0-alpha.18",
+  "version": "0.1.0-alpha.20",
   "description": "cx material components wrapping TanStack Charts (@tanstack/charts/vue)",
   "keywords": [
     "charts",