// ===== showcase/src/examples/components/charts.ts ===== import {  RenderAdaptiveGridPanel,  RenderBarChart,  RenderBorder,  RenderDonutChart,  RenderLineChart,  RenderPageHeader,  RenderStackPanel,  RenderText,  type RenderBox,} from 'ds-ui' function card(title: string, chart: RenderBox): RenderBorder {  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 8, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderText(title, { role: 'title', weight: 'semibold' }))  panel.addChild(chart)  return new RenderBorder({ background: 'panel', padding: 12, minHeight: 250, child: panel })} export function createChartsExample(): RenderStackPanel {  const grid = new RenderAdaptiveGridPanel({ minColumnWidth: 260, maxColumns: 3, columnGap: 12, rowGap: 12 })  grid.addChild(card('活跃用户趋势', new RenderLineChart({    series: [      { name: '本周', data: [{ x: '一', y: 36 }, { x: '二', y: 52 }, { x: '三', y: 49 }, { x: '四', y: 68 }, { x: '五', y: 82 }] },      { name: '上周', data: [{ x: '一', y: 28 }, { x: '二', y: 41 }, { x: '三', y: 45 }, { x: '四', y: 54 }, { x: '五', y: 66 }] },    ],    area: true,    legendMode: 'toggle',    height: 190,  })))  grid.addChild(card('组件使用量', new RenderBarChart({    categories: ['DataGrid', 'Tree', 'Form', 'Chart'],    series: [{ name: '调用量', data: [86, 58, 72, 44] }],    valueAxis: { min: 0, tickCount: 4 },    height: 190,  })))  grid.addChild(card('任务状态', new RenderDonutChart({    segments: [{ label: '完成', value: 68 }, { label: '进行中', value: 24 }, { label: '阻塞', value: 8 }],    height: 190,  })))  const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 14, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({ title: 'Charts 数据看板', description: '折线、柱状和环形图共享主题、交互图例、Tooltip 与数据状态模型。' }))  panel.addChild(grid, 1)  panel.padding = 18  return panel}