Toolbar Disappears when data is loaded asynchronously

[arunavo4]

Description

Toolbar Disappears when data is loaded asynchronously

Screenshot (if applicable)

Data Sample (if applicable)

The data sample must follow the current data structure.

Console errors (if any)

N/A

Additional Info

App.vue

<template>
    <trading-vue :data="chart" :width="width" :height="height"
        title-txt="BTCUSD"
        :toolbar="true"
        :overlays="overlays"
        :color-back="colors.back"
        :color-grid="colors.grid"
        :color-text="colors.text"
        :color-title="colors.tvTitle">
    </trading-vue>
</template>
<script>

import { DataCube } from 'trading-vue-js'
import Data from 'data.json'

export default {
    name: 'MainChart',
    props: ['width', 'height', 'colors'],
    data() {
        return {
            chart: {},
            overlays: []
        }
    },
    mounted(){
      this.$set(this, 'chart', new DataCube(Data))
    }
}
</script>
<style>
</style>

Data.json

{
    "chart": {
        "type": "Candles",
        "indexBased": true,
        "data": [
            [
                1092873600000,
                100.01,
                104.06,
                95.96,
                100.335,
                44659000
            ],
            [
                1092960000000,
                101.01,
                109.08,
                100.5,
                108.31,
                22834300
            ],
            [
                1093219200000,
                110.76,
                113.48,
                109.05,
                109.4,
                18256100
            ],
            [
                1093305600000,
                111.24,
                111.6,
                103.57,
                104.87,
                15247300
            ],
            [
                1093392000000,
                104.76,
                108.0,
                103.88,
                106.0,
                9188600
            ],
            [
                1093478400000,
                104.95,
                107.95,
                104.66,
                107.91,
                7094800
            ],
            [
                1093564800000,
                108.1,
                108.62,
                105.69,
                106.15,
                6211700
            ],
            
            [
                1592265600000,
                1449.0,
                1457.17,
                1428.99,
                1446.47,
                1534826
            ],
            [
                1592352000000,
                1452.94,
                1462.2,
                1435.12,
                1452.54,
                1530500
            ],
            [
                1592438400000,
                1449.85,
                1452.97,
                1426.23,
                1434.12,
                1743071
            ],
            [
                1592524800000,
                1440.0,
                1444.5,
                1419.0,
                1424.64,
                2639167
            ],
            [
                1592784000000,
                1425.01,
                1450.95,
                1419.19,
                1450.66,
                1472072
            ],
            [
                1592870400000,
                1452.0,
                1475.2,
                1445.0,
                1463.98,
                1887583
            ],
            [
                1592956800000,
                1463.28,
                1475.79,
                1430.0,
                1432.7,
                1579579
            ],
            [
                1593043200000,
                1431.22,
                1442.32,
                1419.54,
                1441.1,
                1197907
            ],
            [
                1593129600000,
                1432.63,
                1437.02,
                1355.0,
                1362.54,
                4882014
            ]
        ]
    },
    "onchart": [
        {
            "name": "Trades",
            "type": "Trades",
            "data": [
                [
                    1100476800000,
                    1,
                    0,
                    184.87,
                    "17.49%"
                ],
                [
                    1101772800000,
                    1,
                    0,
                    181.98,
                    "7.31%"
                ],
                [
                    1109635200000,
                    1,
                    1,
                    186.06,
                    "9.16%"
                ],
                [
                    1113177600000,
                    1,
                    1,
                    193.23,
                    "5.43%"
                ],
                [
                    1113782400000,
                    1,
                    0,
                    186.97,
                    "8.88%"
                ],
                [
                    1113868800000,
                    0,
                    1,
                    191.4,
                    "4.11%"
                ],
            ],
            "settings": {
                "z-index": 10,
                "labelColor": "#dedddd"
            }
        }
    ]
}

[arunavo4]

@C451 Found one more issue, Looks like the tools section is being overridden. Even when I explicitly specify 2 tools and load data synchronously I get 4 Tools

"tools": [
        {
            "type": "LineTool",
            "settings": {
                "color": "#35c460"
            }
        },
        {
            "type": "LineTool:Extended",
            "settings": {
                "color": "#3186c4"
            }
        }
    ]

 data() {
        return {
            chart: new DataCube(Data) ,
            overlays: []
        }
    },

[C451]

For the second problem let's create another one. And more explanation is needed.

[C451]

The problem solved by resetChart() method. The proper solution is too complicated for now.

[arunavo4]

@C451 I tried the resetChart() method and it still does not seem to work, toolbar is still missing. Correct me if I used the wrong resetChart() method. this.$refs.tvjs.resetChart(true)

mounted() {
        window.addEventListener('resize', this.onResize)
        // Api Call
        this.axios
        .post(`/backtest/detailedAnalysis/${this.strategyId}/${this.runId}/`
        )
        .then(response => {
            this.$set(this, 'chart', new DataCube(response.data))
        })
        .catch(error => {
            console.log(error)
            this.errored = true
        })
        .finally(() => {
            this.loading = false;
        })

        this.$refs.tvjs.resetChart(true)
    },

[C451]

https://tvjs.io/play?a=2pj6nzxc

[arunavo4]

@C451 Yup, It Works. Thanks a lot! The issue was I had to reset the chart soon after adding the data.
this.$refs.tvjs.resetChart()

Here is how it is for anyone visiting this issue in the future.

mounted() {
        window.addEventListener('resize', this.onResize)
        // Api Call
        this.axios
        .post(`/backtest/detailedAnalysis/${this.strategyId}/${this.runId}/`
        )
        .then(response => {
            this.$set(this, 'chart', new DataCube(response.data))
            this.$refs.tvjs.resetChart()
        })
        .catch(error => {
            console.log(error)
            this.errored = true
        })
        .finally(() => {
            this.loading = false;
        })

    },