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

lcjsTrader.trader(TRADER_LICENSE).then(async (trader) => {
    // Reading the json file.
    await fetch(`${document.head.baseURI}examples/assets/1203/tickData.json`).then((r) => r.json())
    .then((data) => {
        // Creating the bar chart.
        const barChart = trader.lightningChart().Chart3D()
        .setTitle('Volatility Bar Surface')
    
        barChart.getDefaultAxisX().setTitle('Price (USD)').setInterval({ start: 180.25, end: 159.75 })
        barChart.getDefaultAxisY().setTitle('Volume').setInterval({ start: 0, end: 30000000 })
        barChart.getDefaultAxisZ()
        .setInterval({ start: -0.5, end: data.length - 0.5 })
        .setTickStrategy(AxisTickStrategies.Empty)

        const barSeries = barChart.addBoxSeries()
        .setRoundedEdges(0.6)
        .setFillStyle(new PalettedFill({
            lookUpProperty: 'y',
            lut: new LUT({
                steps: [
                    { value: 0, color: barChart.getTheme().ohlcCandleBodyFillStylePositive.color },
                    { value: 20000000, color: barChart.getTheme().ohlcCandleBodyFillStyleNegative.color }
                ]
            })
        }))

        // Adding data to the chart.
        const barData = []
        for (let i = 0; i < data.length; i++) {
            for (let j = 0; j < data[i]["tickData"].length; j++) {
                barData.push({
                    xCenter: data[i]["tickData"][j]["range"],
                    yCenter: data[i]["tickData"][j]["value"] / 2,
                    zCenter: i,
                    xSize: 0.5,
                    ySize: data[i]["tickData"][j]["value"],
                    zSize: 1
                })
            }
            if (i % 2 == 0) {
                barChart.getDefaultAxisZ().addCustomTick().setValue(i).setTextFormatter(() => data[i]["dateTime"])
            }
        }
        barSeries.invalidateData(barData)

        // Modifying the data cursor.
        barSeries.setCursorFormattingOverride((hit, before) => {
            return [
                [data[hit.z]["dateTime"]],
                before[1],
                ['Volume', (hit.y * 2).toString()]
            ]
        })
        barChart.setCursor((cursor) => {
            cursor.setTickZ((tick) => tick.setTextFormatter((value) => data[value]["dateTime"]))
        })
        barChart.addEventListener('cursortargetchange', (e) => {
            if (!e.hit) return
            e.hit.cursorPosition.axisLocation.y = e.hit.y * 2
            barChart.getCursor().setPosition(e.hit.cursorPosition)
        })
    })
})