Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3481 | Rev 3527 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3481 Rev 3505
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 
import styled from 'styled-components'
 5 
import styled from 'styled-components';
Línea 6... Línea 6...
6 
 
 6 
 
Línea 7... Línea 7...
7 
import { useFetch } from '@hooks'
 7 
import { useFetch } from '@hooks';
Línea 8... Línea 8...
8 
 
 8 
 
9 
import Spinner from 'components/UI/Spinner'
 9 
import Spinner from 'components/UI/Spinner';
10 
 
 10 
 
11 
const Tag = styled.span`
 11 
const Tag = styled.span`
12 
  display: flex;
 12 
  display: flex;
13 
  flex-direction: column;
 13 
  flex-direction: column;
14 
  align-items: center;
 14 
  align-items: center;
15 
  small {
 15 
  small {
Línea 16... Línea 16...
16 
    color: ${(props) => props.theme.font.color.primary};
 16 
    color: ${(props) => props.theme.font.color.primary};
17 
  }
 17 
  }
18 
`
 18 
`;
19 
 
 19 
 
20 
const ProgressPage = () => {
 20 
export function ProgressPage() {
21 
  const { uuid } = useParams()
 21 
  const { uuid } = useParams();
22 
  const { data, isLoading } = useFetch(`/microlearning/progress/${uuid}`, {
 22 
  const { data, isLoading } = useFetch(`/microlearning/progress/${uuid}`, {
23 
    capsuleTotal: 0,
 23 
    capsuleTotal: 0,
24 
    capsuleCompleted: 0,
 24 
    capsuleCompleted: 0,
25 
    capsuleStarted: 0,
 25 
    capsuleStarted: 0,
26 
    capsuleToStart: 0,
 26 
    capsuleToStart: 0,
27 
    percentCompleted: 0,
 27 
    percentCompleted: 0,
Línea 28... Línea 28...
28 
    percentIncompleted: 0,
 28 
    percentIncompleted: 0,
29 
    capsuleWithReturning: 0,
 29 
    capsuleWithReturning: 0,
30 
    capsuleWithoutReturning: 0
 30 
    capsuleWithoutReturning: 0
31 
  })
 31 
  });
32 
 
 32 
 
33 
  const chartOptions = {
 33 
  const chartOptions = {
34 
    maintainAspectRatio: true,
 34 
    maintainAspectRatio: true,
35 
    responsive: true,
 35 
    responsive: true,
36 
    plugins: {
 36 
    plugins: {
Línea 37... Línea 37...
37 
      legend: {
 37 
      legend: {
38 
        display: false
 38 
        display: false
39 
      }
 39 
      }
Línea 40... Línea 40...
40 
    }
 40 
    }
41 
  }
 41 
  };
42 
 
 42 
 
Línea 62... Línea 62...
62 
            }}
 62 
            }}
63 
            options={chartOptions}
 63 
            options={chartOptions}
64 
          />
 64 
          />
65 
        </Box>
 65 
        </Box>
Línea 66... Línea -...
66 
 
 - 
 
67 
        <Box
 - 
 
68 
          display='flex'
 - 
 
69 
          gap={2}
 66 
 
70 
          justifyContent='center'
 - 
 
71 
          alignItems='baseline'
 - 
 
72 
          mt={1}
 - 
 
73 
        >
 67 
        <Box display='flex' gap={2} justifyContent='center' alignItems='baseline' mt={1}>
74 
          <Tag>
 68 
          <Tag>
75 
            <small>{data?.capsuleTotal}</small> Total
 69 
            <small>{data?.capsuleTotal}</small> Total
76 
          </Tag>
 70 
          </Tag>
77 
          <Tag>
 71 
          <Tag>
Línea 93... Línea 87...
93 
          <Doughnut
 87 
          <Doughnut
94 
            data={{
 88 
            data={{
95 
              labels: ['Con retorno', 'Sin retorno'],
 89 
              labels: ['Con retorno', 'Sin retorno'],
96 
              datasets: [
 90 
              datasets: [
97 
                {
 91 
                {
98 
                  data: [
 - 
 
99 
                    data?.capsuleWithReturning,
 - 
 
100 
                    data?.capsuleWithoutReturning
 92 
                  data: [data?.capsuleWithReturning, data?.capsuleWithoutReturning],
101 
                  ],
 - 
 
102 
                  backgroundColor: ['#16283c99', '#36a2eb99']
 93 
                  backgroundColor: ['#16283c99', '#36a2eb99']
103 
                }
 94 
                }
104 
              ]
 95 
              ]
105 
            }}
 96 
            }}
106 
            options={chartOptions}
 97 
            options={chartOptions}
107 
          />
 98 
          />
108 
        </Box>
 99 
        </Box>
109 
      </Grid>
 100 
      </Grid>
110 
    </Grid>
 101 
    </Grid>
111 
  )
 102 
  );
112 
}
 103 
}
113 
 
 - 
 
114 
export default ProgressPage
 -