| 87 | }>; |
| 88 | |
| 89 | const createOptions = ( |
| 90 | data: ReadonlyArray<DataPoint>, |
| 91 | controls: SamplingControls, |
| 92 | xMax: number |
| 93 | ): ChartGPUOptions => ({ |
| 94 | // Note: when `dataZoom` includes `{ type: 'slider' }`, ChartGPU reserves additional bottom |
| 95 | // space internally for the slider UI, so this value only needs to cover axis labels/title. |
| 96 | grid: { left: 70, right: 24, top: 24, bottom: 44 }, |
| 97 | xAxis: { type: 'value', min: 0, max: xMax, name: 'Index' }, |
| 98 | yAxis: { type: 'value', name: 'Value' }, |
| 99 | tooltip: { trigger: 'item' }, |
| 100 | dataZoom: [{ type: 'inside' }, { type: 'slider' }], |
| 101 | palette: ['#4a9eff'], |
| 102 | animation: { duration: 900, easing: 'cubicOut', delay: 0 }, |
| 103 | series: [ |
| 104 | { |
| 105 | type: 'line', |
| 106 | name: 'zoom-aware sampling', |
| 107 | data, |
| 108 | color: '#4a9eff', |
| 109 | lineStyle: { width: 2, opacity: 1 }, |
| 110 | sampling: controls.mode, |
| 111 | samplingThreshold: controls.threshold, |
| 112 | }, |
| 113 | ], |
| 114 | }); |
| 115 | |
| 116 | const clampInt = (n: number, min: number, max: number): number => Math.max(min, Math.min(max, n | 0)); |
| 117 | |