tvjsx / tvjs-overlays Goto Github PK

<template>
    <trading-vue 
      :width="800"
      :height="600"
      titleTxt="Issue"
      :overlays="overlays"
      :data="chart"
      :index-based="true">
    </trading-vue>
</template>

<script>
import {TradingVue, DataCube} from 'trading-vue-js'
import Overlays from 'tvjs-overlays'

export default {
  name: 'App',
  components: { TradingVue },
  data() {
    return {
      chart: {},
      mock: [[1601287200000,45.91,45.97,45.75,45.88,78968.44669],[1601288100000,45.82,46.16,45.82,46.05,236920],[1601289000000,46.04,46.17,45.74,45.8,916660],[1601289900000,45.82,45.87,45.45,45.45,1406610],[1601290800000,45.46,45.54,45.27,45.53,1560240],[1601291700000,45.54,45.59,45.31,45.32,1300830],[1601292600000,45.31,45.45,44.96,45.01,1941410],[1601293500000,45.01,45.2,44.92,45.19,2551620],[1601294400000,45.21,45.35,45.18,45.24,2862530],[1601295300000,45.24,45.44,45.2,45.42,3283410],[1601296200000,45.42,45.59,45.42,45.57,4114910],[1601297100000,45.58,45.59,45.51,45.57,4863210],[1601298000000,45.56,45.81,45.5,45.52,3932140],[1601298900000,45.53,45.55,45.19,45.26,5851190],[1601299800000,45.26,45.32,45.03,45.25,5433800],[1601300700000,45.26,45.44,45.24,45.37,5421940],[1601301600000,45.37,45.37,44.91,44.96,11471390],[1601302500000,44.96,45,44.67,44.7,12080210],[1601303400000,44.7,44.84,44.61,44.76,14457810],[1601304300000,44.78,45.02,44.78,44.94,13551180],[1601305200000,44.93,44.99,44.87,44.98,12714810],[1601306100000,44.99,45.05,44.87,44.9,15204170],[1601307000000,44.89,45.12,44.88,45.05,18026960],[1601307900000,45.04,45.09,44.91,44.92,12786780],[1601308800000,44.92,44.96,44.82,44.93,11204630],[1601309700000,44.93,44.97,44.89,44.95,13959970],[1601310600000,44.98,44.98,44.7,44.74,17028270],[1601311500000,44.73,44.87,44.6,44.6,17846400],[1601312400000,44.65,44.65,44.65,44.65,85670],[1601314200000,44.65,44.65,44.65,44.65,599690],[1601315100000,44.65,44.65,44.65,44.65,342680],[1601373600000,44.63,44.68,44.32,44.63,24.77187],[1601374500000,44.62,44.84,44.56,44.71,162081.90988],[1601375400000,44.66,44.85,44.57,44.61,476990],[1601376300000,44.64,44.69,44.55,44.66,1035570],[1601377200000,44.66,44.99,44.66,44.97,1158130],[1601378100000,44.99,45.21,44.94,45.1,1709700],[1601379000000,45.1,45.15,44.99,44.99,2045350],[1601379900000,44.98,45.19,44.91,45.12,2322290],[1601380800000,45.12,45.17,44.75,44.77,3271480],[1601381700000,44.78,44.99,44.77,44.99,2426750],[1601382600000,45,45.14,44.82,44.82,3022190],[1601383500000,44.82,44.88,44.67,44.87,5392920],[1601384400000,44.87,44.9,44.67,44.68,6192020],[1601385300000,44.67,44.83,44.6,44.81,5007270],[1601386200000,44.82,44.87,44.64,44.64,5791410],[1601387100000,44.63,44.68,44.48,44.67,6624430],[1601388000000,44.67,44.71,44.47,44.47,7847600],[1601388900000,44.46,44.52,44.39,44.44,7975480],[1601389800000,44.44,44.57,44.39,44.5,8169370]],
      overlays: [ 
        Overlays['BB'], 
      ]
    }
  },
  mounted: function(){
    this.chart = new DataCube({
      ohlcv: this.mock,
      onchart: [
        {
          type: 'BB',
          name: 'BBL',
          data: []
        }
      ]
    })
  }
}
</script>

<template>
  <v-card id="price_chart" style="padding: 4px;" outlined flat height="100%">
    <trading-vue
      ref="candles_chart"
      :overlays="setup.overlays"
      :extensions="setup.extensions"
      :data="setup.data"
      :width="setup.sizes.width"
      :height="setup.sizes.height"
      :toolbar="true"
      :chart-config="setup.config"
      :title-txt="setup.title"
    ></trading-vue>
  </v-card>
</template>

export default {
  name: "PriceChart",
  components: { TradingVue },
  data() {
    return {
      // Chart setup
      setup: {
        data: new DataCube({
          chart: {
            type: "Candles",
            data: [],
            tf: "5m"
          },
          onchart: [
            {
              type: "Markers",
              name: "Calendar",
              data: [],
            },
          ],
          offchart: [],
        }),
        overlays: [Overlays["Markers"]],
        config: {
          DEFAULT_LEN: 140,
          TB_BORDER: 2,
          CANDLEW: 0.7,
          GRIDX: 200,
          VOLSCALE: 0.3,
        },
        title: "GBP/USD - 5M",
      },
    };
  },

// These are callback methods if requests to API returned data
onCandlesQueryResponse(resp) {
      this.setup.data.set("chart.data", []);
      const instance = this;
      setTimeout(() => {
        instance.setup.data.set("chart.data", resp.data);
      }, 500);
    },
onPassedEventsQueryResponse(resp) {
      // Formatting arrays that comply to Markers data structure
      let values = [];
      resp.data.forEach((ev) => {
        values.push([
          ev.timemillis,
          {
            color: "blue",
            text: "Marker",
            sell: false,
          },
        ]);
      });
      const markers = values;
      const instance = this;
      setTimeout(() => {
        instance.setup.data.set("onchart.Calendar.data", markers);
      }, 500);
    },

[
    [
        1625126400000,
        {
            "color": "blue",
            "text": "Marker",
            "sell": false
        }
    ],
    [
        1625128200000,
        {
            "color": "blue",
            "text": "Marker",
            "sell": false
        }
    ],
	....
]