functionMyChart(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`constchangeData=()=>updates({data:[{y:[Math.random()*10],type:'scatter'}]})// Here we start extending traces using the `appendData` streamconstextendData=setInterval(()=>{appendData({data:{y:[[Math.random()*10]]},tracePos:[0]});},500);return(<div><divref={ref}style={{width:'500px',height:'300px'}}/><buttononClick={changeData}>React!</button><buttononClick={extendData}>Extend!</button></div>);}

updates can be treated as a function that you can give partialFigure definitions to and it will update the graph usingPlotly.react
appendData can also be used as a function which is directly mapped on toPlotly.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 theref (Demand for "ref" prop support #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

JamesRamm added3 commits

February 9, 2022 15:37

hook-based API for react-plotly

86e2a38

Update usePlotly.js

aa200c9

Remove unused argument

Update package.json

1d0b7fc

Add dependencies for usePlotly hook

himbeles suggested changes

Mar 9, 2022

View reviewed changes

Copy link

himbeles left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

minor fix regarding requirement versions

package.json OutdatedShow resolvedHide resolved

Fix version strings

95cb40d

Copy link

govindthakur25 commentedJun 1, 2022

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

Update README

eb226fe

Adds example of `usePlotly`

Copy link

Author

JamesRamm commentedJun 2, 2022

@govindthakur25
I have added a README section.

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

Copy link

Author

JamesRamm commentedJun 30, 2022

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

Copy link

himbeles commentedJun 30, 2022

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

Copy link

Dyocius commentedJun 30, 2022

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

Copy link

Author

JamesRamm commentedOct 12, 2022

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?

Copy link

Collaborator

alexcjohnson commentedOct 13, 2022

@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 tohttps://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 CircleCIhttps://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 reviewed

Oct 13, 2022

View reviewed changes

package.json

		"react": ">0.13.0"
		"react": ">0.13.0",
		"flyd": ">=0.2.8",
		"ramda": ">=0.28.0"

Copy link

Collaborator

alexcjohnsonOct 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

flyd andramda seem like they'd be better asdependencies rather thanpeerDependencies - and then let's change from>= to^

Copy link

floriancargoetOct 13, 2022•
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

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 } };}

Copy link

Collaborator

alexcjohnsonOct 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

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 yourgetSizeForLayout rewrite is more readable than the full functional version.

Copy link

Author

JamesRammOct 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

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

Copy link

Collaborator

alexcjohnsonOct 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Right, deep merge is annoying to reimplement. I have no problem adding this (andflyd) but I do think they belong independencies.

alexcjohnson reviewed

Oct 13, 2022

View reviewed changes

src/usePlotly.js

		Plotly.react(internalRef, state);
		});

		const endAppend = appendData.map(({ data, tracePos }) => Plotly.extendTraces(internalRef, data, tracePos));

Copy link

Collaborator

alexcjohnsonOct 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Since you've implementedextendTraces here, let's finish it by includingmaxPoints (the optional 4th argument toextendTraces)

terebentina reviewed

Oct 13, 2022

View reviewed changes

src/usePlotly.js

		const appendData = useMemo(stream, []);
		const plotlyState = useMemo(
		() => scan(mergeDeepRight, { data: [], config: {}, layout: {} }, updates),
		[]

Copy link

terebentinaOct 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

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

Copy link

Author

JamesRammOct 14, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

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