@blukavantui/charts-community 0.0.0-stage → 1.2.0

package/dist/web-motion-sparkline.d.ts

@@ -0,0 +1,4 @@
+/** Local opt-in adapter. The compact SVG runtime and its ordinary defaults stay intact. */
+import { type SparklineOptions, type SparklineEvents } from './sparkline.ts';
+import type { ChartPresentation } from './catalogue-runtime.ts';
+export declare function createMotionSparkline(host: HTMLElement, options: SparklineOptions, events: SparklineEvents, policy: ChartPresentation): import("./sparkline.ts").SparklineInstance;

package/edition.json

@@ -0,0 +1,48 @@
+{
+  "edition": "community",
+  "version": "1.2.0",
+  "platform": "web",
+  "charts": [
+    {
+      "slug": "sparkline",
+      "edition": "community",
+      "factory": "createSparkline"
+    },
+    {
+      "slug": "line",
+      "edition": "community",
+      "factory": "createLineChart"
+    },
+    {
+      "slug": "bar",
+      "edition": "community",
+      "factory": "createBarChart"
+    },
+    {
+      "slug": "pie",
+      "edition": "community",
+      "factory": "createPieChart"
+    },
+    {
+      "slug": "doughnut",
+      "edition": "community",
+      "factory": "createDoughnutChart"
+    },
+    {
+      "slug": "scatter",
+      "edition": "community",
+      "factory": "createScatterChart"
+    },
+    {
+      "slug": "radar",
+      "edition": "community",
+      "factory": "createRadarChart"
+    },
+    {
+      "slug": "heatmap",
+      "edition": "community",
+      "factory": "createHeatmap"
+    }
+  ],
+  "licensing": "BluKavantUI Community license."
+}

package/package.json

@@ -1,6 +1,105 @@
 {
   "name": "@blukavantui/charts-community",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.2.0",
+  "description": "BluKavantUI Charts Community: 8 modular web charts. A separate chart bundle.",
+  "type": "module",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./motion": {
+      "types": "./dist/motion.d.ts",
+      "import": "./dist/motion.js"
+    },
+    "./motion/sparkline": {
+      "types": "./dist/motion/sparkline.d.ts",
+      "import": "./dist/motion/sparkline.js"
+    },
+    "./motion/line": {
+      "types": "./dist/motion/line.d.ts",
+      "import": "./dist/motion/line.js"
+    },
+    "./motion/bar": {
+      "types": "./dist/motion/bar.d.ts",
+      "import": "./dist/motion/bar.js"
+    },
+    "./motion/pie": {
+      "types": "./dist/motion/pie.d.ts",
+      "import": "./dist/motion/pie.js"
+    },
+    "./motion/doughnut": {
+      "types": "./dist/motion/doughnut.d.ts",
+      "import": "./dist/motion/doughnut.js"
+    },
+    "./motion/scatter": {
+      "types": "./dist/motion/scatter.d.ts",
+      "import": "./dist/motion/scatter.js"
+    },
+    "./motion/radar": {
+      "types": "./dist/motion/radar.d.ts",
+      "import": "./dist/motion/radar.js"
+    },
+    "./motion/heatmap": {
+      "types": "./dist/motion/heatmap.d.ts",
+      "import": "./dist/motion/heatmap.js"
+    },
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./sparkline": {
+      "types": "./dist/sparkline.d.ts",
+      "import": "./dist/sparkline.js"
+    },
+    "./line": {
+      "types": "./dist/line.d.ts",
+      "import": "./dist/line.js"
+    },
+    "./bar": {
+      "types": "./dist/bar.d.ts",
+      "import": "./dist/bar.js"
+    },
+    "./pie": {
+      "types": "./dist/pie.d.ts",
+      "import": "./dist/pie.js"
+    },
+    "./doughnut": {
+      "types": "./dist/doughnut.d.ts",
+      "import": "./dist/doughnut.js"
+    },
+    "./scatter": {
+      "types": "./dist/scatter.d.ts",
+      "import": "./dist/scatter.js"
+    },
+    "./radar": {
+      "types": "./dist/radar.d.ts",
+      "import": "./dist/radar.js"
+    },
+    "./heatmap": {
+      "types": "./dist/heatmap.d.ts",
+      "import": "./dist/heatmap.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./theme.css": "./dist/theme.css",
+    "./browser/charts-community.js": "./dist/browser/charts-community.js",
+    "./sparkline.css": "./dist/sparkline.css"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE.txt",
+    "THIRD_PARTY_NOTICES.txt",
+    "edition.json"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "dependencies": {
+    "@blukavantui/community": "^1.2.0",
+    "echarts": "6.1.0"
+  }
+}

package/src/accessibility.ts

