@blukavantui/charts-community 0.0.0-stage → 1.2.0

package/src/export.ts

@@ -0,0 +1,50 @@
+import { exportLegend, type LegendExportLayout } from './legend-export.ts';
+import type { EChartsType } from 'echarts/core';
+import type { ChartFormat, ChartOptions } from './types.ts';
+import { escapeText } from './validation.ts';
+import {boundedAwait} from './async.ts';
+
+export function saveBlob(blob: Blob, filename: string) {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement('a');
+  anchor.href = url; anchor.download = filename;
+  document.body.append(anchor); anchor.click(); anchor.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+function lines(text: string, max: number) {
+  const result: string[] = [];
+  for (const word of text.split(/\s+/)) {
+    if (!result.length || result[result.length - 1].length + word.length > max) result.push(word);
+    else result[result.length - 1] += ` ${word}`;
+  }
+  return result.slice(0, 4);
+}
+export async function exportImage(chart: EChartsType, options: ChartOptions, format: ChartFormat, filename: string, surface: string, text: string, muted: string, legend?: LegendExportLayout, signal?: AbortSignal) {
+  signal?.throwIfAborted();
+  const width = legend?.body.clientWidth || chart.getWidth();
+  const bodyHeight = legend?.body.getBoundingClientRect().height || chart.getHeight();
+  const origin = legend?.body.getBoundingClientRect(), plot = legend?.stage.getBoundingClientRect();
+  const plotX = origin && plot ? plot.x - origin.x : 0, plotY = origin && plot ? plot.y - origin.y : 0;
+  if (width <= 0 || chart.getHeight() <= 0) throw new Error('Show the chart before downloading it.');
+  const titleLines = lines(options.Title || 'Chart', Math.max(16, Math.floor((width - 32) / 10)));
+  const descriptionLines = lines(options.Description || '', Math.max(24, Math.floor((width - 32) / 6)));
+  const top = titleLines.length * 22 + descriptionLines.length * 15 + 24;
+  const height = bodyHeight + top + 32;
+  const title = titleLines.map((s, i) => `<text x="16" y="${26 + i * 22}" font-size="17" font-weight="600" fill="${text}">${escapeText(s)}</text>`).join('');
+  const subtitle = descriptionLines.map((s, i) => `<text x="16" y="${28 + titleLines.length * 22 + i * 15}" font-size="11" fill="${muted}">${escapeText(s)}</text>`).join('');
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img" aria-labelledby="chart-title chart-description"><title id="chart-title">${escapeText(options.Title || 'Chart')}</title><desc id="chart-description">${escapeText(options.Description || 'Chart visualization. Exact values are available in the source chart data table.')}</desc><rect width="100%" height="100%" fill="${surface}"/><g font-family="Inter,system-ui,sans-serif">${title}${subtitle}<g transform="translate(0 ${top})"><g transform="translate(${plotX} ${plotY})">${chart.renderToSVGString()}</g>${legend ? exportLegend(legend) : ''}</g><text x="16" y="${height - 12}" fill="${muted}" font-size="9">${escapeText(options.ExportFootnote || 'BluKavantUI')}</text></g></svg>`;
+  let blob = new Blob([svg], { type: 'image/svg+xml' });
+  if (format === 'png') {
+    if(width*2>16384||height*2>16384||width*height*4>32000000)throw new Error('This chart is too large for PNG. Use SVG or reduce the displayed data.');
+    const url = URL.createObjectURL(blob);
+    try {
+      const image = new Image(); image.src = url; await boundedAwait(image.decode(),signal,15000,'PNG decoding timed out. Try SVG.'); signal?.throwIfAborted();
+      const canvas = document.createElement('canvas'); canvas.width = Math.ceil(width * 2); canvas.height = Math.ceil(height * 2);
+      const context = canvas.getContext('2d');
+      if (!context) throw new Error('PNG export is unavailable. Try SVG.');
+      context.drawImage(image, 0, 0, canvas.width, canvas.height);
+      blob = await boundedAwait(new Promise<Blob>((resolve, reject) => canvas.toBlob(b => b ? resolve(b) : reject(new Error('PNG export failed. Try SVG.')), 'image/png')),signal,15000,'PNG encoding timed out. Try SVG.');
+    } finally { URL.revokeObjectURL(url); }
+  }
+  signal?.throwIfAborted(); saveBlob(blob, filename);
+}

package/src/heatmap.ts

@@ -0,0 +1,11 @@
+import { heatmapOption as buildOption } from './builders/heatmap.ts';
+import { use } from 'echarts/core';
+import { HeatmapChart } from 'echarts/charts';
+import { GridComponent, VisualMapComponent } from 'echarts/components';
+import { createChart } from './runtime.ts';
+import type { HeatmapOptions, HeatmapPoint, ChartEvents } from './types.ts';
+export type { HeatmapOptions, HeatmapCell, HeatmapPoint, ChartCategory, ChartEvents, ChartInstance } from './types.ts';
+export function createHeatmap(host: HTMLElement, options: HeatmapOptions, events: ChartEvents<HeatmapPoint> = {}) {
+  use([HeatmapChart, GridComponent, VisualMapComponent]);
+  return createChart<HeatmapOptions, HeatmapPoint>(host, 'heatmap', options, events, buildOption);
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+export type * from './types.ts';
+export type * from './catalogue-types.ts';
+export { createLineChart } from './line.ts';
+export { createBarChart } from './bar.ts';
+export { createPieChart } from './pie.ts';
+export { createDoughnutChart } from './doughnut.ts';
+export { createScatterChart } from './scatter.ts';
+export { createRadarChart } from './radar.ts';
+export { createHeatmap } from './heatmap.ts';
+export { createSparkline } from './sparkline.ts';
+export type { BluSparklinePoint, SparklineOptions, SparklineEvents, SparklineInstance } from './sparkline.ts';

package/src/legend-export.ts

@@ -0,0 +1,36 @@
+import type { LegendModel } from './legend-model.ts';
+import { escapeText as esc } from './validation.ts';
+export interface LegendExportLayout { body: HTMLElement; stage: HTMLElement; legend: HTMLElement; model: LegendModel }
+/** Export the shared HTML key as native SVG, including wrapped labels; no foreignObject. */
+export function exportLegend(layout: LegendExportLayout): string {
+  const {body,legend,model}=layout;
+  if(legend.hidden) return '';
+  const origin=body.getBoundingClientRect(), parts: string[]=[];
+  const rect = (el: Element) => {const b=el.getBoundingClientRect();return {x:b.x-origin.x,y:b.y-origin.y,w:b.width,h:b.height};};
+  for(const el of legend.querySelectorAll<HTMLElement>('.blu-chart__legend-entry,.blu-chart__legend-chip,.blu-chart__legend-scale')) {
+    const r=rect(el), s=getComputedStyle(el);
+    parts.push(`<rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="${Math.min(parseFloat(s.borderRadius)||0,r.w/2,r.h/2)}" fill="${esc(s.backgroundColor)}" stroke="${parseFloat(s.borderWidth)>0?esc(s.borderColor):'none'}" stroke-width="${parseFloat(s.borderWidth)||0}"/>`);
+  }
+  for(const el of legend.querySelectorAll<HTMLElement>('.blu-chart__legend-marker svg')) {
+    const r=rect(el); parts.push(`<svg x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" viewBox="${esc(el.getAttribute('viewBox') || '0 0 28 16')}">${el.innerHTML}</svg>`);
+  }
+  const gradient=legend.querySelector('.blu-chart__legend-gradient');
+  if(gradient && model.scale) {
+    const r=rect(gradient);
+    parts.push(`<defs><linearGradient id="blu-export-legend-scale">${model.scale.colors.map((c,i)=>`<stop offset="${i/(model.scale!.colors.length-1)*100}%" stop-color="${esc(c)}"/>`).join('')}</linearGradient></defs><rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="4" fill="url(#blu-export-legend-scale)"/>`);
+  }
+  for(const el of legend.querySelectorAll<HTMLElement>('.blu-chart__legend-track,.blu-chart__legend-track>span')) {
+    const r=rect(el); if(r.w && r.h) parts.push(`<rect x="${r.x}" y="${r.y}" width="${r.w}" height="${r.h}" rx="2" fill="${esc(getComputedStyle(el).backgroundColor)}"/>`);
+  }
+  for(const el of legend.querySelectorAll<HTMLElement>('.blu-chart__legend-text')) {
+    const node=el.firstChild; if(!node || node.nodeType!==Node.TEXT_NODE) continue;
+    const s=getComputedStyle(el); if(!el.getClientRects().length || s.visibility==='hidden') continue;
+    const font=parseFloat(s.fontSize), range=document.createRange(), rows:{x:number;y:number;text:string}[]=[];
+    for(let i=0;i<node.textContent!.length;i++) {
+      range.setStart(node,i);range.setEnd(node,i+1);const r=range.getBoundingClientRect();
+      const last=rows.at(-1);if(last && Math.abs(last.y-r.y)<1) last.text+=node.textContent![i]; else rows.push({x:r.x,y:r.y,text:node.textContent![i]});
+    }
+    for(const row of rows) parts.push(`<text x="${row.x-origin.x}" y="${row.y-origin.y+font*.86}" font-size="${font}" font-weight="${s.fontWeight}" fill="${esc(s.color)}"${s.textDecorationLine.includes('underline')?' text-decoration="underline"':''}>${esc(row.text)}</text>`);
+  }
+  return parts.join('');
+}

package/src/legend-model.ts

@@ -0,0 +1,76 @@
+import type { ChartOptions } from './types.ts';
+import type { ChartTheme } from './options.ts';
+import {chartMessage} from './messages.ts';
+import { formatValue } from './model.ts';
+import { treeValue, treeTotals } from './catalogue-model.ts';
+import { escapeText } from './validation.ts';
+
+export interface LegendEntry {
+  id: string; label: string; color: string; value?: string; compactValue?: string; detail?: string; percent?: number;
+  symbol?: string; dash?: string; line?: boolean;
+  targets: { seriesIndex: number; dataIndex?: number; name?: string }[];
+}
+export interface LegendScale { label: string; min: number; max: number; colors: string[] }
+export interface LegendModel { entries: LegendEntry[]; scale?: LegendScale; note?: string }
+/** Adapt data once; every chart uses the same DOM renderer and export path. */
+export function legendModel(kind: string, o: any, config: any, t: ChartTheme): LegendModel {
+  const series: any[] = config.series || [], entries: LegendEntry[] = [];
+  const msg=(key:string,fallback:string,values:Record<string,string>={})=>chartMessage(o,key,fallback,values);
+  const dataColor = (d: any, s: any) => d?.itemStyle?.color || d?.itemStyle?.areaColor || s?.itemStyle?.color || s?.lineStyle?.color || t.palette[0];
+  const addItem = (d: any, s: any, si: number, di: number, label: string, id: string, value: number | null, detail?: string, percent?: number) => entries.push({ id, label, color: dataColor(d,s), value: formatValue(value,o), compactValue: formatValue(value,o,true), detail, percent, targets: [{seriesIndex:si,dataIndex:di}] });
+  if (o.Series) {
+    o.Series.forEach((s: any, si: number) => {
+      const rendered = series[si], present = s.Values.flatMap((v: number | null, i: number) => v === null ? [] : [{v,i}]), last = present.at(-1);
+      const radar = kind === 'radar';
+      entries.push({ id: s.Key, label: s.Label || s.Name, color: rendered?.lineStyle?.color || dataColor(null, rendered),
+        line: rendered?.type === 'line' || radar, symbol: rendered?.symbol, dash: rendered?.lineStyle?.type,
+        value: radar ? `${present.length} / ${o.Categories.length}` : formatValue(last?.v ?? null,o),
+        compactValue: radar ? undefined : formatValue(last?.v ?? null,o,true),
+        detail: radar ? msg('MeasuresReported','Measures reported') : last ? msg('Latest','Latest · {label}',{label:o.Categories[last.i].Label}) : msg('LatestValue','Latest value'), targets: [{seriesIndex:si}] });
+    });
+  } else if (['pie','doughnut','nightingale','funnel'].includes(kind)) {
+    series.forEach((s,si) => {
+      const total = s.data.reduce((n: number,d: any) => n + (d.value ?? 0),0), ring = o.Nested ? o.Rings?.[si]?.Label : undefined;
+      s.data.forEach((d: any,di: number) => addItem(d,s,si,di,d.name,d.point.Key,d.value,ring,
+        kind !== 'funnel' && d.value !== null && total > 0 ? d.value / total : undefined));
+    });
+  } else if (kind === 'scatter') {
+    series.forEach((s,si) => entries.push({id:s.name,label:s.name,color:dataColor(null,s),symbol:s.symbol,value:String(s.data.length),detail:msg('Observations','Observations'),targets:[{seriesIndex:si}]}));
+  } else if (kind === 'treemap') {
+    const totals = treeTotals(o.Nodes);
+    const roots = o.Nodes.filter((n: any) => n.ParentKey === null), total = roots.reduce((n: number,r: any) => n + (totals.get(r.Key) ?? 0),0);
+    // ECharts includes a virtual root at index 0, then flattens nodes depth-first.
+    const indices = new Map<string,number>(); let index = 1;
+    const walk = (nodes: any[]) => nodes.forEach(n => { indices.set(n.id,index++); walk(n.children || []); });
+    walk(series[0].data);
+    roots.forEach((n: any,di: number) => { const value = totals.get(n.Key)!; addItem(series[0].data[di],series[0],0,indices.get(n.Key)!,n.Label,n.Key,value,msg('TopLevelGroup','Top-level group'),total > 0 && value !== null ? value/total : undefined); });
+  } else if (kind === 'sankey') {
+    o.Nodes.forEach((n: any,di: number) => {
+      const incoming = o.Links.filter((l: any)=>l.TargetKey===n.Key).reduce((v: number,l: any)=>v+l.Value,0);
+      const outgoing = o.Links.filter((l: any)=>l.SourceKey===n.Key).reduce((v: number,l: any)=>v+l.Value,0);
+      addItem(series[0].data[di],series[0],0,di,n.Label,n.Key,Math.max(incoming,outgoing),msg('NodeThroughput','Node throughput'));
+    });
+  }
+  const vm = Array.isArray(config.visualMap) ? config.visualMap[0] : config.visualMap;
+  const scale = vm ? { label: kind === 'geo-map' ? msg('RegionValue','Region value') : kind === 'calendar-heatmap' ? msg('DailyValue','Daily value') : msg('CellValue','Cell value'), min: vm.min, max: vm.max, colors: [...vm.inRange.color] } : undefined;
+  if (kind === 'geo-map') {
+    series.forEach((s,si) => s.data.forEach((d: any,di: number) => {
+      if(s.type === 'scatter' || o.Regions.find((r: any)=>r.Key===d.point.Key)?.Color)
+        addItem(d,s,si,di,d.point.Label,d.point.Key,d.point.Value,s.type==='scatter'?msg('LocationValue','Location · size = value'):msg('CustomRegionColor','Custom region color'));
+    }));
+  } else if (kind === 'calendar-heatmap') {
+    series[0]?.data.forEach((d: any,di: number) => { if(o.Items.find((i: any)=>i.Key===d.point.Key)?.Color) addItem(d,series[0],0,di,d.point.Label,d.point.Key,d.point.Value,msg('CustomDayColor','Custom day color')); });
+  }
+  return { entries, scale, note: kind === 'scatter' && o.Bubble ? msg('BubbleSize','Bubble size represents Size.') : undefined };
+}
+/** No percentages for overlapping series, funnel stages, flows or unrelated axes. */
+export function legendText(e: LegendEntry, o: ChartOptions) {
+  return { value: o.LegendShowValues === false ? '' : e.compactValue || e.value || '', detail: o.LegendShowValues === false ? '' : e.detail || '',
+    percent: o.LegendShowPercentages && e.percent !== undefined ? new Intl.NumberFormat(o.Locale || 'en-US',{style:'percent',maximumFractionDigits:1}).format(e.percent) : '' };
+}
+export function legendMarker(e: LegendEntry) {
+  const color = escapeText(e.color), symbol = e.symbol || 'rect', hollow = symbol.startsWith('empty'), shape = symbol.replace(/^empty/,'').toLowerCase();
+  const fill = hollow ? 'none' : color, dash = e.dash === 'dashed' ? '5 3' : e.dash === 'dotted' ? '2 3' : '';
+  const mark = shape.includes('diamond') ? '<path d="M14 2 20 8 14 14 8 8Z"' : shape.includes('triangle') || shape === 'arrow' ? '<path d="M14 2 20 13 8 13Z"' : shape.includes('circle') || shape === 'pin' ? '<circle cx="14" cy="8" r="4"' : '<rect x="9" y="3" width="10" height="10" rx="2"';
+  return `<svg viewBox="${e.line ? '0 0 28 16' : '6 0 16 16'}" width="${e.line ? 28 : 16}" height="16" aria-hidden="true">${e.line ? `<path d="M1 8H27" fill="none" stroke="${color}" stroke-width="2" stroke-dasharray="${dash}"/>` : ''}${mark} fill="${fill}" stroke="${color}" stroke-width="1.5"/></svg>`;
+}

package/src/legend.css

@@ -0,0 +1,64 @@
+.blu-chart__body {display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
+.blu-chart__body[data-legend-position=Top] .blu-chart__legend {grid-row:1}
+.blu-chart__body[data-legend-position=Bottom] .blu-chart__legend {grid-row:2}
+.blu-chart__body[data-legend-position=Left] {grid-template-columns:190px minmax(0,1fr);align-items:center}
+.blu-chart__body[data-legend-position=Right] {grid-template-columns:minmax(0,1fr) 190px;align-items:center}
+.blu-chart__body[data-legend-position=Left] .blu-chart__legend {grid-column:1;grid-row:1}
+.blu-chart__body[data-legend-position=Left] .blu-chart__stage {grid-column:2;grid-row:1}
+.blu-chart__body[data-legend-position=Right] .blu-chart__legend {grid-column:2;grid-row:1}
+.blu-chart__body[data-legend-position=Right] .blu-chart__stage {grid-column:1;grid-row:1}
+.blu-chart__body.blu-chart__body--no-legend {grid-template-columns:minmax(0,1fr);gap:0}
+.blu-chart__body--no-legend .blu-chart__stage {grid-column:1!important;grid-row:1!important}
+.blu-chart__legend {--legend-selected:color-mix(in srgb,var(--bluui-primary) 9%,var(--bluui-surface));min-width:0;padding:8px 20px 16px;font:12px/1.45 var(--bluui-font,Inter,system-ui,sans-serif);color:var(--bluui-text)}
+.blu-chart__legend-items {display:flex;flex-wrap:wrap;gap:8px}
+.blu-chart__legend-entry {min-width:0;max-width:100%;display:flex;align-items:center;gap:10px;border:1px solid transparent;background:transparent;color:inherit;font:inherit;text-align:left;padding:7px 8px;border-radius:8px;cursor:pointer;min-height:36px}
+.blu-chart__legend-entry:hover {background:var(--bluui-surface-muted)}
+.blu-chart__legend-entry[aria-pressed=true] {text-decoration:none;background:var(--legend-selected)}
+.blu-chart__legend-heading {display:flex;align-items:center;gap:7px;min-width:0}
+.blu-chart__legend-marker {display:flex;flex-shrink:0}
+.blu-chart__legend-text {overflow-wrap:anywhere}
+.blu-chart__legend-label {font-weight:500}
+.blu-chart__legend-detail,.blu-chart__legend-percent,.blu-chart__legend-note {font-size:11px;color:var(--bluui-text-muted)}
+.blu-chart__legend-numbers {display:flex;align-items:baseline;gap:10px;min-width:0;font-variant-numeric:tabular-nums}
+.blu-chart__legend-value {font-weight:600;letter-spacing:-.25px}
+.blu-chart__legend-check {visibility:hidden;margin-left:auto;color:var(--bluui-primary);font-weight:700;font-size:12px}
+[aria-pressed=true] .blu-chart__legend-check {visibility:visible}
+.blu-chart__legend[data-style=Standard] .blu-chart__legend-detail,.blu-chart__legend[data-style=Standard] .blu-chart__legend-check {display:none}
+.blu-chart__legend[data-style=Standard] .blu-chart__legend-value {font-size:11px;color:var(--bluui-text-muted)}
+.blu-chart__legend-track {display:none;height:3px;background:var(--bluui-border);border-radius:2px;overflow:hidden}
+.blu-chart__legend-track>span {display:block;height:100%}
+/* The compact key uses Community Chip; only this chart-specific appearance is scoped here. */
+.blu-chart__legend-chip-host {min-width:0;max-width:100%}
+.blu-chart__legend .blu-chip.blu-chart__legend-chip {--chip-bg:transparent;--chip-fg:var(--bluui-text);--chip-border:var(--bluui-border);max-width:100%;box-shadow:none}
+.blu-chart__legend .blu-chart__legend-chip.blu-chip--selected {--chip-bg:var(--legend-selected);--chip-border:var(--bluui-primary);box-shadow:none}
+.blu-chart__legend .blu-chart__legend-chip .blu-chip__select {min-height:38px;padding:9px 12px;gap:10px;font:inherit;font-size:11px;text-align:left;justify-content:flex-start}
+.blu-chart__legend-chip .blu-chart__legend-label {font-weight:500}
+.blu-chart__legend-chip .blu-chart__legend-detail,.blu-chart__legend-chip .blu-chart__legend-check {display:none}
+.blu-chart__legend-chip [aria-pressed=true] {text-decoration:none}
+.blu-chart__legend-chip [aria-pressed=true] .blu-chart__legend-label {text-decoration:underline;text-underline-offset:3px}
+.blu-chart__legend-chip .blu-chart__legend-numbers {gap:7px;flex-wrap:wrap}
+.blu-chart__legend[data-style=ValueList] .blu-chart__legend-items,.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-items {display:grid;grid-template-columns:repeat(var(--legend-columns,1),minmax(0,1fr));gap:10px}
+.blu-chart__legend[data-style=ValueList] .blu-chart__legend-entry {display:flex;flex-direction:column;align-items:stretch;gap:5px;padding:10px 11px;border:0}
+.blu-chart__legend[data-style=ValueList] .blu-chart__legend-numbers {margin-left:23px;justify-content:space-between}
+.blu-chart__legend[data-style=ValueList] .blu-chart__legend-value {font-size:19px;letter-spacing:-.4px;line-height:1.3}
+.blu-chart__legend[data-style=ValueList] .blu-chart__legend-detail {margin-left:23px}
+.blu-chart__legend[data-style=ValueList] .blu-chart__legend-track {display:block;margin:3px 0 0 23px}
+.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-entry {display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:12px;min-height:36px;align-self:start;border-color:var(--bluui-border);border-radius:12px}
+.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-entry[aria-pressed=true] {border-color:var(--bluui-primary)}
+.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-heading {font-size:11px}
+.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-numbers {flex-direction:column;align-items:stretch;gap:6px;margin-top:10px}
+.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-value {font-size:24px;letter-spacing:-.6px;line-height:1.2}
+.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-detail {margin-top:6px}
+.blu-chart__body:is([data-legend-position=Left],[data-legend-position=Right]) .blu-chart__legend {padding:8px 12px 16px}
+.blu-chart__body:is([data-legend-position=Left],[data-legend-position=Right]) .blu-chart__legend-items {display:flex;flex-direction:column}
+.blu-chart__body:is([data-legend-position=Left],[data-legend-position=Right]) .blu-chart__legend-entry {width:100%}
+.blu-chart__body:is([data-legend-position=Left],[data-legend-position=Right]) .blu-chart__legend[data-style=Standard] .blu-chart__legend-entry {flex-wrap:wrap;gap:4px 10px}
+.blu-chart__legend-scale {max-width:360px;min-width:0;margin:0 0 8px}
+.blu-chart__legend-scale-title {display:block;font-size:11px;font-weight:500;margin-bottom:10px;color:var(--bluui-text-muted)}
+.blu-chart__legend-gradient {height:8px;border-radius:4px}
+.blu-chart__legend-range {display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-variant-numeric:tabular-nums}
+.blu-chart__legend[data-style=Compact] .blu-chart__legend-scale {padding:12px 16px;border:1px solid var(--bluui-border);border-radius:18px}
+.blu-chart__legend[data-style=ValueList] .blu-chart__legend-scale {padding:10px 11px}
+.blu-chart__legend[data-style=SummaryCards] .blu-chart__legend-scale {padding:16px;border:1px solid var(--bluui-border);border-radius:12px}
+.blu-chart__legend-note {display:block;margin-top:10px}
+@media(forced-colors:active) {.blu-chart__legend-entry{border:1px solid ButtonText!important}.blu-chart__legend-entry[aria-pressed=true],.blu-chart__legend .blu-chart__legend-chip.blu-chip--selected{outline:1px solid Highlight}.blu-chart__legend-marker svg{forced-color-adjust:none}.blu-chart__legend-gradient{background:Canvas!important;border:1px solid CanvasText}}

package/src/legend.ts

@@ -0,0 +1,90 @@
+import type { EChartsType } from 'echarts/core';
+import { createChip } from '@blukavantui/community/chip';
+import '@blukavantui/community/chip.css';
+import type { ChartOptions } from './types.ts';
+import type { ChartTheme } from './options.ts';
+import { legendModel, legendText, legendMarker, type LegendModel, type LegendEntry } from './legend-model.ts';
+import { formatValue } from './model.ts';
+import { escapeText as esc } from './validation.ts';
+import './legend.css';
+import {chartMessage} from './messages.ts';
+
+export function createChartLegend(root: HTMLElement, chart: EChartsType, kind: string) {
+  const stage = root.querySelector<HTMLElement>('.blu-chart__stage')!;
+  const body = document.createElement('div'); body.className = 'blu-chart__body';
+  stage.before(body); body.append(stage);
+  const host = document.createElement('div'); host.className = 'blu-chart__legend'; host.setAttribute('role','group'); host.setAttribute('aria-label','Chart legend');
+  body.append(host);
+  let focused: string | null = null, model: LegendModel = {entries:[]}, options: ChartOptions = {}, signature = '';
+  const chips: {entry: LegendEntry; host: HTMLElement; instance: ReturnType<typeof createChip>}[] = [];
+  const status = root.querySelector<HTMLElement>('.blu-chart__status')!;
+  function content(e: LegendEntry) {
+    const info=legendText(e,options);
+    return `<span class="blu-chart__legend-heading"><span class="blu-chart__legend-marker">${legendMarker(e)}</span><span class="blu-chart__legend-text blu-chart__legend-label">${esc(e.label)}</span><span class="blu-chart__legend-text blu-chart__legend-check" aria-hidden="true">✓</span></span>${info.value||info.percent?`<span class="blu-chart__legend-numbers">${info.value?`<span class="blu-chart__legend-text blu-chart__legend-value">${esc(info.value)}</span>`:''}${info.percent?`<span class="blu-chart__legend-text blu-chart__legend-percent">${esc(info.percent)}</span>`:''}</span>`:''}${info.detail?`<span class="blu-chart__legend-text blu-chart__legend-detail">${esc(info.detail)}</span>`:''}${options.LegendStyle==='ValueList'?`<span class="blu-chart__legend-track" aria-hidden="true"><span style="width:${e.percent===undefined?100:Math.max(0,Math.min(100,e.percent*100))}%;background:${esc(e.color)}"></span></span>`:''}`;
+  }
+  function decorate(button: HTMLButtonElement, e: LegendEntry) {
+    const info=legendText(e,options);
+    button.dataset.legendKey=e.id;
+    button.setAttribute('aria-label',`${chartMessage(options,'Highlight','Highlight {label}',{label:e.label})}${info.detail?' · '+info.detail:''}${info.value?': '+e.value:''}${info.percent?' · '+info.percent:''}`);
+    button.innerHTML=content(e);
+  }
+  function emphasis() {
+    chart.dispatchAction({type:'downplay'});
+    const entry = model.entries.find(e=>e.id===focused);
+    entry?.targets.forEach(target=>chart.dispatchAction({type:'highlight',...target}));
+    // Chip owns its selection semantics; reapply the composed marker after its render.
+    chips.forEach(c=>{ c.instance.update({IsSelected:c.entry.id===focused}); decorate(c.host.querySelector<HTMLButtonElement>('button')!,c.entry); });
+    host.querySelectorAll<HTMLElement>('[data-legend-key]').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.legendKey===focused)));
+  }
+  function activate(id: string) {
+    focused=focused===id ? null : id;
+    emphasis();
+    status.textContent=focused ? chartMessage(options,'Highlighting','Highlighting {label}. Activate again to clear.',{label:model.entries.find(e=>e.id===focused)!.label}) : chartMessage(options,'HighlightCleared','Legend highlight cleared.');
+  }
+  function disposeChips() { chips.splice(0).forEach(c=>c.instance.destroy()); }
+  return {
+    /** Place the legend before measuring the plot. Side positions reflow in narrow chart cards. */
+    prepare(o: ChartOptions, unavailable: boolean) {
+      options=o;
+      host.setAttribute('aria-label',chartMessage(o,'Legend','Chart legend'));
+      const requested=o.LegendPosition || 'Top';
+      const position = root.clientWidth < 520 && ['Left','Right'].includes(requested) ? 'Bottom' : requested;
+      body.dataset.legendPosition=position;
+      host.hidden=o.ShowLegend===false || unavailable;
+      body.classList.toggle('blu-chart__body--no-legend',host.hidden);
+      host.dataset.style=o.LegendStyle || 'Standard';
+      if(host.hidden) focused=null;
+    },
+    render(o: any, config: any, theme: ChartTheme) {
+      model=legendModel(kind,o,config,theme);
+      if(!model.entries.some(e=>e.id===focused)) focused=null;
+      if(!model.entries.length && !model.scale) {host.hidden=true;body.classList.add('blu-chart__body--no-legend');}
+      const capacity=Math.max(1,Math.min(4,Math.floor((host.clientWidth-30)/150)));
+      const columns=Math.ceil(model.entries.length/Math.ceil(model.entries.length/capacity)) || 1;
+      host.style.setProperty('--legend-columns',String(columns));
+      const next=JSON.stringify([model,o.LegendStyle,o.LegendShowValues,o.LegendShowPercentages,o.Messages,theme.surface,theme.text]);
+      if(next !== signature) {
+        const active = host.contains(document.activeElement) ? (document.activeElement as HTMLElement).dataset.legendKey : undefined;
+        signature=next;
+        disposeChips();
+        host.innerHTML=`${model.scale ? `<div class="blu-chart__legend-scale"><span class="blu-chart__legend-text blu-chart__legend-scale-title">${esc(model.scale.label)}</span><div class="blu-chart__legend-gradient" style="background:linear-gradient(90deg,${model.scale.colors.map(esc).join(',')})" aria-hidden="true"></div><div class="blu-chart__legend-range"><span class="blu-chart__legend-text">${esc(formatValue(model.scale.min,o))}</span><span class="blu-chart__legend-text">${esc(formatValue(model.scale.max,o))}</span></div></div>` : ''}<div class="blu-chart__legend-items"></div>${model.note ? `<span class="blu-chart__legend-text blu-chart__legend-note">${esc(model.note)}</span>` : ''}`;
+        const items=host.querySelector<HTMLElement>('.blu-chart__legend-items')!;
+        model.entries.forEach(e=>{
+          if(o.LegendStyle==='Compact') {
+            const chipHost=document.createElement('div'); chipHost.className='blu-chart__legend-chip-host'; items.append(chipHost);
+            const instance=createChip(chipHost,{Label:e.label,Color:'Secondary',IsSelectable:true,IsSelected:e.id===focused,ExtendedClass:'blu-chart__legend-chip'}, {SelectionChanged:()=>activate(e.id)});
+            chips.push({entry:e,host:chipHost,instance});
+          } else {
+            const button=document.createElement('button'); button.type='button'; button.className='blu-chart__legend-entry';
+            decorate(button,e); button.onclick=()=>activate(e.id); items.append(button);
+          }
+        });
+        emphasis();
+        if(active) [...host.querySelectorAll<HTMLElement>('[data-legend-key]')].find(b=>b.dataset.legendKey===active)?.focus({preventScroll:true});
+      } else emphasis();
+    },
+    exportLayout() { return {body,stage,legend:host,model}; },
+    reset() {focused=null;},
+    destroy() {disposeChips();host.replaceChildren();},
+  };
+}

