Skip to content

Commit

Permalink
feat: review on the style of the village stats tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@Benjyhy
Benjyhy committed Oct 2, 2024
1 parent 95b2b05 commit fb6cb11
Show file tree
Hide file tree
Showing 4 changed files with 199 additions and 190 deletions.
354 changes: 177 additions & 177 deletions src/components/admin/dashboard-statistics/CountryStats.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,177 +1,177 @@
import React, { useState } from 'react';

import AccessTimeIcon from '@mui/icons-material/AccessTime';
import VisibilityIcon from '@mui/icons-material/Visibility';
import Box from '@mui/material/Box';

import AverageStatsCard from './cards/AverageStatsCard/AverageStatsCard';
import ClassesExchangesCard from './cards/ClassesExchangesCard/ClassesExchangesCard';
import StatsCard from './cards/StatsCard/StatsCard';
import BarCharts from './charts/BarCharts';
import DashboardTable from './charts/DashboardTable';
import HorizontalBars from './charts/HorizontalChart';
import PieCharts from './charts/PieCharts';
import CountriesDropdown from './filters/CountriesDropdown';
import PhaseDropdown from './filters/PhaseDropdown';
import PhaseDetails from './menu/PhaseDetails';
import { mockClassroomsStats, mockConnectionsStats } from './mocks/mocks';
import { PelicoCard } from './pelico-card';
import styles from './styles/charts.module.css';
import { sumContribution } from './utils/sumData';
import { useCountries } from 'src/services/useCountries';

const pieChartData = {
data: [
{ id: 0, value: 10, label: 'series A' },
{ id: 1, value: 15, label: 'series B' },
{ id: 2, value: 20, label: 'series C' },
],
};

const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }];
const EngagementBarChartTitle = 'Évolution des connexions';
const ContributionBarChartTitle = 'Contribution des classes';

const CountryStats = () => {
const [selectedCountry, setSelectedCountry] = useState<string>('');
const pelicoMessage = 'Merci de sélectionner un pays pour analyser ses statistiques ';
const { countries } = useCountries();
const handleCountryChange = (country: string) => {
setSelectedCountry(country);
};

const filteredVillage = mockClassroomsStats.filter((village) => village.classroomCountryCode === selectedCountry);
const countryData = sumContribution[selectedCountry];

const { totalActivities = 0, totalComments = 0, totalVideos = 0 } = countryData || {};

const classStats = mockConnectionsStats.map((classroom) => ({
registered: classroom.registeredClassroomsCount,
connected: classroom.connectedClassroomsCount,
contributed: classroom.contributedClassroomsCount,
}));

const connectStats = mockConnectionsStats.map((connect) => ({
averageConnection: connect.averageConnections,
averageDuration: connect.averageDuration,
minDuration: connect.minDuration,
maxDuration: connect.maxDuration,
medianDuration: connect.medianDuration,
minConnections: connect.minConnections,
maxConnections: connect.maxConnections,
medianConnections: connect.medianConnections,
}));

return (
<>
<div className={styles.filtersContainer}>
<div className={styles.phaseFilter}>
<PhaseDropdown />
</div>
<div className={styles.countryFilter}>
<CountriesDropdown countries={countries} onCountryChange={handleCountryChange} />
</div>
</div>
<h1>Statut: Observateur</h1>
{!selectedCountry ? (
<PelicoCard message={pelicoMessage} />
) : (
<>
<div className={styles.monitorTable}>
<HorizontalBars />
</div>
<Box
height={1}
width={1}
my={4}
display="flex"
alignItems="center"
justify-content="center"
font-weight="bold"
gap={4}
p={2}
py={3}
sx={{ border: '2px solid #4C3ED9', borderRadius: 4 }}
>
Ce pays participe dans les villages-monde suivants :
<ul>
{filteredVillage.map((village, index) => (
<li key={index}>{village.villageName}</li>
))}
</ul>
</Box>
<div className={styles.monitorTable}>
<DashboardTable />
</div>
<div className={styles.classroomStats}>
<StatsCard data={classStats[0].registered}>Nombre de classes inscrites</StatsCard>
<StatsCard data={classStats[0].connected}>Nombre de classes connectées</StatsCard>
<StatsCard data={classStats[0].contributed}>Nombre de classes contributrices</StatsCard>
</div>
<div className={styles.averageStatsContainer}>
<AverageStatsCard
data={{
min: connectStats[0].minConnections,
max: connectStats[0].maxConnections,
average: connectStats[0].averageConnection,
median: connectStats[0].medianConnections,
}}
unit="min"
icon={<AccessTimeIcon sx={{ fontSize: 'inherit' }} />}
>
Temps de connexion moyen par classe
</AverageStatsCard>
<AverageStatsCard
data={{
min: connectStats[0].minDuration,
max: connectStats[0].maxDuration,
average: connectStats[0].averageDuration,
median: connectStats[0].medianDuration,
}}
icon={<VisibilityIcon sx={{ fontSize: 'inherit' }} />}
>
Nombre de connexions moyen par classe
</AverageStatsCard>
</div>
<div className={styles.engagementContainer}>
<PieCharts pieChartData={pieChartData} />
<BarCharts barChartData={barChartData} title={EngagementBarChartTitle} />
</div>
<div className={styles.exchangesConnectionsContainer}>
<ClassesExchangesCard totalPublications={totalActivities} totalComments={totalComments} totalVideos={totalVideos} />
<BarCharts className={styles.connectionsChart} barChartData={barChartData} title={ContributionBarChartTitle} />
</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>
</>
)}
</>
);
};

