diff --git a/benchmarks/conformance/cases/90-zoomable-time-window/model.ts b/benchmarks/conformance/cases/90-zoomable-time-window/model.ts index 0e539078..7c89dd80 100644 --- a/benchmarks/conformance/cases/90-zoomable-time-window/model.ts +++ b/benchmarks/conformance/cases/90-zoomable-time-window/model.ts @@ -44,6 +44,31 @@ export function visibleZoomData(rows: readonly AaplRow[], window: ZoomWindow) { }) } +export function visibleZoomDataWithNeighbors( + rows: readonly AaplRow[], + window: ZoomWindow, +) { + const start = window.start.getTime() + const end = window.end.getTime() + let firstVisible = -1 + let lastVisible = -1 + + for (let index = 0; index < rows.length; index += 1) { + const timestamp = rows[index]!.Date.getTime() + if (timestamp < start) continue + if (timestamp > end) break + if (firstVisible < 0) firstVisible = index + lastVisible = index + } + + if (firstVisible < 0) return [] + + return rows.slice( + Math.max(0, firstVisible - 1), + Math.min(rows.length, lastVisible + 2), + ) +} + export function zoomSpanDays(window: ZoomWindow) { return (window.end.getTime() - window.start.getTime()) / millisecondsPerDay } diff --git a/benchmarks/conformance/cases/90-zoomable-time-window/view.tsx b/benchmarks/conformance/cases/90-zoomable-time-window/view.tsx index d639e922..13826798 100644 --- a/benchmarks/conformance/cases/90-zoomable-time-window/view.tsx +++ b/benchmarks/conformance/cases/90-zoomable-time-window/view.tsx @@ -18,6 +18,7 @@ import { initialZoomWindow, selectZoomRows, visibleZoomData, + visibleZoomDataWithNeighbors, zoomDateFromAnchor, zoomDateKey, zoomFullDomain, @@ -69,19 +70,20 @@ const ZoomableTimeWindowExample = forwardRef< }) const [state, setState] = useState(stateRef.current) const [scene, setScene] = useState | null>(null) - const rows = visibleZoomData(zoomRows, state.window) + const visibleRows = visibleZoomData(zoomRows, state.window) + const lineRows = visibleZoomDataWithNeighbors(zoomRows, state.window) const definition = useMemo( () => defineChart( defineChart({ marks: [ - lineY(rows, { + lineY(lineRows, { x: 'Date', y: 'Close', stroke: color, strokeWidth: 2.5, }), - dot(rows, { + dot(visibleRows, { x: 'Date', y: 'Close', fill: color, @@ -109,6 +111,7 @@ const ZoomableTimeWindowExample = forwardRef< grid: true, axis: { ticks: { count: 4 }, label: 'AAPL close ($)' }, }, + clip: true, margin: { top: 56, right: 24, bottom: 44, left: 58 }, }), { animate: false, keyboard: false, focus: focusDisabled },