🔧 Don't rerender chart at every state change

nest_frontend/components/base/BoxChart.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React, { useMemo } from "react"
 import BoxFull from "./BoxFull"
 import ChartComponent from "react-chartjs-2"
 
@@ -9,8 +9,8 @@ export default function BoxChart({ chartProps, ...props }) {
         return computedStyle.getPropertyValue(variable).trim()
     }
 
-    return (
+    const chart = useMemo(
-        <BoxFull {...props}>
+        () => (
             <ChartComponent
                 options={{
                     responsive: true,
@@ -51,6 +51,13 @@ export default function BoxChart({ chartProps, ...props }) {
                 }}
                 {...chartProps}
             />
+        ),
+        [chartProps]
+    )
+
+    return (
+        <BoxFull {...props}>
+            {chart}
         </BoxFull>
     )
 }

nest_frontend/components/interactive/BoxVisualizationChart.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext, useMemo } from "react"
 import BoxFull from "../base/BoxFull"
 import BoxChart from "../base/BoxChart"
 import Empty from "./Empty"
@@ -10,14 +10,37 @@ export default function BoxVisualizationChart({ ...props }) {
     const { strings } = useContext(ContextLanguage)
     const { tweets } = useContext(ContextRepositoryViewer)
 
+    const chartProps = useMemo(
+        () => {
             const hours = [...Array(24).keys()].map(hour => hour.toString())
             const hourlyTweetCount = Array(24).fill(0)
             for(const tweet of tweets) {
-        const insertDate = new Date(tweet["insert_time"])
+                if(!tweet["post_time"]) {
+                    console.debug("Tweet ", tweet, " has no post time, skipping...")
+                    continue
+                }
+
+                const insertDate = new Date(tweet["post_time"])
                 const insertHour = insertDate.getHours()
                 hourlyTweetCount[insertHour] += 1
             }
 
+            return {
+                type: "bar",
+                data: {
+                    labels: hours.map(hour => hour.toString()),
+                    datasets: [
+                        {
+                            label: "Tweets",
+                            data: hourlyTweetCount,
+                        },
+                    ],
+                }
+            }
+        },
+        [tweets]
+    )
+
     if(tweets.length === 0) {
         return (
             <BoxFull header={"Hourly graph"} {...props}>
@@ -29,18 +52,7 @@ export default function BoxVisualizationChart({ ...props }) {
     return (
         <BoxChart
             header={strings.hourlyGraph}
-            chartProps={{
+            chartProps={chartProps}
-                type: "bar",
-                data: {
-                    labels: hours.map(hour => hour.toString()),
-                    datasets: [
-                        {
-                            label: "Tweets",
-                            data: hourlyTweetCount,
-                        },
-                    ],
-                },
-            }}
             {...props}
         />
     )