From f9efa803695a0c49bcd288291f8cd1d5ea1ba64d Mon Sep 17 00:00:00 2001
From: Melissa Olas <melissa.olas@gmail.com>
Date: Tue, 23 Apr 2024 17:38:34 +0200
Subject: [PATCH 1/7] adding horizontal charts

---
 .../dashboard-statistics/ClassroomStats.tsx   |  10 +-
 .../dashboard-statistics/CountryStats.tsx     |  14 ++-
 .../dashboard-statistics/charts/BarCharts.tsx |  16 ++-
 .../charts/HorizontalCharts.tsx               | 112 ++++++++++++++++++
 .../styles/charts.module.css                  |  17 +++
 5 files changed, 157 insertions(+), 12 deletions(-)
 create mode 100644 src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx

diff --git a/src/components/admin/dashboard-statistics/ClassroomStats.tsx b/src/components/admin/dashboard-statistics/ClassroomStats.tsx
index 4751cfbd6..659b3fda8 100644
--- a/src/components/admin/dashboard-statistics/ClassroomStats.tsx
+++ b/src/components/admin/dashboard-statistics/ClassroomStats.tsx
@@ -1,7 +1,15 @@
 import React from 'react';
+import BarCharts from './charts/BarCharts';
+
+const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }];
 
 const ClassroomStats = () => {
-  return <h1>Classe</h1>;
+  return (
+    <>
+      <h1>Classe</h1>;
+      <BarCharts barChartData={barChartData} />
+    </>
+  );
 };
 
 export default ClassroomStats;
diff --git a/src/components/admin/dashboard-statistics/CountryStats.tsx b/src/components/admin/dashboard-statistics/CountryStats.tsx
index 86bd87f28..01654d32a 100644
--- a/src/components/admin/dashboard-statistics/CountryStats.tsx
+++ b/src/components/admin/dashboard-statistics/CountryStats.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 
+import HorizontalBars from './charts/HorizontalCharts';
 import PieCharts from './charts/PieCharts';
+import BarCharts from './charts/BarCharts';
+
+import styles from './styles/charts.module.css';
 
 const pieChartData = {
   data: [
@@ -10,11 +14,17 @@ const pieChartData = {
   ],
 };
 
+const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }];
+
 const CountryStats = () => {
   return (
     <>
-      <h1>Pays</h1>
-      <PieCharts pieChartData={pieChartData} />
+      <h1>Statut: Observateur</h1>
+      <HorizontalBars />
+      <div className={styles.engamentContainer}>
+        <PieCharts pieChartData={pieChartData} />
+        <BarCharts barChartData={barChartData} />
+      </div>
     </>
   );
 };
diff --git a/src/components/admin/dashboard-statistics/charts/BarCharts.tsx b/src/components/admin/dashboard-statistics/charts/BarCharts.tsx
index 8a70b2c1f..c52f0a2f2 100644
--- a/src/components/admin/dashboard-statistics/charts/BarCharts.tsx
+++ b/src/components/admin/dashboard-statistics/charts/BarCharts.tsx
@@ -1,25 +1,23 @@
 import React from 'react';
-
 import { BarChart } from '@mui/x-charts/BarChart';
 
-// import styles from '../styles/charts.module.css';
+import styles from '../styles/charts.module.css';
 
 type BarChartDataItem = {
   data: number[];
 };
 
-type BarChartData = {
-  dt: BarChartDataItem[];
-};
-
 interface Props {
-  barChartData: BarChartData;
+  barChartData: BarChartDataItem[];
 }
 
 const BarCharts: React.FC<Props> = ({ barChartData }) => {
-  const numericData = barChartData.dt.flatMap((item) => item.data);
+  const seriesData = barChartData.map((item) => ({ data: item.data }));
   return (
-    <BarChart xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]} series={[{ data: numericData }]} width={500} height={300} />
+    <div className={styles.barContainer}>
+      <div className={styles.title}>Evolution des connexions</div>
+      <BarChart xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]} series={seriesData} />
+    </div>
   );
 };
 