@@ -0,0 +1,81 @@
+import { contrastText, interpolateColor } from './colors.ts';
+
+// Rendering policy only: input colors and stable data keys are never rewritten.
+// Use a margin above 3:1 so channel rounding cannot turn a pass into a failure.
+export const MARK_CONTRAST = 3.2;
+function rgba(value: string): number[] {
+  if (value.startsWith('#')) {
+    let h = value.slice(1);
+    if (h.length <= 4) h = h.split('').map(c => c + c).join('');
+    return [0, 2, 4].map(i => parseInt(h.slice(i, i + 2), 16)).concat(h.length === 8 ? parseInt(h.slice(6), 16) / 255 : 1);
+  }
+  const channels = value.match(/[\d.]+/g)?.map(Number);
+  return channels && channels.length >= 3 ? [...channels.slice(0, 3), channels[3] ?? 1] : [24, 34, 48, 1];
+}
+function rgb(channels: number[]) { return `rgb(${channels.slice(0, 3).map(v => Math.round(v)).join(',')})`; }
+export function opaqueColor(value: string, surface: string): string {
+  const c = rgba(value), bg = rgba(surface);
+  return rgb(c.slice(0, 3).map((v, i) => v * c[3] + bg[i] * (1 - c[3])));
+}
+function luminance(value: string): number {
+  const c = rgba(value).slice(0, 3).map(v => { const n = v / 255; return n <= .04045 ? n / 12.92 : ((n + .055) / 1.055) ** 2.4; });
+  return c[0] * .2126 + c[1] * .7152 + c[2] * .0722;
+}
+export function contrastRatio(a: string, b: string): number {
+  const x = luminance(a), y = luminance(b);
+  return (Math.max(x, y) + .05) / (Math.min(x, y) + .05);
+}
+export function markColor(value: string, surface: string, minimum = MARK_CONTRAST): string {
+  const original = opaqueColor(value, surface);
+  if (contrastRatio(original, surface) >= minimum) return original;
+  const end = contrastRatio('#000', surface) >= contrastRatio('#fff', surface) ? '#000' : '#fff';
+  const target = Math.min(minimum, contrastRatio(end, surface));
+  let lo = 0, hi = 1;
+  for (let i = 0; i < 20; i++) {
+    const mid = (lo + hi) / 2;
+    if (contrastRatio(interpolateColor([original, end], mid), surface) >= target) hi = mid;
+    else lo = mid;
+  }
+  return interpolateColor([original, end], hi);
+}
+/** A single-hue luminance ramp also works when hues cannot be distinguished. */
+export function sequentialScale(value: string, surface: string): string[] {
+  const end = markColor(value, surface, 9);
+  return [markColor(interpolateColor([surface, end], .12), surface), end];
+}
+export const seriesSymbol = (index: number) => ['circle', 'diamond', 'triangle', 'rect', 'roundRect', 'pin', 'arrow', 'emptyCircle', 'emptyDiamond', 'emptyTriangle', 'emptyRect', 'emptyRoundRect'][index % 12];
+export const seriesDash = (index: number) => (['solid', 'dashed', 'dotted'] as const)[(index + Math.floor(index / 12)) % 3];
+export function seriesDecal(index: number, fill: string) {
+  const variants = [
+    { symbol: 'rect', symbolSize: 0, dashArrayX: [1, 0], dashArrayY: [1, 8], rotation: 0 },
+    { symbol: 'rect', symbolSize: 1, dashArrayX: [1, 0], dashArrayY: [1, 8], rotation: Math.PI / 4 },
+    { symbol: 'circle', symbolSize: 1, dashArrayX: [2, 7], dashArrayY: [2, 7], rotation: 0 },
+    { symbol: 'rect', symbolSize: 1, dashArrayX: [1, 0], dashArrayY: [1, 8], rotation: -Math.PI / 4 },
+    { symbol: 'rect', symbolSize: 1, dashArrayX: [1, 0], dashArrayY: [1, 6], rotation: 0 },
+    { symbol: 'rect', symbolSize: 1, dashArrayX: [3, 5], dashArrayY: [3, 5], rotation: Math.PI / 4 },
+    { symbol: 'triangle', symbolSize: 1, dashArrayX: [4, 6], dashArrayY: [4, 6], rotation: 0 },
+    { symbol: 'diamond', symbolSize: 1, dashArrayX: [4, 6], dashArrayY: [4, 6], rotation: 0 },
+    { symbol: 'rect', symbolSize: 1, dashArrayX: [1, 0], dashArrayY: [1, 3, 1, 7], rotation: Math.PI / 4 },
+    { symbol: 'circle', symbolSize: 1, dashArrayX: [2, 3], dashArrayY: [2, 3], rotation: 0 },
+    { symbol: 'rect', symbolSize: 1, dashArrayX: [1, 0], dashArrayY: [3, 4], rotation: -Math.PI / 4 },
+    { symbol: 'rect', symbolSize: 1, dashArrayX: [4, 4], dashArrayY: [1, 5], rotation: 0 },
+  ];
+  return { ...variants[index % variants.length], color: contrastText(fill), backgroundColor: 'none' };
+}
+/** Selection and pointer emphasis share a quiet, solid contrast cue. */
+export function highlightStyle(fill: string) {
+  return { color: fill, borderColor: contrastText(fill), borderWidth: 2, borderType: 'solid' as const };
+}
+export function markStyle(fill: string, surface: string, selected = false, pattern?: number) {
+  return { color: fill, opacity: 1, borderColor: surface, borderWidth: 1.5, borderType: 'solid' as const, ...(selected ? highlightStyle(fill) : {}),
+    ...(pattern === undefined ? {} : { decal: seriesDecal(pattern, fill) }) };
+}
+
+/** Keep callouts inside the plot and out of its key; the HTML table retains full text. */
+export function boundedLabels(width: number, height: number, top = 8) {
+  return ({ labelRect: r }: { labelRect: { x: number; y: number; width: number; height: number } }) => ({
+    hideOverlap: true,
+    dx: Math.max(0, 8 - r.x) + Math.min(0, width - 8 - r.x - r.width),
+    dy: Math.max(0, top - r.y) + Math.min(0, height - 8 - r.y - r.height),
+  });
+}

package/src/assets.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package/src/async.ts

@@ -0,0 +1,12 @@
+/** Settle even if the underlying browser API ignores cancellation. */
+export async function boundedAwait<T>(work:Promise<T>,signal:AbortSignal|undefined,milliseconds:number,timeoutMessage:string):Promise<T> {
+  if(signal?.aborted){void work.catch(()=>{});signal.throwIfAborted();}
+  let timer:ReturnType<typeof setTimeout>|undefined,abort:()=>void=()=>{};
+  try {
+    return await Promise.race([work,new Promise<never>((_,reject)=>{
+      abort=()=>reject(signal?.reason??new DOMException('Operation aborted.','AbortError'));
+      signal?.addEventListener('abort',abort,{once:true});
+      timer=setTimeout(()=>reject(new Error(timeoutMessage)),milliseconds);
+    })]);
+  } finally {clearTimeout(timer);signal?.removeEventListener('abort',abort);}
+}

package/src/bar.ts

@@ -0,0 +1,13 @@
+import { buildOption } from './builders/bar.ts';
+import { use } from 'echarts/core';
+import { BarChart } from 'echarts/charts';
+import { GridComponent } from 'echarts/components';
+import { createCatalogueChart } from './catalogue-runtime.ts';
+import type { OptionsByKind, ChartPoint } from './catalogue-types.ts';
+import type { ChartEvents } from './types.ts';
+export type { OptionsByKind, ChartPoint } from './catalogue-types.ts';
+export type BarChartOptions = OptionsByKind['bar'];
+export function createBarChart(host: HTMLElement, options: BarChartOptions, events: ChartEvents<ChartPoint> = {}) {
+  use([BarChart, GridComponent]);
+  return createCatalogueChart(host, 'bar', options, events, buildOption);
+}

package/src/builders/bar.ts