package/src/limits.ts

@@ -0,0 +1,7 @@
+/** Defensive input limits, not a rendering-speed guarantee. Aggregate larger inputs upstream. */
+export const limits = Object.freeze({records: 10000, observations: 10000, treeNodes: 2000, treeDepth: 64, flowNodes: 1000, flowLinks: 5000, mapFeatures: 5000, mapCoordinates: 250000, mapBytes: 8000000, text: 10000});
+export function safeNumber(n: unknown): n is number { return typeof n === 'number' && Number.isFinite(n) && Math.abs(n) <= Number.MAX_SAFE_INTEGER; }
+export function boundedList(v: unknown, name: string, max: number = limits.records): asserts v is any[] {
+  if (!Array.isArray(v) || v.length > max) throw new Error(`${name} must be a list with at most ${max} records.`);
+}
+export function boundedText(v: unknown): v is string { return typeof v === 'string' && v.length <= limits.text; }

package/src/line.ts

@@ -0,0 +1,13 @@
+import { buildOption } from './builders/line.ts';
+import { use } from 'echarts/core';
+import { LineChart } 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 LineChartOptions = OptionsByKind['line'];
+export function createLineChart(host: HTMLElement, options: LineChartOptions, events: ChartEvents<ChartPoint> = {}) {
+  use([LineChart, GridComponent]);
+  return createCatalogueChart(host, 'line', options, events, buildOption);
+}

