tradovate / custom-indicators

Step-by-step tutorial for Tradovate custom indicators

custom-indicators

Home for Tradovate Trader custom indicators.

/tutorial: sources for Github Pages with a step-by-step tutorial

/examples: source codes for examples used in the tutorial

/builtin: indicators that are shipped with Tradovate Trader

/tools: helper classes and functions (available in Tradovate Trader)

/typescript: Typescript definitions for interfaces and classes

Third-party repositories

• https://github.com/blakeharv/tradovate-indicators
• https://github.com/paidtofade/tradovate-indicators
• https://github.com/sdmiami/tradovate-custom-indicators

(let us know and we'll add a link to your indicators)

custom-indicators's Issues

Color picker param not available in UI

Inside the predef module, there is a color option:

color(defValue) {
    return {
        type: ParamType.COLOR,
        def: defValue
    };
}

I have implemented it in the params code this way:

params: {
    upColor: predef.paramSpecs.color('lime'),
    downColor: predef.paramSpecs.color('red'),
},

When the indicator is added, the color pickers are not available in the UI:

However it does pick up the default props in the indicator:

style: {
    value: {
        color: close > priorClose ? this.props.upColor : this.props.downColor
    }
}

API Link

Hi Guys,

The README has a link to https://github.com/tradovate/api
However, I do not find that repo...

Thanks!

Issues with multiple plotters (histogram, multiline)

I'm following up on an important issue for custom indicators: https://tradovate.zendesk.com/hc/en-us/community/posts/115007810327-Ability-to-code-custom-indicator-with-any-plot-types

I have been experimenting with multiple plot lines and have bumped into a few issues. Take the following example indicator:

It is built with two indicators, added to a single chart area. I attempted to build it as a single indicator using the following code:

const predef = require('./tools/predef')
const meta = require('./tools/meta')

class tikiTape {
    map(d, i, history) {
        const bidVolume = d.bidVolume()
        const askVolume = d.offerVolume()
        return { 
            bid: -bidVolume,
            ask: askVolume
        }
    }
}

module.exports = {
    name: 'tikiTape',
    description: 'Tiki Tape',
    calculator: tikiTape,
    params: {},
    plots: {
      bid: { title: 'Bid Volume' },
      ask: { title: 'Ask Volume' }
    },
    plotter: { type: 'histogram', fields: ['bid', 'ask'] },
    inputType: meta.InputType.BARS,
    areaChoice: meta.AreaChoice.NEW,
    tags: ['Tiki Tools'],
    schemeStyles: {
        dark: {
            bid: predef.styles.plot({ 
                color: 'red',
                lineWidth: 5
            }),
            ask: predef.styles.plot({ 
                color: 'lightblue',
                lineWidth: 5
            })
        }
    }
}

However, this did not work as it seems histogram requires the value field to be returned as the plot name, and does not accept fields.

Switching the plotter code to plotter: { type: 'multiline', fields: ['bid', 'ask'] } works as expected (except with lines):

However, I noticed that converting the plotter to array format with other plot types (i.e. plotter: [{ type: 'multiline', fields: ['bid', 'ask'] }],) causes all the multiline plots to render a single color:

Changing the plot type to dots (plotter: { type: 'dots', fields: ['bid', 'ask'] },) crashes the app:

20:53:18.553Z TypeError: Cannot read property 'd' of undefined
    at l (tradovate.js:135)
    at tradovate.js:52
    at Array.forEach (<anonymous>)
    at Array.s (tradovate.js:52)
    at Array.$.call (tradovate.js:135)
    at Object.m.draw (tradovate.js:215)
    at tradovate.js:215
    at tradovate.js:9
    at Kr (tradovate.js:9)
    at tradovate.js:9
    at Function.qa (tradovate.js:9)
    at le (tradovate.js:215)
    at ae (tradovate.js:215)
    at e.exports (tradovate.js:215)
    at t.componentDidMount (tradovate.js:175)
    at t.componentDidMount (tradovate.js:138)
    at $a (tradovate.js:135)
    at Xa (tradovate.js:135)
    at Ga (tradovate.js:135)
    at Va (tradovate.js:135)
    at Ya (tradovate.js:135)
    at ba (tradovate.js:135)
    at Object.enqueueSetState (tradovate.js:135)
    at t._.setState (tradovate.js:127)
    at t.updateDims (tradovate.js:45)
    at t.next (tradovate.js:24)
    at t.onNext (tradovate.js:24)
    at t.onNext (tradovate.js:24)
    at Object.<anonymous> (tradovate.js:223)
    at e.container.ItemContainer.emit (goldenlayout.min.js:1)
    at e.container.ItemContainer._$setSize (goldenlayout.min.js:1)
    at e.items.Component.setSize (goldenlayout.min.js:2)
    at e.items.Component._$init (goldenlayout.min.js:2)
    at e.items.Component._$init (goldenlayout.min.js:2)
    at e.items.Component.callDownwards (goldenlayout.min.js:2)
    at e.items.Stack.callDownwards (goldenlayout.min.js:2)
    at e.items.RowOrColumn.callDownwards (goldenlayout.min.js:2)
    at e.items.Root.callDownwards (goldenlayout.min.js:2)
    at e.LayoutManager._create (goldenlayout.min.js:1)
    at e.LayoutManager.init (goldenlayout.min.js:1)

20:53:18.555Z TypeError: Cannot read property 'syncIndicators' of undefined
    at t.componentWillUnmount (tradovate.js:175)
    at t.<anonymous> (tradovate.js:138)
    at t.componentWillUnmount (tradovate.js:138)
    at Ui (tradovate.js:135)
    at qi (tradovate.js:135)
    at $a (tradovate.js:135)
    at Xa (tradovate.js:135)
    at Ga (tradovate.js:135)
    at Va (tradovate.js:135)
    at Ya (tradovate.js:135)
    at ba (tradovate.js:135)
    at Object.enqueueSetState (tradovate.js:135)
    at t._.setState (tradovate.js:127)
    at t.updateDims (tradovate.js:45)
    at t.next (tradovate.js:24)
    at t.onNext (tradovate.js:24)
    at t.onNext (tradovate.js:24)
    at Object.<anonymous> (tradovate.js:223)
    at e.container.ItemContainer.emit (goldenlayout.min.js:1)
    at e.container.ItemContainer._$setSize (goldenlayout.min.js:1)
    at e.items.Component.setSize (goldenlayout.min.js:2)
    at e.items.Component._$init (goldenlayout.min.js:2)
    at e.items.Component._$init (goldenlayout.min.js:2)
    at e.items.Component.callDownwards (goldenlayout.min.js:2)
    at e.items.Stack.callDownwards (goldenlayout.min.js:2)
    at e.items.RowOrColumn.callDownwards (goldenlayout.min.js:2)
    at e.items.Root.callDownwards (goldenlayout.min.js:2)
    at e.LayoutManager._create (goldenlayout.min.js:1)
    at e.LayoutManager.init (goldenlayout.min.js:1)
    at t.r.applyLayout (tradovate.js:223)
    at tradovate.js:223

However, changing the dots plotter to plotter: [{ type: 'dots', field: 'bid' }, { type: 'dots', field: 'ask' }], renders correctly:

Hopefully we can resolve these inconsistencies and have all basic plot types working. Thanks!