@@ -0,0 +1,39 @@
+import { format, type EChartsCoreOption } from 'echarts/core';
+import type { CatalogueKind, CatalogueOptions, CartesianOptions, RadarOptions, CircularOptions, ScatterOptions, TreemapOptions, SankeyOptions, FunnelOptions, GeoMapOptions, CalendarHeatmapOptions, ChartPoint, TreeNode } from '../catalogue-types.ts';
+import { cataloguePoints, treeValue } from '../catalogue-model.ts';
+import { resolveChartColor, contrastText, interpolateColor } from '../colors.ts';
+import { formatValue } from '../model.ts';
+import { escapeText } from '../validation.ts';
+import { markColor, markStyle, highlightStyle, sequentialScale, seriesSymbol, seriesDash, seriesDecal, boundedLabels } from '../accessibility.ts';
+import type { themeTokens } from '../options.ts';
+type Tokens = ReturnType<typeof themeTokens>;
+export function buildOption(options: CatalogueOptions, t: Tokens, mapName?: string, reducedMotion = false, width = 640): EChartsCoreOption {
+ const kind = 'bar' as CatalogueKind;
+    const o = options as any, points = cataloguePoints(kind, options);
+    const decal = (index: number, fill: string) => o.ShowPatterns ? seriesDecal(index, fill) : undefined;
+    const colors = t.palette;
+    const color = (c: any, i: number) => markColor(t.forcedColors ? t.text : resolveChartColor(c, colors[i % colors.length], t.dark, t.read), t.surface, kind === 'line' || kind === 'radar' || kind === 'polar' && o.PolarType === 'Line' ? 4.5 : 3.2);
+    const style = (key: string, c: any, i: number) => markStyle(color(c, i), t.surface, o.SelectedKey === key);
+    const point = (key: string, seriesKey?: string) => points.find(p => p.Key === key && (!seriesKey || p.SeriesKey === seriesKey));
+    const namesForLegend: string[] = ['line','radar','bar','polar'].includes(kind) ? o.Series.map((s: any) => s.Label) : kind === 'scatter' ? [...new Set<string>(o.Points.map((p: any) => p.Group || 'Observations'))] : ['pie','doughnut','nightingale','funnel'].includes(kind) ? [...new Set<string>(o.Items.map((i: any) => i.Label))] : [];
+    const legend = { data: namesForLegend, show: o.ShowLegend, type: 'scroll', top: 6, left: 10, right: 10, itemWidth: 24, itemHeight: 12, selectedMode: false, pageTextStyle: { color: t.muted }, pageIconColor: t.text, textStyle: { color: t.muted, fontSize: 11 } };
+    const label = { show: o.ShowLabels, color: contrastText(t.surface), fontSize: 11, backgroundColor: t.surface, padding: [2, 3], borderRadius: 2 };
+    const tooltip = { show: o.ShowTooltip, confine: true, enterable: true, backgroundColor: t.surface, borderColor: t.border, textStyle: { color: t.text, fontSize: 12 }, formatter: (p: any) => {
+            const d = p.data?.point as ChartPoint | undefined;
+            if (!d)
+                return `${escapeText(p.name || '')}${p.value == null || Number.isNaN(p.value) ? ' · No data' : ''}`;
+            const extra = d.Date ? `<br/>${escapeText(d.Date)}<br/><strong>${escapeText(formatValue(d.Value, o))}</strong>` : d.X !== undefined ? `<br/>${escapeText(o.XLabel || 'X')}: ${d.X}<br/>${escapeText(o.YLabel || 'Y')}: ${d.Y}${d.Size === undefined ? '' : `<br/>Size: ${d.Size}`}` : `<br/><strong>${escapeText(formatValue(d.Value, o))}</strong>`;
+            return `${escapeText(d.SeriesName ? `${d.SeriesName} · ${d.Label}` : d.Label)}${extra}${p.data?.conversion ? `<br/>${escapeText(p.data.conversion)}` : ''}`;
+        } };
+    const base = { backgroundColor: t.surface, color: colors.map((c, i) => color(c, i)), animation: !!o.EnableAnimation && !reducedMotion, animationDuration: 300, animationDurationUpdate: 150, textStyle: { fontFamily: 'Inter,system-ui,sans-serif', color: t.text }, aria: { enabled: true, description: `${o.Title}. ${o.Description || ''} Exact values and keyboard selection are in the data table.` }, tooltip };
+    const axis = { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: t.muted, fontSize: 10, hideOverlap: true }, splitLine: { lineStyle: { color: t.border, type: 'dashed' } } };
+    
+        const c = options as CartesianOptions;
+        const percent = c.Stacking === 'Percent';
+        const cat = { ...axis, type: 'category', data: c.Categories.map(x => x.Label), axisLabel: { ...axis.axisLabel, width: Math.min(kind === 'polar' ? 100 : 140, width * .2), overflow: 'truncate' }, splitLine: { show: false } };
+        const numeric = { ...axis, type: 'value', max: percent ? 1 : undefined, axisLabel: { ...axis.axisLabel, formatter: (v: number) => percent ? `${Math.round(v * 100)}%` : formatValue(v, o, true) } };
+        const insideBars = (kind === 'bar' || (kind === 'polar' && c.PolarType !== 'Line')) && (kind === 'polar' || (!!c.Stacking && c.Stacking !== 'None'));
+        const series = c.Series.map((s, si) => ({ id: s.Key, name: s.Label, type: kind === 'line' || (kind === 'polar' && c.PolarType === 'Line') ? 'line' : 'bar', coordinateSystem: kind === 'polar' ? 'polar' : 'cartesian2d', stack: c.Stacking && c.Stacking !== 'None' ? 'total' : undefined, smooth: c.LineStyle === 'Smooth', step: c.LineStyle === 'Step' ? 'middle' : false, connectNulls: false, areaStyle: c.ShowArea ? { opacity: .10 } : undefined, barMaxWidth: 38, symbol: seriesSymbol(si), symbolSize: 8, itemStyle: { ...markStyle(color(s.Color, si), t.surface), decal: decal(si, color(s.Color, si)) }, lineStyle: { width: 2.5, color: color(s.Color, si), type: seriesDash(si) }, label: { ...label, color: insideBars ? contrastText(color(s.Color, si)) : contrastText(t.surface), backgroundColor: insideBars ? color(s.Color, si) : t.surface, position: insideBars ? 'inside' : kind === 'bar' && c.Orientation === 'Horizontal' ? 'right' : 'top', formatter: (p: any) => percent ? `${Math.round(Number(p.value) * 100)}%` : formatValue(p.data.point.Value, o, true) }, labelLayout: { hideOverlap: true }, emphasis: { focus: 'none', scale: false }, blur: { itemStyle: { opacity: 1 }, lineStyle: { opacity: 1 }, label: { opacity: 1 } }, data: s.Values.map((v, i) => ({ value: v === null ? null : percent ? v / (c.Series.reduce((sum, s) => sum + (s.Values[i] || 0), 0) || 1) : v, point: point(c.Categories[i].Key, s.Key), itemStyle: { ...style(c.Categories[i].Key, s.Color, si), decal: decal(si, color(s.Color, si)) }, emphasis: { itemStyle: highlightStyle(color(s.Color, si)) } })) }));
+        return kind === 'polar' ? { ...base, legend, polar: { radius: ['12%', '72%'], center: ['50%', '55%'] }, angleAxis: { ...cat, startAngle: 90 }, radiusAxis: numeric, series } : { ...base, legend, grid: { left: 14, right: 22, top: o.ShowLegend ? 48 : 20, bottom: 16, containLabel: true }, xAxis: c.Orientation === 'Horizontal' ? numeric : cat, yAxis: c.Orientation === 'Horizontal' ? { ...cat, inverse: true } : numeric, series };
+    
+}

