Added further optimazation

Birdmap.API/ClientApp/src/components/dashboard/Dashboard.jsx

@@ -57,6 +57,9 @@ class Dashboard extends Component {
     componentWillUnmount() {
         this.context.removeHandler(C.update_all_method_name, this.updateSeries);
         this.context.removeHandler(C.update_method_name, this.updateSeries);
+        if (this.updateTimer) {
+            clearTimeout(this.updateTimer);
+        }
     }
 
     getItemsWithStatus(iterate, status) {
@@ -125,7 +128,7 @@ class Dashboard extends Component {
             barDevicePoints[d.id] = Array(3).fill(0);
         }
 
-        const processMethod = (items, index) => {
+        const processHeatmapItem = (items, index) => {
             const p = items[index];
             if (p.date > minuteAgo) {
                 var seconds = Math.floor((p.date.getTime() - minuteAgo.getTime()) / 1000);
@@ -164,7 +167,7 @@ class Dashboard extends Component {
             }
         }
 
-        const finishMethod = () => {
+        const onFinished = () => {
             const minuteHeatmapSeries = [];
 
             var i = 0;
@@ -236,20 +239,23 @@ class Dashboard extends Component {
                 return categories;
             }
 
-            this.setState({
-                heatmapSecondsSeries: minuteHeatmapSeries,
-                heatmapMinutesSeries: hourHeatmapSeries,
-                barSeries: barSeries,
-                barCategories: getBarCategories(),
-                lineSeries: lineSeries,
+            const toUpdate = [
+                { heatmapSecondsSeries: minuteHeatmapSeries },
+                { heatmapMinutesSeries: hourHeatmapSeries },
+                { barSeries: barSeries },
+                { barCategories: getBarCategories() },
+                { lineSeries: lineSeries }
+            ];
+
+            //Set states must be done separately otherwise ApexChart's UI update freezes the page.
+            this.performTask(toUpdate, 2, 300, (list, index) => {
+                this.setState(list[index]);
+            },
+            () => {
+                this.updateTimer = setTimeout(this.updateDynamic, 1000);
             });
-
-            setTimeout(this.updateDynamic, 1000);
         }
 
-        const processHeatmapItem = processMethod.bind(this);
-        const onFinished = finishMethod.bind(this)
-
         this.performTask(this.context.heatmapPoints, Math.ceil(this.context.heatmapPoints.length / 50), 20,
             processHeatmapItem, onFinished);
     }

Birdmap.API/ClientApp/src/components/dashboard/charts/HeatmapChart.jsx

@@ -8,6 +8,21 @@ export class HeatmapChart extends Component {
     
         this.state = {
             options: {
+              chart: {
+                animations: {
+                  enabled: true,
+                  easing: 'linear',
+                  speed: 250,
+                  animateGradually: {
+                      enabled: false,
+                      speed: 250,
+                  },
+                  dynamicAnimation: {
+                      enabled: true,
+                      speed: 250
+                  }
+                }
+              },
               dataLabels: {
                 enabled: false
               },