const lcjsTrader = require('@lightningchart/lcjs-trader')
const { Source } = lcjsTrader

lcjsTrader.trader(TRADER_LICENSE).then(async (trader) => {
    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'
    exampleContainer.style.flexWrap = 'wrap'

    const containerLeft = document.createElement('div')
    containerLeft.style.width = '33.33%'
    exampleContainer.append(containerLeft)

    const containerMid = document.createElement('div')
    containerMid.style.width = '33.33%'
    exampleContainer.append(containerMid)

    const containerRight = document.createElement('div')
    containerRight.style.width = '33.33%'
    exampleContainer.append(containerRight)

    // Create three trading charts, add various statistics indicators to them, and modify some indicator properties.
    const leftChart = trader.tradingChart({ parentElement: containerLeft, loadFromStorage: false })
    leftChart.indicators().addWeightedClose().setLineWidth(1.5)
    leftChart.indicators().addKurtosis().setSource(Source.Hl2)
    leftChart.indicators().addSkewness().setSource(Source.Hl2)

    const midChart = trader.tradingChart({ parentElement: containerMid, loadFromStorage: false })
    midChart.indicators().addTypicalPrice().setLineWidth(1.5)
    const cc1 = midChart.indicators().addCorrelationCoefficient()
    const cc2 = midChart.indicators().addCorrelationCoefficient()

    const rightChart = trader.tradingChart({ parentElement: containerRight, loadFromStorage: false })
    rightChart.indicators().addMedianPrice().setLineWidth(1.5)
    rightChart.indicators().addStandardDeviation().setSource(Source.Hl2)
    rightChart.indicators().addStandardError().setSource(Source.Hl2)

    // Reading data from a file.
    await fetch(`${document.head.baseURI}examples/assets/0012/JPMorgan Chase & Co (JPM).csv`).then((res) => res.text()).then((text) => {
        leftChart.loadCsvString(text, 'JPMorgan Chase & Co (JPM)')
    })
    await fetch(`${document.head.baseURI}examples/assets/0012/Bank of America Corp (BAC).csv`).then((res) => res.text()).then((text) => {
        rightChart.loadCsvString(text, 'Bank of America Corp (BAC)')
    })

    await fetch(`${document.head.baseURI}examples/assets/0012/The Goldman Sachs Group (GS).csv`).then((res) => res.text()).then((text) => {
        midChart.loadCsvString(text, 'The Goldman Sachs Group (GS)')

        // Correlation Coefficient requires a secondary dataset, in this case, the data from the other two charts.
        cc1.setDataset(leftChart.getData(true))
        cc1.setSymbol('JPM')
        cc1.setLineColor('#4444DD')

        cc2.setDataset(rightChart.getData(true))
        cc2.setSymbol('BAC')
        cc2.setLineColor('#DD4444')
    })
})