Issues with multiple plotters (histogram, multiline)

[tikidave]

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!

[victorwins]

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]

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?