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