react-plotly.js
react-plotly.js copied to clipboard
plotly
Hook-based API
As discussed in #242 here is a simple hook-based API for react-plotly.
Usage
The hook gives you a ref and two streams: updates and appendData.
Here is an example:
function MyChart(props) {
const { ref, updates, appendData } = usePlotly();
// Here is a function that will change the data. You must pass a partial Figure object (plotly DSL object) which will be
// merged with all previous calls to `updates`
const changeData = () => updates({ data: [ { y: [Math.random() * 10], type: 'scatter' } ] })
// Here we start extending traces using the `appendData` stream
const extendData = setInterval(() => {
appendData({ data: { y: [[Math.random() * 10]]}, tracePos: [0] });
}, 500);
return (
<div>
<div ref={ref} style={{ width: '500px', height: '300px' }}/>
<button onClick={changeData}>React!</button>
<button onClick={extendData}>Extend!</button>
</div>);
}
updates can be treated as a function that you can give partial Figure definitions to and it will update the graph using Plotly.react
appendData can also be used as a function which is directly mapped on to Plotly.extendTraces every time it is called.
Advantages
- I believe this essentially exposes all of plotly to react with a much smaller API surface.
- Can be used in functional react components and in conjunction with other react hooks
- Ability to easily use extendTraces answers a few issues (e.g. #219, #85, #145)
- Gives full control over the host element by exposing the
ref(#209) which gives you full access to the plotly API (functions/events, throughref.current) - Better (IMO) responsive behaviour - responds to element resize events, always fills its parent element but doesnt exceed.
- Keeps up with the direction React is heading in as a whole
Suggestion: It would be good to have a section in the README for this hook, with a few working codepen examples.
@govindthakur25 I have added a README section.
@himbeles What is needed to get this merged? Can we go ahead?
@govindthakur25
I have added a README section.
@himbeles
What is needed to get this merged? Can we go ahead?
Just to clarify, I'm not a maintainer of this project.
I am just going to put some names of previous committers here in the hope of getting some movement:
@alexcjohnson @nicolaskruchten @bpostlethwaite
Sorry for the spam but it seems there is no-one actively looking at this repo?
@JamesRamm apologies for the silence from us maintainers. This looks great! I'll make a few comments on the code itself, but the one extra thing I'll ask is some basic tests - either add to https://github.com/plotly/react-plotly.js/blob/master/src/tests/react-plotly.test.js or put a new file next to it for this purpose. We do have this repo connected to CircleCI https://app.circleci.com/pipelines/github/plotly/react-plotly.js - hopefully the config changes I just made there will enable it to (a) run on this and other forked PRs and (b) show up in the status of this PR 🤞
