@lionad/cx-comps-tanstack-charts 0.1.0-alpha.17 → 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";
@@ -23,7 +23,7 @@ import { treeLayout } from "@tanstack/charts/hierarchy/tree";
 import { treemap } from "@tanstack/charts/hierarchy/treemap";
 import { forceLayout } from "@tanstack/charts/network/force";
 import { sankeyDiagram } from "@tanstack/charts/network/sankey";
-import { geoAlbersUsa, geoEqualEarth, geoIdentity, geoMercator, geoNaturalEarth1, geoOrthographic } from "d3-geo";
+import { geoAlbersUsa, geoEqualEarth, geoEquirectangular, geoIdentity, geoMercator, geoNaturalEarth1, geoOrthographic } from "d3-geo";
 import { decorative } from "@tanstack/charts/mark/decorative";
 import { tooltip } from "@tanstack/charts/tooltip";
 import { viewGrid } from "@tanstack/charts/view";
@@ -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;
@@ -1097,13 +1114,16 @@ function translateForceGraph(spec, datasets) {
 		yDomain: [graph.yDomain[0], graph.yDomain[1]]
 	};
 }
-/** d3-geo 投影名称枚举 → 工厂（descriptor.type 形态：() => projection） */
+/** d3-geo 投影名称枚举 → 工厂（descriptor.type 形态：() => projection）；
+*  等距圆柱必须用 equirectangular 而非 identity：identity 的 stream 无 sphere 方法，
+*  fit/渲染 Sphere 几何（球面描边层）直接抛 TypeError */
 const GEO_PROJECTION_FACTORIES = {
 	mercator: geoMercator,
 	orthographic: geoOrthographic,
 	naturalEarth1: geoNaturalEarth1,
 	albersUsa: geoAlbersUsa,
 	equalEarth: geoEqualEarth,
+	equirectangular: geoEquirectangular,
 	identity: geoIdentity
 };
 /** geoShape：projection 名称枚举 → descriptor {type, fit, inset}；fit:'data' 由库拟合数据本体，{data:'<name>'} 拟合另一命名数据集 */

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

@@ -234,8 +234,8 @@ export interface CxChartMarkSpec {
     labelFontWeight?: number;
     orientation?: 'left' | 'right' | 'top' | 'bottom';
     nodeSize?: [number, number];
-    projection?: 'mercator' | 'orthographic' | 'naturalEarth1' | 'albersUsa' | 'equalEarth' | 'identity' | {
-        $by: Record<string, 'mercator' | 'orthographic' | 'naturalEarth1' | 'albersUsa' | 'equalEarth' | 'identity'>;
+    projection?: 'mercator' | 'orthographic' | 'naturalEarth1' | 'albersUsa' | 'equalEarth' | 'equirectangular' | 'identity' | {
+        $by: Record<string, 'mercator' | 'orthographic' | 'naturalEarth1' | 'albersUsa' | 'equalEarth' | 'equirectangular' | 'identity'>;
     };
     fit?: 'data' | 'sphere' | {
         data: string;

package/package.json

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