diff --git a/nest_frontend/components/base/BoxChart.js b/nest_frontend/components/base/BoxChart.js new file mode 100644 index 0000000..ebb7c93 --- /dev/null +++ b/nest_frontend/components/base/BoxChart.js @@ -0,0 +1,60 @@ +import React, { useRef } from "react" +import BoxFull from "./BoxFull" +import ChartComponent from "react-chartjs-2" + + +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)) + return computedStyle.getPropertyValue(variable).trim() + } + + return ( + + {boxContentsRef.current ? + + : null} + + ) +} diff --git a/nest_frontend/components/base/BoxMap.js b/nest_frontend/components/base/BoxMap.js index 617ab24..a39f8c7 100644 --- a/nest_frontend/components/base/BoxMap.js +++ b/nest_frontend/components/base/BoxMap.js @@ -5,7 +5,6 @@ import { MapContainer, TileLayer } from "react-leaflet" export default function BoxMap({ - header, setMap, startingPosition = { lat: 41.89309, lng: 12.48289 }, startingZoom = 3, @@ -15,7 +14,6 @@ export default function BoxMap({ }) { return ( diff --git a/nest_frontend/components/interactive/BoxVisualizationChart.js b/nest_frontend/components/interactive/BoxVisualizationChart.js new file mode 100644 index 0000000..efda701 --- /dev/null +++ b/nest_frontend/components/interactive/BoxVisualizationChart.js @@ -0,0 +1,36 @@ +import React from "react" +import BoxFull from "../base/BoxFull" +import BoxChart from "../base/BoxChart" + + +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 + } + + + return ( + hour.toString()), + datasets: [ + { + label: "Tweets", + data: hourlyTweetCount, + } + ], + } + }} + {...props} + /> + ) +} diff --git a/nest_frontend/components/interactive/BoxVisualizationGraph.js b/nest_frontend/components/interactive/BoxVisualizationGraph.js deleted file mode 100644 index fbcf990..0000000 --- a/nest_frontend/components/interactive/BoxVisualizationGraph.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react" -import BoxFull from "../base/BoxFull" - - -export default function BoxVisualizationGraph({ children, className, ...props }) { - // TODO: translate this - // TODO: implement this - - return ( - - {children} - - ) -} diff --git a/nest_frontend/components/interactive/BoxVisualizationStats.js b/nest_frontend/components/interactive/BoxVisualizationStats.js index 4f64d33..df11a20 100644 --- a/nest_frontend/components/interactive/BoxVisualizationStats.js +++ b/nest_frontend/components/interactive/BoxVisualizationStats.js @@ -41,8 +41,6 @@ export default function BoxVisualizationStats({ tweets, words, totalTweetCount, [tweetContentCount, tweetCount], ) - console.debug(words) - const wordCount = useMemo( () => words.map(word => word.value).reduce((a, b) => a + b), [words], diff --git a/nest_frontend/components/interactive/PickerVisualization.js b/nest_frontend/components/interactive/PickerVisualization.js index 7117bd0..a1f61f7 100644 --- a/nest_frontend/components/interactive/PickerVisualization.js +++ b/nest_frontend/components/interactive/PickerVisualization.js @@ -6,6 +6,10 @@ import { faChartBar, faCloud, faMap, faStar } from "@fortawesome/free-solid-svg- export default function PickerVisualization({ currentTab, setTab, ...props }) { return (
+ setTab("stats")} disabled={currentTab === + "stats"} color={"Grey"} icon={faStar} + /> setTab("wordcloud")} disabled={currentTab === "wordcloud"} color={"Grey"} icon={faCloud} @@ -15,10 +19,6 @@ export default function PickerVisualization({ currentTab, setTab, ...props }) { "histogram"} color={"Grey"} icon={faChartBar} /> setTab("map")} disabled={currentTab === "map"} color={"Grey"} icon={faMap}/> - setTab("stats")} disabled={currentTab === - "stats"} color={"Grey"} icon={faStar} - />
) } diff --git a/nest_frontend/routes/PageRepository.js b/nest_frontend/routes/PageRepository.js index 1783630..43c501d 100644 --- a/nest_frontend/routes/PageRepository.js +++ b/nest_frontend/routes/PageRepository.js @@ -12,7 +12,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { useParams } from "react-router" import Loading from "../components/base/Loading" import BoxVisualizationStats from "../components/interactive/BoxVisualizationStats" -import BoxVisualizationGraph from "../components/interactive/BoxVisualizationGraph" +import BoxVisualizationChart from "../components/interactive/BoxVisualizationChart" import BoxVisualizationMap from "../components/interactive/BoxVisualizationMap" import BoxVisualizationWordcloud from "../components/interactive/BoxVisualizationWordcloud" import BoxFull from "../components/base/BoxFull" @@ -25,7 +25,7 @@ export default function PageRepository({ className, ...props }) { const { id } = useParams() const { strings } = useContext(ContextLanguage) - const [visualizationTab, setVisualizationTab] = useState("wordcloud") + const [visualizationTab, setVisualizationTab] = useState("stats") const [addFilterTab, setAddFilterTab] = useState("hashtag") const repositoryBr = useBackendResource( @@ -99,7 +99,7 @@ export default function PageRepository({ className, ...props }) { /> : null} {visualizationTab === "histogram" ? - diff --git a/package-lock.json b/package-lock.json index 598406a..7f187d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "is-string": "^1.0.5", "leaflet": "^1.7.1", "react": "^17.0.2", + "react-chartjs-2": "^3.0.3", "react-dom": "^17.0.2", "react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1", "react-router": "^5.2.0", @@ -5132,6 +5133,12 @@ "node": ">=10" } }, + "node_modules/chart.js": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.2.1.tgz", + "integrity": "sha512-XsNDf3854RGZkLCt+5vWAXGAtUdKP2nhfikLGZqud6G4CvRE2ts64TIxTTfspOin2kEZvPgomE29E6oU02dYjQ==", + "peer": true + }, "node_modules/check-types": { "version": "11.1.2", "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz", @@ -16155,6 +16162,18 @@ "react-scripts": ">=2.1.3" } }, + "node_modules/react-chartjs-2": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.3.tgz", + "integrity": "sha512-jOFZKwZ8sMLkddewZ/tToxuu4pYimAvvY5I6uK+hCpSFT16Pvo2bdHhUoZ0X87zu9I+dx2I+JCqaLN6XhmrbDg==", + "dependencies": { + "lodash": "^4.17.19" + }, + "peerDependencies": { + "chart.js": "^3.1.0", + "react": "^16.8.0 || ^17.0.0" + } + }, "node_modules/react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", @@ -26645,6 +26664,12 @@ "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", "integrity": "sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==" }, + "chart.js": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.2.1.tgz", + "integrity": "sha512-XsNDf3854RGZkLCt+5vWAXGAtUdKP2nhfikLGZqud6G4CvRE2ts64TIxTTfspOin2kEZvPgomE29E6oU02dYjQ==", + "peer": true + }, "check-types": { "version": "11.1.2", "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz", @@ -35334,6 +35359,14 @@ "semver": "^5.6.0" } }, + "react-chartjs-2": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-3.0.3.tgz", + "integrity": "sha512-jOFZKwZ8sMLkddewZ/tToxuu4pYimAvvY5I6uK+hCpSFT16Pvo2bdHhUoZ0X87zu9I+dx2I+JCqaLN6XhmrbDg==", + "requires": { + "lodash": "^4.17.19" + } + }, "react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", diff --git a/package.json b/package.json index 9dee233..5b5b09e 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "is-string": "^1.0.5", "leaflet": "^1.7.1", "react": "^17.0.2", + "react-chartjs-2": "^3.0.3", "react-dom": "^17.0.2", "react-leaflet": ">=3.1.0 <3.2.0 || ^3.2.1", "react-router": "^5.2.0",