Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3661 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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