package/src/builders/doughnut.ts

@@ -0,0 +1,66 @@
+import { format, type EChartsCoreOption } from 'echarts/core';
+import type { CatalogueKind, CatalogueOptions, CartesianOptions, RadarOptions, CircularOptions, ScatterOptions, TreemapOptions, SankeyOptions, FunnelOptions, GeoMapOptions, CalendarHeatmapOptions, ChartPoint, TreeNode } from '../catalogue-types.ts';
+import { cataloguePoints, treeValue } from '../catalogue-model.ts';
+import { resolveChartColor, contrastText, interpolateColor } from '../colors.ts';
+import { formatValue } from '../model.ts';
+import { escapeText } from '../validation.ts';
+import { markColor, markStyle, highlightStyle, sequentialScale, seriesSymbol, seriesDash, seriesDecal, boundedLabels } from '../accessibility.ts';
+import type { themeTokens } from '../options.ts';
+type Tokens = ReturnType<typeof themeTokens>;
+export function buildOption(options: CatalogueOptions, t: Tokens, mapName?: string, reducedMotion = false, width = 640): EChartsCoreOption {
+ const kind = 'doughnut' as CatalogueKind;
+    const o = options as any, points = cataloguePoints(kind, options);
+    const decal = (index: number, fill: string) => o.ShowPatterns ? seriesDecal(index, fill) : undefined;
+    const colors = t.palette;
+    const color = (c: any, i: number) => markColor(t.forcedColors ? t.text : resolveChartColor(c, colors[i % colors.length], t.dark, t.read), t.surface, kind === 'line' || kind === 'radar' || kind === 'polar' && o.PolarType === 'Line' ? 4.5 : 3.2);
+    const style = (key: string, c: any, i: number) => markStyle(color(c, i), t.surface, o.SelectedKey === key);
+    const point = (key: string, seriesKey?: string) => points.find(p => p.Key === key && (!seriesKey || p.SeriesKey === seriesKey));
+    const namesForLegend: string[] = ['line','radar','bar','polar'].includes(kind) ? o.Series.map((s: any) => s.Label) : kind === 'scatter' ? [...new Set<string>(o.Points.map((p: any) => p.Group || 'Observations'))] : ['pie','doughnut','nightingale','funnel'].includes(kind) ? [...new Set<string>(o.Items.map((i: any) => i.Label))] : [];
+    const legend = { data: namesForLegend, show: o.ShowLegend, type: 'scroll', top: 6, left: 10, right: 10, itemWidth: 24, itemHeight: 12, selectedMode: false, pageTextStyle: { color: t.muted }, pageIconColor: t.text, textStyle: { color: t.muted, fontSize: 11 } };
+    const label = { show: o.ShowLabels, color: contrastText(t.surface), fontSize: 11, backgroundColor: t.surface, padding: [2, 3], borderRadius: 2 };
+    const tooltip = { show: o.ShowTooltip, confine: true, enterable: true, backgroundColor: t.surface, borderColor: t.border, textStyle: { color: t.text, fontSize: 12 }, formatter: (p: any) => {
+            const d = p.data?.point as ChartPoint | undefined;
+            if (!d)
+                return `${escapeText(p.name || '')}${p.value == null || Number.isNaN(p.value) ? ' · No data' : ''}`;
+            const extra = d.Date ? `<br/>${escapeText(d.Date)}<br/><strong>${escapeText(formatValue(d.Value, o))}</strong>` : d.X !== undefined ? `<br/>${escapeText(o.XLabel || 'X')}: ${d.X}<br/>${escapeText(o.YLabel || 'Y')}: ${d.Y}${d.Size === undefined ? '' : `<br/>Size: ${d.Size}`}` : `<br/><strong>${escapeText(formatValue(d.Value, o))}</strong>`;
+            return `${escapeText(d.SeriesName ? `${d.SeriesName} · ${d.Label}` : d.Label)}${extra}${p.data?.conversion ? `<br/>${escapeText(p.data.conversion)}` : ''}`;
+        } };
+    const base = { backgroundColor: t.surface, color: colors.map((c, i) => color(c, i)), animation: !!o.EnableAnimation && !reducedMotion, animationDuration: 300, animationDurationUpdate: 150, textStyle: { fontFamily: 'Inter,system-ui,sans-serif', color: t.text }, aria: { enabled: true, description: `${o.Title}. ${o.Description || ''} Exact values and keyboard selection are in the data table.` }, tooltip };
+    const axis = { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: t.muted, fontSize: 10, hideOverlap: true }, splitLine: { lineStyle: { color: t.border, type: 'dashed' } } };
+    
+        const c = options as CircularOptions;
+        const rings = c.Nested ? c.Rings! : [{ Key: '', Label: '' }];
+        const half = c.Shape === 'Half', nested = !!c.Nested && rings.length > 1;
+        const inner = kind === 'pie' ? 0 : c.InnerRadius ?? (kind === 'doughnut' ? 48 : 18);
+        const outside = c.LabelPosition !== 'Inside';
+        const outer = outside ? 66 : 76;
+        const names = [...new Set(c.Items.map(item => item.Label))];
+        const series = rings.map((ring, ri) => {
+            // Match ECharts' nested-pie composition: a solid core, a visible gap, then the detail ring.
+            const radius = nested ? ri === 0 ? [0, 32] : [44 + (outer - 44) * (ri - 1) / (rings.length - 1), 44 + (outer - 44) * ri / (rings.length - 1) - (ri === rings.length - 1 ? 0 : 2)] : [inner, Math.max(outer, inner + 5)];
+            const inside = !outside || (nested && ri < rings.length - 1);
+            return {
+                type: 'pie', id: ring.Key || kind, name: ring.Label, top: o.ShowLegend ? 28 : 0, bottom: 2,
+                center: ['50%', half ? '72%' : '55%'], radius: radius.map(r => `${r}%`),
+                startAngle: half ? 180 : 90, endAngle: half ? 360 : 'auto',
+                roseType: kind === 'nightingale' ? (c.RoseMode === 'Radius' ? 'radius' : 'area') : false,
+                avoidLabelOverlap: true, stillShowZeroSum: false,
+                label: { ...label, position: inside ? 'inside' : 'outside', backgroundColor: inside ? undefined : t.surface,
+                    alignTo: 'none', bleedMargin: 6, distanceToLabelLine: 4,
+                    formatter: '{b}\n{d}%', lineHeight: 15 },
+                labelLine: { show: !!o.ShowLabels && !inside, length: 12, length2: 8, smooth: .15 },
+                labelLayout: { hideOverlap: true }, emphasis: { scale: true },
+                data: c.Items.filter(i => !c.Nested || i.RingKey === ring.Key).map(i => {
+                    const index = names.indexOf(i.Label), fill = color(i.Color, index);
+                    return { id: i.Key, name: i.Label, value: i.Value, point: point(i.Key),
+                        label: { color: contrastText(inside ? fill : t.surface), backgroundColor: inside ? fill : t.surface },
+                        labelLine: { lineStyle: { color: fill, width: 1.25 } },
+                        itemStyle: { ...style(i.Key, i.Color, index), decal: decal(index, fill), borderRadius: 3 }, emphasis: { itemStyle: highlightStyle(fill) } };
+                })
+            };
+        });
+        const selected = points.find(p => p.Key === o.SelectedKey);
+        const total = selected?.Value ?? c.Items.reduce((n, i) => n + (i.Value || 0), 0);
+        return { ...base, legend, series, media: outside ? [{ query: { maxWidth: 420 }, option: { series: series.map(s => ({ id: s.id, radius: s.radius.map(r => `${parseFloat(r) * .84}%`) })) } }] : [], graphic: kind === 'doughnut' && !nested && inner >= 35 ? [{ type: 'text', left: 'center', top: half ? '63%' : '48%', silent: true, style: { text: `${formatValue(total, o, true)}\n${selected?.Label || c.CenterLabel || 'Total'}`, textAlign: 'center', fill: t.text, font: '600 16px Inter,system-ui', lineHeight: 24, width: Math.max(24, Math.min(width, o.Height || 320) * inner / 100 - 12), overflow: 'truncate' } }] : [] };
+    
+}

