Make data set/append helpers

[C451]

just the next candle or adding another 20 candles onto the end, same thing just appending to the graph), avoiding the need for a recompile each time I want to add a data point.

Big subject, imo. Exposing append & prepend methods would be super useful !
https://github.com/C451/trading-vue-js/blob/8df612c90dac0bde521e08a17afd03f87c13c819/src/components/Chart.vue#L223
Partial rendering of the candles & indicators etc...

Originally posted by @Tucsky in #7 (comment)

[tiagosiebler]

An extended sample that uses ccxt as a candle source would be a nifty real-life async demonstration of this:
https://github.com/ccxt/ccxt#javascript-for-use-with-the-script-tag

Each range-stretch could trigger a REST API request to fill that missing gap.

[C451]

Yep, I get the idea. I'm not sure about including a third party API, but a simple callback will certainly do the job.

[va-prans]

If someone is still looking for a solution i got it working by adding an @mouseup event on a div that wraps the vue component like so.

<div @mouseup="onChartMouseRelease" class="chartDiv">   
<trading-vue
        :data="chartContainer"
        :width="this.width"
        :height="this.height"
        ref="tradingVue">
</trading-vue>
</div>

the event fires off this method

onChartMouseRelease(event) {
      console.log("mouse released.");
      this.rangeCheck();
    },

which then checks if more data needs to be fetched

rangeCheck: function() {
      var range = this.$refs.tradingVue.getRange();
      if (range[0] < this.chartContainer.chart.data[0][0]) {
        console.log("get more data..");
        this.fetchMoreData();
      }
    }

and finally get the data somehow and unshift it to the chart data array

fetchMoreData: function() {
      var startTs = this.chartContainer.chart.data[0][0];
      var tf = this.getCurrentTfInt();
      axios
        .get(
          BASE_URL +
            "/Home/GetPreviousMarketData?timeStamp=" +
            startTs +
            "&timeFrame=" +
            tf +
            "&count=100"
        )
        .then(res => {
          console.log(JSON.stringify(res.data.data));
          this.chartContainer.chart.data.unshift(...res.data.data);
        })
        .catch(err => console.log(err));
    }

[C451]

Nice! Hopefully, DataCube will make this process easier. Currently WIP.

[hoangvanlong5342]

Hi @C451
When you close this issue?
Thanks

[hoangvanlong5342]

DataCube

How to use DataCube?

[C451]

Hello @hoangvanlong5342 idk when exactly, but when it's done, it will be a bloody powerful tool.

See the progress: https://github.com/C451/trading-vue-js/blob/master/src/helpers/datacube.js
API is undocumented for now.

[hoangvanlong5342]

Hi @C451
when do you update document for new api?

[C451]

Timing is the hardest part. Now the data helper is unstable/experimental, the API may change. When you see at least half of the checkmarks filled, you can expect some docs: https://github.com/C451/trading-vue-js/projects/1

[learntolearn99]

Hi @C451
I like this feature.
How to use this library on NuxtJS?

[zmohamed200133]

Really good. I'm waiting for this function
When will you finish?
Thanks

[C451]

@learntolearn99 I think you can do it easily

[C451]

https://github.com/C451/trading-vue-js/blob/master/test/tests/DataHelper.vue

An example of connection to an exchange. (Unstable, there may be errors)

[C451]

DataCube handles the basic operations, close.