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

package/dist/index.mjs

@@ -32,7 +32,7 @@ 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$7 = /*@__PURE__*/ defineComponent({
+const _sfc_main$8 = /*@__PURE__*/ defineComponent({
 	__name: "chart-skeleton",
 	props: { height: { default: 320 } },
 	setup(__props) {
@@ -123,6 +123,85 @@ const _sfc_main$7 = /*@__PURE__*/ defineComponent({
 	}
 });
 //#endregion
+//#region src/shared/chart-empty.vue
+const _sfc_main$7 = /*@__PURE__*/ defineComponent({
+	__name: "chart-empty",
+	props: { height: { default: 320 } },
+	setup(__props) {
+		const props = __props;
+		const ns = useCxBEM("tanstack-charts-chart-empty");
+		const normalizedHeight = computed(() => Number.isFinite(props.height) && props.height > 0 ? props.height : 320);
+		const shellStyle = computed(() => ({
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: "0.375rem",
+			width: "100%",
+			boxSizing: "border-box",
+			height: `${normalizedHeight.value}px`,
+			border: "1px dashed rgba(148, 163, 184, 0.35)",
+			borderRadius: "0.75rem",
+			color: "rgba(148, 163, 184, 0.9)",
+			textAlign: "center"
+		}));
+		const iconStyle = {
+			width: "2rem",
+			height: "2rem",
+			opacity: .7
+		};
+		const titleStyle = {
+			margin: 0,
+			fontSize: "0.875rem",
+			fontWeight: 500
+		};
+		const descStyle = {
+			margin: 0,
+			fontSize: "0.75rem",
+			opacity: .75
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" 图表终态空态：数据集占位/不可渲染时替换 Chart 占位（空壳 svg 无反馈等同未渲染）。\n       全 inline style：保持包零 css 分发契约（同 chart-skeleton 模式） "), createElementVNode("div", {
+				class: normalizeClass(unref(ns).b()),
+				style: normalizeStyle(shellStyle.value),
+				"data-testid": "cx-tanstack-charts-chart-empty",
+				role: "status"
+			}, [
+				(openBlock(), createElementBlock("svg", {
+					style: iconStyle,
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "1.5",
+					"aria-hidden": "true"
+				}, [..._cache[0] || (_cache[0] = [
+					createElementVNode("circle", {
+						cx: "12",
+						cy: "12",
+						r: "9"
+					}, null, -1),
+					createElementVNode("line", {
+						x1: "12",
+						y1: "7.5",
+						x2: "12",
+						y2: "13",
+						"stroke-linecap": "round"
+					}, null, -1),
+					createElementVNode("circle", {
+						cx: "12",
+						cy: "16.5",
+						r: "0.9",
+						fill: "currentColor",
+						stroke: "none"
+					}, null, -1)
+				])])),
+				createElementVNode("p", { style: titleStyle }, "图表数据不可用"),
+				createElementVNode("p", { style: descStyle }, "数据集中缺少可渲染的数据，已跳过绘制")
+			], 6)], 2112);
+		};
+	}
+});
+//#endregion
 //#region src/shared/streaming.ts
 /**
 * 读取 trigger 注入的流式骨架标记（_cx_streaming，下划线前缀键不会透传物料）。
@@ -322,6 +401,55 @@ function translateAxis(spec, fallbackKind) {
 	return axis;
 }
 //#endregion
+//#region src/shared/translate/geometry.ts
+/**
+* 占位几何检测：LLM 在数据集缺席时可能产出 geometry 为占位字符串的示意 spec
+* （如 "…（命名数据集）…"）。翻译层与渲染层对缺失数据容错回退空数组，占位字符串
+* 则被库静默忽略——两者都渲染为空壳 svg 且无任何反馈。本模块提供「数据集整体
+* 不可渲染」的判定与翻译期警告，让空壳显式化为空态反馈。
+*
+* 流式安全性：占位字符串只可能出现在完整闭合的 JSON 中（流式截断停在字符层，
+* 截断帧不可解析即不会产出 spec），检测不存在流式中间态误报面。
+*/
+/** 数据集为 GeoJSON Feature 数组（rows 平铺 features 与命名 geo 数据集同形态） */
+function isFeatureArray(rows) {
+	return rows.length > 0 && rows.every((f) => f?.type === "Feature");
+}
+/**
+* 单数据集整体不可渲染判定：Feature 数组且全部条目几何缺失或为占位字符串。
+* 混合场景（部分真实几何）不算——部分数据仍可渲染，整体空态会误杀；
+* geometry: null 是 GeoJSON 合法形态，但全部条目皆 null 时渲染结果同为空壳。
+*/
+function isPlaceholderGeometryDataset(rows) {
+	if (!isFeatureArray(rows)) return false;
+	return rows.every((f) => {
+		const geometry = f.geometry;
+		return geometry == null || typeof geometry === "string";
+	});
+}
+/**
+* 组件层空态判定：数据集表中存在 GeoJSON 形态数据集，且全部占位。
+* 存在任一可用数据集时返回 false（部分数据仍可渲染）。
+*/
+function hasOnlyPlaceholderGeometry(datasets) {
+	if (!datasets) return false;
+	const geoSets = Object.values(datasets).filter((arr) => arr !== void 0 && isFeatureArray(arr));
+	return geoSets.length > 0 && geoSets.every((arr) => isPlaceholderGeometryDataset(arr));
+}
+/** 翻译期警告去重：同数组引用只警告一次（Vue computed 重算与多 mark 共享数据集会重复调用） */
+const warned = /* @__PURE__ */ new WeakSet();
+/**
+* 翻译期占位几何警告：数据集整体占位时 console.warn 指出空壳根因与修复方向。
+* 只挂在 geoShape（占位字符串的高发地——示意 spec 的外部轮廓数据集）；普通 mark
+* 的数据集在途是流式常态，warn 会成噪音。WeakSet 按引用去重，数据集内容更新
+* （新引用）视为新数据集重新警告。
+*/
+function warnPlaceholderGeometry(rows, datasetName, markType) {
+	if (!isPlaceholderGeometryDataset(rows) || warned.has(rows)) return;
+	warned.add(rows);
+	console.warn(`[cx-charts] ${markType} 数据集${datasetName ? ` "${datasetName}"` : ""} 的 geometry 全部缺失或为占位字符串，渲染为空壳——须以真实 GeoJSON 数据集整体替换示意占位（技能侧见「数据供给」表）。`);
+}
+//#endregion
 //#region src/shared/translate/transforms.ts
 /**
 * 数据预处理管道翻译：spec 顶层 transforms 按序执行，产物以 name 注册进数据集表。
@@ -1154,6 +1282,7 @@ const GEO_PROJECTION_FACTORIES = {
 /** geoShape：projection 名称枚举 → descriptor {type, fit, inset}；fit:'data' 由库拟合数据本体，{data:'<name>'} 拟合另一命名数据集 */
 function translateGeoShape(spec, datasets) {
 	const rows = resolveMarkData(spec.data, datasets);
+	warnPlaceholderGeometry(rows, typeof spec.data === "string" ? spec.data : void 0, "geoShape");
 	const projectionName = spec.projection ?? "mercator";
 	if (typeof projectionName === "object") throw new Error("translateGeoShape: projection {$by} 仅允许出现在 facet chart 子模板内");
 	const factory = GEO_PROJECTION_FACTORIES[projectionName];
@@ -1603,6 +1732,7 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 		const { spec, datasets, hostProps, ariaLabel } = useChartProps(attrs);
 		const definition = computed(() => translateChartSpec(spec.value, datasets.value));
 		const isStreaming = computed(() => streamingFields(attrs).includes("definition"));
+		const hasPlaceholderGeometry = computed(() => hasOnlyPlaceholderGeometry(datasets.value));
 		const skeletonHeight = computed(() => {
 			const h = Number(attrs.height);
 			return Number.isFinite(h) && h > 0 ? h : 320;
@@ -1611,10 +1741,10 @@ 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$7, {
+			}, [createCommentVNode(" definition 未闭合期间骨架占位：空壳帧的空 marks 只渲染不可见空 svg，无反馈等同未渲染 "), isStreaming.value ? (openBlock(), createBlock(_sfc_main$8, {
 				key: 0,
 				height: skeletonHeight.value
-			}, null, 8, ["height"])) : unref(spec).motion !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" motion 声明走自研挂载分支：库 vue adapter 无 motion renderer 注入口子 "), createVNode(_sfc_main$6, mergeProps({
+			}, null, 8, ["height"])) : hasPlaceholderGeometry.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" 终态占位几何空态：全部 GeoJSON 数据集均占位/缺失时渲染必为空壳,显式降级为空态反馈 "), createVNode(_sfc_main$7, { height: skeletonHeight.value }, null, 8, ["height"])], 2112)) : unref(spec).motion !== void 0 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [createCommentVNode(" motion 声明走自研挂载分支：库 vue adapter 无 motion renderer 注入口子 "), createVNode(_sfc_main$6, mergeProps({
 				definition: definition.value,
 				ariaLabel: unref(ariaLabel),
 				"motion-options": unref(spec).motion
@@ -1622,7 +1752,7 @@ const _sfc_main$5 = /*@__PURE__*/ defineComponent({
 				"definition",
 				"ariaLabel",
 				"motion-options"
-			])], 2112)) : (openBlock(), createBlock(unref(Chart), mergeProps({ key: 2 }, unref(hostProps), {
+			])], 2112)) : (openBlock(), createBlock(unref(Chart), mergeProps({ key: 3 }, unref(hostProps), {
 				definition: definition.value,
 				"aria-label": unref(ariaLabel)
 			}), null, 16, ["definition", "aria-label"]))], 2)], 2112);
