Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3505 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3481 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'
6 
 
7 
import { useFetch } from '@hooks'
8 
 
9 
import Spinner from 'components/UI/Spinner'
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 
  }
18 
`
19 
 
20 
const ProgressPage = () => {
21 
  const { uuid } = useParams()
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
31 
  })
32 
 
33 
  const chartOptions = {
34 
    maintainAspectRatio: true,
35 
    responsive: true,
36 
    plugins: {
37 
      legend: {
38 
        display: false
39 
      }
40 
    }
41 
  }
42 
 
43 
  if (isLoading) {
44 
    return <Spinner />
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 
 
67 
        <Box
68 
          display='flex'
69 
          gap={2}
70 
          justifyContent='center'
71 
          alignItems='baseline'
72 
          mt={1}
73 
        >
74 
          <Tag>
75 
            <small>{data?.capsuleTotal}</small> Total
76 
          </Tag>
77 
          <Tag>
78 
            <small>{data?.capsuleStarted}</small> Iniciadas
79 
          </Tag>
80 
          <Tag>
81 
            <small>{data?.capsuleToStart}</small> Por realizar
82 
          </Tag>
83 
          <Tag>
84 
            <small>{data?.capsuleCompleted}</small> Completadas
85 
          </Tag>
86 
        </Box>
87 
      </Grid>
88 
 
89 
      <Grid item xs={12} md={6}>
90 
        <Typography variant='h1'>Retorno</Typography>
91 
 
92 
        <Box mx='auto' mt={2} maxWidth={400}>
93 
          <Doughnut
94 
            data={{
95 
              labels: ['Con retorno', 'Sin retorno'],
96 
              datasets: [
97 
                {
98 
                  data: [
99 
                    data?.capsuleWithReturning,
100 
                    data?.capsuleWithoutReturning
101 
                  ],
102 
                  backgroundColor: ['#16283c99', '#36a2eb99']
103 
                }
104 
              ]
105 
            }}
106 
            options={chartOptions}
107 
          />
108 
        </Box>
109 
      </Grid>
110 
    </Grid>
111 
  )
112 
}
113 
 
114 
export default ProgressPage