package/src/loading-state.ts

@@ -0,0 +1,39 @@
+import { createSkeleton } from '@blukavantui/community/skeleton';
+import '@blukavantui/community/skeleton.css';
+
+/** Decorative placeholders; the chart's separate status announces state changes. */
+export function chartLoadingState(host: HTMLElement) {
+  const shapes = document.createElement('div');
+  shapes.className = 'blu-chart__skeleton';
+  shapes.setAttribute('aria-hidden', 'true');
+  const key = document.createElement('div');
+  key.className = 'blu-chart__skeleton-key';
+  const first = document.createElement('div'), second = document.createElement('div');
+  key.append(first, second);
+  const plot = document.createElement('div');
+  plot.className = 'blu-chart__skeleton-plot';
+  shapes.append(key, plot);
+  const message = document.createElement('span');
+  message.className = 'blu-chart__state-message';
+  host.replaceChildren(shapes, message);
+  const skeletons = [
+    createSkeleton(first, { Shape: 'Text', Width: '88px', Height: '12px', IsAnimated: false }),
+    createSkeleton(second, { Shape: 'Text', Width: '64px', Height: '12px', IsAnimated: false }),
+    createSkeleton(plot, { Shape: 'Rectangle', Width: '100%', Height: '100%', IsAnimated: false }),
+  ];
+  let animated = false;
+  return {
+    update(busy: boolean, empty: boolean, label: string, allowMotion: boolean) {
+      host.hidden = !busy && !empty;
+      host.classList.toggle('blu-chart__state--loading', busy);
+      shapes.hidden = !busy;
+      message.textContent = label;
+      const next = busy && allowMotion;
+      if (next !== animated) {
+        animated = next;
+        skeletons.forEach(s => s.update({ IsAnimated: next }));
+      }
+    },
+    destroy() { skeletons.forEach(s => s.destroy()); },
+  };
+}

