feat: graph showing posts per day in React
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user