package/src/builders/heatmap.ts

@@ -0,0 +1,60 @@
+import type { EChartsCoreOption } from 'echarts/core';
+import type { MixedChartOptions, HeatmapOptions, ChartOptions } from '../types.ts';
+import { formatValue, heatmapRange, heatmapPoint } from '../model.ts';
+import { automaticPalette, componentPalette, isComponentColor, resolveChartColor, contrastText, interpolateColor } from '../colors.ts';
+import { markColor, markStyle, highlightStyle, sequentialScale, seriesSymbol, seriesDash, seriesDecal } from '../accessibility.ts';
+import { escapeText } from '../validation.ts';
+
+export interface ChartTheme { surface: string; text: string; muted: string; border: string; dark: boolean; forcedColors?: boolean; read: (name: string) => string; palette: string[]; }
+export function themeTokens(host: HTMLElement): ChartTheme {
+  const style = getComputedStyle(host);
+  const read = (name: string, fallback: string) => style.getPropertyValue(name).trim() || fallback;
+  const dark = document.documentElement.dataset.bluuiTheme === 'dark';
+  const forcedColors = matchMedia('(forced-colors: active)').matches;
+  if (forcedColors) {
+    const probe = document.createElement('span');
+    probe.style.cssText = 'position:absolute;visibility:hidden;color:Canvas;background-color:CanvasText;forced-color-adjust:none';
+    host.append(probe);
+    const computed = getComputedStyle(probe), surface = computed.color, text = computed.backgroundColor;
+    probe.remove();
+    return { surface, text, muted: text, border: text, dark, forcedColors, read: () => '', palette: Array(8).fill(text) };
+  }
+  return { forcedColors, surface: read('--bluui-surface', '#fff'), text: read('--bluui-text', '#182230'), muted: read('--bluui-text-muted', '#667085'), border: read('--bluui-border', '#e3e5ed'), dark, read: (name: string) => style.getPropertyValue(name),
+    palette: automaticPalette(dark) };
+}
+type Tokens = ReturnType<typeof themeTokens>;
+function base(o: ChartOptions, t: Tokens): EChartsCoreOption {
+  return {
+    backgroundColor: t.surface,
+    animation: o.EnableAnimation && !matchMedia('(prefers-reduced-motion: reduce)').matches,
+    animationDuration: 350, animationDurationUpdate: 180,
+    textStyle: { fontFamily: 'Inter, system-ui, sans-serif', color: t.text },
+    aria: { enabled: true, description: `${o.Title}. ${o.Description || ''} Exact values and keyboard selections are available in the chart data table.` },
+    tooltip: { show: o.ShowTooltip, confine: true, enterable: true, backgroundColor: t.surface, borderColor: t.border, textStyle: { color: t.text, fontSize: 12 }, extraCssText: 'border-radius:8px;box-shadow:0 8px 28px #0002;' },
+  };
+}
+function axis(t: Tokens) { return { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: t.muted, fontSize: 11 } }; }
+export function heatmapOption(o: HeatmapOptions, t: Tokens): EChartsCoreOption {
+  const { min, max } = heatmapRange(o);
+  const palette = componentPalette(isComponentColor(o.ColorScale) ? o.ColorScale : 'Purple', t.dark, t.read);
+  const scaleColor = t.forcedColors ? t.text : o.ColorScale === 'Automatic' ? t.palette[0] : o.ColorScale === 'Teal' ? '#126e5b' : palette.solid;
+  // Diverging keeps a neutral midpoint; signed values remain available in the table.
+  const colors = o.ColorScale === 'Diverging' && !t.forcedColors ? [markColor('#ba5943', t.surface, 9), markColor(t.surface, t.surface), markColor('#6850bf', t.surface, 9)] : sequentialScale(scaleColor, t.surface);
+  return {
+    ...base(o, t),
+    grid: { left: 12, right: 12, top: 16, bottom: o.ShowLegend ? 62 : 12, containLabel: true },
+    tooltip: { ...(base(o, t).tooltip as object), formatter: (params: unknown) => { const point = heatmapPoint(o, (params as { dataIndex: number }).dataIndex)!; return `${escapeText(point.YLabel)} · ${escapeText(point.XLabel)}<br/><strong>${escapeText(formatValue(point.Value, o))}</strong>`; } },
+    xAxis: { ...axis(t), type: 'category', data: o.XCategories.map(c => c.Label), axisLabel: { ...axis(t).axisLabel, hideOverlap: true, width: 120, overflow: 'truncate' } },
+    yAxis: { ...axis(t), type: 'category', inverse: true, data: o.YCategories.map(c => c.Label), axisLabel: { ...axis(t).axisLabel, width: 80, overflow: 'truncate' } },
+    visualMap: { show: o.ShowLegend, min, max, calculable: false, orient: 'horizontal', left: 'center', bottom: 6, itemWidth: 9, itemHeight: 130, text: ['Higher', 'Lower'], textGap: 9, textStyle: { color: t.muted, fontSize: 10 }, inRange: { color: colors } },
+    series: [{ type: 'heatmap',
+      data: o.Cells.map(c => ({ name: c.Key, value: [o.XCategories.findIndex(x => x.Key === c.XKey), o.YCategories.findIndex(y => y.Key === c.YKey), c.Value ?? '-'],
+        itemStyle: { ...markStyle(interpolateColor(colors, ((c.Value ?? min) - min) / (max - min)), t.surface, o.SelectedKey === c.Key), borderRadius: 4 },
+        label: { color: contrastText(interpolateColor(colors, ((c.Value ?? min) - min) / (max - min))) },
+        emphasis: { itemStyle: highlightStyle(interpolateColor(colors, ((c.Value ?? min) - min) / (max - min))) },
+      })),
+      label: { show: o.ShowLabels, fontSize: 10, formatter: (p: { dataIndex: number }) => formatValue(o.Cells[p.dataIndex].Value, o, true) },
+      emphasis: { itemStyle: { borderColor: t.text, borderWidth: 2, borderType: 'solid' } },
+    }],
+  };
+}