package/src/map-assets.ts

@@ -0,0 +1 @@
+export const mapUrls = {World: new URL('./maps/world.geojson', import.meta.url).href, US: new URL('./maps/us-states.geojson', import.meta.url).href};

package/src/map-resources.ts

@@ -0,0 +1,46 @@
+import { registerMap } from 'echarts/core';
+import type {GeoJSON, GeoMapOptions} from './catalogue-types.ts';
+import {validateGeoJSON,validateMapRegions} from './catalogue-model.ts';
+import {limits} from './limits.ts';
+import {mapUrls} from './map-assets.ts';
+import {boundedAwait} from './async.ts';
+
+export async function fetchMap(url:string,signal?:AbortSignal):Promise<GeoJSON> {
+  const controller=new AbortController(), abort=()=>controller.abort(signal?.reason);
+  signal?.addEventListener('abort',abort,{once:true}); if(signal?.aborted)abort();
+  try {
+    return await boundedAwait((async()=>{
+        const parsed=new URL(url,typeof location==='undefined'?'http://localhost/':location.href);
+        if(!['http:','https:'].includes(parsed.protocol)||parsed.username||parsed.password)throw new Error('Map URL must be an HTTP resource without embedded credentials.');
+        const response=await fetch(parsed.href,{signal:controller.signal,credentials:'same-origin'});
+        if(!response.ok)throw new Error(`Map resource failed (${response.status}).`);
+        if(Number(response.headers.get('Content-Length'))>limits.mapBytes)throw new Error('Map resource exceeds the size limit.');
+        let text='';
+        if(response.body) { const reader=response.body.getReader(),decoder=new TextDecoder();let bytes=0;
+          try { while(true) { const part=await reader.read();if(part.done)break;bytes+=part.value.length;if(bytes>limits.mapBytes)throw new Error('Map resource exceeds the size limit.');text+=decoder.decode(part.value,{stream:true}); }text+=decoder.decode(); }
+          finally {await reader.cancel().catch(()=>{});}
+        } else {text=await response.text();if(new TextEncoder().encode(text).length>limits.mapBytes)throw new Error('Map resource exceeds the size limit.');}
+        controller.signal.throwIfAborted(); const geo=JSON.parse(text);validateGeoJSON(geo);return geo;
+      })(),controller.signal,10000,'Map resource timed out. Retry the update.');
+  } finally {controller.abort();signal?.removeEventListener('abort',abort);}
+}
+/** Finite reusable slots prevent ECharts' global registry growing on each navigation. */
+export function createMapRegistry(register:(name:string,geo:any)=>void=registerMap,capacity=16) {
+  const slots:{name:string;signature:string;refs:number}[]=[];
+  return {
+    acquire(geo:GeoJSON) {
+      const signature=JSON.stringify(geo);
+      if(new TextEncoder().encode(signature).length>limits.mapBytes)throw new Error('Map resource exceeds the size limit.');
+      let slot=slots.find(s=>s.refs>0&&s.signature===signature);
+      if(!slot) {slot=slots.find(s=>!s.refs);if(!slot) {if(slots.length>=capacity)throw new Error('Too many different maps are active.');slot={name:`blu-charts-map-v1-${slots.length}`,signature:'',refs:0};slots.push(slot);}register(slot.name,geo);slot.signature=signature;}
+      slot.refs++;let released=false;const owned=slot;
+      return {name:slot.name,release(){if(released)return;released=true;if(!--owned.refs){owned.signature='';register(owned.name,{type:'FeatureCollection',features:[]});}}};
+    },
+    stats(){return {slots:slots.length,active:slots.filter(s=>s.refs>0).length};}
+  };
+}
+export const mapRegistry=createMapRegistry();
+export async function resolveMap(o:GeoMapOptions,signal:AbortSignal) {
+  const geo=o.Map==='Custom'?(o.GeoJSON??await fetchMap(o.MapURL!,signal)):await fetchMap(o.Map==='US'?mapUrls.US:mapUrls.World,signal);
+  signal.throwIfAborted();validateGeoJSON(geo);validateMapRegions(o,geo);return geo;
+}

