const lcjsTrader = require('@lightningchart/lcjs-trader')
const { MovingAverageType, 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 trend indicators to them, and modify some indicator properties.
    const leftChart = trader.tradingChart({ parentElement: containerLeft, loadFromStorage: false })
    leftChart.indicators().addParabolicSAR().setAccelerationFactor(0.02)
    leftChart.indicators().addLinearRegression().setPeriodCount(20)
    leftChart.indicators().addRandomWalkIndex().setRWILowColor('#BB1111')
    leftChart.indicators().addRangeActionVerificationIndex().setMovingAverageTypes(MovingAverageType.WeightedMovingAverage, MovingAverageType.WellesWilderSmoothing)

    const midChart = trader.tradingChart({ parentElement: containerMid, loadFromStorage: false })
    midChart.indicators().addIchimokuCloud().setLineWidth(1)
    midChart.indicators().addAccumulativeSwingIndex().setLimitMoveValue(10000)
    midChart.indicators().addAverageDirectionalIndex().showDiLines(true)
    midChart.indicators().addAroon().setPeriodCount(21)
    midChart.indicators().addGopalakrishnanRangeIndex().setOffset(3)

    const rightChart = trader.tradingChart({ parentElement: containerRight, loadFromStorage: false })
    rightChart.indicators().addSuperTrend().setMultiplier(3)
    rightChart.indicators().addSchaffTrendCycle().setMACDPeriodCounts(23, 50)
    rightChart.indicators().addSchaffTrendCycleSignal().setMACDMovingAverages(MovingAverageType.ExponentialMovingAverage, MovingAverageType.ExponentialMovingAverage, MovingAverageType.ExponentialMovingAverage)
    rightChart.indicators().addSQNTrend().setSource(Source.Hl2)
    rightChart.indicators().addTripleExponentialAverage().setSignalColor('#FF22FF')
    rightChart.indicators().addVerticalHorizontalFilter().setPeriodCount(28)

    // Reading data from a file.
    await fetch(`${document.head.baseURI}examples/assets/0011/General Motors Company (GM).csv`).then((res) => res.text()).then((text) => {
        leftChart.loadCsvString(text, 'General Motors Company (GM)')
    })
    await fetch(`${document.head.baseURI}examples/assets/0011/Tesla Inc (TSLA).csv`).then((res) => res.text()).then((text) => {
        midChart.loadCsvString(text, 'Tesla Inc (TSLA)')
    })
    await fetch(`${document.head.baseURI}examples/assets/0011/Toyota Motor Corporation (TM).csv`).then((res) => res.text()).then((text) => {
        rightChart.loadCsvString(text, 'Toyota Motor Corporation (TM)')
    })
})