adding average stats cards

parlemonde · May 30, 2024 · 07366f0 · 07366f0
1 parent 236f759
commit 07366f0
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git 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
@@ -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%;
 }