package/src/messages.ts

@@ -0,0 +1,5 @@
+import type {ChartOptions} from './types.ts';
+/** The native Block maps its translatable text structure to these plain-text keys. */
+export function chartMessage(o:ChartOptions,key:string,fallback:string,values:Record<string,string>={}) {
+  return (o.Messages?.[key]??fallback).replace(/\{(\w+)\}/g,(token,name)=>values[name]??token);
+}

package/src/model.ts

@@ -0,0 +1,32 @@
+import type { ChartOptions, MixedChartOptions, HeatmapOptions, MixedPoint, HeatmapPoint } from './types.ts';
+
+export const defaults = { Title: 'Chart', Description: '', Height: 320, ValueFormat: 'Number', CurrencyCode: 'USD', Locale: 'en-US', UseCustomPrecision: false, DecimalPlaces: 2, AccessibleLabel: '', ExtendedClass: '', ResetKey: '', Messages: {}, ShowHeader: true, ShowToolbar: true, ShowLegend: true, LegendStyle: 'Standard', LegendPosition: 'Top', LegendShowValues: true, LegendShowPercentages: false, ShowTooltip: true, ShowLabels: false, ShowDataTable: true, ShowPatterns: false, EnableSelection: true, EnableAnimation: true, IsLoading: false, EmptyMessage: 'No data to display', SelectedKey: null, ExportFootnote: 'BluKavantUI Charts' } satisfies Required<ChartOptions>;
+export function formatValue(value: number | null, options: ChartOptions, compact = false) {
+  if (value === null) return options.Messages?.NoData ?? 'No data';
+  return new Intl.NumberFormat(options.Locale || 'en-US', {
+    style: options.ValueFormat === 'Currency' ? 'currency' : options.ValueFormat === 'Percent' ? 'percent' : 'decimal',
+    currency: options.CurrencyCode || 'USD', notation: compact ? 'compact' : 'standard',
+    ...(compact ? {maximumFractionDigits: 1} : options.UseCustomPrecision ? {minimumFractionDigits: options.DecimalPlaces ?? 2, maximumFractionDigits: options.DecimalPlaces ?? 2} : options.ValueFormat === 'Currency' ? {} : {maximumFractionDigits: 12}),
+  }).format(value);
+}
+/** Raw numeric data, independent of chart display precision or currency formatting. */
+export function exactValue(value: number | null, original?: string) { return value === null ? 'No data' : original ?? String(value); }
+export function mixedPoint(options: MixedChartOptions, categoryIndex: number, seriesIndex = 0): MixedPoint | null {
+  const category = options.Categories[categoryIndex], series = options.Series[seriesIndex];
+  return category && series ? { Key: category.Key, CategoryLabel: category.Label, SeriesKey: series.Key, SeriesName: series.Name, Value: series.Values[categoryIndex] } : null;
+}
+export function heatmapPoint(options: HeatmapOptions, index: number): HeatmapPoint | null {
+  const cell = options.Cells[index];
+  if (!cell) return null;
+  return { ...cell, XLabel: options.XCategories.find(c => c.Key === cell.XKey)!.Label, YLabel: options.YCategories.find(c => c.Key === cell.YKey)!.Label };
+}
+export function heatmapRange(options: HeatmapOptions) {
+  let min = 0, max = 0;
+  for (const cell of options.Cells) if (cell.Value !== null) { min = Math.min(min, cell.Value); max = Math.max(max, cell.Value); }
+  min = options.MinValue ?? min; max = options.MaxValue ?? max;
+  if (min >= max) {
+    if (options.MaxValue !== undefined) min = max - 1;
+    else max = min + 1;
+  }
+  return { min, max };
+}

