i want to make a react app that allows to filter a sankey-diagram with a slider.
I'm rather new to react, so i'm still a bit overwhelmed.
This is the current state:
https://codesandbox.io/s/react-d3-sankey-3gbfjh
The code for the sankey Diagram is based on the example on observable: https://observablehq.com/#d3/sankey
There are several issues at the moment:
The filtered data is only available after the slider is used once
The plot does not change even though the data does
The second part is solved if i add the data to the dependency array in the useEffect hook i use to draw the chart, then the new chart is however drawn on top of the previous one.
I'm glad for any help with this.
I got it to work now. As i figured above the data should be included in the dependency array. To clear the plot when changing the data i use this code:
svg.selectAll("*").remove();
My approach appears to be similiar to this actually:
https://blog.griddynamics.com/using-d3-js-with-react-js-an-8-step-comprehensive-manual/
Related
I'm working with React Force Graph (2D - https://github.com/vasturiano/react-force-graph) and trying to display custom tooltip on node hover.
This custom Tooltip (dummy component) would display data that's not returned by node - I'd like to add some details to the tooltip, and those are not stored in node data that's returned for example by onNodeHover).
I've seen that I could use nodeLabel which displays simple text label... but it accepts only strings and some simple string interpolations. Unfortunately I can't pass a component as params.
Does anyone know what would be a good approach to this? How this could be handled? Extra points for working examples :D
So here's the answer:
nodeLabel doesn't accept React Node but can easily accept string. So workaround for that problem is just passing the whole stringified html code to nodeLabel and RFG will handle that! This is the best solution I believe (althou native RFG tooltip doesn't support left/right - top/bottom switching in case tooltip would be cut by the edge of screen, but thats minor problem).
other solution that I wouldn't recommend would be to create useCursorPosition and whenever onNodeHover returns something else than null we can set state of displayNode to true (and display it conditionally based on this state) in positions returned by useCursorPosition. This solution is flaky thou, because sometimes onNodeHover doesn't return null I user scrolls fast outside the canvas boundaries (hence the tooltip stays displayed forever). In this solution it's also recommended to use requestAnimationFrame to limit the listener on cursor position.
My App.js looks roughly like this:
<HorizontalNavigation />
<DataPanel />
The HorizontalNavigation component contains a Button to export the DataPanel containing charts into a PDF File. This already works fine. Now there is one tiny thing I need to do on the Chart components before I export them.
I am a react beginner, but when I understand correctly a basic solution would be to lift state up to a common ancestor of HorizontalNavigation and DataPanel. That would feel weird as I would have to reach down that state to a lot of intermediate components from DataPanel to the actual charts components. Also they would all be rerendered when this is not necessary at all.
What I had in mind is to use an observable pattern where the PDF export button notifies all charts to do their thing before exporting. How would you design such a pattern in react? The PDF Export button would be my subject to which the charts observers had to attach. But as I don't have a reference to the subject, how do observers attach?
As I'm a react beginner there might be a much more simple solution I don't see yet. So I also appreciate suggestions for other solutions.
What you are looking is state transfer between component. Have a look at below link
https://reactjs.org/docs/hooks-reference.html#usecontext
I have an ag-grid instance, which have to be updated continuously, every few seconds, with fresh data by calling a service.
I want the grid to update only the cells with changed data.
Is there any way to achieve this using React?
Thanks in advance.
assuming you bind the grid data correctly, and don't alter the rowBuffer, or otherwise force the grid to render all its data to the DOM (thereby turning off virtualization), you should be fine.
the grid will test for changes in the data and only render what was updated (see the docs on change-detection).
if you still find you need some boost (like when you have real large datasets) you can try batch-transactions.
all of the above is correct regardless of framework; these are core features of ag-grid.
When we render all the list at a time the browser is getting lagged
We are trying to render a chart with 100k+ item in an array, where all the items in the array should display in the chart.
Is there is any best way to do it in React
Consider using Lazy loading like https://github.com/bvaughn/react-virtualized
but don't recommend showing such a huge set of data at once, what you can do is to have pagination, both client-side and server-side pagination.
for a line chart with huge data set, please consider using canvasjs https://canvasjs.com/react-charts/performance-demo-chart/
Use react virtual list, it will render only visible items.
https://github.com/bvaughn/react-virtualized
I am using the angularjs wrapper of the Chartjs. I am updating the graph when the new data receive from a push event program. Also I am coloring in-between selected graph data sets.
When I go to another page and come back to the graph page again, the opacity of the color of the dataset getting increased and ultimately opacity goes away.
It seems to me that the data set colors are doesn't get cleared when I revisit the page. However this issue get solved when I refresh the page.
How can I clear the previous data set details when I revisit.
I tried the chart.clear() but didn't work
angular-chartjs is outdated and don't really work with the newer versions of chartJS.
Check this issue out: #677.
The issuer gives an example on how to implement chartJS with a wrapper. You need to be aware of the fact that chartJS alone don't handle the colors anymore. You need to set them on your own.
On the other hand if you really don't want to do it on your own you could try my wrapper implementation for chartJS.