100,000 bars, timed here

import { createFinancialChart, type FinancialChart } from "@ortex-charts/financial";

/**
 * Create the chart over `bars` — 100,000 synthetic one-minute bars, because the
 * count is the point here rather than the shape — and time it to the first
 * painted frame. `flush()` draws synchronously, so the number is the work the
 * library does rather than the interval until the display's next refresh.
 */
function timeFirstPaint(box: HTMLElement, theme: ExampleTheme): { chart: FinancialChart; createMs: number } {
    const start = performance.now();
    const chart = createFinancialChart(box, {
        theme,
        resolution: "1",
        data: bars,
        timeScale: { barSpacing: 3 },
    });
    chart.chart.flush();
    return { chart, createMs: performance.now() - start };
}

/** Then the cost of one full redraw while panning, measured the same way, as a median. */
function timeRedraw(chart: FinancialChart, count: number): number {
    const scale = chart.chart.timeScale;
    const frames: number[] = [];
    for (let i = 0; i < count; i++) {
        scale.scrollByPixels(-8);
        const start = performance.now();
        chart.chart.flush();
        frames.push(performance.now() - start);
    }
    frames.sort((a, b) => a - b);
    return frames[frames.length >> 1];
}