From 07366f08d6f3c11478da51614892766c0a7fdc13 Mon Sep 17 00:00:00 2001
From: Melissa Olas <melissa.olas@gmail.com>
Date: Thu, 30 May 2024 11:37:46 +0200
Subject: [PATCH] adding average stats cards

---
 .../admin/dashboard-statistics/CountryStats.tsx      | 12 ++++++++++++
 .../dashboard-statistics/styles/charts.module.css    | 12 ++++++++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/admin/dashboard-statistics/CountryStats.tsx b/src/components/admin/dashboard-statistics/CountryStats.tsx
index 44cb5ed3b..41d8384de 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 AccessTimeIcon from '@mui/icons-material/AccessTime';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+
 import BarCharts from './charts/BarCharts';
+import AverageStatsCard from './cards/AverageStatsCard/AverageStatsCard';
 import DashboardTable from './charts/DashboardTable';
 import HorizontalChart from './charts/HorizontalChart';
 import PieCharts from './charts/PieCharts';
@@ -50,6 +54,14 @@ const CountryStats = () => {
         <StatsCard data={10}>Nombre de classes connectées</StatsCard>
         <StatsCard data={10}>Nombre de classes contributrices</StatsCard>
       </div>
+      <div className={styles.averageStatsContainer}>
+        <AverageStatsCard data={{ min: 1, max: 20, average: 15, median: 5 }} unit="min" icon={<AccessTimeIcon sx={{ fontSize: 'inherit' }} />}>
+          Temps de connexion moyen par classe
+        </AverageStatsCard>
+        <AverageStatsCard data={{ min: 1, max: 20, average: 15, median: 5 }} icon={<VisibilityIcon sx={{ fontSize: 'inherit' }} />}>
+          Nombre de connexions moyen par classe
+        </AverageStatsCard>
+      </div>
       <div className={styles.engagementContainer}>
         <PieCharts pieChartData={pieChartData} />
         <BarCharts barChartData={barChartData} />
diff --git a/src/components/admin/dashboard-statistics/styles/charts.module.css b/src/components/admin/dashboard-statistics/styles/charts.module.css
index 09d7ee743..9d3f3ddc8 100644
--- a/src/components/admin/dashboard-statistics/styles/charts.module.css
+++ b/src/components/admin/dashboard-statistics/styles/charts.module.css
@@ -42,6 +42,14 @@
   padding-top: 5%;
 }
 
+.averageStatsContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  padding-top: 5%;
+  gap: 20px;
+}
+
 .pieContainer {
   display: flex;
   flex-direction: column;
@@ -89,9 +97,9 @@
 }
 
 .exchangesCard {
-  min-width: 30%;
+  width: 70%;
 }
 
 .connectionsChart {
-  max-width: 20%;
+  width: 30%;
 }