const lcjs = require('@lightningchart/lcjs')
const { lightningChart, Themes, PalettedFill, ColorRGBA, LUT, PointSeriesTypes3D } = lcjs

const dataRate = 5000

const lc = lightningChart()
const chart = lc
    .Chart3D({
        // theme: Themes.darkGold,
        legend: { position: lcjs.LegendPosition.BottomCenter },
    })
    .setTitle(``)
    .setProjection('orthographic')

const series = chart
    .addPointSeries({
        type: PointSeriesTypes3D.Pixelated,
        schema: {
            x: { pattern: null },
            y: { pattern: null },
            z: { pattern: null },
            timestamp: { pattern: 'progressive' },
        },
    })
    .setMaxSampleCount(Math.ceil(dataRate * 60))
    .setDataMapping({ x: 'x', y: 'y', z: 'z', lookupValue: 'timestamp' })
    .setEffect(false)

const palette = chart.getTheme().examples.intensityColorPalette
const color0 = palette[2].setA(0)
const color1 = palette[2]
const color2 = ColorRGBA(255, 0, 0)

let tPrev = performance.now()
let xPrev = 0
let yPrev = 0
let zPrev = 0
const streamData = () => {
    const now = performance.now()
    const delta = Math.min(now - tPrev, 1000)
    tPrev = now
    const pCount = Math.round((dataRate * delta) / 1000)
    const points = new Array(pCount).fill(0).map(() => {
        const x = xPrev + (Math.random() * 2 - 1)
        const y = yPrev + (Math.random() * 2 - 1)
        const z = zPrev + (Math.random() * 2 - 1)
        const timestamp = now
        xPrev = x
        yPrev = y
        zPrev = z
        return { x, y, z, timestamp }
    })
    series.appendJSON(points).setPointStyle((points) =>
        points.setSize(1).setFillStyle(
            new PalettedFill({
                lookUpProperty: 'value',
                lut: new LUT({
                    interpolate: true,
                    steps: [
                        { label: '-1 min', value: now - 60000, color: color0 },
                        { label: '-5 sec', value: now - 5000, color: color1 },
                        { label: 'now', value: now, color: color2 },
                    ],
                }),
            }),
        ),
    )
    chart.setTitle(`Real-time scatter 3D (${series.getSampleCount()} points)`)
    requestAnimationFrame(streamData)
}
streamData()