package/src/motion/bar.ts

@@ -0,0 +1,15 @@
+/** Optional motion factory; preserves the original chart contract. */
+import type {ComponentMotionSettings} from '@blukavantui/community/motion/settings';
+import {configuredChart,type MotionState} from '../motion-policy.ts';
+import {use} from 'echarts/core';
+import {createChartRuntime} from '../catalogue-runtime.ts';
+import {BarChart} from 'echarts/charts';
+import {GridComponent} from 'echarts/components';
+import {buildOption as bar} from '../builders/bar.ts';
+import type {CartesianOptions,ChartPoint} from '../catalogue-types.ts';
+import type {ChartEvents} from '../types.ts';
+export function createMotionBarChart(host: HTMLElement, options: CartesianOptions, motion: MotionState, events: ChartEvents<ChartPoint> = {}, settings:ComponentMotionSettings = {}) {
+  return configuredChart(host,motion,settings,(policy,host)=>{
+      use([BarChart, GridComponent]); return createChartRuntime(host, 'bar', options, events, bar, policy);
+  });
+}

package/src/motion/doughnut.ts

@@ -0,0 +1,14 @@
+/** Optional motion factory; preserves the original chart contract. */
+import type {ComponentMotionSettings} from '@blukavantui/community/motion/settings';
+import {configuredChart,type MotionState} from '../motion-policy.ts';
+import {use} from 'echarts/core';
+import {createChartRuntime} from '../catalogue-runtime.ts';
+import {PieChart} from 'echarts/charts';
+import {buildOption as doughnut} from '../builders/doughnut.ts';
+import type {ChartPoint,CircularOptions} from '../catalogue-types.ts';
+import type {ChartEvents} from '../types.ts';
+export function createMotionDoughnutChart(host: HTMLElement, options: CircularOptions, motion: MotionState, events: ChartEvents<ChartPoint> = {}, settings:ComponentMotionSettings = {}) {
+  return configuredChart(host,motion,settings,(policy,host)=>{
+      use([PieChart]); return createChartRuntime<CircularOptions, ChartPoint>(host, 'doughnut', options, events, doughnut, policy);
+  });
+}