export default CountryStats;
import React, { useState } from 'react';

import AccessTimeIcon from '@mui/icons-material/AccessTime';
import VisibilityIcon from '@mui/icons-material/Visibility';
import Box from '@mui/material/Box';

import AverageStatsCard from './cards/AverageStatsCard/AverageStatsCard';
import ClassesExchangesCard from './cards/ClassesExchangesCard/ClassesExchangesCard';
import StatsCard from './cards/StatsCard/StatsCard';
import BarCharts from './charts/BarCharts';
import DashboardTable from './charts/DashboardTable';
import HorizontalBars from './charts/HorizontalChart';
import PieCharts from './charts/PieCharts';
import CountriesDropdown from './filters/CountriesDropdown';
import PhaseDropdown from './filters/PhaseDropdown';
import PhaseDetails from './menu/PhaseDetails';
import { mockClassroomsStats, mockConnectionsStats } from './mocks/mocks';
import { PelicoCard } from './pelico-card';
import styles from './styles/charts.module.css';
import { sumContribution } from './utils/sumData';
import { useCountries } from 'src/services/useCountries';

const pieChartData = {
data: [
{ id: 0, value: 10, label: 'series A' },
{ id: 1, value: 15, label: 'series B' },
{ id: 2, value: 20, label: 'series C' },
],
};

const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }];
const EngagementBarChartTitle = 'Évolution des connexions';
const ContributionBarChartTitle = 'Contribution des classes';

