@ai-gui/plugin-bigscreen 0.34.0

package/dist/options-C087Peeh.js

@@ -0,0 +1,415 @@
+//#region src/palette.ts
+/**
+* Two palettes, one per theme.
+*
+* The dark one is the data-wall look — deep navy, cyan accent, a little glow; the light one is
+* the same screen on a white page. The accent can be overridden per screen, and the series
+* colours start from it so a screen reads as one thing rather than a collage.
+*/
+function palette(definition) {
+	const accent = definition.accent ?? (definition.theme === "dark" ? "#22d3ee" : "#0369a1");
+	return definition.theme === "dark" ? {
+		accent,
+		text: "#e2e8f0",
+		muted: "#94a3b8",
+		good: "#34d399",
+		bad: "#fb7185",
+		warn: "#fbbf24",
+		track: "rgba(148,163,184,0.18)",
+		series: [
+			accent,
+			"#a78bfa",
+			"#34d399",
+			"#fbbf24",
+			"#fb7185",
+			"#60a5fa",
+			"#f472b6",
+			"#2dd4bf"
+		],
+		gridLine: "rgba(148,163,184,0.16)"
+	} : {
+		accent,
+		text: "#1e293b",
+		muted: "#64748b",
+		good: "#059669",
+		bad: "#e11d48",
+		warn: "#d97706",
+		track: "rgba(100,116,139,0.16)",
+		series: [
+			accent,
+			"#7c3aed",
+			"#059669",
+			"#d97706",
+			"#e11d48",
+			"#2563eb",
+			"#db2777",
+			"#0d9488"
+		],
+		gridLine: "rgba(100,116,139,0.2)"
+	};
+}
+/** `#rrggbb` with an alpha, for glows and fills. */
+function withAlpha(hex, alpha) {
+	const h = hex.replace("#", "");
+	const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+	const n = Number.parseInt(full, 16);
+	return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${alpha})`;
+}
+
+//#endregion
+//#region src/options.ts
+/**
+* ECharts options built from panels.
+*
+* Pure functions of the panel and the palette, so they can be tested without a canvas and so
+* the same panel draws the same chart on every screen.
+*/
+const FONT = "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Noto Sans CJK SC', sans-serif";
+/** Format a number for a label: thousands grouped, up to `decimals` places. */
+function formatNumber(value, decimals = 0) {
+	return value.toLocaleString("en-US", {
+		minimumFractionDigits: decimals,
+		maximumFractionDigits: decimals
+	});
+}
+/** The colour a gauge shows at `fraction` of its range. */
+function gaugeColour(fraction, thresholds, c) {
+	if (!thresholds) return c.accent;
+	if (fraction >= thresholds[1]) return c.bad;
+	if (fraction >= thresholds[0]) return c.warn;
+	return c.good;
+}
+function gaugeOption(panel, c, animate) {
+	const max = panel.max ?? 100;
+	const fraction = Math.max(0, Math.min(1, panel.value / max));
+	const colour = gaugeColour(fraction, panel.thresholds, c);
+	const ring = panel.style === "ring";
+	return {
+		animation: animate,
+		animationDuration: 1400,
+		animationEasing: "cubicOut",
+		series: [{
+			type: "gauge",
+			startAngle: ring ? 90 : 210,
+			endAngle: ring ? -270 : -30,
+			min: 0,
+			max,
+			radius: "92%",
+			center: ["50%", ring ? "50%" : "58%"],
+			progress: {
+				show: true,
+				width: ring ? 14 : 16,
+				roundCap: true,
+				itemStyle: {
+					color: colour,
+					shadowBlur: 12,
+					shadowColor: withAlpha(colour, .5)
+				}
+			},
+			pointer: {
+				show: !ring,
+				length: "60%",
+				width: 4,
+				itemStyle: { color: colour }
+			},
+			axisLine: { lineStyle: {
+				width: ring ? 14 : 16,
+				color: [[1, c.track]]
+			} },
+			axisTick: { show: false },
+			splitLine: {
+				show: !ring,
+				length: 8,
+				lineStyle: {
+					color: c.muted,
+					width: 1
+				}
+			},
+			axisLabel: {
+				show: !ring,
+				color: c.muted,
+				fontSize: 10,
+				distance: 18,
+				fontFamily: FONT
+			},
+			anchor: {
+				show: !ring,
+				size: 10,
+				itemStyle: { color: colour }
+			},
+			title: { show: false },
+			detail: {
+				valueAnimation: animate,
+				offsetCenter: [0, ring ? 0 : "28%"],
+				fontSize: ring ? 28 : 24,
+				fontWeight: 700,
+				fontFamily: FONT,
+				color: c.text,
+				formatter: (value) => `${formatNumber(value, Number.isInteger(panel.value) ? 0 : 1)}${panel.unit ?? ""}`
+			},
+			data: [{ value: panel.value }]
+		}]
+	};
+}
+/**
+* The screen's palette laid over whatever the model wrote.
+*
+* The model's option wins on anything it sets; this only fills in the colours, the font, the
+* transparent background and the entrance animation a screen wants, so a plain `bar` series
+* still looks like it belongs.
+*/
+function chartOption(panel, c, animate) {
+	const axisStyle = {
+		axisLine: { lineStyle: { color: c.gridLine } },
+		axisLabel: {
+			color: c.muted,
+			fontFamily: FONT
+		},
+		splitLine: { lineStyle: { color: c.gridLine } }
+	};
+	const withAxisDefaults = (axis) => {
+		if (Array.isArray(axis)) return axis.map((a) => ({
+			...axisStyle,
+			...a
+		}));
+		if (axis && typeof axis === "object") return {
+			...axisStyle,
+			...axis
+		};
+		return axis;
+	};
+	const option = panel.option;
+	return {
+		backgroundColor: "transparent",
+		color: c.series,
+		textStyle: {
+			color: c.text,
+			fontFamily: FONT
+		},
+		animation: animate,
+		animationDuration: 1200,
+		animationEasing: "cubicOut",
+		grid: {
+			left: 40,
+			right: 16,
+			top: 28,
+			bottom: 28,
+			containLabel: true
+		},
+		legend: { textStyle: { color: c.muted } },
+		tooltip: { trigger: "axis" },
+		...option,
+		...option.xAxis !== void 0 ? { xAxis: withAxisDefaults(option.xAxis) } : {},
+		...option.yAxis !== void 0 ? { yAxis: withAxisDefaults(option.yAxis) } : {}
+	};
+}
+function chart3dOption(panel, c, animate) {
+	const values = panel.data.map((p) => p[2]);
+	const max = Math.max(...values);
+	const min = Math.min(...values);
+	const axis = (categories, name) => ({
+		type: categories ? "category" : "value",
+		data: categories,
+		name: "",
+		axisLine: { lineStyle: { color: c.gridLine } },
+		axisLabel: {
+			color: c.muted,
+			fontFamily: FONT
+		},
+		splitLine: { lineStyle: { color: c.gridLine } },
+		axisPointer: { show: false },
+		nameTextStyle: { color: c.muted },
+		id: name
+	});
+	const series = {
+		type: panel.type,
+		data: panel.data,
+		shading: "lambert",
+		emphasis: { itemStyle: { color: c.text } }
+	};
+	if (panel.type === "bar3D") series.bevelSize = .2;
+	if (panel.type === "scatter3D") series.symbolSize = 9;
+	if (panel.type === "line3D") series.lineStyle = {
+		width: 3,
+		color: c.accent
+	};
+	if (panel.type === "surface") series.wireframe = {
+		show: true,
+		lineStyle: { color: withAlpha(c.accent, .35) }
+	};
+	return {
+		backgroundColor: "transparent",
+		textStyle: { fontFamily: FONT },
+		tooltip: {},
+		visualMap: {
+			show: false,
+			min,
+			max,
+			dimension: 2,
+			inRange: { color: [
+				withAlpha(c.accent, .55),
+				c.accent,
+				c.series[1]
+			] }
+		},
+		xAxis3D: axis(panel.xAxis, "x"),
+		yAxis3D: axis(panel.yAxis, "y"),
+		zAxis3D: {
+			type: "value",
+			name: "",
+			axisLine: { lineStyle: { color: c.gridLine } },
+			axisLabel: {
+				color: c.muted,
+				fontFamily: FONT
+			},
+			splitLine: { lineStyle: { color: c.gridLine } }
+		},
+		grid3D: {
+			boxWidth: 100,
+			boxDepth: 80,
+			boxHeight: 60,
+			axisPointer: { show: false },
+			light: {
+				main: {
+					intensity: 1.3,
+					shadow: false,
+					alpha: 40,
+					beta: 30
+				},
+				ambient: { intensity: .5 }
+			},
+			viewControl: {
+				autoRotate: animate && panel.rotate !== false,
+				autoRotateSpeed: 8,
+				distance: 190,
+				alpha: 24,
+				beta: 35,
+				projection: "perspective"
+			},
+			environment: "none"
+		},
+		series: [series]
+	};
+}
+/**
+* A globe without a satellite photograph.
+*
+* ECharts' globe wants a texture, and the usual one is an image fetched from somewhere — which a
+* page must not do on a model's say-so. So the texture is painted here: a deep sphere with a
+* graticule, which is what a data wall's globe looks like anyway. Arcs get a moving trail.
+*/
+function globeTexture(c, theme) {
+	if (typeof document === "undefined") return void 0;
+	const canvas = document.createElement("canvas");
+	canvas.width = 1024;
+	canvas.height = 512;
+	const ctx = canvas.getContext("2d");
+	if (!ctx) return void 0;
+	ctx.fillStyle = theme === "dark" ? "#0b1a33" : "#dbe7f5";
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+	ctx.strokeStyle = withAlpha(c.accent, theme === "dark" ? .28 : .35);
+	ctx.lineWidth = 1.2;
+	for (let lng = 0; lng < 360; lng += 15) {
+		const x = lng / 360 * canvas.width;
+		ctx.beginPath();
+		ctx.moveTo(x, 0);
+		ctx.lineTo(x, canvas.height);
+		ctx.stroke();
+	}
+	for (let lat = 15; lat < 180; lat += 15) {
+		const y = lat / 180 * canvas.height;
+		ctx.beginPath();
+		ctx.moveTo(0, y);
+		ctx.lineTo(canvas.width, y);
+		ctx.stroke();
+	}
+	ctx.strokeStyle = withAlpha(c.accent, .6);
+	ctx.lineWidth = 2;
+	ctx.beginPath();
+	ctx.moveTo(0, canvas.height / 2);
+	ctx.lineTo(canvas.width, canvas.height / 2);
+	ctx.stroke();
+	return canvas.toDataURL("image/png");
+}
+function globeOption(panel, c, animate, texture) {
+	const arcs = (panel.arcs ?? []).map((arc) => ({
+		coords: [arc.from, arc.to],
+		name: arc.label
+	}));
+	const points = (panel.points ?? []).map((point) => ({
+		name: point.label,
+		value: [
+			point.coord[0],
+			point.coord[1],
+			0,
+			point.value ?? 1
+		]
+	}));
+	const maxValue = Math.max(1, ...points.map((p) => p.value[3]));
+	return {
+		backgroundColor: "transparent",
+		globe: {
+			baseTexture: texture,
+			shading: "color",
+			environment: "none",
+			globeRadius: 78,
+			atmosphere: {
+				show: true,
+				color: c.accent,
+				glowPower: 5,
+				innerGlowPower: 2,
+				offset: 4
+			},
+			light: {
+				ambient: { intensity: 1 },
+				main: { intensity: .2 }
+			},
+			viewControl: {
+				autoRotate: animate && panel.rotate !== false,
+				autoRotateSpeed: 3,
+				distance: 150,
+				targetCoord: arcs[0]?.coords[0] ?? points[0]?.value.slice(0, 2)
+			}
+		},
+		series: [{
+			type: "lines3D",
+			coordinateSystem: "globe",
+			blendMode: "lighter",
+			lineStyle: {
+				width: 2.5,
+				color: c.series[1],
+				opacity: .9
+			},
+			effect: {
+				show: animate,
+				period: 3,
+				trailWidth: 4,
+				trailLength: .3,
+				trailOpacity: 1,
+				trailColor: "#ffffff"
+			},
+			data: arcs
+		}, {
+			type: "scatter3D",
+			coordinateSystem: "globe",
+			symbolSize: (value) => 6 + 10 * Math.sqrt((value[3] ?? 1) / maxValue),
+			itemStyle: {
+				color: c.series[1],
+				opacity: .9
+			},
+			label: {
+				show: true,
+				formatter: "{b}",
+				color: c.text,
+				fontSize: 11,
+				fontFamily: FONT,
+				backgroundColor: "transparent",
+				distance: 6
+			},
+			data: points
+		}]
+	};
+}
+
+//#endregion
+export { chart3dOption, chartOption, formatNumber, gaugeColour, gaugeOption, globeOption, globeTexture, palette, withAlpha };

package/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@ai-gui/plugin-bigscreen",
+  "version": "0.34.0",
+  "description": "Animated data walls for AIGUI — counting KPIs, sweeping gauges, growing ranks, self-drawing charts, turning 3D bars and globes, on a grid the model lays out.",
+  "keywords": [
+    "llm",
+    "ai",
+    "dashboard",
+    "big-screen",
+    "data-wall",
+    "echarts",
+    "echarts-gl",
+    "3d",
+    "animation",
+    "plugin",
+    "aigui"
+  ],
+  "license": "MIT",
+  "author": "Liang Li <ll_faw@hotmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liliang-cn/aigui.git",
+    "directory": "packages/plugin-bigscreen"
+  },
+  "homepage": "https://github.com/liliang-cn/aigui#readme",
+  "bugs": "https://github.com/liliang-cn/aigui/issues",
+  "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "echarts": "^5.5.1",
+    "@ai-gui/core": "0.34.0"
+  },
+  "peerDependencies": {
+    "echarts-gl": "^2.0.9"
+  },
+  "peerDependenciesMeta": {
+    "echarts-gl": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "echarts-gl": "^2.0.9"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "pnpm --dir ../.. exec vitest run --project plugin-bigscreen",
+    "typecheck": "tsc --noEmit"
+  }
+}