tradovate / custom-indicators

Step-by-step tutorial for Tradovate custom indicators
22 stars 2 forks source link

Issues with multiple plotters (histogram, multiline) #1

Closed tikidave closed 5 years ago

tikidave commented 5 years ago

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:

2018-09-18_1629

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

2018-09-18_1635

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:

2018-09-18_1638

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:

2018-09-18_1657

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

victorwins commented 5 years ago

the histogram and dots plotters do not support "fields" parameter in the current version. It will be available in the future one. The currently supported plotters and parameters are listed here: https://tradovate.github.io/custom-indicators/plotter.html

artz commented 5 years ago

Hey Victor, is there an ETA on multiple plotter support for histograms? If not, do you have suggestions on creating a single indicator with multiple histogram plots using a custom plotter?