I'm using addPoint with animation=true to update a series in Highcharts. When the update frequency is higher than the animation duration the whole time series is showing some strange animation.
Example: http://jsfiddle.net/t797ewpw/13/
Related issue: https://github.com/highcharts/highcharts/issues/7926
I tried to find a workaround (maybe using some callback to keep the state of a running animation and delay calls to addPoint). But it seems there is no such callback (only for initial animation).
Are there any other workarounds for this issue?
Related
I have the following issue:
I would like to create a simple choropleth map using react-leaflet's GeoJSON component. I also want to have a tooltip that shows a value on hover over a GeoJSON feature. The problem is performance. A CodePen example can be found here: https://codepen.io/timester-the-typescripter/pen/gOXGKOY
I attach event handlers to each GeoJSON feature and set a state variable in my "main" component that holds the value for the currently hovered area.
const [selected, setSelected] = React.useState(null);
My tooltip relies on that state variable to show its value. Because every mouse hover event causes main component state change, the GeoJSON component gets re-rendered all the time. This is not a huge problem in the CodePen example, but for a full world map it is unfortunately.
I assume that the state change causes this because if I comment out the 2 setSelected lines (line 55, and line 67 in CodePen), the re-renders (calls to createGeoJSON ) stop, and the event handlers run a lot faster as the profiler pictures show below.
Mouseout event with state change:
Mouseout event with state change commented out:
I tried many solutions with no success. For example I think I can't memoize the GeoJSON component because the Tooltip must be its child and that depends on the state of the main component.
In the future I want to add more components depending on the hovered state variable like a legend, etc.. and maybe that variable will be a bit more complex than a simple number too.
What options do I have here? I had another stackowerflow question about this, but then I did not understand the problem completely, so it was not super focused. I'm at the point where I'm thinking about rewriting it in Angular. I found react and react-leaflet very pleasant to work with, until this issue came up.
The problem is that currently you are recreating the map with the appropriate Tooltip on each mouseover via the state. Instead, you should bind all Tooltips at map creation with layer.bindTooltip(). This will allow you to just show/hide them without having to recreate the map again, since they are already created and their creation will not rely on state.
See this github issue for an example with Popups (but the logic for Tooltips should be the same): https://github.com/PaulLeCam/react-leaflet/issues/33
I got help from this reddit comment https://www.reddit.com/r/reactjs/comments/std46f/comment/hx3yq34/?utm_source=share&utm_medium=web2x&context=3
The solution I applied based on this is not to use the Tooltip as a child component, but bind a tooltip to each layer in the onEachFeature method.
const onEachFeature = useCallback((feature, layer) => {
layer.bindTooltip(feature.properties.COUNT, {sticky: true});
...
This way I could also wrap the GeoJSON component in a useMemo() as there were no longer dependencies on the selected state. I also wrapped the style and onEachFeature functions in useCallback().
This combination solved the issue!
I'm using react FullCalendar component and I need to change the background color of an event as it becomes the "CurrentEvent" (when the now indicator is over it).
I'm able to do that when I load the screen, but I also need to do it when the screen is open and the "current event" changes as the time passes.
The way I was thinking about doing that is by using any callback indicating this situation and then changing the style, but I'm not finding any callback that points out this situation.
Any ideas? Thank you.
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.
I've managed to render a react-virtulized List to which I passed an array of react-bootstrap Panels. I've measured each of my rows, and via children callback, each time one of the child panels are clicked, an attribute in the parent state is updated. Said attribute is used inside the react-virtualized List rowHeight() function top check whether that panel is currently expanded. Then, using a ref to my List, i call the recomputeRowHeights(index) and forceUpdateGrid() methods on saidref.
The thing is, while the List component correctly updates both the height and position of my rows, the animation isn't smooth. I mean, the bootstrap expand animation works fine, but the change in height of the expanded row happens instantly after the click event, and then the animation starts, feeling somewhat chopy.
Is there any workaround for this, or is this an upcoming/planned/in the works feature for react-virtualized?
Unfortunately, I have not spent much time working with or optimizing for resize animations within react-virtualized. It doesn't surprise me to hear that the resize/reposition is a bit choppy in the case you mention.
Here's a quick-and-dirty example of one way you may add animation: plnkr.co/edit/VanCAQmSkUejp3hbJUyJ?p=preview. Not meant to be bug free, just an illustration. :D
I've created a React Application with a grid that you can filter and I used Griddle for my grid and then added a control that shows the number of visible rows when filtering. However, when filtering there is about a 1/2 second delay from when I calculate the new new values to write out and when the update is done by React. As you can see in the gif below the console is writing out logging in my code that goes to the bottom of the stack and then from there it's all React code.
I profiled this issue in chrome and the results of that are shown in the image below. The top two calls are the last parts of my code. As you can see that code executes quickly and then there is 1/2 a second spent doing the Mixin.closeall call. Any ideas on what could be causing this?