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. Is there a way to partially re-render a plot? #219, How to properly use extendTraces #85, How to change marker color for only some values in line graph? #145)
• Gives full control over the host element by exposing the ref (Demand for "ref" prop support #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

[himbeles]

minor fix regarding requirement versions

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

[alexcjohnson]

flyd and ramda seem like they'd be better as dependencies rather than peerDependencies - and then let's change from >= to ^

[floriancargoet]

Are 2 news deps really required?
ramda seems to be used just to write this code in the functional style.
The author himself said in the related issue that it could be replaced with:

function getSizeForLayout(entries) {
    const { width, height } = entries[0].contentRect;
    return { layout: { width, height } };
}

[alexcjohnson]

Good question @floriancargoet - ramda has a couple of other uses in this PR (and we do use it a good deal elsewhere at Plotly), but to my mind your getSizeForLayout rewrite is more readable than the full functional version.

[JamesRamm]

While yes getSizeForLayout can be written easily without ramda (happy to do this), the main reason it was included was for mergeDeepRight which is a relatively complex function to implement.
We could go for an independent implementation but my argument would be that ramda is relatively small and compatible with tree shaking

[alexcjohnson]

Right, deep merge is annoying to reimplement. I have no problem adding this (and flyd) but I do think they belong in dependencies.

[alexcjohnson]

Since you've implemented extendTraces here, let's finish it by including maxPoints (the optional 4th argument to extendTraces)

[terebentina]

Shouldn't updates be added to the dependencies list here since it's used inside the hook?

[JamesRamm]

since updates is memoized with an empty array, it will only be computed once on mount, so adding it to the dependencies array or not for plotlyState will have no effect....

[terebentina]

Shouldn't observer be added as a dependency here since it's used inside the hook?

[Michael-fore]

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

@alexcjohnson

[alexcjohnson]

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