@@ -2426,4 +2556,4 @@ const CxTanstackChartsBundle = {
 	materials: [...CxTanstackCharts]
 };
 //#endregion
-export { COMPOSITE_TYPES, CX_CHART_CURVE_NAMES, CxTanstackCharts, area_default as CxTanstackChartsArea, bar_default as CxTanstackChartsBar, CxTanstackChartsBundle, chart_default as CxTanstackChartsChart, dot_default as CxTanstackChartsDot, line_default as CxTanstackChartsLine, pie_default as CxTanstackChartsPie, POLAR_FAMILY_TYPES, TANSTACK_CHARTS_STREAM_TRIGGERS, applyTransforms, createTanstackChartsTriggerRegistry, mainArrayOf, resolveMarkData, resolveRScaleOption, translateAxis, translateChartSpec, translateCompositeMark, translateCurve, translateMark, translateOutputs, translatePie, translatePolar, translateReduce, translateScale, translateTransform };
+export { COMPOSITE_TYPES, CX_CHART_CURVE_NAMES, CxTanstackCharts, area_default as CxTanstackChartsArea, bar_default as CxTanstackChartsBar, CxTanstackChartsBundle, chart_default as CxTanstackChartsChart, dot_default as CxTanstackChartsDot, line_default as CxTanstackChartsLine, pie_default as CxTanstackChartsPie, POLAR_FAMILY_TYPES, TANSTACK_CHARTS_STREAM_TRIGGERS, applyTransforms, createTanstackChartsTriggerRegistry, hasOnlyPlaceholderGeometry, isPlaceholderGeometryDataset, mainArrayOf, resolveMarkData, resolveRScaleOption, translateAxis, translateChartSpec, translateCompositeMark, translateCurve, translateMark, translateOutputs, translatePie, translatePolar, translateReduce, translateScale, translateTransform, warnPlaceholderGeometry };

