const lcjsTrader = require('@lightningchart/lcjs-trader')
const lcjs = require('@lightningchart/lcjs')
const { AxisScrollStrategies, AxisTickStrategies, emptyFill } = lcjs

lcjsTrader.trader(TRADER_LICENSE).then((trader) => {
    const lc = trader.lightningChart()
    const chart = lc
        .ChartXY({
            defaultAxisX: { type: 'linear-highPrecision' },
        })
        .setTitle('Real-Time Price Trends 500 new samples per second')
        .setPadding({ left: 80 })
        .setCursorMode('show-nearest')

    const axisX = chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime)
    chart.getDefaultAxisY().dispose()
    chart.setUserInteractions({ zoom: { wheel: false } })

    const symbols = new Array(5).fill(0).map((_, i) => ({
        series: chart
            .addPointLineAreaSeries({
                schema: { x: { pattern: 'progressive' }, y: { pattern: null } },
                // NOTE: Each series is placed on its own Y axis, so every trends own min-max value range is visible without affecting others.
                yAxis: chart.addAxisY().setVisible(false)
            })
            .setMaxSampleCount(10000000)
            .setAreaFillStyle(emptyFill)
            .setPointFillStyle(emptyFill)
            .setClipping(false)
            .setName(`Symbol ${i + 1}`)
            .setStrokeStyle((stroke) => stroke.setThickness(1))
    }))

    // Generate random static data set from start of day that is loaded into every trend at start.
    // Afterwards, more random data is generated and displayed in real-time.
    // Time step between data points is 10 milliseconds.
    const date = new Date(2010, 0, 1)
    date.setHours(9, 30, 0)
    const tHistoryDataStart = date.getTime()
    date.setHours(10, 0, 0)
    const tLiveDataStart = date.getTime()
    axisX.setScrollStrategy(AxisScrollStrategies.scrolling)
        //.setInterval({ end: tLiveDataStart, start: tLiveDataStart - 5 * 60 * 1000, stopAxisAfter: false })
        .setDefaultInterval(() => ({ end: tLiveDataStart, start: tLiveDataStart - 5 * 60 * 1000, stopAxisAfter: false }))

    symbols.forEach((symbol) => {
        const startData = [] // Array<{ x: number, y: number }>
        let yPrev = 10 + 200 * Math.random()
        for (let x = tHistoryDataStart; x < tLiveDataStart; x += 10) {
            const y = yPrev + 0.1 * (Math.random() * 2 - 1)
            yPrev = y
            startData.push({ x, y })
        }
        symbol.series.appendJSON(startData)
        symbol.yPrev = yPrev
    })
    
    // Add 1 new data point every 10 milliseconds
    setInterval(() => {
        // Add 1 new data point to every symbol. This automatically scrolls view to reveal new data, but keeps the time view same (5 mins).
        const x = tLiveDataStart + window.performance.now()
        symbols.forEach((symbol) => {
            const y = symbol.yPrev + 0.1 * (Math.random() * 2 - 1)
            symbol.series.appendSample({ x, y })
            symbol.yPrev = y
        })
    }, 10)
})