dylan/crosspost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: word cloud on stat page

Browse Source
This commit is contained in:
Dylan De Faoite
2026-01-27 18:37:42 +00:00
parent ecc1a62d24
commit dda1c1fee8
4 changed files with 166 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
frontend/package-lock.json generated
View File

@@ -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",

1
frontend/package.json
View File

@@ -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",

7
frontend/src/pages/Stats.tsx
View File

@@ -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() {
<div>
<h2>Posts per Day</h2>
<ResponsiveContainer width="100%" height={350}>
<ResponsiveContainer width={800} height={350}>
<LineChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="date" />
@@ -48,6 +49,8 @@ function PostsPerDay() {
/>
</LineChart>
</ResponsiveContainer>
<WordCloud />
</div>
);
}

41
frontend/src/stats/WordCloud.tsx Normal file
View File

@@ -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<string>('');
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 (
<div>
<ReactWordcloud
words={words}
/>
<p>{error}</p>
</div>
);
};
export default WordCloud;