project-nv / night-vision

Highly customizable charting library, created for professional traders
https://nightvision.dev
MIT License
248 stars 57 forks source link

Change timeframe #69

Open MrBjurhager opened 1 year ago

MrBjurhager commented 1 year ago

Describe the bug

Iv'e made a selectbox that sends a new timeframe to my server, fetch new data for that timeframe and send back new candles to my chart. When new data is received it updates the chart but its really buggy to draw the new candles as they overlap or gets thin "yRange" not re-calculating correctly.

Iv'e tried alot of different things and made sure i get new data before update but the problem is still there. My recent code is to really make sure i get the new data before making the update.

export let bar = "15m";
    let prevBar = bar;
    $: {
        if (bar !== prevBar) {
            console.log("bar changed to", bar);
            update();
            prevBar = bar;
        }
    }
const update = () => {
        setTimeout(() => {
            chart.update("full", { resetRange: true });
        }, 200)
    }

Ive also tried with setTimeout and wait 2 seconds before the update and still have the same problem. it work 50/50.

example of error when changed from 15m to 1m chart Also tried with update("data"), update(), update("legend") etc etc.

Any suggestions on how i should handle timeframe change in the data?.

Best / F

15-1jpg 15-to-1

Reproduction

#

Steps to reproduce

Live data from server

afterUpdate(async () => {
        await tick();
        if (chart?.data?.panes?.length > 0) {
            chart.data.panes[0].overlays[0].data = candlesticks;
            chart.data.panes[0].overlays[1].data = indicators.sma;
            chart.data.panes[0].overlays[2].data = orderbook;
            chart.data.panes[0].overlays[3].data = positions;
            // chart.data.panes[0].overlays[4].data = candlesticks;
            chart.data.panes[0].overlays[4].data = orders_history.reverse();
            chart.data.panes[1].overlays[0].data = indicators.rsi;
        }
        chart.update("data");
    });

Javascript Framework

no-framework (vanilla-js)

Logs

No response

Validations

MrBjurhager commented 1 year ago

Found an issue, my candlestick data has ohlc = [...candlesticks, ...candlesticks_history] The history candles did not update as fast as the candlesticks chunk and the data had two different timeframes for a few ms. Removed my history candles and it works alot better. Will load the history as in the chart example: https://codesandbox.io/s/playing-around-10-0zh0jh?from-embed

Im still interested in a better solution to change timeframe :)

mariusvigariu commented 1 year ago

I would just create a separate component that accepts the timeframe as a prop, then when changing the timeframe just reinit the component