diff --git a/src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx b/src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx
new file mode 100644
index 000000000..b0dc2d71a
--- /dev/null
+++ b/src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx
@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { BarChart } from '@mui/x-charts/BarChart';
+
+const chartSetting = {
+  xAxis: [
+    {
+      label: 'rainfall (mm)',
+    },
+  ],
+  width: 500,
+  height: 400,
+};
+const dataset = [
+  {
+    london: 59,
+    paris: 57,
+    newYork: 86,
+    seoul: 21,
+    month: 'Jan',
+  },
+  {
+    london: 50,
+    paris: 52,
+    newYork: 78,
+    seoul: 28,
+    month: 'Fev',
+  },
+  {
+    london: 47,
+    paris: 53,
+    newYork: 106,
+    seoul: 41,
+    month: 'Mar',
+  },
+  {
+    london: 54,
+    paris: 56,
+    newYork: 92,
+    seoul: 73,
+    month: 'Apr',
+  },
+  {
+    london: 57,
+    paris: 69,
+    newYork: 92,
+    seoul: 99,
+    month: 'May',
+  },
+  {
+    london: 60,
+    paris: 63,
+    newYork: 103,
+    seoul: 144,
+    month: 'June',
+  },
+  {
+    london: 59,
+    paris: 60,
+    newYork: 105,
+    seoul: 319,
+    month: 'July',
+  },
+  {
+    london: 65,
+    paris: 60,
+    newYork: 106,
+    seoul: 249,
+    month: 'Aug',
+  },
+  {
+    london: 51,
+    paris: 51,
+    newYork: 95,
+    seoul: 131,
+    month: 'Sept',
+  },
+  {
+    london: 60,
+    paris: 65,
+    newYork: 97,
+    seoul: 55,
+    month: 'Oct',
+  },
+  {
+    london: 67,
+    paris: 64,
+    newYork: 76,
+    seoul: 48,
+    month: 'Nov',
+  },
+  {
+    london: 61,
+    paris: 70,
+    newYork: 103,
+    seoul: 25,
+    month: 'Dec',
+  },
+];
+
+const valueFormatter = (value: number | null) => `${value}mm`;
+
+export default function HorizontalBars() {
+  return (
+    <BarChart
+      dataset={dataset}
+      yAxis={[{ scaleType: 'band', dataKey: 'month' }]}
+      series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
+      layout="horizontal"
+      {...chartSetting}
+    />
+  );
+}
diff --git a/src/components/admin/dashboard-statistics/styles/charts.module.css b/src/components/admin/dashboard-statistics/styles/charts.module.css
index e2992bb51..3605c34e1 100644
--- a/src/components/admin/dashboard-statistics/styles/charts.module.css
+++ b/src/components/admin/dashboard-statistics/styles/charts.module.css
@@ -19,4 +19,21 @@
     gap: 0px;
     border-radius: 20px 20px 20px 20px;
     opacity: 0px;
+}
+
+.barContainer {
+    padding: 20px;
+    background-color: #F3F3F3;
+    margin-bottom: 20px;
+    max-width: 285.61px;
+    max-height: 282.81px;
+    top: 3.09px;
+    gap: 0px;
+    border-radius: 20px 20px 20px 20px;
+    opacity: 0px;
+}
+
+.engamentContainer {
+    display: flex;
+    flex-direction: row;
 }
\ No newline at end of file

From 9c68cb8c7ef803c54d72d751ae416c8c44e3f497 Mon Sep 17 00:00:00 2001
From: Melissa Olas <melissa.olas@gmail.com>
Date: Tue, 23 Apr 2024 19:06:20 +0200
Subject: [PATCH 2/7] modify css & piehcart legend

---
 .../dashboard-statistics/charts/PieCharts.tsx | 18 ++++++----
 .../styles/charts.module.css                  | 33 +++++++++++--------
 2 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/src/components/admin/dashboard-statistics/charts/PieCharts.tsx b/src/components/admin/dashboard-statistics/charts/PieCharts.tsx
