feat: graph showing posts per day in React
This commit is contained in:
@@ -1,5 +1,55 @@
|
||||
const StatPage = () => {
|
||||
return <div>Stats Page</div>;
|
||||
};
|
||||
import { useEffect, useState } from "react";
|
||||
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;
|
||||
|
||||
Reference in New Issue
Block a user