Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3527 | Rev 3661 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3505 stevensc 1 
import React from 'react';
2 
import { useParams } from 'react-router-dom';
3 
import { Doughnut } from 'react-chartjs-2';
3528 stevensc 4 
import { Box, Grid, Typography } from '@mui/material';
3481 stevensc 5 
 
3527 stevensc 6 
import { useFetch } from '@shared/hooks';
7 
import { Spinner } from '@shared/components';
3481 stevensc 8 
 
3505 stevensc 9 
export function ProgressPage() {
10 
  const { uuid } = useParams();
3527 stevensc 11 
  const { data, loading } = useFetch(`/microlearning/progress/${uuid}`);
3481 stevensc 12 
 
13 
  const chartOptions = {
14 
    maintainAspectRatio: true,
15 
    responsive: true,
16 
    plugins: {
17 
      legend: {
18 
        display: false
19 
      }
20 
    }
3505 stevensc 21 
  };
3481 stevensc 22 
 
3527 stevensc 23 
  if (loading || !data) {
3505 stevensc 24 
    return <Spinner />;
3481 stevensc 25 
  }
26 
 
27 
  return (
28 
    <Grid container spacing={1}>
29 
      <Grid item xs={12} md={6}>
30 
        <Typography variant='h1'>Cápsulas</Typography>
31 
 
32 
        <Box mx='auto' mt={2} maxWidth={400}>
33 
          <Doughnut
34 
            data={{
35 
              labels: ['Completado', 'Por completar'],
36 
              datasets: [
37 
                {
38 
                  data: [data?.percentCompleted, data?.percentIncompleted],
39 
                  backgroundColor: ['#16283c99', '#36a2eb99']
40 
                }
41 
              ]
42 
            }}
43 
            options={chartOptions}
44 
          />
45 
        </Box>
46 
 
3505 stevensc 47 
        <Box display='flex' gap={2} justifyContent='center' alignItems='baseline' mt={1}>
3528 stevensc 48 
          <Typography variant='caption'>{data?.capsuleTotal} Total</Typography>
49 
          <Typography variant='caption'>{data?.capsuleStarted} Iniciadas</Typography>
50 
          <Typography variant='caption'>{data?.capsuleToStart} Por realizar</Typography>
51 
          <Typography variant='caption'>{data?.capsuleCompleted} Completadas</Typography>
3481 stevensc 52 
        </Box>
53 
      </Grid>
54 
 
55 
      <Grid item xs={12} md={6}>
56 
        <Typography variant='h1'>Retorno</Typography>
57 
 
58 
        <Box mx='auto' mt={2} maxWidth={400}>
59 
          <Doughnut
60 
            data={{
61 
              labels: ['Con retorno', 'Sin retorno'],
62 
              datasets: [
63 
                {
3505 stevensc 64 
                  data: [data?.capsuleWithReturning, data?.capsuleWithoutReturning],
3481 stevensc 65 
                  backgroundColor: ['#16283c99', '#36a2eb99']
66 
                }
67 
              ]
68 
            }}
69 
            options={chartOptions}
70 
          />
71 
        </Box>
72 
      </Grid>
73 
    </Grid>
3505 stevensc 74 
  );
3481 stevensc 75 
}