Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3661 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3719 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 
 
6 
import { useAlert, useApi } from '@shared/hooks';
7 
import { getProgress } from '@microlearning/services';
8 
 
9 
import { Spinner } from '@shared/components';
10 
 
11 
export function ProgressPage() {
12 
  const { uuid } = useParams();
13 
 
14 
  const { showError } = useAlert();
15 
 
16 
  const { data, loading } = useApi(getProgress, {
17 
    autoFetch: true,
18 
    autoFetchArgs: [uuid],
19 
    onError: (error) => {
20 
      showError(error.message);
21 
    }
22 
  });
23 
 
24 
  const chartOptions = {
25 
    maintainAspectRatio: true,
26 
    responsive: true,
27 
    plugins: {
28 
      legend: {
29 
        display: false
30 
      }
31 
    }
32 
  };
33 
 
34 
  if (loading || !data) {
35 
    return <Spinner />;
36 
  }
37 
 
38 
  return (
39 
    <Grid container spacing={1}>
40 
      <Grid size={{ xs: 12, md: 6 }}>
41 
        <Typography variant='h1'>Cápsulas</Typography>
42 
 
43 
        <Box mx='auto' mt={2} maxWidth={400}>
44 
          <Doughnut
45 
            data={{
46 
              labels: ['Completado', 'Por completar'],
47 
              datasets: [
48 
                {
49 
                  data: [data?.percentCompleted, data?.percentIncompleted],
50 
                  backgroundColor: ['#16283c99', '#36a2eb99']
51 
                }
52 
              ]
53 
            }}
54 
            options={chartOptions}
55 
          />
56 
        </Box>
57 
 
58 
        <Box display='flex' gap={2} justifyContent='center' alignItems='baseline' mt={1}>
59 
          <Typography variant='caption'>{data?.capsuleTotal} Total</Typography>
60 
          <Typography variant='caption'>{data?.capsuleStarted} Iniciadas</Typography>
61 
          <Typography variant='caption'>{data?.capsuleToStart} Por realizar</Typography>
62 
          <Typography variant='caption'>{data?.capsuleCompleted} Completadas</Typography>
63 
        </Box>
64 
      </Grid>
65 
 
66 
      <Grid size={{ xs: 12, md: 6 }}>
67 
        <Typography variant='h1'>Retorno</Typography>
68 
 
69 
        <Box mx='auto' mt={2} maxWidth={400}>
70 
          <Doughnut
71 
            data={{
72 
              labels: ['Con retorno', 'Sin retorno'],
73 
              datasets: [
74 
                {
75 
                  data: [data?.capsuleWithReturning, data?.capsuleWithoutReturning],
76 
                  backgroundColor: ['#16283c99', '#36a2eb99']
77 
                }
78 
              ]
79 
            }}
80 
            options={chartOptions}
81 
          />
82 
        </Box>
83 
      </Grid>
84 
    </Grid>
85 
  );
86 
}