| 103 | }; |
| 104 | |
| 105 | const createOptions = ( |
| 106 | title: string, |
| 107 | seriesA: ReadonlyArray<DataPoint>, |
| 108 | seriesB: ReadonlyArray<DataPoint>, |
| 109 | palette: readonly [string, string] |
| 110 | ): ChartGPUOptions => { |
| 111 | type DataPointTupleLocal = readonly [x: number, y: number, size?: number]; |
| 112 | const isTupleDataPoint = (p: DataPoint): p is DataPointTupleLocal => Array.isArray(p) && p.length >= 2; |
| 113 | const getX = (p: DataPoint): number => (isTupleDataPoint(p) ? p[0] : p.x); |
| 114 | const first = seriesA[0]; |
| 115 | const last = seriesA.length > 0 ? seriesA[seriesA.length - 1] : undefined; |
| 116 | const xMin = first ? getX(first) : Date.now(); |
| 117 | const xMax = last ? getX(last) : xMin + 1; |
| 118 | |
| 119 | return { |
| 120 | // Note: when `dataZoom` includes `{ type: 'slider' }`, ChartGPU reserves additional bottom |
| 121 | // space internally for the slider UI, so this value only needs to cover axis labels/title. |
| 122 | grid: { left: 70, right: 24, top: 24, bottom: 40 }, |
| 123 | xAxis: { type: 'time', min: xMin, max: xMax, name: 'Time' }, |
| 124 | yAxis: { type: 'value', name: title }, |
| 125 | palette, |
| 126 | tooltip: { trigger: 'axis', formatter: axisTooltipFormatter }, |
| 127 | dataZoom: [{ type: 'inside' }, { type: 'slider' }], |
| 128 | animation: { duration: 900, easing: 'cubicOut', delay: 0 }, |
| 129 | series: [ |
| 130 | { |
| 131 | type: 'line', |
| 132 | name: `${title} A`, |
| 133 | data: seriesA, |
| 134 | color: palette[0], |
| 135 | areaStyle: { opacity: 0.22 }, |
| 136 | lineStyle: { width: 2, opacity: 1 }, |
| 137 | }, |
| 138 | { |
| 139 | type: 'line', |
| 140 | name: `${title} B`, |
| 141 | data: seriesB, |
| 142 | color: palette[1], |
| 143 | areaStyle: { opacity: 0.16 }, |
| 144 | lineStyle: { width: 2, opacity: 1 }, |
| 145 | }, |
| 146 | ], |
| 147 | }; |
| 148 | }; |
| 149 | |
| 150 | async function main(): Promise<void> { |
| 151 | const containerTop = document.querySelector('#chart-top'); |