🔧 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,13 +10,36 @@ export default function BoxVisualizationChart({ ...props }) {
     const { strings } = useContext(ContextLanguage)
     const { tweets } = useContext(ContextRepositoryViewer)
 
-    const hours = [...Array(24).keys()].map(hour => hour.toString())
+    const chartProps = useMemo(
-    const hourlyTweetCount = Array(24).fill(0)
+        () => {
-    for(const tweet of tweets) {
+            const hours = [...Array(24).keys()].map(hour => hour.toString())
-        const insertDate = new Date(tweet["insert_time"])
+            const hourlyTweetCount = Array(24).fill(0)
-        const insertHour = insertDate.getHours()
+            for(const tweet of tweets) {
-        hourlyTweetCount[insertHour] += 1
+                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 (
@@ -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}
         />
     )