package/src/builders/line.ts

@@ -0,0 +1,39 @@
+import { format, type EChartsCoreOption } from 'echarts/core';
+import type { CatalogueKind, CatalogueOptions, CartesianOptions, RadarOptions, CircularOptions, ScatterOptions, TreemapOptions, SankeyOptions, FunnelOptions, GeoMapOptions, CalendarHeatmapOptions, ChartPoint, TreeNode } from '../catalogue-types.ts';
+import { cataloguePoints, treeValue } from '../catalogue-model.ts';
+import { resolveChartColor, contrastText, interpolateColor } from '../colors.ts';
+import { formatValue } from '../model.ts';
+import { escapeText } from '../validation.ts';
+import { markColor, markStyle, highlightStyle, sequentialScale, seriesSymbol, seriesDash, seriesDecal, boundedLabels } from '../accessibility.ts';
+import type { themeTokens } from '../options.ts';
+type Tokens = ReturnType<typeof themeTokens>;
+export function buildOption(options: CatalogueOptions, t: Tokens, mapName?: string, reducedMotion = false, width = 640): EChartsCoreOption {
+ const kind = 'line' as CatalogueKind;
+    const o = options as any, points = cataloguePoints(kind, options);
+    const decal = (index: number, fill: string) => o.ShowPatterns ? seriesDecal(index, fill) : undefined;
+    const colors = t.palette;
+    const color = (c: any, i: number) => markColor(t.forcedColors ? t.text : resolveChartColor(c, colors[i % colors.length], t.dark, t.read), t.surface, kind === 'line' || kind === 'radar' || kind === 'polar' && o.PolarType === 'Line' ? 4.5 : 3.2);
+    const style = (key: string, c: any, i: number) => markStyle(color(c, i), t.surface, o.SelectedKey === key);
+    const point = (key: string, seriesKey?: string) => points.find(p => p.Key === key && (!seriesKey || p.SeriesKey === seriesKey));
+    const namesForLegend: string[] = ['line','radar','bar','polar'].includes(kind) ? o.Series.map((s: any) => s.Label) : kind === 'scatter' ? [...new Set<string>(o.Points.map((p: any) => p.Group || 'Observations'))] : ['pie','doughnut','nightingale','funnel'].includes(kind) ? [...new Set<string>(o.Items.map((i: any) => i.Label))] : [];
+    const legend = { data: namesForLegend, show: o.ShowLegend, type: 'scroll', top: 6, left: 10, right: 10, itemWidth: 24, itemHeight: 12, selectedMode: false, pageTextStyle: { color: t.muted }, pageIconColor: t.text, textStyle: { color: t.muted, fontSize: 11 } };
+    const label = { show: o.ShowLabels, color: contrastText(t.surface), fontSize: 11, backgroundColor: t.surface, padding: [2, 3], borderRadius: 2 };
+    const tooltip = { show: o.ShowTooltip, confine: true, enterable: true, backgroundColor: t.surface, borderColor: t.border, textStyle: { color: t.text, fontSize: 12 }, formatter: (p: any) => {
+            const d = p.data?.point as ChartPoint | undefined;
+            if (!d)
+                return `${escapeText(p.name || '')}${p.value == null || Number.isNaN(p.value) ? ' · No data' : ''}`;
+            const extra = d.Date ? `<br/>${escapeText(d.Date)}<br/><strong>${escapeText(formatValue(d.Value, o))}</strong>` : d.X !== undefined ? `<br/>${escapeText(o.XLabel || 'X')}: ${d.X}<br/>${escapeText(o.YLabel || 'Y')}: ${d.Y}${d.Size === undefined ? '' : `<br/>Size: ${d.Size}`}` : `<br/><strong>${escapeText(formatValue(d.Value, o))}</strong>`;
+            return `${escapeText(d.SeriesName ? `${d.SeriesName} · ${d.Label}` : d.Label)}${extra}${p.data?.conversion ? `<br/>${escapeText(p.data.conversion)}` : ''}`;
+        } };
+    const base = { backgroundColor: t.surface, color: colors.map((c, i) => color(c, i)), animation: !!o.EnableAnimation && !reducedMotion, animationDuration: 300, animationDurationUpdate: 150, textStyle: { fontFamily: 'Inter,system-ui,sans-serif', color: t.text }, aria: { enabled: true, description: `${o.Title}. ${o.Description || ''} Exact values and keyboard selection are in the data table.` }, tooltip };
+    const axis = { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: t.muted, fontSize: 10, hideOverlap: true }, splitLine: { lineStyle: { color: t.border, type: 'dashed' } } };
+    
+        const c = options as CartesianOptions;
+        const percent = c.Stacking === 'Percent';
+        const cat = { ...axis, type: 'category', data: c.Categories.map(x => x.Label), axisLabel: { ...axis.axisLabel, width: Math.min(kind === 'polar' ? 100 : 140, width * .2), overflow: 'truncate' }, splitLine: { show: false } };
+        const numeric = { ...axis, type: 'value', max: percent ? 1 : undefined, axisLabel: { ...axis.axisLabel, formatter: (v: number) => percent ? `${Math.round(v * 100)}%` : formatValue(v, o, true) } };
+        const insideBars = (kind === 'bar' || (kind === 'polar' && c.PolarType !== 'Line')) && (kind === 'polar' || (!!c.Stacking && c.Stacking !== 'None'));
+        const series = c.Series.map((s, si) => ({ id: s.Key, name: s.Label, type: kind === 'line' || (kind === 'polar' && c.PolarType === 'Line') ? 'line' : 'bar', coordinateSystem: kind === 'polar' ? 'polar' : 'cartesian2d', stack: c.Stacking && c.Stacking !== 'None' ? 'total' : undefined, smooth: c.LineStyle === 'Smooth', step: c.LineStyle === 'Step' ? 'middle' : false, connectNulls: false, areaStyle: c.ShowArea ? { opacity: .10 } : undefined, barMaxWidth: 38, symbol: seriesSymbol(si), symbolSize: 8, itemStyle: { ...markStyle(color(s.Color, si), t.surface), decal: decal(si, color(s.Color, si)) }, lineStyle: { width: 2.5, color: color(s.Color, si), type: seriesDash(si) }, label: { ...label, color: insideBars ? contrastText(color(s.Color, si)) : contrastText(t.surface), backgroundColor: insideBars ? color(s.Color, si) : t.surface, position: insideBars ? 'inside' : kind === 'bar' && c.Orientation === 'Horizontal' ? 'right' : 'top', formatter: (p: any) => percent ? `${Math.round(Number(p.value) * 100)}%` : formatValue(p.data.point.Value, o, true) }, labelLayout: { hideOverlap: true }, emphasis: { focus: 'none', scale: false }, blur: { itemStyle: { opacity: 1 }, lineStyle: { opacity: 1 }, label: { opacity: 1 } }, data: s.Values.map((v, i) => ({ value: v === null ? null : percent ? v / (c.Series.reduce((sum, s) => sum + (s.Values[i] || 0), 0) || 1) : v, point: point(c.Categories[i].Key, s.Key), itemStyle: { ...style(c.Categories[i].Key, s.Color, si), decal: decal(si, color(s.Color, si)) }, emphasis: { itemStyle: highlightStyle(color(s.Color, si)) } })) }));
+        return kind === 'polar' ? { ...base, legend, polar: { radius: ['12%', '72%'], center: ['50%', '55%'] }, angleAxis: { ...cat, startAngle: 90 }, radiusAxis: numeric, series } : { ...base, legend, grid: { left: 14, right: 22, top: o.ShowLegend ? 48 : 20, bottom: 16, containLabel: true }, xAxis: c.Orientation === 'Horizontal' ? numeric : cat, yAxis: c.Orientation === 'Horizontal' ? { ...cat, inverse: true } : numeric, series };
+    
+}

