tvjsx/tvjs-overlays

💴 Collection of overlays made by the TradingVueJs community

TVJS Overlay Pack

TVJS Overlays is a collection of overlays made by the TradingVue.js community.

List

Name	Author	Type	Description	Version
ALMA	StdSquad	OV+Script	Arnaud Legoux Moving Average	1.0.0
ATR	StdSquad	OV+Script	Average True Range	1.0.0
ATRp	StdSquad	OV+Script	Average True Range, %	1.0.0
Area51	👽	OV	Gradient area chart	1.0.0
BB	StdSquad	OV+Script	Bollinger Bands	1.0.0
BBW	StdSquad	OV+Script	Bollinger Bands Width	1.0.0
CCI	StdSquad	OV+Script	Commodity Channel Index	1.0.0
CMO	StdSquad	OV+Script	Chande Momentum Oscillator	1.0.0
COG	StdSquad	OV+Script	Center of Gravity	1.0.0
DHistogram	Acid3croco	OV	Double Histogram Plot	1.0.0
DMI	StdSquad	OV+Script	Directional Movement Index	1.0.0
EMA	StdSquad	OV+Script	Exponential Moving Average	1.0.0
HMA	StdSquad	OV+Script	Hull Moving Average	1.0.0
Histogram	StdSquad	OV	Histogram plot	1.0.0
Ichi	C451	OV+Script	Ichimoku Cloud based on scripts	1.0.0
Ichimoku	Sudeep Batra	OV		1.0.0
KC	StdSquad	OV+Script	Keltner Channels	1.0.0
KCW	StdSquad	OV+Script	Keltner Channels Width	1.0.0
LongShortTrades	Sudeep Batra	OV		1.0.1
MACD	StdSquad	OV+Script	Moving Average Convergence/Divergence	1.0.2
MFI	StdSquad	OV+Script	Money Flow Index	1.0.0
MOM	StdSquad	OV+Script	Momentum	1.0.0
Markers	C451	OV	Interactive markers	1.0.1
PlotCross	StdSquad	OV	Plot line with crosses	1.0.0
ROC	StdSquad	OV+Script	Rate of Change	1.0.0
RSI	StdSquad	OV+Script	Relative Strength Index	1.0.0
Ribbon	StdSquad	OV+Script	Moving Average Ribbon	1.0.0
SAR	StdSquad	OV+Script	Parabolic SAR	1.0.0
SMA	StdSquad	OV+Script	Simple Moving Average	1.0.0
SWMA	StdSquad	OV+Script	Symmetrically Weighted Moving Average	1.0.0
Stoch	StdSquad	OV+Script	Stochastic	1.0.0
TSI	StdSquad	OV+Script	True Strength Index	1.0.0
TradesPlus	C451	OV	Trades overlay with stops	1.0.1
VWMA	StdSquad	OV+Script	Volume Weighted Moving Average	1.0.0
WilliamsR	StdSquad	OV+Script	Williams %R	1.0.0
XOhlcBars	X	OV	Bar Chart	1.3.0

Install

NPM

npm i tvjs-overlays

In browser

<script src="tvjs-overlays.min.js"></script>

How to use

NPM

<template>
<trading-vue :data="data" :overlays="overlays"/>
</template>
<script>

import TradingVue from 'trading-vue-js'
import Overlays from 'tvjs-overlays'

export default {
    name: 'app',
    components: { TradingVue },
    data() {
        return {
            overlays: Object.values(Overlays),
            data: new DataCube(...)
        }
    }
}

</script>

In browser

<div id="app">
<trading-vue :data="data" :overlays="overlays"/>
</div>
<script>
app = new Vue({
    el: '#app',
    data: {
        overlays: Object.values(TvjsOverlays),
        data: new TradingVueJs.DataCube(...)
    }
})
</script>

Adding new overlay

1. Create a folder in src/overlays named just like your overlay: YourOverlayName
2. Your main code must be in YourOverlayName.vue, but you can use .js and .json imports
3. Add your data sample data.json
4. Make sure that the following conditions are met:

    * folder name === .vue file name === overlay name
    * required functions: draw, use_for
    * use_for includes the name
    * use_for.length === 1
    * name is unique (format: CapitalizedWords, Numbers_123)
    * required meta: author, version
    * data.json < 1MB

5. npm run check to check that everything is OK
6. npm run compile to build the development index
7. npm run dev to test your overlays
8. Add a short README.md (example)
9. Submit a PR request to this repo

tvjs-overlays's Issues

Ichimoku overlay shift

Seems like Ichimoku with default settings gets shifted to the right

How to open overlays modal

Please help me! When you click on the button, you need to call the overlay (in the screenshot below)

Button added via position absolute

Overlay doesn’t work

Hey!
I don’t understand why the overlay doesn’t work. Everything is as in the documentation.
In the example, I added a stochastic, but it was not rendered.
Tell me what is my mistake ??
Thanks!

https://codesandbox.io/s/prod-tdd-1v4hp?file=/src/App.vue

Economic Calendar overlay

Hi, sorry to posting here...
Do you have plan to create Economic Calendar overlay?

Again... sorry for asking this here.

Error in mounted hook: "RangeError: Maximum call stack size exceeded"

I'm having issues for some Overlays used (BB, RSI, EMA...), even for this simple example:

<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>

It raises an error:

Markers overlay doesn't render data

I have below template

<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>

and my script block to setup both candles and overlays like below:

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",
      },
    };
  },

In order to populate both candles and Markers overlay, below are my methods:

// 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);
    },

Array of markers data that generated in onPassedEventsQueryResponse method is already like below:

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

On the chart, I can see that the candles rendered perfectly, but why can't I see any markers rendered?
I wonder why... is there any solution?