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

package/dist/index.mjs

@@ -4,7 +4,7 @@ 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";
@@ -910,6 +910,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 +934,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;

package/package.json

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