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-21 20:44:18 +00:00
Code Activity

🐛 Fix a few rendering bugs

Browse source
This commit is contained in:
Steffo 2021-05-20 15:34:05 +02:00
parent 3a8df55178
commit 75c6ba0833
Signed by: steffo
GPG key ID: 6965406171929D01
4 changed files with 66 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,60 +1,57 @@
import React, { useRef } from "react"
import BoxFull from "./BoxFull"
import ChartComponent from "react-chartjs-2"
import Loading from "./Loading"
export default function BoxChart({chartProps, ...props}) {
const boxContentsRef = useRef(null)
const getCssVar = (variable) => {
const computedStyle = window.getComputedStyle(boxContentsRef.current)
console.debug(variable, computedStyle.getPropertyValue(variable))
const computedStyle = window.getComputedStyle(document.querySelector("main"))
return computedStyle.getPropertyValue(variable).trim()
}
return (
<BoxFull
childrenProps={{ref: boxContentsRef}}
{...props}
>
{boxContentsRef.current ?
<ChartComponent
width={boxContentsRef.current.offsetWidth}
height={boxContentsRef.current.offsetHeight}
options={{
responsive: true,
scales: {
x: {
beginAtZero: true,
grid: {
borderColor: getCssVar("--bg-light"),
color: getCssVar("--bg-light"),
},
ticks: {
color: getCssVar("--fg-primary"),
}
<BoxFull {...props}>
<ChartComponent
options={{
responsive: true,
scales: {
x: {
beginAtZero: true,
grid: {
borderColor: getCssVar("--bg-light"),
color: getCssVar("--bg-light"),
},
y: {
beginAtZero: true,
grid: {
borderColor: getCssVar("--bg-light"),
color: getCssVar("--bg-light"),
},
ticks: {
color: getCssVar("--fg-primary"),
}
},
},
elements: {
bar: {
backgroundColor: getCssVar("--fg-primary"),
borderColor: "transparent",
ticks: {
color: getCssVar("--fg-primary"),
},
}
},
}}
{...chartProps}
/>
: null}
y: {
beginAtZero: true,
grid: {
borderColor: getCssVar("--bg-light"),
color: getCssVar("--bg-light"),
},
ticks: {
color: getCssVar("--fg-primary"),
}
},
},
elements: {
bar: {
backgroundColor: getCssVar("--fg-primary"),
borderColor: "transparent",
color: getCssVar("--fg-primary"),
},
},
plugins: {
legend: {
display: false,
}
}
}}
{...chartProps}
/>
</BoxFull>
)
}

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

@ -1,19 +1,27 @@
import React from "react"
import BoxFull from "../base/BoxFull"
import BoxChart from "../base/BoxChart"
import Empty from "./Empty"
export default function BoxVisualizationChart({ tweets, ...props }) {
// TODO: translate this
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"])
const insertHour = insertDate.getHours()
console.log(insertHour)
hourlyTweetCount[insertHour] += 1
}
if(tweets.length === 0) {
return (
<BoxFull header={"Hourly graph"} {...props}>
<Empty/>
</BoxFull>
)
}
return (
<BoxChart

11
nest_frontend/components/interactive/BoxVisualizationStats.js
View file

@ -5,7 +5,6 @@ import BoxFullScrollable from "../base/BoxFullScrollable"
export default function BoxVisualizationStats({ tweets, words, totalTweetCount, ...props }) {
const tweetCount = useMemo(
() => tweets.length,
[tweets],
@ -42,12 +41,16 @@ export default function BoxVisualizationStats({ tweets, words, totalTweetCount,
)
const wordCount = useMemo(
() => words.map(word => word.value).reduce((a, b) => a + b),
[words],
() => {
if(words.length === 0) return 0
return words.map(word => word.value).reduce((a, b) => a + b)
},
[words]
)
const mostPopularWord = useMemo(
() => {
if(words.length === 0) return "❌"
return words.sort((wa, wb) => {
if(wa.value > wb.value) {
return -1
@ -142,7 +145,7 @@ export default function BoxVisualizationStats({ tweets, words, totalTweetCount,
<b>{uniqueUsersCount}</b>
</FormLabel>
<FormLabel text={"Most active poster"}>
<b>{mostActiveUser.user} ({mostActiveUser.count} tweets)</b>
<b>{mostActiveUser ? `${mostActiveUser.user} (${mostActiveUser.count} tweet${mostActiveUser.count === 1 ? "" : "s"})` : "❌"}</b>
</FormLabel>
</FormLabelled>
</BoxFullScrollable>

10
nest_frontend/components/interactive/BoxVisualizationWordcloud.js
View file

@ -1,11 +1,21 @@
import React, { useContext } from "react"
import BoxWordcloud from "../base/BoxWordcloud"
import ContextLanguage from "../../contexts/ContextLanguage"
import BoxFull from "../base/BoxFull"
import Empty from "./Empty"
export default function BoxVisualizationWordcloud({ words, ...props }) {
const { strings } = useContext(ContextLanguage)
if(words.length === 0) {
return (
<BoxFull header={strings.wordcloud} {...props}>
<Empty/>
</BoxFull>
)
}
return (
<BoxWordcloud header={strings.wordcloud} words={words} {...props}/>
)