feat: graph showing posts per day in React

This commit is contained in:
2026-01-27 17:41:30 +00:00
parent 1234ffde85
commit 3fefe4f51e

View File

@@ -1,5 +1,55 @@
const StatPage = () => { import { useEffect, useState } from "react";
return <div>Stats Page</div>; import axios from "axios";
}; import {
LineChart,
Line,
XAxis,
YAxis,
Tooltip,
CartesianGrid,
ResponsiveContainer
} from "recharts";
export default StatPage; function PostsPerDay() {
const [data, setData] = useState([]);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
axios
.get("http://localhost:5000/stats/posts_per_day")
.then(res => {
setData(res.data);
setLoading(false);
})
.catch(err => {
setError(err.response?.data?.error || "Failed to load data");
setLoading(false);
});
}, []);
if (loading) return <p>Loading posts per day</p>;
if (error) return <p style={{ color: "red" }}>{error}</p>;
return (
<div>
<h2>Posts per Day</h2>
<ResponsiveContainer width="100%" height={350}>
<LineChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="date" />
<YAxis />
<Tooltip />
<Line
type="monotone"
dataKey="posts_count"
name="Posts"
/>
</LineChart>
</ResponsiveContainer>
</div>
);
}
export default PostsPerDay;