Hook-based API

[JamesRamm]

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, through ref.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

[govindthakur25]

Suggestion: It would be good to have a section in the README for this hook, with a few working codepen examples.

[JamesRamm]

@govindthakur25 I have added a README section.

@himbeles What is needed to get this merged? Can we go ahead?

[JamesRamm]

Bump Not sure what is needed to get this merged...

[himbeles]

@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.

[Dyocius]

@nicolaskruchten Do you know who the maintainer of this repo is?

[JamesRamm]

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?

[alexcjohnson]

@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 🤞

[Michael-fore]

Y'all... uhhh... gonna merge this?

@alexcjohnson

[alexcjohnson]

There are a number of unresolved review comments before we can merge