// ===== showcase/src/examples/components/chart_range_slider.ts ===== import {  RenderButton,  RenderChartRangeSlider,  RenderLineChart,  RenderPageHeader,  RenderStackPanel,  RenderText,  RenderWrapPanel,  type ChartSeries,} from 'ds-ui' const start = new Date('2026-07-14T00:00:00').getTime()const hour = 60 * 60 * 1000const series: ChartSeries[] = [  {    name: '检验完成量',    data: Array.from({ length: 49 }, (_, index) => ({      x: new Date(start + index * hour),      y: 18 + Math.round(Math.sin(index / 4) * 8) + (index % 7),    })),  },] export function createChartRangeSliderExample(): RenderStackPanel {  const status = new RenderText('当前查看最近 24 小时；拖动滑块手柄或中间窗口调整范围。', { role: 'secondary' })  const initialViewport = { min: start + 24 * hour, max: start + 48 * hour }  const chart = new RenderLineChart({    series,    xAxisType: 'time',    xViewport: initialViewport,    yAxis: { unit: '项', min: 0, tickCount: 4 },    area: true,    showLegend: false,    enablePan: true,    enableWheelZoom: true,    height: 260,  })  const slider = new RenderChartRangeSlider({    series,    xAxisType: 'time',    viewport: initialViewport,    minSpan: 6 * hour,    onViewportChange: event => {      chart.setXViewport(event.viewport, event.reason)      const spanHours = Math.round((event.viewport.max - event.viewport.min) / hour)      status.text = `当前窗口 ${spanHours} 小时 · 变更原因 ${event.reason}`    },  })  chart.onViewportChange = event => slider.setViewport(event.viewport, event.reason)   const actions = new RenderWrapPanel({ spacing: 8, runSpacing: 8 })  actions.addChild(new RenderButton({    label: '最近 12 小时',    onClick: () => slider.setViewport({ min: start + 36 * hour, max: start + 48 * hour }, 'api'),  }))  actions.addChild(new RenderButton({    label: '最近 24 小时',    variant: 'primary',    onClick: () => slider.setViewport(initialViewport, 'api'),  }))  actions.addChild(new RenderButton({    label: '全部 48 小时',    onClick: () => slider.setViewport({ min: start, max: start + 48 * hour }, 'api'),  }))   const panel = new RenderStackPanel({ orientation: 'vertical', spacing: 12, crossAxisAlignment: 'stretch' })  panel.addChild(new RenderPageHeader({    title: 'ChartRangeSlider 检验趋势范围',    description: '范围选择器与折线图双向同步，支持拖动手柄、平移窗口、轨道跳转和 API 快捷范围。',  }))  panel.addChild(actions)  panel.addChild(chart, 1)  panel.addChild(slider)  panel.addChild(status)  panel.padding = 18  return panel}