const CountryStats = () => {
const [selectedCountry, setSelectedCountry] = useState<string>('');
const pelicoMessage = 'Merci de sélectionner un pays pour analyser ses statistiques ';
const { countries } = useCountries();
const handleCountryChange = (country: string) => {
setSelectedCountry(country);
};

const filteredVillage = mockClassroomsStats.filter((village) => village.classroomCountryCode === selectedCountry);
const countryData = sumContribution[selectedCountry];

const { totalActivities = 0, totalComments = 0, totalVideos = 0 } = countryData || {};

const classStats = mockConnectionsStats.map((classroom) => ({
registered: classroom.registeredClassroomsCount,
connected: classroom.connectedClassroomsCount,
contributed: classroom.contributedClassroomsCount,
}));

const connectStats = mockConnectionsStats.map((connect) => ({
averageConnection: connect.averageConnections,
averageDuration: connect.averageDuration,
minDuration: connect.minDuration,
maxDuration: connect.maxDuration,
medianDuration: connect.medianDuration,
minConnections: connect.minConnections,
maxConnections: connect.maxConnections,
medianConnections: connect.medianConnections,
}));

return (
<>
<div className={styles.filtersContainer}>
<div className={styles.phaseFilter}>
<PhaseDropdown />
</div>
<div className={styles.countryFilter}>
<CountriesDropdown countries={countries} onCountryChange={handleCountryChange} />
</div>
</div>
<h1>Statut: Observateur</h1>
{!selectedCountry ? (
<PelicoCard message={pelicoMessage} />
) : (
<>
<div className={styles.monitorTable}>
<HorizontalBars />
</div>
<Box
height={1}
width={1}
my={4}
display="flex"
alignItems="center"
justify-content="center"
font-weight="bold"
gap={4}
p={2}
py={3}
sx={{ border: '2px solid #4C3ED9', borderRadius: 4 }}
>
Ce pays participe dans les villages-monde suivants :
<ul>
{filteredVillage.map((village, index) => (
<li key={index}>{village.villageName}</li>
))}
</ul>
</Box>
<div className={styles.monitorTable}>
<DashboardTable />
</div>
<div className={styles.classroomStats}>
<StatsCard data={classStats[0].registered}>Nombre de classes inscrites</StatsCard>
<StatsCard data={classStats[0].connected}>Nombre de classes connectées</StatsCard>
<StatsCard data={classStats[0].contributed}>Nombre de classes contributrices</StatsCard>
</div>
<div className={styles.averageStatsContainer}>
<AverageStatsCard
data={{
min: connectStats[0].minConnections,
max: connectStats[0].maxConnections,
average: connectStats[0].averageConnection,
median: connectStats[0].medianConnections,
}}
unit="min"
icon={<AccessTimeIcon sx={{ fontSize: 'inherit' }} />}
>
Temps de connexion moyen par classe
</AverageStatsCard>
<AverageStatsCard
data={{
min: connectStats[0].minDuration,
max: connectStats[0].maxDuration,
average: connectStats[0].averageDuration,
median: connectStats[0].medianDuration,
}}
icon={<VisibilityIcon sx={{ fontSize: 'inherit' }} />}
>
Nombre de connexions moyen par classe
</AverageStatsCard>
</div>
<div className={styles.engagementContainer}>
<PieCharts pieChartData={pieChartData} />
<BarCharts barChartData={barChartData} title={EngagementBarChartTitle} />
</div>
<div className={styles.exchangesConnectionsContainer}>
<ClassesExchangesCard totalPublications={totalActivities} totalComments={totalComments} totalVideos={totalVideos} />
<BarCharts className={styles.connectionsChart} barChartData={barChartData} title={ContributionBarChartTitle} />
</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>
</>
)}
</>
);
};

export default CountryStats;
23 changes: 12 additions & 11 deletions src/components/admin/dashboard-statistics/VillageStats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,18 @@ const VillageStats = () => {

return (
<>
<div className={styles.filtersContainer}>
<div className={styles.phaseFilter}>
<PhaseDropdown />
</div>
<div className={styles.countryFilter}>
<CountriesDropdown countries={countries} onCountryChange={handleCountryChange} />
</div>
<div className={styles.countryFilter}>
<VillageDropdown villages={villages} onVillageChange={handleVillageChange} />
</div>
</div>
<p>Tableau à venir</p>
<Tabs value={value} onChange={handleTabChange} aria-label="basic tabs example" sx={{ py: 3 }}>
<Tab label="En classe" {...a11yProps(0)} />
<Tab label="En famille" {...a11yProps(1)} />
Expand All @@ -76,17 +88,6 @@ const VillageStats = () => {
<p>Statistiques - En classe</p>
</CustomTabPanel>
<CustomTabPanel value={value} index={1}>
<div className={styles.filtersContainer}>
<div className={styles.phaseFilter}>
<PhaseDropdown />
</div>
<div className={styles.countryFilter}>
<CountriesDropdown countries={countries} onCountryChange={handleCountryChange} />
</div>
<div className={styles.countryFilter}>
<VillageDropdown villages={villages} onVillageChange={handleVillageChange} />
</div>
</div>
{!selectedVillage ? (
<PelicoCard message={pelicoMessage} />
) : (
Expand Down
Loading

0 comments on commit fb6cb11

Please sign in to comment.