Proyectos de Subversion LeadersLinked - SPA

Rev

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