I am currently working on an component that fetch data from 2 different end points. First end point delivers multiple data measured by sensors and a timestamp. The second endpoint offers predicted values for sensor data and timestamp also. After i fetch the data i combine the fetched data and try to create a chart based on combined data, having diferent lines for every measured or predicted parameters. For chart I,m using Rechart library. When i first load the page with the graphics, the graph displays all the data as i intended, but after a second or two, the chart is losing some of the values and "shrinks".
Another mention is that the requests for data are made for a range of days and im using a datetimepicker for choosing the range. After the graph loads, if i change the range the new set of data is displayed correctly so the problem occurs only on the first render i think.
Does anyone had a problem like this? Or what can be the cause of it?
Related
We have an application where we need to plot ~13K+ markers on a map depending on the users current filters. I have found that react-leaflet does not handle this many markers very well. I even offloaded all of the popup data to a separate query on popup to reduce the initial data load, but to no avail.
I did find that using clustering does help improve the performance, so I have enabled that (even though it is not in the following example code). But even with clustering, on the initial map load a user might have to wait 20 seconds for the map to render with the markers, but the actual data fetch from the GraphQL API is less than a second.
I am trying to find a way to only fetch the markers that are present within the bounding box of the page. I am doing this successfully, but the problem now is that all of the markers flash (re-render) when the map is moved/zoomed even if the new bounds is just a subset of the original.
CodeSandbox: https://codesandbox.io/s/graphql-markers-t409f?file=/src/App.js
Is there a way for react-leaflet to only re-render the markers that are new and not all the markers? I am providing the unique id of the marker from the api to the Marker component key field, but that doesn't seem to provide any improvements.
I am thinking that maybe the best way to handle it would be to do something to manage the map bounds to the min east, max west, max north, and min south and only refetch if the new bounds are outside of the currently fetched area. This along with a 10-20% over area fetch to not refetch if the map is only very slightly moved in any direction.
Note: I am not guaranteeing that this GraphQL backend will be available after the question has been answered. There is a 1Mb/Day data transfer limitation on this backend in case this question blows up and you cannot see the markers. See the README in the codesandbox for steps to setup the backend for free online in under 2 minutes.
Some related issues that may help if no other solution is found:
Limit rendering Popups
Not the same question as Plotting 140K points in leafletjs. I am specifically looking for an answer to how it might be possible to update markers to remove markers not in new data fetch and add new markers not present in previous data fetch without re-rendering existing markers.
Take a look at the example code and you will see the markers flash as they all get re-rendered when the new data is fetched. This might lead to a better hybrid between performance and UX as I really don't want to use the CircleMarker and I already added clustering but still have existing lag.
You should use the React Canvas Markers plugin. The poor performance is because the default behavior is to create an individual div for each marker. This avoids the performance hit by writing your map and markers to a canvas element. Here's a working example from SO.
Using the npm package azure-maps-control. After the user drags around in the map. I would like to upgrade the points of intrest using a API call. For this i found multiple events. It looks like that the sourcedata event can be used. Unfortunately after dragging i need the new GPS locations. How do i retrieve those?
For your scenario you will most likely want to wait until the user has stopped moving the map before making a request to a service to retrieve custom data since doing this while the map moves would potentially generate tens of requests per second. What you will want to do is monitor the moveend event of the map by doing something like map.events.add('moveend', yourCallbackFunction). When this event fires, you can then retrieve the center position of the map using map.getCamera().center. Here is a code sample from the Azure Maps team that does all of this and a bit more: https://azuremapscodesamples.azurewebsites.net/?sample=Load%20POIs%20as%20the%20map%20moves This sample makes multiple requests when the moveend event fires as the service it calls returns a max of a 100 results at a time, and this sample steps through and pulls in additional results.
I have a requirement to consume huge volume of data ( like more than 100000 rows) by calling API end point and Data format is JSON and display them in react page. I am developing the logic using React-Table, but would like to hear experts opinion to know whether this is possible in reactjs? Is React-Table the right option in reactjs? Will there be performance issues?
Yes this is surely possible but involves the usage of virtual views like react-virtualized
The problem with 100k rows is that first render takes a lot of time, scroll could be tedious and every re-render takes a significant amount of time too.
With virtual views data is rendered only in active viewport and element are added/removed upon scroll reducing the rendering/reconciliation payload.
I implemented google Map with cluster and polyline drawing with vehicle moving on it, and divided map functionality with time slots please check image to get clear understanding,
My Main Problem when large number of lat longs comes in response rendering get hanged for few seconds and also please wait loading (Some time get hanged), Sometimes also result in the no response with the page ,
Please help me with the solutionConsole Errors
Map Image with buttons functionality
I understand that I can a render maps on timeline cards. Can I create a card with a set of coordinates that display live updates with the distance to those coordinates?
No map is displayed, just a number (meters, feet) that is updated as the user moves.
From what I can tell that is not possible at the moment.
All you can do with the locations queries are gets and lists. From what I understand it updates every ten minutes as you can read at: https://developers.google.com/glass/location
Yes, you can create a card that contains this information, but it requires that you use some other APIs in addition to the Mirror API. The Google Distance Matrix API appears to be a good fit for this use case.
Every time you'd like to update the timeline card, make a request to the Distance Matrix API to determine the travel distance across that set of coordinates. Convert this into a human readable format, and include it into the timelineItem.text or timelineItem.html field for the card.