@lionad/cx-comps-tanstack-charts 0.1.0-alpha.26 → 0.1.0-alpha.28

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { define } from "@lionad/cx-definition";
 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 { areaX, areaY, arrow, bandX, bandY, barX, barY, binX, binXY, binY, boxRows, boxX, boxY, cell, colorGradientLegend, colorLegend, colorLegendItems, 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, curveBumpX, curveCatmullRom, curveLinear, curveLinearClosed, curveMonotoneX, curveNatural, curveStep, curveStepAfter, curveStepBefore } from "d3-shape";
 import { scaleLinear } from "@tanstack/charts/scales/linear";
@@ -294,6 +294,7 @@ function translateAxisPresentation(axis) {
 	if (axis === false) return false;
 	const presentation = {};
 	if (axis.label !== void 0) presentation.label = axis.label;
+	if (axis.line !== void 0) presentation.line = axis.line;
 	if (axis.ticks !== void 0) {
 		const ticks = {};
 		if (axis.ticks.count !== void 0) ticks.count = axis.ticks.count;
@@ -530,7 +531,6 @@ const SCALAR_KEYS = [
 	"positiveFillOpacity",
 	"negativeFillOpacity",
 	"comparisonStroke",
-	"cornerRadius",
 	"padAngle",
 	"radiusOffset",
 	"baseline",
@@ -608,7 +608,9 @@ function assertChannels(spec) {
 	}
 	for (const key of CHANNEL_FLEX_KEYS) {
 		const value = spec[key];
-		if (value !== void 0 && typeof value !== "string" && typeof value !== "number") throw new Error(`translateMark: channel "${key}" 只支持字段名或数值，收到 ${typeof value}`);
+		if (value !== void 0 && typeof value !== "string" && typeof value !== "number") {
+			if (!(Array.isArray(value) && value.length === 4 && value.every((n) => typeof n === "number" && Number.isFinite(n)))) throw new Error(`translateMark: channel "${key}" 只支持字段名、数值或四角数组，收到 ${typeof value}`);
+		}
 	}
 }
 /**
@@ -705,6 +707,7 @@ function translateMark(spec, datasets) {
 	if (rScale !== void 0) options.rScale = rScale;
 	for (const key of STYLE_KEYS) if (spec[key] !== void 0) options[key] = spec[key];
 	for (const key of SCALAR_KEYS) if (spec[key] !== void 0) options[key] = spec[key];
+	if ((spec.type === "barX" || spec.type === "barY") && spec.cornerRadius !== void 0 && spec.radius === void 0) options.radius = spec.cornerRadius;
 	if (spec.id !== void 0) options.id = spec.id;
 	if (spec.curve !== void 0) options.curve = spec.type === "violinY" ? translateAreaXCurve(spec.curve) : translateCurve(spec.curve);
 	if (spec.layout !== void 0) options.layout = translateLayout(spec.layout);
@@ -825,6 +828,9 @@ function translatePolarAxis(spec, { allowRange = false } = {}) {
 * polar 容器：{ type:'polar', marks:[radialXxx...], angleAxis, radiusAxis, radiusRatio,
 * startAngle, endAngle, inset, polarGuides } → polar({...})。
 * extraMarks：调用方预组装的 PolarMark（sunburst 等自包含层级 mark 不走 radial 直译）。
+* 0.18 契约：angle/radius scale 配置收进容器级 options.scales 保留通道
+* （resolvePolarLayout 读 options.scales 的 reserved angle/radius 条目），
+* 不再是顶层 angle/radius 字段；definition.scales 只需 x/y null 占位。
 */
 function translatePolar(spec, datasets, extraMarks = []) {
 	const options = { marks: [...(spec.marks ?? []).map((m) => translateRadialMark(m, datasets)), ...extraMarks] };
@@ -833,12 +839,28 @@ function translatePolar(spec, datasets, extraMarks = []) {
 	if (spec.endAngle !== void 0) options.endAngle = spec.endAngle;
 	if (spec.inset !== void 0) options.inset = spec.inset;
 	if (spec.id !== void 0) options.id = spec.id;
+	const MATERIALIZING_TYPES = /* @__PURE__ */ new Set([
+		"radialBarRadius",
+		"radialBarAngle",
+		"radialLine",
+		"radialArea",
+		"radialText",
+		"radialRule",
+		"radialDot"
+	]);
+	const marksSpecs = spec.marks ?? [];
+	const hasRadialBarRadius = marksSpecs.some((m) => m.type === "radialBarRadius");
+	const hasRadialBarAngle = marksSpecs.some((m) => m.type === "radialBarAngle");
+	const materializesChannel = marksSpecs.some((m) => MATERIALIZING_TYPES.has(m.type));
 	const angle = translatePolarAxis(spec.angleAxis);
 	const radius = translatePolarAxis(spec.radiusAxis, { allowRange: true });
-	const hasRadialBarRadius = (spec.marks ?? []).some((m) => m.type === "radialBarRadius");
-	const hasRadialBarAngle = (spec.marks ?? []).some((m) => m.type === "radialBarAngle");
-	options.angle = angle ?? { scale: () => hasRadialBarRadius ? scaleBand() : scalePoint() };
-	options.radius = radius ?? { scale: hasRadialBarAngle ? () => scaleBand() : scaleLinear };
+	options.scales = materializesChannel ? {
+		angle: angle ?? { scale: () => hasRadialBarRadius ? scaleBand() : scalePoint() },
+		radius: radius ?? { scale: hasRadialBarAngle ? () => scaleBand() : scaleLinear }
+	} : {
+		angle: angle ?? null,
+		radius: radius ?? null
+	};
 	if (spec.polarGuides?.length) options.guides = spec.polarGuides.map(translatePolarGuide);
 	return polar(options);
 }
@@ -1275,7 +1297,7 @@ function translateViewGrid(spec, datasets, hooks) {
 */
 /** color.legend 声明 → 图例实例；true 等价 { kind:'color' } 缺省配置 */
 function translateLegend(legend) {
-	const { kind, label, placement, itemWidth, steps, width } = legend === true ? {} : legend;
+	const { kind, label, placement, itemWidth, steps, width, items: itemSpec } = legend === true ? {} : legend;
 	if (kind === "gradient") {
 		const gradient = {};
 		if (label !== void 0) gradient.label = label;
@@ -1289,6 +1311,15 @@ function translateLegend(legend) {
 	if (placement !== void 0) items.placement = placement;
 	if (itemWidth !== void 0) items.itemWidth = itemWidth;
 	if (width !== void 0) items.width = width;
+	if (itemSpec !== void 0) {
+		const itemOptions = {};
+		if (itemSpec.justify !== void 0) itemOptions.justify = itemSpec.justify;
+		if (itemSpec.gap !== void 0) itemOptions.gap = itemSpec.gap;
+		if (itemSpec.rowGap !== void 0) itemOptions.rowGap = itemSpec.rowGap;
+		if (itemSpec.indicator !== void 0) itemOptions.indicator = itemSpec.indicator;
+		if (itemSpec.label !== void 0) itemOptions.label = itemSpec.label;
+		items.items = colorLegendItems(itemOptions);
+	}
 	return colorLegend(items);
 }
 /**
@@ -1401,6 +1432,7 @@ function buildDefinition(spec, datasets, rowsOverride, mode = "host") {
 		} else pushMark(bound, translateMark(bound, table));
 	}
 	if (mode === "child" && spec.theme?.background !== void 0) throw new Error("translateViewGrid 子视图不得声明 theme.background（库拒绝子图持有场景背景；背景用子图内普通 mark 表达）");
+	if (mode === "child" && spec.gradients !== void 0) throw new Error("translateViewGrid 子视图不得声明 gradients（host 权属渐变资源，配置在外层 spec）");
 	const theme = mode === "child" ? spec.theme === void 0 ? void 0 : { ...spec.theme } : {
 		...defaultChartTheme,
 		...spec.theme
@@ -1412,21 +1444,22 @@ function buildDefinition(spec, datasets, rowsOverride, mode = "host") {
 	const axisless = polarOnly || geoOnly;
 	const xSpec = spec.x === void 0 && axisless ? null : spec.x;
 	const ySpec = spec.y === void 0 && axisless ? null : spec.y;
+	const scales = {};
 	const x = translateAxis(xSpec ?? void 0, "point");
 	const y = translateAxis(ySpec ?? void 0, "linear");
-	if (xSpec !== null && x) definition.x = x;
-	if (xSpec === null) definition.x = null;
-	if (ySpec !== null && y) definition.y = y;
-	if (ySpec === null) definition.y = null;
-	if (derivedXDomain && spec.x?.scale?.domain === void 0) definition.x = {
-		...definition.x,
+	scales.x = xSpec === null ? null : x;
+	scales.y = ySpec === null ? null : y;
+	definition.scales = scales;
+	if (derivedXDomain && spec.x?.scale?.domain === void 0) scales.x = {
+		...x,
 		scale: scaleLinear().domain(derivedXDomain)
 	};
-	if (derivedYDomain && spec.y?.scale?.domain === void 0) definition.y = {
-		...definition.y,
+	if (derivedYDomain && spec.y?.scale?.domain === void 0) scales.y = {
+		...y,
 		scale: scaleLinear().domain(derivedYDomain)
 	};
 	if (spec.margin !== void 0) definition.margin = spec.margin;
+	if (spec.gradients !== void 0) definition.gradients = spec.gradients;
 	if (spec.guides !== void 0) definition.guides = spec.guides;
 	else if (polarOnly) definition.guides = false;
 	if (spec.clip !== void 0) definition.clip = spec.clip;
@@ -2166,15 +2199,25 @@ function usePieChart(attrs) {
 			const clean = rows.filter((row) => row !== null && typeof row === "object" && Number.isFinite(Number(row[valueField])) && Number(row[valueField]) >= 0);
 			const slices = pie(clean, { value: (datum) => Number(datum[valueField]) });
 			const ratio = typeof attrs.innerRadiusRatio === "number" && Number.isFinite(attrs.innerRadiusRatio) ? Math.min(Math.max(attrs.innerRadiusRatio, 0), .95) : 0;
-			return defineChart({ marks: [polar({
-				inset: 8,
-				marks: [radialArc(slices, {
-					color: (datum) => String(datum[nameField]),
-					key: (datum) => String(datum[nameField]),
-					innerRadius: ratio > 0 ? ({ radius }) => radius * ratio : 0,
-					cornerRadius: 2
-				})]
-			})] });
+			return defineChart({
+				marks: [polar({
+					inset: 8,
+					scales: {
+						angle: null,
+						radius: null
+					},
+					marks: [radialArc(slices, {
+						color: (datum) => String(datum[nameField]),
+						key: (datum) => String(datum[nameField]),
+						innerRadius: ratio > 0 ? ({ radius }) => radius * ratio : 0,
+						cornerRadius: 2
+					})]
+				})],
+				scales: {
+					x: null,
+					y: null
+				}
+			});
 		}),
 		hostProps,
 		ariaLabel
@@ -2313,28 +2356,37 @@ function keyOf(key) {
 	if (!comp) throw new Error(`tanstack-charts 物料定义缺失: ${key}`);
 	return comp._cx_meta.key;
 }
-const TANSTACK_CHARTS_STREAM_TRIGGERS = [{
-	key: keyOf("cx-data-chart"),
-	sections: [{
-		kind: "array",
-		arrayKey: "*"
-	}],
-	stateBranch: { emptyPassthrough: true },
-	frameStride: 10
-}, ...[
+const ARRAY_PRESET_KEYS = [
 	"cx-tanstack-charts-line",
 	"cx-tanstack-charts-bar",
 	"cx-tanstack-charts-area",
 	"cx-tanstack-charts-dot",
 	"cx-tanstack-charts-pie"
-].map((key) => ({
-	key: keyOf(key),
+];
+const CHART_STREAM_TRIGGER = {
+	key: keyOf("cx-data-chart"),
 	sections: [{
 		kind: "array",
-		arrayKey: "data"
+		arrayKey: "*"
 	}],
+	stateBranch: { emptyPassthrough: true },
 	frameStride: 10
-}))];
+};
+const TANSTACK_CHARTS_STREAM_TRIGGERS = [
+	CHART_STREAM_TRIGGER,
+	{
+		...CHART_STREAM_TRIGGER,
+		key: "cx-chart"
+	},
+	...ARRAY_PRESET_KEYS.map((key) => ({
+		key: keyOf(key),
+		sections: [{
+			kind: "array",
+			arrayKey: "data"
+		}],
+		frameStride: 10
+	}))
+];
 /** 装配 TanStack Charts 物料的 trigger 注册表（size 恒 6） */
 function createTanstackChartsTriggerRegistry() {
 	const registry = createTriggerRegistry();

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

@@ -4,6 +4,9 @@ import type { CxChartDatasets, CxChartMarkSpec } from './types';
  * polar 容器：{ type:'polar', marks:[radialXxx...], angleAxis, radiusAxis, radiusRatio,
  * startAngle, endAngle, inset, polarGuides } → polar({...})。
  * extraMarks：调用方预组装的 PolarMark（sunburst 等自包含层级 mark 不走 radial 直译）。
+ * 0.18 契约：angle/radius scale 配置收进容器级 options.scales 保留通道
+ * （resolvePolarLayout 读 options.scales 的 reserved angle/radius 条目），
+ * 不再是顶层 angle/radius 字段；definition.scales 只需 x/y null 占位。
  */
 export declare function translatePolar(spec: CxChartMarkSpec, datasets: CxChartDatasets | undefined, extraMarks?: readonly unknown[]): ChartMark<unknown, any, any>;
 /**

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

@@ -38,11 +38,47 @@ export type CxChartScaleSpec = {
     kind: 'ordinal';
     domain?: string[];
 };
+/** 网格线/轴基线渲染中立描边样式（官方 ChartGuideLineStyle 的 JSON 投影） */
+export interface CxChartGuideLineStyle {
+    stroke?: string;
+    strokeOpacity?: number;
+    strokeWidth?: number;
+    strokeDasharray?: string;
+    lineCap?: 'butt' | 'round' | 'square';
+}
+/** 渐变 stop（0–1 objectBoundingBox；offset 回退时由渲染器向前钳制） */
+export interface CxChartGradientStop {
+    offset: number;
+    color: string;
+    opacity?: number;
+}
+/** 线性渐变：type 可省；坐标缺省垂直自底向上 (0,1)→(0,0) */
+export interface CxChartLinearGradient {
+    type?: 'linear';
+    id: string;
+    stops: CxChartGradientStop[];
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+}
+/** 径向渐变：type 必填；cx/cy/r 缺省 0.5，fx/fy 缺省继承中心 */
+export interface CxChartRadialGradient {
+    type: 'radial';
+    id: string;
+    stops: CxChartGradientStop[];
+    cx?: number;
+    cy?: number;
+    r?: number;
+    fx?: number;
+    fy?: number;
+}
 export interface CxChartAxisSpec {
     scale?: CxChartScaleSpec;
     nice?: boolean | number;
     reverse?: boolean;
-    grid?: boolean;
+    /** true 画缺省网格；对象形态覆盖网格线描边呈现（0.18 ChartGuideLineStyle） */
+    grid?: boolean | CxChartGuideLineStyle;
     /**
      * 半径像素 range 的比例对（相对 polar 最终半径，0–1），仅 polar 容器的
      * radiusAxis 消费；物化为官方 PolarLength 回调数组（resize 时随最终半径重解析）。
@@ -50,7 +86,17 @@ export interface CxChartAxisSpec {
      */
     range?: [number, number];
     axis?: false | {
-        label?: string;
+        /** 轴标题：字符串缺省呈现；对象形态定制字号/字重/填充/偏移（0.18 ChartAxisLabelOptions） */
+        label?: string | {
+            text: string;
+            offset?: number | 'auto';
+            fontSize?: number;
+            fontWeight?: number;
+            fill?: string;
+            opacity?: number;
+        };
+        /** 轴基线：缺省不画；true 画缺省基线，对象形态覆盖基线描边（0.18 axis.line） */
+        line?: boolean | CxChartGuideLineStyle;
         ticks?: {
             count?: number;
             size?: number;
@@ -136,7 +182,13 @@ export interface CxChartMarkSpec {
         range?: [number, number];
     };
     angle?: string | number;
-    radius?: string | number;
+    /**
+     * 双语义：radial 系是 radius channel（字段名/数值常量）；直角 barX/barY 是圆角
+     * BarRadius——数值全角、[tl,tr,br,bl] 四角差异化（对象形态 {end,stack} 不收，
+     * 防与 channel 语义混淆）。cornerRadius 是 polar 族字段名（radialArc），直角系
+     * 由翻译层别名归一到本字段（显式 radius 优先）。
+     */
+    radius?: string | number | readonly [number, number, number, number];
     width?: string | number;
     height?: string | number;
     length?: string | number;
@@ -513,6 +565,12 @@ export interface CxChartSpec {
     };
     guides?: boolean;
     clip?: boolean;
+    /**
+     * 渐变资源（0.18 ChartGradient 投影）：mark 以 fill/stroke 'url(#id)' 引用。
+     * host 权属资源——views 子图声明即拒绝（官方 child 契约），归外层组合定义。
+     * 坐标与 stop offset 为 0–1 objectBoundingBox；linear 缺省垂直自底向上。
+     */
+    gradients?: (CxChartLinearGradient | CxChartRadialGradient)[];
     /** 数据预处理管道（顶层声明，marks 之前执行；产物注册进 datasets 表） */
     transforms?: CxChartTransformSpec[];
     /** color scale 声明式（domain/range 直可 JSON；legend 为图例声明） */
@@ -526,6 +584,24 @@ export interface CxChartSpec {
             itemWidth?: number;
             steps?: number;
             width?: number;
+            /** 条目子集定制（仅 kind:'color'；物化为 colorLegendItems，0.18 契约） */
+            items?: {
+                justify?: 'start' | 'center' | 'stretch';
+                gap?: number;
+                rowGap?: number;
+                indicator?: {
+                    shape?: 'dot' | 'square' | 'line' | 'line-dot';
+                    width?: number;
+                    height?: number;
+                    gap?: number;
+                };
+                label?: {
+                    fontSize?: number;
+                    fontWeight?: number;
+                    fill?: string;
+                    fillOpacity?: number;
+                };
+            };
         };
     };
     tooltip?: boolean | {
@@ -551,7 +627,13 @@ export interface CxChartSpec {
     };
     pointer?: boolean;
     keyboard?: boolean;
-    focusRing?: boolean;
+    /** 焦点环：true/false 显隐；对象形态定制几何与描边填充（0.18 ChartFocusRingOptions） */
+    focusRing?: boolean | {
+        radius?: number;
+        fill?: string;
+        stroke?: string;
+        strokeWidth?: number;
+    };
     focus?: 'nearest' | 'nearest-x' | 'nearest-y' | 'group-x' | 'group-y';
     /**
      * 动效声明（可 JSON 化子集）。声明即走 motion 挂载分支：库 vue adapter 未暴露

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lionad/cx-comps-tanstack-charts",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.28",
   "description": "cx material components wrapping TanStack Charts (@tanstack/charts/vue)",
   "keywords": [
     "charts",
@@ -43,7 +43,7 @@
     "d3-shape": "^3.2.0"
   },
   "devDependencies": {
-    "@tanstack/charts": "^0.14.0",
+    "@tanstack/charts": "^0.18.0",
     "@types/d3-geo": "^3.1.1",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",