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

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 containerTreeMap = document.createElement('div')
    containerTreeMap.style.width = '50%'
    containerTreeMap.style.marginTop = '-0.5px'
    exampleContainer.append(containerTreeMap)

    const containerTAChart = document.createElement('div')
    containerTAChart.style.width = '50%'
    exampleContainer.append(containerTAChart)

    // Create a TreeMap chart.
    const treeMapChart = trader.lightningChart().TreeMapChart({ container: containerTreeMap })
    .setTitle('One year profits per stock')
    .setUserInteractions({ drillDown: false })
    .setData([
        {
            name: 'TECHNOLOGY',
            children: [
                { name: 'MSFT', value: 117.8 },
                { name: 'AAPL', value: 53.1 },
                { name: 'NVDA', value: 81.9 },
                { name: 'GOOG', value: 32.6 }
            ]
        },
        {
            name: 'PHARMACEUTICAL',
            children: [
                { name: 'LLY', value: 378.1 },
                { name: 'JNJ', value: 5.3 },
                { name: 'NVO', value: 37.1 },
                { name: 'REGN', value: 208.2 }
            ]
        },
        {
            name: 'BANK AND FINANCIAL',
            children: [
                { name: 'JPM', value: 68.4 },
                { name: 'RY', value: 38.6 },
                { name: 'BAC', value: 12.5 },
                { name: 'GS', value: 172.7 }
            ]
        }
    ])

    // Create a trading chart.
    const taChart = trader.tradingChart({ parentElement: containerTAChart, loadFromStorage: false })

    // Add a default dataset.
    await fetch(`${document.head.baseURI}examples/assets/2100/Eli Lilly and Company (LLY).csv`).then((res) => res.text()).then((text) => {
        taChart.loadCsvString(text, 'Eli Lilly and Company (LLY)')
    })

    treeMapChart.nodes.addEventListener('pointerdown', async (_, node) => {
        let fileName = ''
        switch (node.name) {
            case 'MSFT':
                fileName = 'Microsoft Corporation (MSFT)'
                break
            case 'AAPL':
                fileName = 'Apple Inc. (AAPL)'
                break
            case 'NVDA':
                fileName = 'NVIDIA Corp (NVDA)'
                break
            case 'GOOG':
                fileName = 'Alphabet Inc (GOOG)'
                break
            case 'LLY':
                fileName = 'Eli Lilly and Company (LLY)'
                break
            case 'JNJ':
                fileName = 'Johnson & Johnson (JNJ)'
                break
            case 'NVO':
                fileName = 'Novo Nordisk (NVO)'
                break
            case 'REGN':
                fileName = 'Regeneron Pharmaceuticals (REGN)'
                break
            case 'JPM':
                fileName = 'JPMorgan Chase & Co (JPM)'
                break
            case 'RY':
                fileName = 'Royal Bank of Canada (RY)'
                break
            case 'BAC':
                fileName = 'Bank of America Corp (BAC)'
                break
            case 'GS':
                fileName = 'The Goldman Sachs Group (GS)'
                break
            default:
                break
        }

        if (fileName != '') {
            await fetch(`${document.head.baseURI}examples/assets/2100/` + fileName + `.csv`).then((res) => res.text()).then((text) => {
                taChart.loadCsvString(text, fileName)
            })
        }
    })
})