public/Telereview
1
0
Fork 0
mirror of https://git.roussel.pro/telecom-paris/pact.git synced 2026-02-09 02:20:17 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

page stats fonctionelle et connectée a la bdd

Browse Source
This commit is contained in:
Quentin Roussel
2023-03-22 09:49:49 +01:00
parent 4b0f2f237f
commit cf6c4861cb
7 changed files with 169 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
code/interface_admin/components/ComparativeBarChart.jsx
View File

@@ -1,17 +1,11 @@
import React from 'react' import React from 'react'
import { Bar } from 'react-chartjs-2' import { Bar } from 'react-chartjs-2'
import Chart from 'chart.js/auto'; import Chart from 'chart.js/auto'; //NE SURTOUT PAS SUPPRIMER CET IMPORT
export default function ComparativeBarChart({ xlabels, data0, label0, data1, label1}) { export default function ComparativeBarChart({ xlabels, data0, label0, data1, label1}) {
return ( return (
<Bar <Bar
options={{ options={{
// plugins: {
// title: {
// display: true,
// text: title
// },
// },
responsive: true, responsive: true,
interaction: { interaction: {
intersect: false, intersect: false,

34
code/interface_admin/components/StatBarChart.jsx Normal file
View File

@@ -0,0 +1,34 @@
import React, { useRef } from 'react'
import { Bar } from 'react-chartjs-2'
import Chart from 'chart.js/auto'; //NE SURTOUT PAS SUPPRIMER CET IMPORT
export default function StatBarChart({labels, data}) {
return (
<Bar
options={{
redraw: true,
responsive: true,
interaction: {
intersect: false,
},
scales: {
x: {
stacked: true,
},
y: {
stacked: true
}
}
}}
data={{
labels: labels,
datasets: [
{
data: data,
backgroundColor: "#FF3B30",
},
]
}}
/>
)
}

2
code/interface_admin/hooks/stats.js
View File

@@ -20,7 +20,7 @@ export default function useStats(limit, interval) {
useEffect(() => { useEffect(() => {
fetchData(limit, interval); fetchData(limit, interval);
}, []) }, [limit, interval])
return {stats, loading, error}; return {stats, loading, error};
} }

2
code/interface_admin/pages/avis/index.js
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { Card, Container, Form, Row, Table } from 'react-bootstrap' import { Card, Container, Form, Row } from 'react-bootstrap'
import AvisList from '../../components/AvisList'; import AvisList from '../../components/AvisList';
import useReviews from '../../hooks/reviews'; import useReviews from '../../hooks/reviews';
import styles from '../../styles/AvisListPage.module.css' import styles from '../../styles/AvisListPage.module.css'

131
code/interface_admin/pages/index.js
View File

@@ -12,7 +12,7 @@ export default function Home() {
const [datasets, setDatasets] = useState(null); const [datasets, setDatasets] = useState(null);
const [averages, setAverages] = useState(null); const [averages, setAverages] = useState(null);
const [differences, setDifferences] = useState(null); const [differences, setDifferences] = useState(null);
useEffect(() => { useEffect(() => {
if (datasets) { if (datasets) {
let newAverages = [] let newAverages = []
@@ -20,25 +20,25 @@ export default function Home() {
for (let i = 0; i < datasets.length; i++) { for (let i = 0; i < datasets.length; i++) {
let currentEntriesCount = 0; let currentEntriesCount = 0;
let previousEntriesCount = 0; let previousEntriesCount = 0;
for(let x of datasets[i].current) { for (let x of datasets[i].current) {
if(x != null) { if (x != null) {
currentEntriesCount++; currentEntriesCount++;
} }
} }
for(let x of datasets[i].previous) { for (let x of datasets[i].previous) {
if(x != null) { if (x != null) {
previousEntriesCount++; previousEntriesCount++;
} }
} }
if(currentEntriesCount != 0) { if (currentEntriesCount != 0) {
newAverages[i] = datasets[i].current.reduce((a, b) => a + b) / currentEntriesCount; newAverages[i] = datasets[i].current.reduce((a, b) => a + b) / currentEntriesCount;
if(previousEntriesCount > 0) { if (previousEntriesCount > 0) {
newDifferences[i] = newAverages[i] - datasets[i].previous.reduce((a, b) => a + b) / datasets[i].previous.length newDifferences[i] = newAverages[i] - datasets[i].previous.reduce((a, b) => a + b) / datasets[i].previous.length
}else { } else {
newDifferences[i] = newAverages[i] newDifferences[i] = newAverages[i]
} }
}else { } else {
newDifferences[i] = 0; newDifferences[i] = 0;
newAverages[i] = 0; newAverages[i] = 0;
} }
@@ -47,31 +47,31 @@ export default function Home() {
setDifferences(newDifferences); setDifferences(newDifferences);
} }
}, [datasets]); }, [datasets]);
const { stats, loading, error } = useStats(14, "jour"); const { stats, loading, error } = useStats(14, "jour");
useEffect(() => { useEffect(() => {
console.log(getDay(new Date("2023-03-20T14:00:00.000Z"))) console.log(getDay(new Date("2023-03-20T14:00:00.000Z")))
}) })
useEffect(() => { useEffect(() => {
if(!error && !loading) { if (!error && !loading) {
let reviewCount = [null,null,null,null,null,null,null]; let reviewCount = [null, null, null, null, null, null, null];
let reviewCountPrev = [null,null,null,null,null,null,null] let reviewCountPrev = [null, null, null, null, null, null, null]
let reviewAvg = [null,null,null,null,null,null,null] let reviewAvg = [null, null, null, null, null, null, null]
let reviewAvgPrev = [null,null,null,null,null,null,null] let reviewAvgPrev = [null, null, null, null, null, null, null]
for(let i = 0; i < stats.length; i++) { for (let i = 0; i < stats.length; i++) {
let date = new Date(Date.parse(stats[i].date)) let date = new Date(Date.parse(stats[i].date))
let now = new Date(); let now = new Date();
let day = (date.getDay() - 1) % 7; let day = (date.getDay() - 1) % 7;
let week = getWeek(date, 1); let week = getWeek(date, 1);
let thisWeek = getWeek(now, 1); let thisWeek = getWeek(now, 1);
console.log({date,week,thisWeek,day}) console.log({ date, week, thisWeek, day })
if(week == thisWeek) { if (week == thisWeek) {
reviewCount[day] = stats[i].nb_avis; reviewCount[day] = stats[i].nb_avis;
reviewAvg[day] = stats[i].moyenne_globale; reviewAvg[day] = stats[i].moyenne_globale;
}else if(week = thisWeek - 1){ } else if (week = thisWeek - 1) {
reviewAvgPrev[day] = stats[i].moyenne_globale; reviewAvgPrev[day] = stats[i].moyenne_globale;
reviewCountPrev[day] = stats[i].nb_avis; reviewCountPrev[day] = stats[i].nb_avis;
} }
@@ -82,53 +82,52 @@ export default function Home() {
]) ])
} }
}, [stats]); }, [stats]);
function dataVisualizer(title, current, previous, average, difference) { function dataVisualizer(title, current, previous, average, difference) {
return <div key={title}> 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>
<Card.Body className={styles.averageCardBody}> <Card.Body className={styles.averageCardBody}>
<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>
<ComparativeBarChart <ComparativeBarChart
xlabels={["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"]} xlabels={["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"]}
label0="Cette semaine" label0="Cette semaine"
label1="La semaine dernière" label1="La semaine dernière"
data0={current} data0={current}
data1={previous} data1={previous}
/> />
<hr /> <hr />
</div> </div>
} }
return ( return (
<> <>
<Head> <Head>
<title>Create Next App</title> <title>Telereview</title>
<meta name="description" content="Page d'accueil" /> <meta name="description" content="Page d'accueil" />
</Head> </Head>
<Container fluid> <Container fluid>
<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 && averages && differences && 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>
</Card> </Card>
</Container> </Container>
</> </>
) )
} }

66
code/interface_admin/pages/stats.js
View File

@@ -1,7 +1,69 @@
import React from 'react' import React, { useEffect, useState } from 'react'
import { Card, Container, Form, Row } from 'react-bootstrap';
import StatBarChart from '../components/StatBarChart';
import useStats from '../hooks/stats';
export default function Stats() { export default function Stats() {
const [statName,setStatName] = useState("moyenne_globale")
const [timeInterval, setTimeInterval] = useState("jour")
const [chartReady, setChartReady] = useState(false);
const [xlabels, setXlabels] = useState([]);
const [plotData, setPlotData] = useState([]);
const {loading, error, stats} = useStats(10,timeInterval);
useEffect(() => {
if(!loading && !error) {
let newXlabels = [];
let newPlotData = [];
for(let i = 0; i < stats.length; i++) {
newXlabels.push(stats[i].date);
newPlotData.push(stats[i][statName]);
}
setXlabels(newXlabels);
setPlotData(newPlotData);
setChartReady(true);
console.log(timeInterval, stats, plotData, xlabels);
}else {
setChartReady(false);
}
}, [stats, statName, timeInterval, loading, error])
return ( return (
<div>stats</div> <Container fluid>
<Card>
<Card.Header>Tous les avis</Card.Header>
<Card.Body>
<Row>
<Form>
<Form.Group>
<Form.Label>Statistique</Form.Label>
<Form.Select value={statName} onChange={(e) => setStatName(e.target.value)}>
<option value="moyenne_globale">Moyenne globale</option>
<option value="nb_avis">Nombre d'avis</option>
<option value="moyenne_site">Moyenne du formulaire</option>
<option value = "moyenne_borne">Moyenne sur la borne</option>
<option value="dist_sexes">Distribution sexes</option>
</Form.Select>
</Form.Group>
<Form.Group>
<Form.Label>Periode</Form.Label>
<Form.Select value={timeInterval} onChange={(e) => setTimeInterval(e.target.value)}>
<option value="jour">Jour</option>
<option value="semaine">Semaine</option>
<option value="mois">Mois</option>
<option value = "annee">Année</option>
</Form.Select>
</Form.Group>
</Form>
</Row>
<Row>
{error && <p>Error</p>}
{chartReady && <StatBarChart data={plotData} labels={xlabels} />}
</Row>
</Card.Body>
</Card>
</Container>
) )
} }

3
docs/charte_graphique.md Normal file
View File

@@ -0,0 +1,3 @@
# Codes hex couleurs
#6B8000
#A6CC00