index 5c82b782f..5a371bea6 100644
--- a/src/components/admin/dashboard-statistics/charts/PieCharts.tsx
+++ b/src/components/admin/dashboard-statistics/charts/PieCharts.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { PieChart } from '@mui/x-charts/PieChart';
 
 import styles from '../styles/charts.module.css';
@@ -19,13 +18,20 @@ interface Props {
 }
 
 const PieCharts: React.FC<Props> = ({ pieChartData }) => {
+  const labels = pieChartData.data.map((item) => item.label);
+
   return (
-    <>
-      <div className={styles.pieContainer}>
-        <div className={styles.title}>Niveau engagement</div>
-        <PieChart className={styles.pieChart} series={[{ data: pieChartData.data }]} width={400} height={200} />
+    <div className={styles.pieContainer}>
+      <div className={styles.title}>Niveau engagement</div>
+      <PieChart series={[{ data: pieChartData.data }]} width={400} height={200} />
+      <div className={`${styles.legend}`}>
+        {labels.map((label, index) => (
+          <div key={index} className={styles.legendItem}>
+            {label}
+          </div>
+        ))}
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/admin/dashboard-statistics/styles/charts.module.css b/src/components/admin/dashboard-statistics/styles/charts.module.css
index 3605c34e1..802a8f9b2 100644
--- a/src/components/admin/dashboard-statistics/styles/charts.module.css
+++ b/src/components/admin/dashboard-statistics/styles/charts.module.css
@@ -13,24 +13,31 @@
     padding: 20px;
     background-color: #F3F3F3;
     margin-bottom: 20px;
-    max-width: 285.61px;
-    max-height: 282.81px;
-    top: 3.09px;
-    gap: 0px;
-    border-radius: 20px 20px 20px 20px;
-    opacity: 0px;
+    max-width: 400px;
+    border-radius: 20px;
+    position: relative;
+}
+
+.legend {
+    display: flex;
+    justify-content: center; /* Pour centrer les éléments horizontalement */
+}
+
+.legendItem {
+    margin: 5px; /* Espacement entre les éléments de la légende */
+    font-size: 14px;
 }
 
 .barContainer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
     padding: 20px;
     background-color: #F3F3F3;
-    margin-bottom: 20px;
-    max-width: 285.61px;
-    max-height: 282.81px;
-    top: 3.09px;
-    gap: 0px;
-    border-radius: 20px 20px 20px 20px;
-    opacity: 0px;
+    margin-left: 20px;
+    max-width: 648px;
+    max-height: 289px;
+    border-radius: 20px;
 }
 
 .engamentContainer {

From 7c24e2b5574874f368bcdce9d957c8f1dd159568 Mon Sep 17 00:00:00 2001
From: Melissa Olas <melissa.olas@gmail.com>
Date: Tue, 23 Apr 2024 19:15:19 +0200
Subject: [PATCH 3/7] eslint errors

---
 server/controllers/activity.ts                                | 4 ++--
 src/components/admin/dashboard-statistics/ClassroomStats.tsx  | 1 +
 src/components/admin/dashboard-statistics/CountryStats.tsx    | 2 +-
 .../admin/dashboard-statistics/charts/BarCharts.tsx           | 1 +
 .../admin/dashboard-statistics/charts/HorizontalCharts.tsx    | 1 +
 src/pages/admin/newportal/analyze/index.tsx                   | 1 +
 6 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/server/controllers/activity.ts b/server/controllers/activity.ts
index f18bdfceb..da6a20ee0 100644
--- a/server/controllers/activity.ts
+++ b/server/controllers/activity.ts
@@ -2,8 +2,8 @@ import type { JSONSchemaType } from 'ajv';
 import type { NextFunction, Request, Response } from 'express';
 import { IsNull } from 'typeorm';
 
-import type { Track } from '../../types/anthem.type';
 import { TrackType } from '../../types/anthem.type';
+import type { Track } from '../../types/anthem.type';
 import type { ActivityContent, AnyData } from '../../types/activity.type';
 import { EPhase1Steps, ActivityStatus, ActivityType, EPhase2Steps, EPhase3Steps } from '../../types/activity.type';
 import type { GameData, GamesData } from '../../types/game.type';
@@ -368,7 +368,7 @@ activityController.put({ path: '/:id', userType: UserType.TEACHER }, async (req:
       data.data.slicedRecordUrl = buildAudioMix(activity.userId, [data.data.classRecordTrack as Track, data.data.classRecordTrack as Track]);
     }
   }
-  
+
   if (activity.status !== ActivityStatus.PUBLISHED) {
     if (data.phase) activity.phase = data.phase;
     if (data.phaseStep) {
diff --git a/src/components/admin/dashboard-statistics/ClassroomStats.tsx b/src/components/admin/dashboard-statistics/ClassroomStats.tsx
index 659b3fda8..e123ae881 100644
--- a/src/components/admin/dashboard-statistics/ClassroomStats.tsx
+++ b/src/components/admin/dashboard-statistics/ClassroomStats.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import BarCharts from './charts/BarCharts';
 
 const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }];
diff --git a/src/components/admin/dashboard-statistics/CountryStats.tsx b/src/components/admin/dashboard-statistics/CountryStats.tsx
index 01654d32a..b08702297 100644
--- a/src/components/admin/dashboard-statistics/CountryStats.tsx
+++ b/src/components/admin/dashboard-statistics/CountryStats.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
+import BarCharts from './charts/BarCharts';
 import HorizontalBars from './charts/HorizontalCharts';
 import PieCharts from './charts/PieCharts';
-import BarCharts from './charts/BarCharts';
 
 import styles from './styles/charts.module.css';
 
diff --git a/src/components/admin/dashboard-statistics/charts/BarCharts.tsx b/src/components/admin/dashboard-statistics/charts/BarCharts.tsx
index c52f0a2f2..e4475db23 100644
--- a/src/components/admin/dashboard-statistics/charts/BarCharts.tsx
+++ b/src/components/admin/dashboard-statistics/charts/BarCharts.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { BarChart } from '@mui/x-charts/BarChart';
 
 import styles from '../styles/charts.module.css';
diff --git a/src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx b/src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx
index b0dc2d71a..4db6a9318 100644
--- a/src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx
+++ b/src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { BarChart } from '@mui/x-charts/BarChart';
 
 const chartSetting = {
diff --git a/src/pages/admin/newportal/analyze/index.tsx b/src/pages/admin/newportal/analyze/index.tsx
index fb24d5a81..9243d4c2d 100644
--- a/src/pages/admin/newportal/analyze/index.tsx
+++ b/src/pages/admin/newportal/analyze/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import DashboardStatsNav from 'src/components/admin/dashboard-statistics/DashboardStatsNav';
 
 const Analyser = () => {

From fb23d10777d00a2a9dffe1a672bd154de42e6a84 Mon Sep 17 00:00:00 2001
From: Melissa Olas <melissa.olas@gmail.com>
Date: Thu, 25 Apr 2024 15:47:09 +0200
Subject: [PATCH 4/7] adding Table

---
 .../dashboard-statistics/CountryStats.tsx     | 12 ++--
 .../charts/DashboardTable.tsx                 | 60 +++++++++++++++++++
 .../styles/charts.module.css                  |  9 ++-
 3 files changed, 75 insertions(+), 6 deletions(-)
 create mode 100644 src/components/admin/dashboard-statistics/charts/DashboardTable.tsx

diff --git a/src/components/admin/dashboard-statistics/CountryStats.tsx b/src/components/admin/dashboard-statistics/CountryStats.tsx
index b08702297..48c521e91 100644
--- a/src/components/admin/dashboard-statistics/CountryStats.tsx
+++ b/src/components/admin/dashboard-statistics/CountryStats.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import BarCharts from './charts/BarCharts';
 import HorizontalBars from './charts/HorizontalCharts';
 import PieCharts from './charts/PieCharts';
+import DashboardTable from './charts/DashboardTable';
 
 import styles from './styles/charts.module.css';
 
@@ -20,10 +21,13 @@ const CountryStats = () => {
   return (
     <>
       <h1>Statut: Observateur</h1>
-      <HorizontalBars />
-      <div className={styles.engamentContainer}>
-        <PieCharts pieChartData={pieChartData} />
-        <BarCharts barChartData={barChartData} />
+      <div className={styles.chartsContainer}>
+        <HorizontalBars />
+        <DashboardTable />
+        <div className={styles.engamentContainer}>
+          <PieCharts pieChartData={pieChartData} />
+          <BarCharts barChartData={barChartData} />
+        </div>
       </div>
     </>
   );
diff --git a/src/components/admin/dashboard-statistics/charts/DashboardTable.tsx b/src/components/admin/dashboard-statistics/charts/DashboardTable.tsx
new file mode 100644
index 000000000..ff97ebd7c
--- /dev/null
+++ b/src/components/admin/dashboard-statistics/charts/DashboardTable.tsx
@@ -0,0 +1,60 @@
+import * as React from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+
+function createData(
+  name: string,
+  calories: number,
+  fat: number,
+  carbs: number,
+  protein: number,
+) {
+  return { name, calories, fat, carbs, protein };
+}
+
+const rows = [
+  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+  createData('Eclair', 262, 16.0, 24, 6.0),
+  createData('Cupcake', 305, 3.7, 67, 4.3),
+  createData('Gingerbread', 356, 16.0, 49, 3.9),
+];
+
+export default function DashboardTable() {
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>Dessert (100g serving)</TableCell>
+            <TableCell align="right">Calories</TableCell>
+            <TableCell align="right">Fat&nbsp;(g)</TableCell>
+            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
+            <TableCell align="right">Protein&nbsp;(g)</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow
+              key={row.name}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell align="right">{row.calories}</TableCell>
+              <TableCell align="right">{row.fat}</TableCell>
+              <TableCell align="right">{row.carbs}</TableCell>
+              <TableCell align="right">{row.protein}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/src/components/admin/dashboard-statistics/styles/charts.module.css b/src/components/admin/dashboard-statistics/styles/charts.module.css
index 802a8f9b2..a4074c685 100644
--- a/src/components/admin/dashboard-statistics/styles/charts.module.css
+++ b/src/components/admin/dashboard-statistics/styles/charts.module.css
@@ -7,6 +7,11 @@
     text-align: left;
 }
 
+.chartsContainer {
+    display: flex;
+    flex-direction: column;
+}
+
 .pieContainer {
     display: flex;
     flex-direction: column;
@@ -20,11 +25,11 @@
 
 .legend {
     display: flex;
-    justify-content: center; /* Pour centrer les éléments horizontalement */
+    justify-content: center;
 }
 
 .legendItem {
-    margin: 5px; /* Espacement entre les éléments de la légende */
+    margin: 5px;
     font-size: 14px;
 }
 

From 001d3b220128c23523e73b3dbc83a95502cd399d Mon Sep 17 00:00:00 2001
From: Melissa Olas <melissa.olas@gmail.com>
Date: Thu, 25 Apr 2024 16:53:30 +0200
Subject: [PATCH 5/7] changing value on Table

---
 .../dashboard-statistics/CountryStats.tsx     |  3 +-
 .../charts/DashboardTable.tsx                 | 38 +++++++++----------
 2 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/components/admin/dashboard-statistics/CountryStats.tsx b/src/components/admin/dashboard-statistics/CountryStats.tsx
index 48c521e91..3e10b31d9 100644
--- a/src/components/admin/dashboard-statistics/CountryStats.tsx
+++ b/src/components/admin/dashboard-statistics/CountryStats.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
 
 import BarCharts from './charts/BarCharts';
+import DashboardTable from './charts/DashboardTable';
 import HorizontalBars from './charts/HorizontalCharts';
 import PieCharts from './charts/PieCharts';
-import DashboardTable from './charts/DashboardTable';
-
 import styles from './styles/charts.module.css';
 
 const pieChartData = {
diff --git a/src/components/admin/dashboard-statistics/charts/DashboardTable.tsx b/src/components/admin/dashboard-statistics/charts/DashboardTable.tsx
index ff97ebd7c..f4b54ec56 100644
--- a/src/components/admin/dashboard-statistics/charts/DashboardTable.tsx
+++ b/src/components/admin/dashboard-statistics/charts/DashboardTable.tsx
@@ -1,20 +1,14 @@
-import * as React from 'react';
+import Paper from '@mui/material/Paper';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
-import Paper from '@mui/material/Paper';
+import React from 'react';
 
-function createData(
-  name: string,
-  calories: number,
-  fat: number,
-  carbs: number,
-  protein: number,
-) {
-  return { name, calories, fat, carbs, protein };
+function createData(classroom: string, vm: sting, prof: string, status: string) {
+  return { classroom, vm, prof, status };
 }
 
 const rows = [
@@ -31,15 +25,17 @@ export default function DashboardTable() {
       <Table sx={{ minWidth: 650 }} aria-label="simple table">
         <TableHead>
           <TableRow>
-            <TableCell>Dessert (100g serving)</TableCell>
-            <TableCell align="right">Calories</TableCell>
-            <TableCell align="right">Fat&nbsp;(g)</TableCell>
-            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
-            <TableCell align="right">Protein&nbsp;(g)</TableCell>
+            <TableCell>A surveiller</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell align="right">Classe</TableCell>
+            <TableCell align="right">Village-Monde</TableCell>
+            <TableCell align="right">Professeur</TableCell>
+            <TableCell align="right">Statut</TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
-          {rows.map((row) => (
+          {/* {rows.map((row) => (
             <TableRow
               key={row.name}
               sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
@@ -47,12 +43,12 @@ export default function DashboardTable() {
               <TableCell component="th" scope="row">
                 {row.name}
               </TableCell>
-              <TableCell align="right">{row.calories}</TableCell>
-              <TableCell align="right">{row.fat}</TableCell>
-              <TableCell align="right">{row.carbs}</TableCell>
-              <TableCell align="right">{row.protein}</TableCell>
+              <TableCell align="right">{row.classroom}</TableCell>
+              <TableCell align="right">{row.vm}</TableCell>
+              <TableCell align="right">{row.prof}</TableCell>
+              <TableCell align="right">{row.status}</TableCell>
             </TableRow>
-          ))}
+          ))} */}
         </TableBody>
       </Table>
     </TableContainer>

From 15f8d66b030c7b751318e2b2bffb4c855bcdacd6 Mon Sep 17 00:00:00 2001
From: Melissa Olas <melissa.olas@gmail.com>
Date: Tue, 30 Apr 2024 10:38:38 +0200
Subject: [PATCH 6/7] changing colors on charts and adding cards

---
 .../dashboard-statistics/charts/BarCharts.tsx | 10 +++-
 .../charts/DashboardTable.tsx                 | 20 +++----
 .../charts/HorizontalCharts.tsx               | 59 +++++++++++--------
 .../styles/charts.module.css                  | 11 ++++
 4 files changed, 66 insertions(+), 34 deletions(-)

diff --git a/src/components/admin/dashboard-statistics/charts/BarCharts.tsx b/src/components/admin/dashboard-statistics/charts/BarCharts.tsx
index e4475db23..22161405a 100644
--- a/src/components/admin/dashboard-statistics/charts/BarCharts.tsx
+++ b/src/components/admin/dashboard-statistics/charts/BarCharts.tsx
@@ -17,7 +17,15 @@ const BarCharts: React.FC<Props> = ({ barChartData }) => {
   return (
     <div className={styles.barContainer}>
       <div className={styles.title}>Evolution des connexions</div>
-      <BarChart xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]} series={seriesData} />
+      <BarChart 
+        xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]} 
+        series={seriesData}
+        slotProps={{
+          bar: {
+            clipPath: `inset(0px round 40px)`,
+          },
+        }} 
+      />
     </div>
   );
 };
diff --git a/src/components/admin/dashboard-statistics/charts/DashboardTable.tsx b/src/components/admin/dashboard-statistics/charts/DashboardTable.tsx
index f4b54ec56..07414383c 100644
--- a/src/components/admin/dashboard-statistics/charts/DashboardTable.tsx
+++ b/src/components/admin/dashboard-statistics/charts/DashboardTable.tsx
@@ -7,17 +7,17 @@ import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import React from 'react';
 
-function createData(classroom: string, vm: sting, prof: string, status: string) {
-  return { classroom, vm, prof, status };
-}
+// function createData(classroom: string, vm: sting, prof: string, status: string) {
+//   return { classroom, vm, prof, status };
+// }
 
-const rows = [
-  createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
-  createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
-  createData('Eclair', 262, 16.0, 24, 6.0),
-  createData('Cupcake', 305, 3.7, 67, 4.3),
-  createData('Gingerbread', 356, 16.0, 49, 3.9),
-];
+// const rows = [
+//   createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+//   createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+//   createData('Eclair', 262, 16.0, 24, 6.0),
+//   createData('Cupcake', 305, 3.7, 67, 4.3),
+//   createData('Gingerbread', 356, 16.0, 49, 3.9),
+// ];
 
 export default function DashboardTable() {
   return (
diff --git a/src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx b/src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx
index 4db6a9318..a46591e4f 100644
--- a/src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx
+++ b/src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx
@@ -1,11 +1,12 @@
-import * as React from 'react';
+import * as React from "react";
+import { BarChart } from "@mui/x-charts/BarChart";
 
-import { BarChart } from '@mui/x-charts/BarChart';
+import styles from '../styles/charts.module.css';
 
 const chartSetting = {
   xAxis: [
     {
-      label: 'rainfall (mm)',
+      label: "publications & commentaires",
     },
   ],
   width: 500,
@@ -13,88 +14,88 @@ const chartSetting = {
 };
 const dataset = [
   {
-    london: 59,
+    pays: 59,
     paris: 57,
     newYork: 86,
     seoul: 21,
-    month: 'Jan',
+    month: "pays 1",
   },
   {
     london: 50,
     paris: 52,
     newYork: 78,
     seoul: 28,
-    month: 'Fev',
+    month: "Fev",
   },
   {
     london: 47,
     paris: 53,
     newYork: 106,
     seoul: 41,
-    month: 'Mar',
+    month: "Mar",
   },
   {
     london: 54,
     paris: 56,
     newYork: 92,
     seoul: 73,
-    month: 'Apr',
+    month: "Apr",
   },
   {
     london: 57,
     paris: 69,
     newYork: 92,
     seoul: 99,
-    month: 'May',
+    month: "May",
   },
   {
     london: 60,
     paris: 63,
     newYork: 103,
     seoul: 144,
-    month: 'June',
+    month: "June",
   },
   {
     london: 59,
     paris: 60,
     newYork: 105,
     seoul: 319,
-    month: 'July',
+    month: "July",
   },
   {
     london: 65,
     paris: 60,
     newYork: 106,
     seoul: 249,
-    month: 'Aug',
+    month: "Aug",
   },
   {
     london: 51,
     paris: 51,
     newYork: 95,
     seoul: 131,
-    month: 'Sept',
+    month: "Sept",
   },
   {
     london: 60,
     paris: 65,
     newYork: 97,
     seoul: 55,
-    month: 'Oct',
+    month: "Oct",
   },
   {
     london: 67,
     paris: 64,
     newYork: 76,
     seoul: 48,
-    month: 'Nov',
+    month: "Nov",
   },
   {
     london: 61,
     paris: 70,
     newYork: 103,
     seoul: 25,
-    month: 'Dec',
+    month: "Dec",
   },
 ];
 
@@ -102,12 +103,24 @@ const valueFormatter = (value: number | null) => `${value}mm`;
 
 export default function HorizontalBars() {
   return (
-    <BarChart
-      dataset={dataset}
-      yAxis={[{ scaleType: 'band', dataKey: 'month' }]}
-      series={[{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }]}
-      layout="horizontal"
-      {...chartSetting}
-    />
+    <div className={styles.horizontalBars}>
+      <BarChart
+        dataset={dataset}
+        yAxis={[
+          {
+            scaleType: "band",
+            dataKey: "month",
+          },
+        ]}
+        series={[{ dataKey: "seoul", valueFormatter, color: '#4C3ED9' }]}
+        layout="horizontal"
+        {...chartSetting}
+        slotProps={{
+          bar: {
+            clipPath: `inset(0px round 25px)`,
+          },
+        }}
+      />
+    </div>
   );
 }
diff --git a/src/components/admin/dashboard-statistics/styles/charts.module.css b/src/components/admin/dashboard-statistics/styles/charts.module.css
index a4074c685..12bb52cdc 100644
--- a/src/components/admin/dashboard-statistics/styles/charts.module.css
+++ b/src/components/admin/dashboard-statistics/styles/charts.module.css
@@ -7,6 +7,17 @@
     text-align: left;
 }
 
+.horizontalBars {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    background-color: #F3F3F3;
+    margin-bottom: 20px;
+    max-width: auto;
+    border-radius: 20px;
+    position: relative;
+}
+
 .chartsContainer {
     display: flex;
     flex-direction: column;

From 2bb1307da5d85466280e207501750336c7354b33 Mon Sep 17 00:00:00 2001
From: Melissa Olas <melissa.olas@gmail.com>
Date: Thu, 2 May 2024 13:58:50 +0200
Subject: [PATCH 7/7] adding dropdown on countryStat page

---
 .../dashboard-statistics/CountryStats.tsx     |  2 ++
 .../filters/PhaseDropdown.tsx                 | 34 +++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/components/admin/dashboard-statistics/filters/PhaseDropdown.tsx

diff --git a/src/components/admin/dashboard-statistics/CountryStats.tsx b/src/components/admin/dashboard-statistics/CountryStats.tsx
index 3e10b31d9..86713d599 100644
--- a/src/components/admin/dashboard-statistics/CountryStats.tsx
+++ b/src/components/admin/dashboard-statistics/CountryStats.tsx
@@ -4,6 +4,7 @@ import BarCharts from './charts/BarCharts';
 import DashboardTable from './charts/DashboardTable';
 import HorizontalBars from './charts/HorizontalCharts';
 import PieCharts from './charts/PieCharts';
+import PhaseDropdown from './filters/PhaseDropdown'
 import styles from './styles/charts.module.css';
 
 const pieChartData = {
@@ -19,6 +20,7 @@ const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6
 const CountryStats = () => {
   return (
     <>
+      <PhaseDropdown />
       <h1>Statut: Observateur</h1>
       <div className={styles.chartsContainer}>
         <HorizontalBars />
diff --git a/src/components/admin/dashboard-statistics/filters/PhaseDropdown.tsx b/src/components/admin/dashboard-statistics/filters/PhaseDropdown.tsx
new file mode 100644
index 000000000..e8f67b833
--- /dev/null
+++ b/src/components/admin/dashboard-statistics/filters/PhaseDropdown.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
+export default function PhaseDropdown() {
+  const [phase, setPhase] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setPhase(event.target.value as string);
+  };
+
+  return (
+    <Box sx={{ maxWidth: 120 }}>
+      <FormControl fullWidth>
+        <InputLabel id="phase-menu-select">Phase</InputLabel>
+        <Select
+          labelId="phase-menu-select"
+          id="phase-menu"
+          value={phase}
+          label="Phase"
+          onChange={handleChange}
+        >
+          <MenuItem value={3}>Toutes les phases</MenuItem>
+          <MenuItem value={0}>Phase 1</MenuItem>
+          <MenuItem value={1}>Phase 2</MenuItem>
+          <MenuItem value={2}>Phase 3</MenuItem>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}