Merge pull request #919 from parlemonde/ft-charts-data

Ft charts data

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) {

src/components/admin/dashboard-statistics/ClassroomStats.tsx

@@ -1,7 +1,16 @@
 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;

src/components/admin/dashboard-statistics/CountryStats.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
 
+import BarCharts from './charts/BarCharts';
+import DashboardTable from './charts/DashboardTable';
+import HorizontalChart from './charts/HorizontalChart';
 import PieCharts from './charts/PieCharts';
+import PhaseDropdown from './filters/PhaseDropdown';
+import styles from './styles/charts.module.css';
+import PhaseDropdown from './filters/PhaseDropdown';
+import styles from './styles/charts.module.css';
 
 const pieChartData = {
   data: [
@@ -10,11 +17,23 @@ const pieChartData = {
   ],
 };
 
+const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }];
+
+const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }];
+
 const CountryStats = () => {
   return (
     <>
-      <h1>Pays</h1>
-      <PieCharts pieChartData={pieChartData} />
+      <PhaseDropdown />
+      <h1>Statut: Observateur</h1>
+      <div className={styles.chartsContainer}>
+        <HorizontalChart />
+        <DashboardTable />
+        <div className={styles.engamentContainer}>
+          <PieCharts pieChartData={pieChartData} />
+          <BarCharts barChartData={barChartData} />
+        </div>
+      </div>
     </>
   );
 };

src/components/admin/dashboard-statistics/charts/BarCharts.tsx

@@ -2,24 +2,31 @@ 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}
+        slotProps={{
+          bar: {
+            clipPath: `inset(0px round 40px)`,
+          },
+        }} 
+      />
+    </div>
   );
 };
 

src/components/admin/dashboard-statistics/charts/DashboardTable.tsx

@@ -0,0 +1,56 @@
+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 React from 'react';
+
+// 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),
+// ];
+
+export default function DashboardTable() {
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <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) => (
+            <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.classroom}</TableCell>
+              <TableCell align="right">{row.vm}</TableCell>
+              <TableCell align="right">{row.prof}</TableCell>
+              <TableCell align="right">{row.status}</TableCell>
+            </TableRow>
+          ))} */}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

src/components/admin/dashboard-statistics/charts/HorizontalChart.tsx

@@ -0,0 +1,49 @@
+import { BarChart } from '@mui/x-charts/BarChart';
+import * as React from 'react';
+
+import styles from '../styles/charts.module.css';
+import { useGetClassroomExchanges, ClassroomExchangesStats } from 'src/api/statistics/statistics.get.ts';
+
+const chartSetting = {
+  xAxis: [
+    {
+      label: 'publications & commentaires',
+    },
+  ],
+  width: 500,
+  height: 400,
+};
+const dataset = [];
+
+const valueFormatter = (value: number | null) => `${value}mm`;
+
+// eslint-disable-next-line no-console
+console.log('Data:', data);
+
+// handle loading & errors
+// if (isLoading) return <div>Loading...</div>;
+// if (isError) return <div>Error...</div>;
+
+export default function HorizontalBars() {
+  return (
+    <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>
+  );
+}

src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx

@@ -0,0 +1,126 @@
+import * as React from "react";
+import { BarChart } from "@mui/x-charts/BarChart";
+
+import styles from '../styles/charts.module.css';
+
+const chartSetting = {
+  xAxis: [
+    {
+      label: "publications & commentaires",
+    },
+  ],
+  width: 500,
+  height: 400,
+};
+const dataset = [
+  {
+    pays: 59,
+    paris: 57,
+    newYork: 86,
+    seoul: 21,
+    month: "pays 1",
+  },
+  {
+    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 (
+    <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>
+  );
+}

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>
   );
 };