Proyectos de Subversion LeadersLinked - SPA

Rev

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