package/src/motion/heatmap.ts

@@ -0,0 +1,14 @@
+/** Optional motion factory; preserves the original chart contract. */
+import type {ComponentMotionSettings} from '@blukavantui/community/motion/settings';
+import {configuredChart,type MotionState} from '../motion-policy.ts';
+import {use} from 'echarts/core';
+import {createChartRuntime} from '../catalogue-runtime.ts';
+import {HeatmapChart} from 'echarts/charts';
+import {GridComponent,VisualMapComponent} from 'echarts/components';
+import {heatmapOption as heatmap} from '../builders/heatmap.ts';
+import type {ChartEvents,HeatmapOptions,HeatmapPoint} from '../types.ts';
+export function createMotionHeatmap(host: HTMLElement, options: HeatmapOptions, motion: MotionState, events: ChartEvents<HeatmapPoint> = {}, settings:ComponentMotionSettings = {}) {
+  return configuredChart(host,motion,settings,(policy,host)=>{
+      use([HeatmapChart, GridComponent, VisualMapComponent]); return createChartRuntime<HeatmapOptions, HeatmapPoint>(host, 'heatmap', options, events, heatmap, policy);
+  });
+}

package/src/motion/line.ts

@@ -0,0 +1,15 @@
+/** Optional motion factory; preserves the original chart contract. */
+import type {ComponentMotionSettings} from '@blukavantui/community/motion/settings';
+import {configuredChart,type MotionState} from '../motion-policy.ts';
+import {use} from 'echarts/core';
+import {createChartRuntime} from '../catalogue-runtime.ts';
+import {LineChart} from 'echarts/charts';
+import {GridComponent} from 'echarts/components';
+import {buildOption as line} from '../builders/line.ts';
+import type {CartesianOptions,ChartPoint} from '../catalogue-types.ts';
+import type {ChartEvents} from '../types.ts';
+export function createMotionLineChart(host: HTMLElement, options: CartesianOptions, motion: MotionState, events: ChartEvents<ChartPoint> = {}, settings:ComponentMotionSettings = {}) {
+  return configuredChart(host,motion,settings,(policy,host)=>{
+      use([LineChart, GridComponent]); return createChartRuntime(host, 'line', options, events, line, policy);
+  });
+}

