unimore/pds-2021-g2-nest
unimore/pds-2021-g2-nest
1
Fork 0
mirror of https://github.com/pds-nest/nest.git synced 2024-11-25 06:24:19 +00:00
Code Activity

🔧 Don't rerender chart at every state change

Browse source
This commit is contained in:
Steffo 2021-05-23 16:16:04 +02:00
parent 2c57bd0238
commit f734299ac2
Signed by: steffo
GPG key ID: 6965406171929D01
2 changed files with 42 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
nest_frontend/components/base/BoxChart.js
View file

@ -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 (
<BoxFull {...props}>
const chart = useMemo(
() => (
<ChartComponent
options={{
responsive: true,
@ -51,6 +51,13 @@ export default function BoxChart({ chartProps, ...props }) {
}}
{...chartProps}
/>
),
[chartProps]
)
return (
<BoxFull {...props}>
{chart}
</BoxFull>
)
}

40
nest_frontend/components/interactive/BoxVisualizationChart.js
View file

@ -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={{
type: "bar",
data: {
labels: hours.map(hour => hour.toString()),
datasets: [
{
label: "Tweets",
data: hourlyTweetCount,
},
],
},
}}
chartProps={chartProps}
{...props}
/>
)