Understanding makeInteractive in 0.5

If I understand the changes correctly, the desired way to interact with a makeInteractive component is to pass in interactiveState, which is controlled by the component?

In the render method, the interactiveState is a property:

render() {
        var { enabled, endPointCircleFill, endPointCircleRadius } = this.props;
        var { xScale, chartConfig, plotData, xAccessor, interactiveState, show } = this.props;
               ...

https://github.com/rrag/react-stockcharts/blob/master/src/lib/interactive/TrendLine.jsx#L266

Also defined as a property Type

interactiveState: PropTypes.object,

https://github.com/rrag/react-stockcharts/blob/22fdff0298c50b690eb6a6d077f3feef92b81061/src/lib/interactive/TrendLine.jsx#L489

So if we are using trendline, and wanted to “load” in previously saved data (eg trends[] array), is interactiveState the best way to reflect that?

(pretend I have 2 lines that I have saved...)
var myTrends={trends: [{ start: [Ax1, Ay1], end: [Bx2, By2] }, { start: [Cx1, Cy1], end: [Cx2, Cy2] }]}

render(){
                        <EventCapture mouseMove zoom pan>
                    <TrendLine forChart={1} id={1} ref="trend"
                        enabled={this.state.enableTrendLine}
                        type="LINE"   
                                                interactiveState={myTrends}
                        snap={true} snapTo={d => [d.high, d.low]}
                        onStart={() => console.log("START")}
                        onComplete={this.onTrendLineComplete}
                        />
                </EventCapture>
}

I am stumbling understanding the different usages of

• overrideInteractive
• state.interactiveState
• props.interactiveState
• interactive where they are applicable, seems like there were many changes

I guess just wondering is there a brief description out there about the rational, so I can understand it better?

[itsjimbo]

Just wanted to contribute a small plunkr about this for others, which to my understanding is the correct way to load in previous trends[]

https://plnkr.co/edit/e42l6Dk7NaHFHLS3PkIQ?p=info

I am not sure how to directly get access to the EventHandler interactiveState array, without modification to the library.

https://github.com/rrag/react-stockcharts/blob/master/src/lib/EventHandler.js#L58

so I am not sure how the sample code you provided would apply, maybe a plunkr would help if you can make one

this.interactiveState = [
  { chartId: 0, id: 0, interactive: { trends: [...] } },
  { chartId: 0, id: 1, interactive: { retracements: [...] } }
]

instead I have resorted to using the getInteractiveState setInteractiveState methods provided by the Trendline component

[rrag]

this is a clever use of props to override the default behavior. Thanks for sharing. Please use this till a better solution comes out in 0.6