package/src/motion/pie.ts

@@ -0,0 +1,14 @@
+/** Optional motion factory; preserves the original chart contract. */
+import type {ComponentMotionSettings} from '@blukavantui/community/motion/settings';
+import {configuredChart,type MotionState} from '../motion-policy.ts';
+import {use} from 'echarts/core';
+import {createChartRuntime} from '../catalogue-runtime.ts';
+import {PieChart} from 'echarts/charts';
+import {buildOption as pie} from '../builders/pie.ts';
+import type {ChartPoint,CircularOptions} from '../catalogue-types.ts';
+import type {ChartEvents} from '../types.ts';
+export function createMotionPieChart(host: HTMLElement, options: CircularOptions, motion: MotionState, events: ChartEvents<ChartPoint> = {}, settings:ComponentMotionSettings = {}) {
+  return configuredChart(host,motion,settings,(policy,host)=>{
+      use([PieChart]); return createChartRuntime<CircularOptions, ChartPoint>(host, 'pie', options, events, pie, policy);
+  });
+}

package/src/motion/radar.ts

@@ -0,0 +1,15 @@
+/** Optional motion factory; preserves the original chart contract. */
+import type {ComponentMotionSettings} from '@blukavantui/community/motion/settings';
+import {configuredChart,type MotionState} from '../motion-policy.ts';
+import {use} from 'echarts/core';
+import {createChartRuntime} from '../catalogue-runtime.ts';
+import {RadarChart} from 'echarts/charts';
+import {RadarComponent} from 'echarts/components';
+import {buildOption as radar} from '../builders/radar.ts';
+import type {ChartPoint,RadarOptions} from '../catalogue-types.ts';
+import type {ChartEvents} from '../types.ts';
+export function createMotionRadarChart(host: HTMLElement, options: RadarOptions, motion: MotionState, events: ChartEvents<ChartPoint> = {}, settings:ComponentMotionSettings = {}) {
+  return configuredChart(host,motion,settings,(policy,host)=>{
+      use([RadarChart, RadarComponent]); return createChartRuntime<RadarOptions, ChartPoint>(host, 'radar', options, events, radar, policy);
+  });
+}