package/src/builders/pie.ts

@@ -0,0 +1,66 @@
+import { format, type EChartsCoreOption } from 'echarts/core';
+import type { CatalogueKind, CatalogueOptions, CartesianOptions, RadarOptions, CircularOptions, ScatterOptions, TreemapOptions, SankeyOptions, FunnelOptions, GeoMapOptions, CalendarHeatmapOptions, ChartPoint, TreeNode } from '../catalogue-types.ts';
+import { cataloguePoints, treeValue } from '../catalogue-model.ts';
+import { resolveChartColor, contrastText, interpolateColor } from '../colors.ts';
+import { formatValue } from '../model.ts';
+import { escapeText } from '../validation.ts';
+import { markColor, markStyle, highlightStyle, sequentialScale, seriesSymbol, seriesDash, seriesDecal, boundedLabels } from '../accessibility.ts';
+import type { themeTokens } from '../options.ts';
+type Tokens = ReturnType<typeof themeTokens>;
+export function buildOption(options: CatalogueOptions, t: Tokens, mapName?: string, reducedMotion = false, width = 640): EChartsCoreOption {
+ const kind = 'pie' as CatalogueKind;
+    const o = options as any, points = cataloguePoints(kind, options);
+    const decal = (index: number, fill: string) => o.ShowPatterns ? seriesDecal(index, fill) : undefined;
+    const colors = t.palette;
+    const color = (c: any, i: number) => markColor(t.forcedColors ? t.text : resolveChartColor(c, colors[i % colors.length], t.dark, t.read), t.surface, kind === 'line' || kind === 'radar' || kind === 'polar' && o.PolarType === 'Line' ? 4.5 : 3.2);
+    const style = (key: string, c: any, i: number) => markStyle(color(c, i), t.surface, o.SelectedKey === key);
+    const point = (key: string, seriesKey?: string) => points.find(p => p.Key === key && (!seriesKey || p.SeriesKey === seriesKey));
+    const namesForLegend: string[] = ['line','radar','bar','polar'].includes(kind) ? o.Series.map((s: any) => s.Label) : kind === 'scatter' ? [...new Set<string>(o.Points.map((p: any) => p.Group || 'Observations'))] : ['pie','doughnut','nightingale','funnel'].includes(kind) ? [...new Set<string>(o.Items.map((i: any) => i.Label))] : [];
+    const legend = { data: namesForLegend, show: o.ShowLegend, type: 'scroll', top: 6, left: 10, right: 10, itemWidth: 24, itemHeight: 12, selectedMode: false, pageTextStyle: { color: t.muted }, pageIconColor: t.text, textStyle: { color: t.muted, fontSize: 11 } };
+    const label = { show: o.ShowLabels, color: contrastText(t.surface), fontSize: 11, backgroundColor: t.surface, padding: [2, 3], borderRadius: 2 };
+    const tooltip = { show: o.ShowTooltip, confine: true, enterable: true, backgroundColor: t.surface, borderColor: t.border, textStyle: { color: t.text, fontSize: 12 }, formatter: (p: any) => {
+            const d = p.data?.point as ChartPoint | undefined;
+            if (!d)
+                return `${escapeText(p.name || '')}${p.value == null || Number.isNaN(p.value) ? ' · No data' : ''}`;
+            const extra = d.Date ? `<br/>${escapeText(d.Date)}<br/><strong>${escapeText(formatValue(d.Value, o))}</strong>` : d.X !== undefined ? `<br/>${escapeText(o.XLabel || 'X')}: ${d.X}<br/>${escapeText(o.YLabel || 'Y')}: ${d.Y}${d.Size === undefined ? '' : `<br/>Size: ${d.Size}`}` : `<br/><strong>${escapeText(formatValue(d.Value, o))}</strong>`;
+            return `${escapeText(d.SeriesName ? `${d.SeriesName} · ${d.Label}` : d.Label)}${extra}${p.data?.conversion ? `<br/>${escapeText(p.data.conversion)}` : ''}`;
+        } };
+    const base = { backgroundColor: t.surface, color: colors.map((c, i) => color(c, i)), animation: !!o.EnableAnimation && !reducedMotion, animationDuration: 300, animationDurationUpdate: 150, textStyle: { fontFamily: 'Inter,system-ui,sans-serif', color: t.text }, aria: { enabled: true, description: `${o.Title}. ${o.Description || ''} Exact values and keyboard selection are in the data table.` }, tooltip };
+    const axis = { axisLine: { show: false }, axisTick: { show: false }, axisLabel: { color: t.muted, fontSize: 10, hideOverlap: true }, splitLine: { lineStyle: { color: t.border, type: 'dashed' } } };
+    
+        const c = options as CircularOptions;
+        const rings = c.Nested ? c.Rings! : [{ Key: '', Label: '' }];
+        const half = c.Shape === 'Half', nested = !!c.Nested && rings.length > 1;
+        const inner = kind === 'pie' ? 0 : c.InnerRadius ?? (kind === 'doughnut' ? 48 : 18);
+        const outside = c.LabelPosition !== 'Inside';
+        const outer = outside ? 66 : 76;
+        const names = [...new Set(c.Items.map(item => item.Label))];
+        const series = rings.map((ring, ri) => {
+            // Match ECharts' nested-pie composition: a solid core, a visible gap, then the detail ring.
+            const radius = nested ? ri === 0 ? [0, 32] : [44 + (outer - 44) * (ri - 1) / (rings.length - 1), 44 + (outer - 44) * ri / (rings.length - 1) - (ri === rings.length - 1 ? 0 : 2)] : [inner, Math.max(outer, inner + 5)];
+            const inside = !outside || (nested && ri < rings.length - 1);
+            return {
+                type: 'pie', id: ring.Key || kind, name: ring.Label, top: o.ShowLegend ? 28 : 0, bottom: 2,
+                center: ['50%', half ? '72%' : '55%'], radius: radius.map(r => `${r}%`),
+                startAngle: half ? 180 : 90, endAngle: half ? 360 : 'auto',
+                roseType: kind === 'nightingale' ? (c.RoseMode === 'Radius' ? 'radius' : 'area') : false,
+                avoidLabelOverlap: true, stillShowZeroSum: false,
+                label: { ...label, position: inside ? 'inside' : 'outside', backgroundColor: inside ? undefined : t.surface,
+                    alignTo: 'none', bleedMargin: 6, distanceToLabelLine: 4,
+                    formatter: '{b}\n{d}%', lineHeight: 15 },
+                labelLine: { show: !!o.ShowLabels && !inside, length: 12, length2: 8, smooth: .15 },
+                labelLayout: { hideOverlap: true }, emphasis: { scale: true },
+                data: c.Items.filter(i => !c.Nested || i.RingKey === ring.Key).map(i => {
+                    const index = names.indexOf(i.Label), fill = color(i.Color, index);
+                    return { id: i.Key, name: i.Label, value: i.Value, point: point(i.Key),
+                        label: { color: contrastText(inside ? fill : t.surface), backgroundColor: inside ? fill : t.surface },
+                        labelLine: { lineStyle: { color: fill, width: 1.25 } },
+                        itemStyle: { ...style(i.Key, i.Color, index), decal: decal(index, fill), borderRadius: 3 }, emphasis: { itemStyle: highlightStyle(fill) } };
+                })
+            };
+        });
+        const selected = points.find(p => p.Key === o.SelectedKey);
+        const total = selected?.Value ?? c.Items.reduce((n, i) => n + (i.Value || 0), 0);
+        return { ...base, legend, series, media: outside ? [{ query: { maxWidth: 420 }, option: { series: series.map(s => ({ id: s.id, radius: s.radius.map(r => `${parseFloat(r) * .84}%`) })) } }] : [], graphic: kind === 'doughnut' && !nested && inner >= 35 ? [{ type: 'text', left: 'center', top: half ? '63%' : '48%', silent: true, style: { text: `${formatValue(total, o, true)}\n${selected?.Label || c.CenterLabel || 'Total'}`, textAlign: 'center', fill: t.text, font: '600 16px Inter,system-ui', lineHeight: 24, width: Math.max(24, Math.min(width, o.Height || 320) * inner / 100 - 12), overflow: 'truncate' } }] : [] };
+    
+}