package/dist/shared/chart-empty.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    height?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,19 @@
+import type { CxChartDatasets } from './types';
+/**
+ * 单数据集整体不可渲染判定：Feature 数组且全部条目几何缺失或为占位字符串。
+ * 混合场景（部分真实几何）不算——部分数据仍可渲染，整体空态会误杀；
+ * geometry: null 是 GeoJSON 合法形态，但全部条目皆 null 时渲染结果同为空壳。
+ */
+export declare function isPlaceholderGeometryDataset(rows: readonly unknown[]): boolean;
+/**
+ * 组件层空态判定：数据集表中存在 GeoJSON 形态数据集，且全部占位。
+ * 存在任一可用数据集时返回 false（部分数据仍可渲染）。
+ */
+export declare function hasOnlyPlaceholderGeometry(datasets: CxChartDatasets): boolean;
+/**
+ * 翻译期占位几何警告：数据集整体占位时 console.warn 指出空壳根因与修复方向。
+ * 只挂在 geoShape（占位字符串的高发地——示意 spec 的外部轮廓数据集）；普通 mark
+ * 的数据集在途是流式常态，warn 会成噪音。WeakSet 按引用去重，数据集内容更新
+ * （新引用）视为新数据集重新警告。
+ */
+export declare function warnPlaceholderGeometry(rows: readonly unknown[], datasetName: string | undefined, markType: string): void;

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

@@ -8,6 +8,7 @@ export type { CxChartAxisSpec, CxChartCurveName, CxChartDatasets, CxChartForceSp
 export { CX_CHART_CURVE_NAMES, translateCurve } from './curve';
 export { translateScale } from './scale';
 export { translateAxis } from './axis';
+export { hasOnlyPlaceholderGeometry, isPlaceholderGeometryDataset, warnPlaceholderGeometry } from './geometry';
 export { resolveMarkData, resolveRScaleOption, translateMark } from './mark';
 export { applyTransforms, translateOutputs, translateReduce, translateTransform } from './transforms';
 export { POLAR_FAMILY_TYPES, translatePie, translatePolar } from './polar';

package/package.json

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