mirror of
https://git.roussel.pro/telecom-paris/pact.git
synced 2026-02-09 10:30:17 +01:00
hook stats
This commit is contained in:
26
code/interface_admin/hooks/stats.js
Normal file
26
code/interface_admin/hooks/stats.js
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import { useEffect } from "react";
|
||||||
|
import { api } from "../config/reviewsApi";
|
||||||
|
|
||||||
|
export default function useStats(limit, interval) {
|
||||||
|
const [stats, setStats] = useState({});
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState(false);
|
||||||
|
|
||||||
|
async function fetchData(limit, interval) {
|
||||||
|
const response = await fetch("http://" + api.HOST + `/get_stats?interval=${interval}&limit=${limit}`)
|
||||||
|
if(response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
setStats(data);
|
||||||
|
setError(false);
|
||||||
|
}else {
|
||||||
|
setError(true)
|
||||||
|
}
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchData(limit, interval);
|
||||||
|
})
|
||||||
|
|
||||||
|
return {stats, loading, error};
|
||||||
|
}
|
||||||
@@ -6,11 +6,11 @@ import styles from "../styles/Home.module.css"
|
|||||||
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const [datasets, setDatasets] = useState([
|
const [datasets, setDatasets] = useState(null);
|
||||||
]);
|
const [averages, setAverages] = useState(null);
|
||||||
const [averages, setAverages] = useState([]);
|
const [differences, setDifferences] = useState(null);
|
||||||
const [differences, setDifferences] = useState([]);
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (datasets) {
|
||||||
let newAverages = []
|
let newAverages = []
|
||||||
let newDifferences = []
|
let newDifferences = []
|
||||||
for (let i = 0; i < datasets.length; i++) {
|
for (let i = 0; i < datasets.length; i++) {
|
||||||
@@ -19,6 +19,7 @@ export default function Home() {
|
|||||||
}
|
}
|
||||||
setAverages(newAverages);
|
setAverages(newAverages);
|
||||||
setDifferences(newDifferences);
|
setDifferences(newDifferences);
|
||||||
|
}
|
||||||
}, [datasets]);
|
}, [datasets]);
|
||||||
|
|
||||||
useEffect(() => setDatasets([
|
useEffect(() => setDatasets([
|
||||||
@@ -26,7 +27,7 @@ export default function Home() {
|
|||||||
{ title: "Notes moyennes", current: [1, 2, 3, 4, 5, 6, 7], previous: [7, 6, 5, 4, 3, 2, 1] }
|
{ title: "Notes moyennes", current: [1, 2, 3, 4, 5, 6, 7], previous: [7, 6, 5, 4, 3, 2, 1] }
|
||||||
]), []);
|
]), []);
|
||||||
function dataVisualizer(title, current, previous, average, difference) {
|
function dataVisualizer(title, current, previous, average, difference) {
|
||||||
return <>
|
return <div key={title}>
|
||||||
<h3>{title}</h3>
|
<h3>{title}</h3>
|
||||||
<Card className={styles.averageCard}>
|
<Card className={styles.averageCard}>
|
||||||
<Card.Title>Moyenne</Card.Title>
|
<Card.Title>Moyenne</Card.Title>
|
||||||
@@ -34,12 +35,12 @@ export default function Home() {
|
|||||||
<div
|
<div
|
||||||
className={styles.averageMainValue}
|
className={styles.averageMainValue}
|
||||||
>
|
>
|
||||||
{Math.round(average*1e2)/1e2}
|
{Math.round(average * 1e2) / 1e2}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className={[styles.averageCardSecondaryValue, difference >= 0 ? styles.averagePositive : styles.averageNegative].join(' ')}
|
className={[styles.averageCardSecondaryValue, difference >= 0 ? styles.averagePositive : styles.averageNegative].join(' ')}
|
||||||
>
|
>
|
||||||
{(difference >= 0 ? "+" : "-") + Math.round(difference*1e2)/1e2}
|
{(difference >= 0 ? "+" : "-") + Math.round(difference * 1e2) / 1e2}
|
||||||
</div>
|
</div>
|
||||||
</Card.Body>
|
</Card.Body>
|
||||||
</Card>
|
</Card>
|
||||||
@@ -51,7 +52,7 @@ export default function Home() {
|
|||||||
data1={previous}
|
data1={previous}
|
||||||
/>
|
/>
|
||||||
<hr />
|
<hr />
|
||||||
</>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -64,7 +65,7 @@ export default function Home() {
|
|||||||
<Card>
|
<Card>
|
||||||
<Card.Header as="h2">Vos performances cette semaine</Card.Header>
|
<Card.Header as="h2">Vos performances cette semaine</Card.Header>
|
||||||
<Card.Body>
|
<Card.Body>
|
||||||
{datasets.map((set, i) => dataVisualizer(set.title, set.current, set.previous, averages[i], differences[i]))}
|
{datasets && averages && differences && datasets.map((set, i) => dataVisualizer(set.title, set.current, set.previous, averages[i], differences[i]))}
|
||||||
</Card.Body>
|
</Card.Body>
|
||||||
<div className='col col-12 col-lg-8 mx-auto'>
|
<div className='col col-12 col-lg-8 mx-auto'>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user