const lcjs = require('@lightningchart/lcjs')
const { lightningChart, Themes, AxisScrollStrategies, AxisTickStrategies, emptyFill, emptyLine } = lcjs

// Create HTML elements for the dashboard layout
const exampleContainer = document.getElementById('chart') || document.body
if (exampleContainer === document.body) {
    exampleContainer.style.width = '100vw'
    exampleContainer.style.height = '100vh'
    exampleContainer.style.margin = '0px'
}
exampleContainer.style.display = 'flex'
exampleContainer.style.flexDirection = 'row'
const gaugeLayout = document.createElement('div')
exampleContainer.append(gaugeLayout)
gaugeLayout.style.width = '20%'
gaugeLayout.style.height = '100%'
const xyContainer = document.createElement('div')
exampleContainer.append(xyContainer)
xyContainer.style.width = '80%'
xyContainer.style.height = '100%'

// Initialize LightningChart JS
const lc = lightningChart()

const gaugeChartArray = []
const lineSeriesArray = []

// Create XY chart for line series
const xyChart = lc
    .ChartXY({
        legend: { visible: false },
        container: xyContainer,
        // theme: Themes.darkGold
    })
    .setTitle('')
    .setCursor((cursor) => cursor.setTickMarkerXVisible(false))
xyChart
    .getDefaultAxisX()
    .setTickStrategy(AxisTickStrategies.Empty)
    .setThickness(0)
    .setStrokeStyle(emptyLine)
    .setScrollStrategy(AxisScrollStrategies.scrolling)
    .setInterval({ start: 0, end: 10_000, stopAxisAfter: false })
xyChart.getDefaultAxisY().dispose()

// Create dashboard rows
for (let iCh = 0; iCh < 4; iCh++) {
    const axisY = xyChart
        .addAxisY({ iStack: 4 - iCh })
        .setMargins(5, 5)
        .setInterval({ start: 0, end: 100 })
    const lineSeries = xyChart.addLineSeries({ axisY }).setMaxSampleCount(10_000)
    lineSeriesArray.push(lineSeries)

    const gaugeContainer = document.createElement('div')
    gaugeLayout.append(gaugeContainer)
    gaugeContainer.style.height = '25%'
    const theme = xyChart.getTheme()
    const colorBad = theme.examples.badGoodColorPalette[0]
    const colorNeutral = theme.examples.badGoodColorPalette[1]
    const colorGood = theme.examples.badGoodColorPalette[2]
    const gauge = lc
        .LinearGauge({
            container: gaugeContainer,
            // theme: Themes.darkGold,
        })
        .setTitle('')
        .setBarThickness(30)
        .setTickFormatter((value) => value.toFixed(0))

    if (iCh <= 1) {
        // No interpolation
        gauge.setColorInterpolation(false).setRanges([
            { start: 0, color: colorBad },
            { start: 33.3, color: colorNeutral },
            { start: 66.6, end: 100, color: colorGood },
        ])
    } else {
        // Interpolated gauge
        gauge.setColorInterpolation(true).setRanges([
            { start: 0, color: colorBad },
            { start: 50, color: colorNeutral },
            { start: 100, color: colorGood },
        ])
    }
    gaugeChartArray.push(gauge)
}

// Generate random real-time data
const prevValues = lineSeriesArray.map((_) => Math.random() * 100)
setInterval(() => {
    const currentTime = performance.now()
    for (let iCh = 0; iCh < 4; iCh++) {
        const prev = prevValues[iCh]
        const currentValue = Math.max(Math.min(prev + 5 * (Math.random() * 2 - 1), 100), 0)
        prevValues[iCh] = currentValue
        lineSeriesArray[iCh].appendJSON({ x: currentTime, y: currentValue })
        if (!cursorTarget) gaugeChartArray[iCh].setValueAnimation(true).setValue(currentValue)
    }
}, 1000 / 60)

// Custom interaction; when showing cursor in main XY chart, also show pointed values in each gauge
let cursorTarget
xyChart.addEventListener('cursortargetchange', (event) => {
    if (event.hits && event.hits.length > 0) {
        event.hits.forEach((hit) => {
            const i = lineSeriesArray.indexOf(hit.series)
            const gauge = gaugeChartArray[i]
            gauge.setValueAnimation(false).setValue(hit.y)
        })
        cursorTarget = event
    } else {
        cursorTarget = undefined
    }
})