freture request for #257

Will add toggle later on to hide certain stats
This commit is contained in:
CyferShepard
2024-10-14 23:33:39 +02:00
parent 8e42aadbdf
commit 8693c900ce
5 changed files with 124 additions and 154 deletions

View File

@@ -51,6 +51,8 @@
"LAST_24_HRS": "Last 24 Hours",
"LAST_7_DAYS": "Last 7 Days",
"LAST_30_DAYS": "Last 30 Days",
"LAST_180_DAYS": "Last 180 Days",
"LAST_365_DAYS": "Last 365 Days",
"ALL_TIME": "All Time",
"ITEM_STATS": "Item Stats"
},

View File

@@ -51,6 +51,8 @@
"LAST_24_HRS": "24 dernières heures",
"LAST_7_DAYS": "7 derniers jours",
"LAST_30_DAYS": "30 derniers jours",
"LAST_180_DAYS": "180 derniers jours",
"LAST_365_DAYS": "365 derniers jours",
"ALL_TIME": "Tout le temps",
"ITEM_STATS": "Statistiques du média"
},

View File

@@ -9,55 +9,40 @@ function GlobalStats(props) {
const [dayStats, setDayStats] = useState({});
const [weekStats, setWeekStats] = useState({});
const [monthStats, setMonthStats] = useState({});
const [d180Stats, setd180Stats] = useState({});
const [d365Stats, setd365Stats] = useState({});
const [allStats, setAllStats] = useState({});
const token = localStorage.getItem('token');
const token = localStorage.getItem("token");
function fetchStats(hours = 24, setMethod = setDayStats) {
axios
.post(
`/stats/getGlobalItemStats`,
{
hours: hours,
itemid: props.ItemId,
},
{
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
}
)
.then((dayData) => {
setMethod(dayData.data);
});
}
useEffect(() => {
const fetchData = async () => {
try {
const dayData = await axios.post(`/stats/getGlobalItemStats`, {
hours: (24*1),
itemid: props.ItemId,
}, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
});
setDayStats(dayData.data);
const weekData = await axios.post(`/stats/getGlobalItemStats`, {
hours: (24*7),
itemid: props.ItemId,
}, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
});
setWeekStats(weekData.data);
const monthData = await axios.post(`/stats/getGlobalItemStats`, {
hours: (24*30),
itemid: props.ItemId,
}, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
});
setMonthStats(monthData.data);
const allData = await axios.post(`/stats/getGlobalItemStats`, {
hours: (24*999),
itemid: props.ItemId,
}, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
});
setAllStats(allData.data);
fetchStats(24, setDayStats);
fetchStats(24 * 7, setWeekStats);
fetchStats(24 * 30, setMonthStats);
fetchStats(24 * 180, setd180Stats);
fetchStats(24 * 365, setd365Stats);
fetchStats(24 * 999, setAllStats);
} catch (error) {
console.log(error);
}
@@ -66,17 +51,20 @@ function GlobalStats(props) {
fetchData();
const intervalId = setInterval(fetchData, 60000 * 5);
return () => clearInterval(intervalId);
}, [props.ItemId,token]);
}, [props.ItemId, token]);
return (
<div>
<h1 className="py-3"><Trans i18nKey="GLOBAL_STATS.ITEM_STATS"/></h1>
<div className="global-stats-container">
<WatchTimeStats data={dayStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_24_HRS"/>} />
<WatchTimeStats data={weekStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_7_DAYS"/>} />
<WatchTimeStats data={monthStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_30_DAYS"/>} />
<WatchTimeStats data={allStats} heading={<Trans i18nKey="GLOBAL_STATS.ALL_TIME"/>} />
<h1 className="py-3">
<Trans i18nKey="GLOBAL_STATS.ITEM_STATS" />
</h1>
<div className="global-stats-container">
<WatchTimeStats data={dayStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_24_HRS" />} />
<WatchTimeStats data={weekStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_7_DAYS" />} />
<WatchTimeStats data={monthStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_30_DAYS" />} />
<WatchTimeStats data={d180Stats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_180_DAYS" />} />
<WatchTimeStats data={d365Stats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_365_DAYS" />} />
<WatchTimeStats data={allStats} heading={<Trans i18nKey="GLOBAL_STATS.ALL_TIME" />} />
</div>
</div>
);

View File

@@ -9,55 +9,40 @@ function LibraryGlobalStats(props) {
const [dayStats, setDayStats] = useState({});
const [weekStats, setWeekStats] = useState({});
const [monthStats, setMonthStats] = useState({});
const [d180Stats, setd180Stats] = useState({});
const [d365Stats, setd365Stats] = useState({});
const [allStats, setAllStats] = useState({});
const token = localStorage.getItem('token');
const token = localStorage.getItem("token");
function fetchStats(hours = 24, setMethod = setDayStats) {
axios
.post(
`/stats/getGlobalLibraryStats`,
{
hours: hours,
libraryid: props.LibraryId,
},
{
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
}
)
.then((dayData) => {
setMethod(dayData.data);
});
}
useEffect(() => {
const fetchData = async () => {
try {
const dayData = await axios.post(`/stats/getGlobalLibraryStats`, {
hours: (24*1),
libraryid: props.LibraryId,
}, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
});
setDayStats(dayData.data);
const weekData = await axios.post(`/stats/getGlobalLibraryStats`, {
hours: (24*7),
libraryid: props.LibraryId,
}, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
});
setWeekStats(weekData.data);
const monthData = await axios.post(`/stats/getGlobalLibraryStats`, {
hours: (24*30),
libraryid: props.LibraryId,
}, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
});
setMonthStats(monthData.data);
const allData = await axios.post(`/stats/getGlobalLibraryStats`, {
hours: (24*999),
libraryid: props.LibraryId,
}, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
});
setAllStats(allData.data);
fetchStats(24, setDayStats);
fetchStats(24 * 7, setWeekStats);
fetchStats(24 * 30, setMonthStats);
fetchStats(24 * 180, setd180Stats);
fetchStats(24 * 365, setd365Stats);
fetchStats(24 * 999, setAllStats);
} catch (error) {
console.log(error);
}
@@ -66,16 +51,20 @@ function LibraryGlobalStats(props) {
fetchData();
const intervalId = setInterval(fetchData, 60000 * 5);
return () => clearInterval(intervalId);
}, [props.LibraryId,token]);
}, [props.LibraryId, token]);
return (
<div>
<h1 className="my-3"><Trans i18nKey="LIBRARY_INFO.LIBRARY_STATS"/></h1>
<div className="global-stats-container">
<WatchTimeStats data={dayStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_24_HRS"/>} />
<WatchTimeStats data={weekStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_7_DAYS"/>} />
<WatchTimeStats data={monthStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_30_DAYS"/>} />
<WatchTimeStats data={allStats} heading={<Trans i18nKey="GLOBAL_STATS.ALL_TIME"/>} />
<h1 className="my-3">
<Trans i18nKey="LIBRARY_INFO.LIBRARY_STATS" />
</h1>
<div className="global-stats-container">
<WatchTimeStats data={dayStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_24_HRS" />} />
<WatchTimeStats data={weekStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_7_DAYS" />} />
<WatchTimeStats data={monthStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_30_DAYS" />} />
<WatchTimeStats data={d180Stats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_180_DAYS" />} />
<WatchTimeStats data={d365Stats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_365_DAYS" />} />
<WatchTimeStats data={allStats} heading={<Trans i18nKey="GLOBAL_STATS.ALL_TIME" />} />
</div>
</div>
);

View File

@@ -9,55 +9,40 @@ function GlobalStats(props) {
const [dayStats, setDayStats] = useState({});
const [weekStats, setWeekStats] = useState({});
const [monthStats, setMonthStats] = useState({});
const [d180Stats, setd180Stats] = useState({});
const [d365Stats, setd365Stats] = useState({});
const [allStats, setAllStats] = useState({});
const token = localStorage.getItem('token');
const token = localStorage.getItem("token");
function fetchStats(hours = 24, setMethod = setDayStats) {
axios
.post(
`/stats/getGlobalUserStats`,
{
hours: hours,
userid: props.UserId,
},
{
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
}
)
.then((dayData) => {
setMethod(dayData.data);
});
}
useEffect(() => {
const fetchData = async () => {
try {
const dayData = await axios.post(`/stats/getGlobalUserStats`, {
hours: (24*1),
userid: props.UserId,
}, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
});
setDayStats(dayData.data);
const weekData = await axios.post(`/stats/getGlobalUserStats`, {
hours: (24*7),
userid: props.UserId,
}, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
});
setWeekStats(weekData.data);
const monthData = await axios.post(`/stats/getGlobalUserStats`, {
hours: (24*30),
userid: props.UserId,
}, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
});
setMonthStats(monthData.data);
const allData = await axios.post(`/stats/getGlobalUserStats`, {
hours: (24*999),
userid: props.UserId,
}, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
});
setAllStats(allData.data);
fetchStats(24, setDayStats);
fetchStats(24 * 7, setWeekStats);
fetchStats(24 * 30, setMonthStats);
fetchStats(24 * 180, setd180Stats);
fetchStats(24 * 365, setd365Stats);
fetchStats(24 * 999, setAllStats);
} catch (error) {
console.log(error);
}
@@ -66,16 +51,20 @@ function GlobalStats(props) {
fetchData();
const intervalId = setInterval(fetchData, 60000 * 5);
return () => clearInterval(intervalId);
}, [props.UserId,token]);
}, [props.UserId, token]);
return (
<div>
<h1 className="py-3"><Trans i18nKey="USERS_PAGE.USER_STATS"/></h1>
<div className="global-stats-container">
<WatchTimeStats data={dayStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_24_HRS"/>} />
<WatchTimeStats data={weekStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_7_DAYS"/>} />
<WatchTimeStats data={monthStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_30_DAYS"/>} />
<WatchTimeStats data={allStats} heading={<Trans i18nKey="GLOBAL_STATS.ALL_TIME"/>} />
<h1 className="py-3">
<Trans i18nKey="USERS_PAGE.USER_STATS" />
</h1>
<div className="global-stats-container">
<WatchTimeStats data={dayStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_24_HRS" />} />
<WatchTimeStats data={weekStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_7_DAYS" />} />
<WatchTimeStats data={monthStats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_30_DAYS" />} />
<WatchTimeStats data={d180Stats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_180_DAYS" />} />
<WatchTimeStats data={d365Stats} heading={<Trans i18nKey="GLOBAL_STATS.LAST_365_DAYS" />} />
<WatchTimeStats data={allStats} heading={<Trans i18nKey="GLOBAL_STATS.ALL_TIME" />} />
</div>
</div>
);