@changfenhuang/dsh-genui 0.9.9 → 0.10.0

package/src/client/blocks/charts.tsx

@@ -1,9 +1,19 @@
 /**
  * Chart family: categorical palette, the sortable table, and the bars / line
  * / donut renderers. All local-first; no model round trips.
+ *
+ * Design system v3: the native charts draw in REAL CSS pixels — the plot width
+ * is measured from the container and the SVG viewBox matches it 1:1 — instead
+ * of a fixed 460×150 viewBox whose axis text scaled with the container (wide
+ * screens got oversized labels, narrow ones got unreadable ones). Every chart
+ * gets a y-axis with nice 1/2/5 ticks, and single-series bars render against a
+ * true zero line so negative values are drawn, not clamped away.
  * @module @changfenhuang/dsh-genui/client/blocks/charts
  */
-import { memo, useState } from 'react'
+import { Fragment, memo, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import type { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from 'react'
+import { writeClipboard } from '@deepseek-ai/dsh-client-ui-primitives'
+import { renderInline } from '../inline.ts'
 import css from '../GenuiBlock.module.css'
 import { GENUI_LIMITS } from '../genui-runtime/index.ts'
 import type { GenuiChart, GenuiTable } from '../spec.ts'
@@ -19,9 +29,12 @@ export const CHART_COLORS = [
   'var(--dsw-static-deepseek-300)',
 ]
 
-/** Series color: explicit color wins; multi-series auto-assign from the palette. */
-const seriesColor = (i: number, n: number, c?: string): string | undefined =>
-  c ?? (n > 1 ? CHART_COLORS[i % CHART_COLORS.length] : undefined)
+/** Series color: explicit color wins; then an explicit `palette` from the
+ *  spec; then the host categorical tokens. */
+const seriesColor = (i: number, n: number, c?: string, palette?: readonly string[]): string | undefined =>
+  c ?? (palette !== undefined && palette.length > 0
+    ? palette[i % palette.length]
+    : n > 1 ? CHART_COLORS[i % CHART_COLORS.length] : undefined)
 
 /**
  * Sortable numeric value of a cell. Human-written table cells are rarely
@@ -69,29 +82,254 @@ function numericColumns(rows: GenuiTable['rows'], nCols: number): boolean[] {
   })
 }
 
-export const TableNode = memo(function TableNode({ node }: { node: GenuiTable }) {
+/** Signed cell text (`+12.4%`, `-3`, `−2.1k`) reads as a delta without any
+ *  new spec field — the renderer classifies the string. */
+function deltaTone(value: unknown): 'up' | 'down' | null {
+  if (typeof value !== 'string') return null
+  const s = value.trim()
+  if (!/^[+][\s]*[\d.]/.test(s) && !/^[-−][\s]*[\d.]/.test(s)) return null
+  return s.startsWith('+') ? 'up' : 'down'
+}
+
+/** `types: ["spark"]` cell: comma/space separated numbers drawn as a micro
+ *  trend line (area wash + end dot, same geometry as stat.spark). */
+function CellSpark({ cell }: { cell: string | number }) {
+  const values = String(cell).split(/[\s,;]+/).map(Number).filter(Number.isFinite)
+  if (values.length < 2) return <>{String(cell)}</>
+  const W = 88
+  const H = 22
+  const pad = 2
+  const min = Math.min(...values)
+  const max = Math.max(...values)
+  const span = max - min || 1
+  const step = (W - pad * 2) / (values.length - 1)
+  const coords = values.map((v, i) => [pad + i * step, H - pad - ((v - min) / span) * (H - pad * 2)] as const)
+  const points = coords.map(([px, py]) => `${px.toFixed(1)},${py.toFixed(1)}`).join(' ')
+  const last = coords[coords.length - 1]!
+  const area = `M ${pad},${H - pad} L ${points.split(' ').join(' L ')} L ${last[0].toFixed(1)},${H - pad} Z`
+  return (
+    <svg className={css.cellSpark} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" aria-hidden="true">
+      <path d={area} fill="var(--dsl-g-accent)" opacity="0.14" />
+      <polyline points={points} fill="none" stroke="var(--dsl-g-accent)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" vectorEffect="non-scaling-stroke" />
+      <path d={`M ${last[0].toFixed(1)} ${last[1].toFixed(1)} L ${last[0].toFixed(1)} ${last[1].toFixed(1)}`} stroke="var(--dsl-g-accent)" strokeWidth={4} strokeLinecap="round" vectorEffect="non-scaling-stroke" fill="none" />
+    </svg>
+  )
+}
+
+/** `types: ["ring"]` cell: a 28px ring gauge read as 0-100. */
+function CellRing({ cell }: { cell: string | number }) {
+  const n = parseSortableNumber(cell)
+  const pct = Number.isFinite(n) ? Math.max(0, Math.min(100, n)) : 0
+  const R = 11
+  const C = 2 * Math.PI * R
+  return (
+    <span className={css.cellRing}>
+      <svg width={28} height={28} viewBox="0 0 28 28" aria-hidden="true">
+        <circle cx={14} cy={14} r={R} fill="none" strokeWidth={4} className={css.ringTrack} />
+        <circle
+          cx={14} cy={14} r={R} fill="none" strokeWidth={4} strokeLinecap="round" className={css.ringFill}
+          strokeDasharray={`${(pct / 100) * C} ${C}`} transform="rotate(-90 14 14)"
+        />
+      </svg>
+      <span className={css.cellRingText}>{String(cell)}</span>
+    </span>
+  )
+}
+
+/** Markdown table text for the 复制 Markdown chip (pipes escaped). */
+export function tableToMarkdown(columns: string[], rows: Array<Array<string | number>>): string {
+  const escape = (v: unknown): string => String(v ?? '').replace(/\|/g, '\\|').replace(/\n/g, ' ')
+  const head = `| ${columns.map(escape).join(' | ')} |`
+  const rule = `| ${columns.map(() => '---').join(' | ')} |`
+  const body = rows.map(row => `| ${columns.map((_c, i) => escape(row[i])).join(' | ')} |`)
+  return [head, rule, ...body].join('\n')
+}
+
+/** RFC 4180 CSV text for the 复制 CSV chip. */
+export function tableToCsv(rows: Array<Array<string | number>>): string {
+  const cell = (v: unknown): string => {
+    const s = String(v ?? '')
+    return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s
+  }
+  return rows.map(row => row.map(cell).join(',')).join('\n')
+}
+
+/** Copy chips above a table (`table.export`). Local clipboard only — no action,
+ *  no round trip; the label confirms for a moment and then resets. */
+function TableExportChips({ columns, rows }: { columns: string[]; rows: Array<Array<string | number>> }) {
+  const [copied, setCopied] = useState<'md' | 'csv' | null>(null)
+  const copy = (kind: 'md' | 'csv'): void => {
+    const text = kind === 'md' ? tableToMarkdown(columns, rows) : tableToCsv(rows)
+    void writeClipboard(text).then(ok => {
+      if (!ok) return
+      setCopied(kind)
+      window.setTimeout(() => setCopied(null), 1200)
+    })
+  }
+  return (
+    <div className={css.tableTools}>
+      <button type="button" className={css.tableTool} onClick={() => copy('md')}>
+        {copied === 'md' ? '已复制' : '复制 Markdown'}
+      </button>
+      <button type="button" className={css.tableTool} onClick={() => copy('csv')}>
+        {copied === 'csv' ? '已复制' : '复制 CSV'}
+      </button>
+    </div>
+  )
+}
+
+/** `types: ["bar"]` cell: an inline 0-100 track with the value printed on it. */
+function CellBar({ cell }: { cell: string | number }) {
+  const n = parseSortableNumber(cell)
+  const pct = Number.isFinite(n) ? Math.max(0, Math.min(100, n)) : 0
+  return (
+    <span className={css.cellBar}>
+      <span className={css.cellBarFill} style={{ width: `${pct}%` }} />
+      <span className={css.cellBarText}>{String(cell)}</span>
+    </span>
+  )
+}
+
+export const TableNode = memo(function TableNode({ node, renderDetail, filterValue, sortValue }: {
+  node: GenuiTable
+  /** Live value of `node.filter`: substring-match rows locally. */
+  filterValue?: string | undefined
+  /** Live value of `node.sortField`: a column header to sort by. */
+  sortValue?: string | undefined
+  /** Renders a row's detail nodes. Supplied by render-node so the table never
+   *  has to import the renderer back (import cycle). */
+  renderDetail?: ((items: NonNullable<GenuiTable['details']>[number] & object[]) => ReactNode) | undefined
+}) {
   const columns = node.columns.slice(0, GENUI_LIMITS.maxTableCols)
   const rows = node.rows.slice(0, GENUI_LIMITS.maxTableRows)
+  const types = node.types ?? []
+  const groupMode = types[0] === 'group'
   const [sort, setSort] = useState<{ col: number; dir: 1 | -1 } | null>(null)
-  const sorted = sort === null
-    ? rows
-    : [...rows].sort((a, b) => {
-      const an = parseSortableNumber(a[sort.col])
-      const bn = parseSortableNumber(b[sort.col])
-      if (Number.isFinite(an) && Number.isFinite(bn) && an !== bn) return (an - bn) * sort.dir
-      if (Number.isFinite(an) !== Number.isFinite(bn)) return Number.isFinite(an) ? -sort.dir : sort.dir
-      const as = String(a[sort.col] ?? '')
-      const bs = String(b[sort.col] ?? '')
-      return (as < bs ? -1 : as > bs ? 1 : 0) * sort.dir
+  const [collapsed, setCollapsed] = useState<ReadonlySet<number>>(() => new Set())
+  const [expanded, setExpanded] = useState<ReadonlySet<number>>(() => new Set())
+
+  const compare = (a: GenuiTable['rows'][number], b: GenuiTable['rows'][number], col: number, dir: 1 | -1): number => {
+    const an = parseSortableNumber(a[col])
+    const bn = parseSortableNumber(b[col])
+    if (Number.isFinite(an) && Number.isFinite(bn) && an !== bn) return (an - bn) * dir
+    if (Number.isFinite(an) !== Number.isFinite(bn)) return Number.isFinite(an) ? -dir : dir
+    const as = String(a[col] ?? '')
+    const bs = String(b[col] ?? '')
+    return (as < bs ? -1 : as > bs ? 1 : 0) * dir
+  }
+
+  // Group header rows: with `types[0] === 'group'`, a row whose first cell is
+  // filled and every other cell empty opens a section. Data rows after it are
+  // its CHILDREN — indented, counted, and collapsible — so the relationship is
+  // unmistakable instead of "one more row at the same level".
+  const isGroupRow = (row: GenuiTable['rows'][number]): boolean =>
+    groupMode && String(row[0] ?? '').trim() !== ''
+    && row.slice(1).every(cell => String(cell ?? '').trim() === '')
+
+  // Local filtering (bound control): the model ships the full data set once and
+  // the reader narrows it live — no round trip, no re-generation.
+  const needle = filterValue?.trim().toLowerCase()
+  const filtered = needle === undefined || needle === ''
+    ? rows.map((row, index) => ({ row, index }))
+    : rows.map((row, index) => ({ row, index })).filter(({ row }) => {
+      const cells = node.filterColumn === undefined
+        ? row
+        : [row[node.filterColumn]]
+      return cells.some(cell => String(cell ?? '').toLowerCase().includes(needle))
     })
+  const visibleRows = filtered.map(entry => entry.row)
+  const hiddenCount = rows.length - visibleRows.length
+
+  interface Section { header: { row: GenuiTable['rows'][number]; index: number } | null; children: Array<{ row: GenuiTable['rows'][number]; index: number }> }
+  const sections: Section[] = []
+  visibleRows.forEach((row, index) => {
+    if (isGroupRow(row)) { sections.push({ header: { row, index }, children: [] }); return }
+    if (sections.length === 0 || sections[sections.length - 1]!.header === null) {
+      if (sections.length === 0) sections.push({ header: null, children: [] })
+    }
+    sections[sections.length - 1]!.children.push({ row, index })
+  })
+
+  // Sorting keeps sections intact: each section's children sort among
+  // themselves, so a grouped table can never scramble its own structure.
+  // `sortField` is a select whose value is a column header: apply it as the
+  // active sort (a click on the header still overrides it).
+  const boundSortCol = sortValue === undefined ? -1 : columns.indexOf(sortValue)
+  const effectiveSort = sort !== null ? sort : (boundSortCol >= 0 ? { col: boundSortCol, dir: 1 as const } : null)
+
+  const sortedSections = sections.map(section => ({
+    header: section.header,
+    children: effectiveSort === null
+      ? section.children
+      : [...section.children].sort((a, b) => compare(a.row, b.row, effectiveSort.col, effectiveSort.dir)),
+  }))
+
+  const numeric = numericColumns(visibleRows, columns.length)
+  const toggleSection = (index: number): void => {
+    setCollapsed(prev => {
+      const next = new Set(prev)
+      if (next.has(index)) next.delete(index)
+      else next.add(index)
+      return next
+    })
+  }
+  const toggleDetail = (index: number): void => {
+    setExpanded(prev => {
+      const next = new Set(prev)
+      if (next.has(index)) next.delete(index)
+      else next.add(index)
+      return next
+    })
+  }
   const clickHeader = (i: number): void => {
     setSort(prev => prev !== null && prev.col === i
       ? prev.dir === 1 ? { col: i, dir: -1 } : null
       : { col: i, dir: 1 })
   }
-  const numeric = numericColumns(rows, columns.length)
+  // Optional 合计 footer: sums every numeric column (section headers excluded).
+  const totals = columns.map((_c, j) => {
+    if (!numeric[j]) return null
+    let sum = 0
+    for (const row of visibleRows) {
+      if (isGroupRow(row)) continue
+      const n = parseSortableNumber(row[j])
+      if (Number.isFinite(n)) sum += n
+    }
+    return sum
+  })
+  const hasTotals = node.total === true && totals.some(t => t !== null)
+  const formatTotal = (n: number): string =>
+    Number.isInteger(n) ? n.toLocaleString('en-US') : String(Math.round(n * 100) / 100)
+
+  const renderCell = (cell: string | number, j: number, rowIndex: number): ReactNode => {
+    const type = types[j]
+    const tone = type === 'delta'
+      ? (String(cell).trim().startsWith('-') ? 'down' : 'up')
+      : deltaTone(cell)
+    return (
+      <td key={j} className={numeric[j] || type === 'num' ? css.tdNum : undefined}>
+        {type === 'badge'
+          ? <span className={css.cellBadge}>{String(cell)}</span>
+          : type === 'bar'
+            ? <CellBar cell={cell} />
+            : type === 'spark'
+              ? <CellSpark cell={cell} />
+              : type === 'ring'
+                ? <CellRing cell={cell} />
+                : type === 'index'
+                  ? <span className={css.cellIndex}>{rowIndex + 1}</span>
+                  : tone === null
+                    // Text cells honour inline markup; numeric/badge/spark
+                    // cells stay literal (a number has nothing to emphasise).
+                    ? renderInline(String(cell))
+                    : <span className={`${css.tdDelta} ${tone === 'up' ? css.tdDeltaUp : css.tdDeltaDown}`}>{String(cell)}</span>}
+      </td>
+    )
+  }
+
   return (
     <div className={css.tableWrap}>
+      {node.export === true && <TableExportChips columns={columns} rows={rows} />}
       <table className={css.table}>
         <thead>
           <tr>
@@ -110,161 +348,535 @@ export const TableNode = memo(function TableNode({ node }: { node: GenuiTable })
           </tr>
         </thead>
         <tbody>
-          {sorted.map((row, i) => (
-            <tr key={i}>{row.slice(0, columns.length).map((cell, j) => (
-              <td key={j} className={numeric[j] ? css.tdNum : undefined}>{String(cell)}</td>
-            ))}</tr>
-          ))}
+          {sortedSections.map((section, si) => {
+            const headerIndex = section.header?.index ?? si
+            const isCollapsed = collapsed.has(headerIndex)
+            return (
+              <Fragment key={section.header === null ? `s-${si}` : `g-${section.header.index}`}>
+                {section.header !== null && (
+                  <tr className={css.groupRow}>
+                    <td colSpan={columns.length}>
+                      <button
+                        type="button"
+                        className={css.groupToggle}
+                        aria-expanded={!isCollapsed}
+                        onClick={() => toggleSection(headerIndex)}
+                      >
+                        <span className={css.groupChevron} aria-hidden>{isCollapsed ? '▸' : '▾'}</span>
+                        {String(section.header.row[0])}
+                        <span className={css.groupCount}>{section.children.length}</span>
+                      </button>
+                    </td>
+                  </tr>
+                )}
+                {!isCollapsed && section.children.map(child => {
+                  const detail = node.details?.[child.index] ?? null
+                  const open = expanded.has(child.index)
+                  return (
+                    <Fragment key={child.index}>
+                      <tr className={section.header === null ? undefined : css.groupChild}>
+                        {child.row.slice(0, columns.length).map((cell, j) => (
+                          j === 0 && detail !== null
+                            ? (
+                              <td key={j} className={css.detailCell}>
+                                <button
+                                  type="button"
+                                  className={css.detailToggle}
+                                  aria-expanded={open}
+                                  onClick={() => toggleDetail(child.index)}
+                                >
+                                  <span className={css.detailChevron} data-open={open} aria-hidden>▸</span>
+                                  {String(cell)}
+                                </button>
+                              </td>
+                            )
+                            : renderCell(cell, j, child.index)
+                        ))}
+                      </tr>
+                      {open && detail !== null && (
+                        <tr className={css.detailRow}>
+                          <td colSpan={columns.length}>
+                            <div className={css.detailBody}>
+                              {renderDetail === undefined ? null : renderDetail(detail)}
+                            </div>
+                          </td>
+                        </tr>
+                      )}
+                    </Fragment>
+                  )
+                })}
+              </Fragment>
+            )
+          })}
         </tbody>
+        {hiddenCount > 0 && (
+          <tfoot>
+            <tr className={css.filterRow}>
+              <td colSpan={columns.length}>筛选后 {visibleRows.length} / {rows.length} 行</td>
+            </tr>
+          </tfoot>
+        )}
+        {hasTotals && (
+          <tfoot>
+            <tr>
+              {columns.map((_c, j) => (
+                <td key={j} className={numeric[j] ? css.tdNum : undefined}>
+                  {j === 0 ? '合计' : totals[j] === null ? '' : formatTotal(totals[j]!)}
+                </td>
+              ))}
+            </tr>
+          </tfoot>
+        )}
       </table>
     </div>
   )
 })
 
-/** Chart: bars (default), line (trend), or donut (share); multi-series bars via `series`.
- *  memoized: the spec node is a stable reference, so a keystroke in a sibling
- *  field no longer re-renders the whole chart. */
-export const ChartNode = memo(function ChartNode({ chart }: { chart: GenuiChart }) {
-  const kind = chart.kind ?? 'bars'
-  if (kind === 'donut') return <DonutNode chart={chart} />
-  if (kind === 'line') return <LineChartNode chart={chart} />
-  return <BarsNode chart={chart} />
+/** One tooltip line: label on the left, value on the right. */
+type TipRow = [string, string]
+
+interface TipState { x: number; y: number; rows: TipRow[] }
+
+/**
+ * Instant, self-drawn hover readout. The browser's native `title` takes about
+ * a second to appear and cannot show a stacked breakdown, which is exactly
+ * what a stacked bar needs ("hover 上去要会显示各自部分的具体数值").
+ */
+function useChartTip(): {
+  tip: TipState | null
+  show: (event: ReactMouseEvent<Element>, rows: TipRow[]) => void
+  hide: () => void
+} {
+  const [tip, setTip] = useState<TipState | null>(null)
+  const show = useCallback((event: ReactMouseEvent<Element>, rows: TipRow[]) => {
+    const target = event.currentTarget as Element
+    const host = target.closest('[data-genui-chart], [data-genui-line], [data-genui-donut]')
+    if (host === null) return
+    const hostRect = host.getBoundingClientRect()
+    const rect = target.getBoundingClientRect()
+    setTip({
+      x: rect.left - hostRect.left + rect.width / 2,
+      y: rect.top - hostRect.top,
+      rows,
+    })
+  }, [])
+  const hide = useCallback(() => setTip(null), [])
+  return { tip, show, hide }
+}
+
+function ChartTip({ tip }: { tip: TipState | null }) {
+  if (tip === null) return null
+  return (
+    <div className={css.chartTip} style={{ left: `${tip.x}px`, top: `${tip.y}px` }} role="tooltip">
+      {tip.rows.map(([label, value], i) => (
+        <span key={`${label}-${i}`} className={css.chartTipRow}>
+          <span>{label}</span>
+          <span className={css.chartTipValue}>{value}</span>
+        </span>
+      ))}
+    </div>
+  )
+}
+
+/** Measured plot width. Charts draw in CSS pixels: 1 SVG unit = 1px, so axis
+ *  text keeps its designed size at every container width. */
+function useMeasuredWidth(): [RefObject<HTMLDivElement>, number] {
+  const ref = useRef<HTMLDivElement>(null)
+  const [width, setWidth] = useState(560)
+  useLayoutEffect(() => {
+    const el = ref.current
+    if (el === null) return
+    const measure = (): void => {
+      const next = el.clientWidth
+      if (next > 0) setWidth(next)
+    }
+    measure()
+    if (typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver(measure)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [])
+  return [ref, width]
+}
+
+/** Axis ticks on 1/2/5×10^n steps covering [min, max] inclusively. */
+function niceTicks(min: number, max: number, target = 4): number[] {
+  const lo = Math.min(min, 0)
+  const hi = Math.max(max, 0)
+  if (lo === hi) return [0, 1]
+  const raw = (hi - lo) / Math.max(target, 1)
+  const magnitude = Math.pow(10, Math.floor(Math.log10(Math.max(raw, Number.MIN_VALUE))))
+  const normalized = raw / magnitude
+  const step = (normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10) * magnitude
+  const start = Math.floor(lo / step) * step
+  const end = Math.ceil(hi / step) * step
+  const ticks: number[] = []
+  for (let t = start; t <= end + step / 2; t += step) ticks.push(Math.abs(t) < step / 1e6 ? 0 : t)
+  return ticks
+}
+
+/** Compact tick text: 1200 → 1.2k, 0.5 → 0.5, integers bare. */
+function formatTick(t: number): string {
+  const abs = Math.abs(t)
+  if (abs >= 1e9) return `${(t / 1e9).toFixed(abs % 1e9 === 0 ? 0 : 1)}b`
+  if (abs >= 1e6) return `${(t / 1e6).toFixed(abs % 1e6 === 0 ? 0 : 1)}m`
+  if (abs >= 1000) return `${(t / 1000).toFixed(abs % 1000 === 0 ? 0 : 1)}k`
+  if (Number.isInteger(t)) return String(t)
+  return String(Math.round(t * 100) / 100)
+}
+
+/** Shared y-axis gutter: ticks positioned against the same percentage scale
+ *  the plot uses, so labels line up with the gridlines. */
+function YAxis({ ticks, lo, span }: { ticks: number[]; lo: number; span: number }) {
+  return (
+    <div className={css.chartYAxis} style={{ height: 160 }}>
+      {ticks.map(t => (
+        <span key={t} className={css.chartYTick} style={{ bottom: `${((t - lo) / span) * 100}%` }}>
+          {formatTick(t)}
+        </span>
+      ))}
+    </div>
+  )
+}
+
+/** Chart: bars (default), line (trend), or donut (share); multi-series bars via `series`. */
+export const ChartNode = memo(function ChartNode({ chart, filterValue }: {
+  chart: GenuiChart
+  /** Live value of the control bound via `chart.filter`; keeps matching
+   *  categories only (label substring), so a chart is explorable locally. */
+  filterValue?: string | undefined
+}) {
+  const filtered = useMemo(() => applyChartFilter(chart, filterValue), [chart, filterValue])
+  const kind = filtered.kind ?? 'bars'
+  if (kind === 'donut') return <DonutNode chart={filtered} />
+  if (kind === 'line') return <LineChartNode chart={filtered} />
+  return <BarsNode chart={filtered} />
 })
 
-/** Bars: one column per datum (grouped bars when `series` is present). */
+/** Keep the categories whose label matches the bound filter (case-insensitive).
+ *  Bars/donut filter `data`, line filters each series' points. */
+function applyChartFilter(chart: GenuiChart, filterValue: string | undefined): GenuiChart {
+  const needle = filterValue?.trim().toLowerCase()
+  if (needle === undefined || needle === '') return chart
+  const keep = (datum: { label: string }): boolean => datum.label.toLowerCase().includes(needle)
+  const data = chart.data.filter(keep)
+  if (chart.series === undefined) return data.length === chart.data.length ? chart : { ...chart, data }
+  const series = chart.series.map(entry => ({ ...entry, data: entry.data.filter(keep) }))
+  return { ...chart, data, series }
+}
+
+/** Bars: one column per datum (grouped bars when `series` is present).
+ *  Single-series bars render against a true zero line, so negative values
+ *  draw downward instead of clamping to zero height. */
 export const BarsNode = memo(function BarsNode({ chart }: { chart: GenuiChart }) {
+  const { tip, show, hide } = useChartTip()
   const grouped = chart.series !== undefined ? chart.series.slice(0, GENUI_LIMITS.maxPlotSeries) : undefined
-  if (grouped !== undefined && grouped.length > 0) {
-    const labels = grouped[0]!.data.map(d => d.label)
-    const max = Math.max(...grouped.flatMap(s => s.data.map(d => Number(d.value) || 0)), 1)
+  const isGrouped = grouped !== undefined && grouped.length > 0
+  const data = chart.data.slice(0, GENUI_LIMITS.maxChartPoints)
+  const labels = isGrouped ? grouped[0]!.data.map(d => d.label) : data.map(d => d.label)
+  const seriesValues = isGrouped
+    ? grouped.map(s => s.data.map(d => Number(d.value) || 0))
+    : [data.map(d => Number(d.value) || 0)]
+  const colors = seriesValues.map((_values, si) =>
+    seriesColor(si, seriesValues.length, isGrouped ? grouped[si]?.color : undefined, chart.palette) ?? 'var(--dsw-alias-state-business-primary, #4f8ef7)')
+  const flat = seriesValues.flat()
+  const showValues = labels.length <= 12
+  const stacked = chart.stacked === true && isGrouped
+  const categoryTotals = labels.map((_l, i) => seriesValues.reduce((sum, values) => sum + Math.max(0, values[i] ?? 0), 0))
+
+  // Horizontal: label column + one track per series. The axis is always
+  // 0..max (a horizontal track has no zero line to cross).
+  if (chart.horizontal === true) {
+    const scale = Math.max(Math.max(...flat, 0), 1)
+    const legend = isGrouped
+      ? (
+        <div className={css.chartLegend}>
+          {grouped.map((entry, si) => (
+            <span key={si} className={css.legendItem}>
+              <span className={css.legendSwatch} style={{ background: colors[si] }} />
+              {entry.label}
+            </span>
+          ))}
+        </div>
+      )
+      : null
     return (
-      <div className={css.chart} data-genui-chart="bars">
+      <div className={css.chart} data-genui-chart="bars" role="img" aria-label={`横向柱状图，${labels.length} 组`} onMouseLeave={hide}>
+        <div className={css.hbars}>
+          {labels.map((label, i) => (
+            <div key={i} className={css.hbarRow}>
+              <span className={css.hbarLabel} title={label}>{label}</span>
+              <div className={css.hbarTracks}>
+                {stacked
+                  ? (
+                    <div className={css.hbarTrack} title={`${label}: ${categoryTotals[i] ?? 0}`}>
+                      {seriesValues.map((values, si) => {
+                        const v = Math.max(0, values[i] ?? 0)
+                        const total = categoryTotals[i] ?? 0
+                        const width = total === 0 ? 0 : (v / total) * Math.max(0, Math.min(100, (total / scale) * 100))
+                        return (
+                          <div
+                            key={si}
+                            className={css.hbarSeg}
+                            style={{ width: `${width}%`, background: colors[si] }}
+                            onMouseEnter={event => show(event, [[grouped[si]!.label, String(v)], ['合计', String(total)]])}
+                            onMouseMove={event => show(event, [[grouped[si]!.label, String(v)], ['合计', String(total)]])}
+                          />
+                        )
+                      })}
+                    </div>
+                  )
+                  : seriesValues.map((values, si) => {
+                    const v = values[i] ?? 0
+                    const width = Math.max(0, Math.min(100, (Math.max(0, v) / scale) * 100))
+                    return (
+                      <div key={si} className={css.hbarTrack}>
+                        <div
+                          className={css.hbarFill}
+                          style={{ width: `${width}%`, background: colors[si] }}
+                          onMouseEnter={event => show(event, isGrouped ? [[grouped[si]!.label, String(v)], ['合计', String(categoryTotals[i] ?? 0)]] : [[label, String(v)]])}
+                          onMouseMove={event => show(event, isGrouped ? [[grouped[si]!.label, String(v)], ['合计', String(categoryTotals[i] ?? 0)]] : [[label, String(v)]])}
+                        />
+                      </div>
+                    )
+                  })}
+              </div>
+              {showValues && (
+                <span className={css.hbarValue}>
+                  {isGrouped ? categoryTotals[i] ?? 0 : String(data[i]?.value ?? '')}
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+        {legend}
+        <ChartTip tip={tip} />
+      </div>
+    )
+  }
+
+  // Vertical: grouped bars clamp negatives (the flex layout stacks upward), so
+  // the axis starts at zero for that shape; single-series bars render against
+  // a true zero line and draw negatives downward.
+  const ticks = niceTicks(isGrouped ? 0 : Math.min(...flat, 0), Math.max(...flat, 0), 4)
+  const lo = ticks[0]!
+  const hi = ticks[ticks.length - 1]!
+  const span = hi - lo || 1
+  const pct = (v: number): number => ((v - lo) / span) * 100
+  const zero = pct(0)
+  const summary = `柱状图，${labels.length} 组，最大 ${formatTick(Math.max(...flat, 0))}`
+  return (
+    <div className={css.chart} data-genui-chart="bars" role="img" aria-label={summary} onMouseLeave={hide}>
+      <ChartTip tip={tip} />
+      <div className={css.chartBody}>
+        <YAxis ticks={ticks} lo={lo} span={span} />
         <div className={css.chartPlot}>
-          {[0, 25, 50, 75].map(p => (
-            <span key={p} className={p === 0 ? css.baseline : css.gridline} style={{ bottom: `${p}%` }} />
+          {ticks.map(t => (
+            <span key={t} className={t === 0 ? css.baseline : css.gridline} style={{ bottom: `${pct(t)}%` }} />
           ))}
-          {labels.map((_, i) => (
+          {labels.map((label, i) => (
             <div key={i} className={css.barCol}>
-              <div className={css.groupedBars}>
-                {grouped.map((s, si) => {
-                  const d = s.data[i]
-                  // Cap at 82% so the per-bar value annotation stays inside
-                  // the plot; negatives clamp to a zero-height bar.
-                  const v = d === undefined ? 0 : Number(d.value) || 0
-                  const h = d === undefined ? 0 : Math.min(Math.round((Math.max(0, v) / max) * 100), 82)
+              {stacked
+                ? (
+                  <>
+                    {showValues && (
+                      <span className={css.barValue} style={{ bottom: `calc(${pct(categoryTotals[i] ?? 0)}% + 4px)` }}>
+                        {String(categoryTotals[i] ?? 0)}
+                      </span>
+                    )}
+                    <div className={css.stack} style={{ height: `${Math.max(0, pct(categoryTotals[i] ?? 0))}%` }}>
+                      {grouped.map((entry, si) => {
+                        const datum = entry.data[i]
+                        const raw = datum === undefined ? 0 : Number(datum.value) || 0
+                        const v = Math.max(0, raw)
+                        const total = categoryTotals[i] ?? 0
+                        const segHeight = total === 0 ? 0 : (v / total) * pct(total)
+                        const rows: TipRow[] = [[entry.label, String(raw)], ['合计', String(total)]]
+                        return (
+                          <div
+                            key={si}
+                            className={css.stackSeg}
+                            style={{ height: total === 0 ? '0%' : `${(v / total) * 100}%`, background: colors[si] }}
+                            onMouseEnter={event => show(event, rows)}
+                            onMouseMove={event => show(event, rows)}
+                          >
+                            {segHeight >= 11 && <span className={css.stackValue}>{raw}</span>}
+                          </div>
+                        )
+                      })}
+                    </div>
+                  </>
+                )
+                : isGrouped
+                ? (
+                  <div className={css.groupedBars}>
+                    {grouped.map((entry, si) => {
+                      const datum = entry.data[i]
+                      const v = datum === undefined ? 0 : Number(datum.value) || 0
+                      return (
+                        <div key={si} className={css.groupedBar}>
+                          {showValues && <span className={css.groupValue}>{datum === undefined ? '' : String(datum.value)}</span>}
+                          <div
+                            className={css.groupedFill}
+                            style={{
+                              height: `${Math.max(0, pct(Math.max(0, v)))}%`,
+                              background: colors[si],
+                            }}
+                            onMouseEnter={event => show(event, [[entry.label, String(datum?.value ?? '')], ['合计', String(categoryTotals[i] ?? 0)]])}
+                            onMouseMove={event => show(event, [[entry.label, String(datum?.value ?? '')], ['合计', String(categoryTotals[i] ?? 0)]])}
+                          />
+                        </div>
+                      )
+                    })}
+                  </div>
+                )
+                : (() => {
+                  const v = seriesValues[0]![i] ?? 0
+                  const top = Math.max(pct(v), zero)
+                  const bottom = Math.min(pct(v), zero)
                   return (
-                    <div key={si} className={css.groupedBar} title={d === undefined ? s.label : `${s.label}: ${String(d.value)}`}>
-                      <span className={css.groupValue}>{d === undefined ? '' : String(d.value)}</span>
+                    <>
+                      {showValues && (
+                        <span className={css.barValue} style={{ bottom: `calc(${top}% + 4px)` }}>{String(data[i]?.value ?? '')}</span>
+                      )}
                       <div
-                        className={css.groupedFill}
+                        className={css.barFill}
                         style={{
-                          height: `${h}%`,
-                          background: seriesColor(si, grouped.length, s.color) ?? 'var(--dsw-alias-state-business-primary, #4f8ef7)',
+                          bottom: `${bottom}%`,
+                          height: `${Math.max(top - bottom, 0.6)}%`,
+                          ...(v < 0 ? { borderRadius: '0 0 5px 5px' } : {}),
+                          ...(data[i]?.color !== undefined ? { background: data[i]!.color } : {}),
                         }}
+                        onMouseEnter={event => show(event, [[label, String(data[i]?.value ?? '')]])}
+                        onMouseMove={event => show(event, [[label, String(data[i]?.value ?? '')]])}
                       />
-                    </div>
+                    </>
                   )
-                })}
-              </div>
+                })()}
             </div>
           ))}
         </div>
-        <div className={css.chartLabels}>
-          {labels.map(label => <span key={label} className={css.barLabel}>{label}</span>)}
-        </div>
-      </div>
-    )
-  }
-  const data = chart.data.slice(0, GENUI_LIMITS.maxChartPoints)
-  // Negative values clamp to a zero-height bar (the value annotation still
-  // shows the real number) — a negative `height` percentage is invalid CSS
-  // and used to collapse the bar entirely.
-  const max = Math.max(...data.map(d => Number(d.value) || 0), 1)
-  return (
-    <div className={css.chart} data-genui-chart="bars">
-      <div className={css.chartPlot}>
-        {[0, 25, 50, 75].map(p => (
-          <span key={p} className={p === 0 ? css.baseline : css.gridline} style={{ bottom: `${p}%` }} />
-        ))}
-        {data.map((d, i) => {
-          // Cap at 85% so the value annotation always stays inside the plot.
-          const v = Number(d.value) || 0
-          const h = Math.min(Math.round((Math.max(0, v) / max) * 100), 85)
-          return (
-            <div key={i} className={css.barCol} title={`${d.label}: ${String(d.value)}`}>
-              <span className={css.barValue}>{String(d.value)}</span>
-              <div className={css.barFill} style={{ height: `${h}%`, ...(d.color !== undefined ? { background: d.color } : {}) }} />
-            </div>
-          )
-        })}
       </div>
       <div className={css.chartLabels}>
-        {data.map(d => <span key={d.label} className={css.barLabel}>{d.label}</span>)}
+        {labels.map((label, i) => <span key={`${label}-${i}`} className={css.barLabel}>{label}</span>)}
       </div>
+      {isGrouped && (
+        <div className={css.chartLegend}>
+          {grouped.map((entry, si) => (
+            <span key={si} className={css.legendItem}>
+              <span className={css.legendSwatch} style={{ background: colors[si] }} />
+              {entry.label}
+            </span>
+          ))}
+        </div>
+      )}
     </div>
   )
 })
 
-/** Line: polyline over a fixed-height plot area with a readable Y axis —
- * four evenly spaced gridlines + tick labels (design system v2 skeleton). */
+/** Line: responsive polyline with an area wash, nice y ticks and sampled x
+ *  labels drawn in SVG at their real size. */
 export const LineChartNode = memo(function LineChartNode({ chart }: { chart: GenuiChart }) {
+  const [ref, measured] = useMeasuredWidth()
+  const { tip, show, hide } = useChartTip()
+  const gradientId = `genui-line-${useId().replace(/:/g, '')}`
+  const grouped = chart.series !== undefined && chart.series.length > 0
+    ? chart.series.slice(0, GENUI_LIMITS.maxPlotSeries)
+    : undefined
   const data = chart.data.slice(0, GENUI_LIMITS.maxChartPoints)
-  const W = 460
-  const H = 150
-  const padL = 36
-  const padR = 8
-  const padT = 10
-  const padB = 6
-  const max = Math.max(...data.map(d => Number(d.value) || 0), 1)
-  const min = Math.min(...data.map(d => Number(d.value) || 0), 0)
-  const span = max - min || 1
-  const n = Math.max(data.length - 1, 1)
-  const pt = (i: number, v: number): [number, number] => [
-    padL + (i / n) * (W - padL - padR),
-    padT + (1 - (v - min) / span) * (H - padT - padB),
-  ]
-  const d = data.map((datum, i) => pt(i, Number(datum.value) || 0))
-  const path = d.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ')
-  const ticks = [0, 1, 2, 3].map(i => min + (span * i) / 3)
-  const formatTick = (t: number): string => {
-    const abs = Math.abs(t)
-    if (abs >= 1000) return `${(t / 1000).toFixed(abs % 1000 === 0 ? 0 : 1)}k`
-    if (Number.isInteger(t)) return String(t)
-    return t.toFixed(1)
-  }
+  const labels = grouped !== undefined ? grouped[0]!.data.map(d => d.label) : data.map(d => d.label)
+  const seriesValues = grouped !== undefined
+    ? grouped.map(entry => entry.data.map(d => Number(d.value) || 0))
+    : [data.map(d => Number(d.value) || 0)]
+  const colors = seriesValues.map((_values, si) =>
+    seriesColor(si, seriesValues.length, grouped !== undefined ? grouped[si]?.color : undefined, chart.palette) ?? 'var(--dsl-g-accent)')
+  const multi = seriesValues.length > 1
+  const flat = seriesValues.flat()
+  const pointCount = Math.max(...seriesValues.map(values => values.length), 0)
+  const W = Math.max(measured, 260)
+  const H = 176
+  const padL = 44
+  const padR = 12
+  const padT = 14
+  const padB = 26
+  const ticks = niceTicks(Math.min(...flat, 0), Math.max(...flat, 0), 4)
+  const lo = ticks[0]!
+  const hi = ticks[ticks.length - 1]!
+  const span = hi - lo || 1
+  const innerW = W - padL - padR
+  const innerH = H - padT - padB
+  const x = (i: number): number => padL + (pointCount <= 1 ? innerW / 2 : (i / (pointCount - 1)) * innerW)
+  const y = (v: number): number => padT + (1 - (v - lo) / span) * innerH
+  const paths = seriesValues.map(values =>
+    values.map((v, i) => `${i === 0 ? 'M' : 'L'} ${x(i).toFixed(1)} ${y(v).toFixed(1)}`).join(' '))
+  const area = !multi && pointCount > 1
+    ? `${paths[0]} L ${x(pointCount - 1).toFixed(1)} ${y(lo).toFixed(1)} L ${x(0).toFixed(1)} ${y(lo).toFixed(1)} Z`
+    : null
+  // Keep x labels readable: at most one per ~64px of plot width.
+  const labelStep = Math.max(1, Math.ceil(pointCount / Math.max(1, Math.floor(innerW / 64))))
+  const summary = `折线图，${multi ? `${seriesValues.length} 条序列` : `${pointCount} 个点`}，范围 ${formatTick(Math.min(...flat, 0))} 到 ${formatTick(Math.max(...flat, 0))}`
   return (
-    <div className={css.lineChart} data-genui-chart="line">
-      <svg width="100%" viewBox={`0 0 ${W} ${H}`}>
+    <div className={css.lineChart} data-genui-chart="line" data-genui-line ref={ref} role="img" aria-label={summary} onMouseLeave={hide}>
+      <ChartTip tip={tip} />
+      <svg width="100%" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none">
+        <defs>
+          <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="var(--dsl-g-accent)" stopOpacity="0.22" />
+            <stop offset="100%" stopColor="var(--dsl-g-accent)" stopOpacity="0.02" />
+          </linearGradient>
+        </defs>
         {ticks.map((t, i) => {
-          const y = padT + (1 - (t - min) / span) * (H - padT - padB)
+          const ty = y(t)
           return (
-            <g key={i}>
-              <line x1={padL} x2={W - padR} y1={y} y2={y} className={i === 0 ? css.lineGridAxis : css.lineGrid} />
-              <text x={padL - 6} y={y + 3} textAnchor="end" className={css.lineTick}>{formatTick(t)}</text>
+            <g key={t}>
+              <line x1={padL} x2={W - padR} y1={ty} y2={ty} className={i === 0 ? css.lineGridAxis : css.lineGrid} />
+              <text x={padL - 8} y={ty + 4} textAnchor="end" className={css.lineTick}>{formatTick(t)}</text>
             </g>
           )
         })}
-        {data.map((datum, i) => {
-          const [x, y] = pt(i, Number(datum.value) || 0)
+        {area !== null && <path d={area} fill={`url(#${gradientId})`} />}
+        {paths.map((d, si) => <path key={si} d={d} className={css.linePath} style={{ stroke: colors[si] }} />)}
+        {seriesValues.map((values, si) => values.map((v, i) => {
+          const rows: TipRow[] = multi
+            ? [[grouped![si]!.label, String(v)], ['节点', labels[i] ?? '']]
+            : [[labels[i] ?? '', String(v)]]
           return (
-            <circle key={i} cx={x} cy={y} r={3} className={css.lineDot} fill={datum.color ?? undefined}>
-              <title>{`${datum.label}: ${String(datum.value)}`}</title>
-            </circle>
+            <circle
+              key={`${si}-${i}`}
+              cx={x(i)}
+              cy={y(v)}
+              r={multi ? 3 : 3.5}
+              className={css.lineDot}
+              style={{ fill: colors[si] }}
+              onMouseEnter={event => show(event, rows)}
+              onMouseMove={event => show(event, rows)}
+            />
           )
-        })}
-        <path d={path} className={css.linePath} />
+        }))}
+        {labels.map((label, i) => (
+          i % labelStep === 0
+            ? <text key={`l-${i}`} x={x(i)} y={H - 8} textAnchor="middle" className={css.lineLabel}>{label}</text>
+            : null
+        ))}
       </svg>
-      <div className={css.lineLabels}>
-        {data.map((d, i) => <span key={i} className={css.barLabel}>{d.label}</span>)}
-      </div>
+      {multi && (
+        <div className={css.chartLegend}>
+          {grouped!.map((entry, si) => (
+            <span key={si} className={css.legendItem}>
+              <span className={css.legendSwatch} style={{ background: colors[si] }} />
+              {entry.label}
+            </span>
+          ))}
+        </div>
+      )}
     </div>
   )
 })
 
-/** Donut: share of total with a center total. Negative values contribute
- * zero arc (a negative dasharray segment used to produce an invalid
- * stroke-dasharray and the browser drew the FULL circle instead). */
+/** Donut: share of total with a center total and a legend that shows each
+ *  slice's value AND percentage (the old legend was unstyled text). */
 export const DonutNode = memo(function DonutNode({ chart }: { chart: GenuiChart }) {
+  const { tip, show, hide } = useChartTip()
   const data = chart.data.slice(0, GENUI_LIMITS.maxChartPoints)
   const clamped = data.map(d => ({ ...d, v: Math.max(0, Number(d.value) || 0) }))
   const total = clamped.reduce((s, d) => s + d.v, 0) || 1
@@ -273,47 +885,52 @@ export const DonutNode = memo(function DonutNode({ chart }: { chart: GenuiChart
   const totalText = total >= 1000
     ? `${Math.round(total / 100) / 10}k`
     : Number.isInteger(total) ? String(total) : total.toFixed(1)
-  const R = 42
+  const R = 62
+  const STROKE = 18
+  const SIZE = 160
   const C = 2 * Math.PI * R
   let offset = 0
+  const summary = `环形图，${clamped.length} 项，合计 ${totalText}`
   return (
-    <div className={css.donut} data-genui-chart="donut">
-      <svg width="120" height="120" viewBox="0 0 120 120">
-        <circle cx="60" cy="60" r={R} fill="none" strokeWidth="14" className={css.donutTrack} />
+    <div className={css.donut} data-genui-chart="donut" data-genui-donut role="img" aria-label={summary} onMouseLeave={hide}>
+      <ChartTip tip={tip} />
+      <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`}>
+        <circle cx={SIZE / 2} cy={SIZE / 2} r={R} fill="none" strokeWidth={STROKE} className={css.donutTrack} />
         {clamped.map((d, i) => {
           const frac = d.v / total
           const len = frac * C
           const el = (
             <circle
               key={i}
-              cx="60" cy="60" r={R} fill="none" strokeWidth="14"
+              cx={SIZE / 2}
+              cy={SIZE / 2}
+              r={R}
+              fill="none"
+              strokeWidth={STROKE}
               className={css.donutSeg}
-              style={{ stroke: seriesColor(i, data.length, d.color) ?? 'var(--dsw-alias-state-business-primary, #4f8ef7)' }}
+              style={{ stroke: seriesColor(i, data.length, d.color, chart.palette) ?? 'var(--dsw-alias-state-business-primary, #4f8ef7)' }}
               strokeDasharray={`${len} ${C - len}`}
               strokeDashoffset={-offset}
-              transform="rotate(-90 60 60)"
-            >
-              <title>{`${d.label}: ${String(d.value)}`}</title>
-            </circle>
+              transform={`rotate(-90 ${SIZE / 2} ${SIZE / 2})`}
+              onMouseEnter={event => show(event, [[d.label, `${String(d.value)} · ${(frac * 100).toFixed(1)}%`]])}
+              onMouseMove={event => show(event, [[d.label, `${String(d.value)} · ${(frac * 100).toFixed(1)}%`]])}
+            />
           )
           offset += len
           return el
         })}
-        <text x="60" y="58" textAnchor="middle" className={css.donutTotal}>{totalText}</text>
-        <text x="60" y="74" textAnchor="middle" className={css.donutTotalLabel}>合计</text>
+        <text x={SIZE / 2} y={SIZE / 2 - 2} textAnchor="middle" className={css.donutTotal}>{totalText}</text>
+        <text x={SIZE / 2} y={SIZE / 2 + 16} textAnchor="middle" className={css.donutTotalLabel}>合计</text>
       </svg>
       <div className={css.donutLegend}>
-        {data.map((d, i) => (
+        {clamped.map((d, i) => (
           <span key={i} className={css.legendItem}>
-            <span className={css.legendSwatch} style={{ background: seriesColor(i, data.length, d.color) ?? 'var(--dsw-alias-state-business-primary, #4f8ef7)' }} />
-            {d.label} · {String(d.value)}
+            <span className={css.legendSwatch} style={{ background: seriesColor(i, data.length, d.color, chart.palette) ?? 'var(--dsw-alias-state-business-primary, #4f8ef7)' }} />
+            <span>{d.label}</span>
+            <span className={css.donutPct}>{String(d.value)} · {(d.v / total * 100).toFixed(1)}%</span>
           </span>
         ))}
       </div>
     </div>
   )
 })
-
-/** Tab strip with local active-tab state. Keyboard: ArrowLeft/Right to move,
- * Home/End to jump; ids wired via useId so `aria-controls` stays unique
- * across fences and sessions. */