Proyectos de Subversion LeadersLinked - SPA

Rev

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