From dda1c1fee8158008e486f00c40e0c91b2032b288 Mon Sep 17 00:00:00 2001 From: Dylan De Faoite Date: Tue, 27 Jan 2026 18:37:42 +0000 Subject: [PATCH] feat: word cloud on stat page --- frontend/package-lock.json | 119 +++++++++++++++++++++++++++++++ frontend/package.json | 1 + frontend/src/pages/Stats.tsx | 7 +- frontend/src/stats/WordCloud.tsx | 41 +++++++++++ 4 files changed, 166 insertions(+), 2 deletions(-) create mode 100644 frontend/src/stats/WordCloud.tsx diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 240bfad..7c7bea8 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -8,6 +8,7 @@ "name": "frontend", "version": "0.0.0", "dependencies": { + "@cp949/react-wordcloud": "^1.0.1", "axios": "^1.13.3", "react": "^19.2.0", "react-dom": "^19.2.0", @@ -311,6 +312,31 @@ "node": ">=6.9.0" } }, + "node_modules/@cp949/react-wordcloud": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@cp949/react-wordcloud/-/react-wordcloud-1.0.1.tgz", + "integrity": "sha512-sWDMx2TwIE+sTjFMaBPAwltF3GTh6eT+Tr7HQz8SOwuPtMU3AkLjx8eSA7s1UW2bhsdxPGyz9uUFyrxM/qtUlw==", + "license": "MIT", + "dependencies": { + "d3-array": "^3.2.4", + "d3-cloud": "^1.2.7", + "d3-scale": "^4.0.2", + "d3-scale-chromatic": "^3.1.0", + "d3-selection": "^3.0.0", + "d3-transition": "^3.0.1", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.1", + "seedrandom": "^3.0.5", + "tippy.js": "^6.3.7" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.27.2", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz", @@ -1012,6 +1038,16 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@reduxjs/toolkit": { "version": "2.11.2", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz", @@ -2170,6 +2206,15 @@ "node": ">=12" } }, + "node_modules/d3-cloud": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/d3-cloud/-/d3-cloud-1.2.8.tgz", + "integrity": "sha512-K0qBFkgystNlgFW/ufdwIES5kDiC8cGJxMw4ULzN9UU511v89A6HXs1X8vUPxqurehzqJZS5KzZI4c8McT+4UA==", + "license": "BSD-3-Clause", + "dependencies": { + "d3-dispatch": "^1.0.3" + } + }, "node_modules/d3-color": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", @@ -2179,6 +2224,12 @@ "node": ">=12" } }, + "node_modules/d3-dispatch": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.6.tgz", + "integrity": "sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==", + "license": "BSD-3-Clause" + }, "node_modules/d3-ease": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", @@ -2234,6 +2285,28 @@ "node": ">=12" } }, + "node_modules/d3-scale-chromatic": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz", + "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==", + "license": "ISC", + "dependencies": { + "d3-color": "1 - 3", + "d3-interpolate": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-selection": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", + "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", + "license": "ISC", + "engines": { + "node": ">=12" + } + }, "node_modules/d3-shape": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz", @@ -2279,6 +2352,25 @@ "node": ">=12" } }, + "node_modules/d3-transition": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz", + "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==", + "license": "ISC", + "dependencies": { + "d3-color": "1 - 3", + "d3-dispatch": "1 - 3", + "d3-ease": "1 - 3", + "d3-interpolate": "1 - 3", + "d3-timer": "1 - 3" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "d3-selection": "2 - 3" + } + }, "node_modules/debug": { "version": "4.4.3", "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", @@ -3144,6 +3236,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3552,6 +3650,12 @@ "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==", "license": "MIT" }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==", + "license": "MIT" + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -3613,6 +3717,12 @@ "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", "license": "MIT" }, + "node_modules/seedrandom": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/seedrandom/-/seedrandom-3.0.5.tgz", + "integrity": "sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==", + "license": "MIT" + }, "node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -3711,6 +3821,15 @@ "url": "https://github.com/sponsors/SuperchupuDev" } }, + "node_modules/tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "license": "MIT", + "dependencies": { + "@popperjs/core": "^2.9.0" + } + }, "node_modules/ts-api-utils": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 93d1cfa..1050877 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@cp949/react-wordcloud": "^1.0.1", "axios": "^1.13.3", "react": "^19.2.0", "react-dom": "^19.2.0", diff --git a/frontend/src/pages/Stats.tsx b/frontend/src/pages/Stats.tsx index 5ed9a29..6c0b814 100644 --- a/frontend/src/pages/Stats.tsx +++ b/frontend/src/pages/Stats.tsx @@ -9,6 +9,7 @@ import { CartesianGrid, ResponsiveContainer } from "recharts"; +import WordCloud from "../stats/WordCloud"; function PostsPerDay() { const [data, setData] = useState([]); @@ -19,7 +20,7 @@ function PostsPerDay() { axios .get("http://localhost:5000/stats/posts_per_day") .then(res => { - setData(res.data); + setData(res.data.filter((item: any) => new Date(item.date) >= new Date("2025-06-01"))); setLoading(false); }) .catch(err => { @@ -35,7 +36,7 @@ function PostsPerDay() {

Posts per Day

- + @@ -48,6 +49,8 @@ function PostsPerDay() { /> + +
); } diff --git a/frontend/src/stats/WordCloud.tsx b/frontend/src/stats/WordCloud.tsx new file mode 100644 index 0000000..7b3be09 --- /dev/null +++ b/frontend/src/stats/WordCloud.tsx @@ -0,0 +1,41 @@ +import { ReactWordcloud } from '@cp949/react-wordcloud'; +import { useEffect, useState } from 'react'; +import axios from "axios"; + +type BackendWord = { + word: string; + frequency: number; +} + +const WordCloud = () => { + const [words, setWords] = useState<{ text: string; value: number }[]>([]); + const [error, setError] = useState(''); + + + useEffect(() => { + axios + .get("http://localhost:5000/stats/word_frequencies") + .then(res => { + const mapped = res.data.map((d: BackendWord) => ( + {text: d.word, value: d.frequency} + )); + setWords(mapped); + }) + .catch(err => { + setError(err); + }); + + }, []) + + return ( +
+ + +

{error}

+
+ ); +}; + +export default WordCloud; \ No newline at end of file