Skip to content

Commit

Permalink
add responsive base
Browse files Browse the repository at this point in the history
  • Loading branch information
@SimNed
SimNed committed Sep 10, 2024
1 parent ff0bb3e commit 3edbee9
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 65 deletions.
141 changes: 79 additions & 62 deletions src/components/admin/dashboard-statistics/GlobalStats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,85 +2,102 @@ import React from 'react';

import AccessTimeIcon from '@mui/icons-material/AccessTime';
import VisibilityIcon from '@mui/icons-material/Visibility';
import { Grid } from '@mui/material';

import TeamComments from './TeamComments';
import AverageStatsCard from './cards/AverageStatsCard/AverageStatsCard';
import ClassesExchangesCard from './cards/ClassesExchangesCard/ClassesExchangesCard';
import StatsCard from './cards/StatsCard/StatsCard';
import DashboardWorldMap from './map/DashboardWorldMap/DashboardWorldMap';
import PhaseDetails from './menu/PhaseDetails';
import { useGetSessionsStats } from 'src/api/statistics/statistics.get';

const GlobalStats = () => {
const sessionsStats = useGetSessionsStats();
const sessionsStats = useGetSessionsStats(null);

if (sessionsStats.isError) return <p>Error!</p>;
if (sessionsStats.isLoading || sessionsStats.isIdle) return <p>Loading...</p>;

console.log('Sessions stats', sessionsStats.data);

Check failure on line 20 in src/components/admin/dashboard-statistics/GlobalStats.tsx

View workflow job for this annotation

GitHub Actions / lint 

Unexpected console statement

return (
<>
<TeamComments />
<DashboardWorldMap />
<div>
<StatsCard data={10}>Nombre de classes inscrites</StatsCard>
<StatsCard data={10}>Nombre de classes connectées</StatsCard>
<StatsCard data={10}>Nombre de classes contributrices</StatsCard>
</div>
<div>
<AverageStatsCard
data={{
min: Math.floor(sessionsStats.data.minDuration / 60),
max: Math.floor(sessionsStats.data.maxDuration / 60),
average: Math.floor(sessionsStats.data.averageDuration / 60),
median: Math.floor(sessionsStats.data.medianDuration / 60),
}}
unit="min"
icon={<AccessTimeIcon sx={{ fontSize: 'inherit' }} />}
>
Temps de connexion moyen par classe
</AverageStatsCard>
<AverageStatsCard
data={{
min: sessionsStats.data.minConnections,
max: sessionsStats.data.maxConnections,
average: sessionsStats.data.averageConnections,
median: sessionsStats.data.medianConnections,
}}
icon={<VisibilityIcon sx={{ fontSize: 'inherit' }} />}
>
Nombre de connexions moyen par classe
</AverageStatsCard>
</div>
<div>
<ClassesExchangesCard totalPublications={100} totalComments={100} totalVideos={100} />
</div>
<div>
<PhaseDetails
phase={1}
data={[
{ name: 'test', connections: 2 },
{ name: 'test 2', connections: 12 },
]}
/>
</div>
<div>
<PhaseDetails
phase={2}
data={[
{ name: 'test', connections: 2, allo: 'fds' },
{ name: 'dest 2', connections: 12, allo: 'ads' },
]}
/>
</div>
<div>
<PhaseDetails
phase={3}
data={[
{ name: 'test ff', connections: 15, allo: 'fdjjjjjjjs' },
{ name: 'dest 2', connections: 1, allo: 'fdsfsqds' },
]}
/>
</div>
<Grid container spacing={4} direction={{ xs: 'column', md: 'row' }}>
<Grid item xs={12} lg={4}>
<StatsCard data={10}>
Nombre de classes <br />
inscrites
</StatsCard>
</Grid>
<Grid item xs={12} lg={4}>
<StatsCard data={10}>
Nombre de classes <br /> connectées
</StatsCard>
</Grid>
<Grid item xs={12} lg={4}>
<StatsCard data={10}>
Nombre de classes <br /> contributrices
</StatsCard>
</Grid>
<Grid item xs={12} lg={6}>
<AverageStatsCard
data={{
min: Math.floor(sessionsStats.data.minDuration / 60),
max: Math.floor(sessionsStats.data.maxDuration / 60),
average: Math.floor(sessionsStats.data.averageDuration / 60),
median: Math.floor(sessionsStats.data.medianDuration / 60),
}}
unit="min"
icon={<AccessTimeIcon sx={{ fontSize: 'inherit' }} />}
>
Temps de connexion moyen par classe
</AverageStatsCard>
</Grid>
<Grid item xs={12} lg={6}>
<AverageStatsCard
data={{
min: sessionsStats.data.minConnections,
max: sessionsStats.data.maxConnections,
average: sessionsStats.data.averageConnections,
median: sessionsStats.data.medianConnections,
}}
icon={<VisibilityIcon sx={{ fontSize: 'inherit' }} />}
>
Nombre de connexions moyen par classe
</AverageStatsCard>
</Grid>
<Grid item xs={12} lg={6}>
<ClassesExchangesCard totalPublications={100} totalComments={100} totalVideos={100} />
</Grid>
{/* <div>
<PhaseDetails
phase={1}
data={[
{ name: 'test', connections: 2 },
{ name: 'test 2', connections: 12 },
]}
/>
</div>
<div>
<PhaseDetails
phase={2}
data={[
{ name: 'test', connections: 2, allo: 'fds' },
{ name: 'dest 2', connections: 12, allo: 'ads' },
]}
/>
</div>
<div>
<PhaseDetails
phase={3}
data={[
{ name: 'test ff', connections: 15, allo: 'fdjjjjjjjs' },
{ name: 'dest 2', connections: 1, allo: 'fdsfsqds' },
]}
/>
</div> */}
</Grid>
</>
);
};
Expand Down
5 changes: 2 additions & 3 deletions src/components/admin/dashboard-statistics/cards/StatsCard/StatsCard.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@
background: linear-gradient(0deg, #6065FC, #6065FC),
radial-gradient(69.64% 69.64% at 51.53% 21.25%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
text-align: center;
padding: 1rem;
padding: 16px;
border-radius: 1rem;
width: 240px;
flex-wrap: wrap;
width: auto;
color: #FFF;
}

Expand Down

0 comments on commit 3edbee9

Please sign in to comment.