Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3719 Rev 3741
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 { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
3 
import { Doughnut } from 'react-chartjs-2';
 4 
import { Doughnut } from 'react-chartjs-2';
4 
import { Box, Grid, Typography } from '@mui/material';
 5 
import { Box, Grid, Typography } from '@mui/material';
Línea 5... Línea 6...
5 
 
 6 
 
6 
import { useAlert, useApi } from '@shared/hooks';
 7 
import { useAlert, useApi } from '@shared/hooks';
Línea 7... Línea 8...
7 
import { getProgress } from '@microlearning/services';
 8 
import { getProgress } from '@microlearning/services';
Línea -... Línea 9...
- 
 
 9 
 
- 
 
 10 
import { Spinner } from '@shared/components';
8 
 
 11 
 
9 
import { Spinner } from '@shared/components';
 12 
ChartJS.register(ArcElement, Tooltip, Legend);
Línea 10... Línea 13...
10 
 
 13 
 
Línea 44... Línea 47...
44 
          <Doughnut
 47 
          <Doughnut
45 
            data={{
 48 
            data={{
46 
              labels: ['Completado', 'Por completar'],
 49 
              labels: ['Completado', 'Por completar'],
47 
              datasets: [
 50 
              datasets: [
48 
                {
 51 
                {
49 
                  data: [data?.percentCompleted, data?.percentIncompleted],
 52 
                  data: [data.percentCompleted, data.percentIncompleted],
50 
                  backgroundColor: ['#16283c99', '#36a2eb99']
 53 
                  backgroundColor: ['#16283c99', '#36a2eb99']
51 
                }
 54 
                }
52 
              ]
 55 
              ]
53 
            }}
 56 
            }}
54 
            options={chartOptions}
 57 
            options={chartOptions}
55 
          />
 58 
          />
56 
        </Box>
 59 
        </Box>
Línea 57... Línea 60...
57 
 
 60 
 
58 
        <Box display='flex' gap={2} justifyContent='center' alignItems='baseline' mt={1}>
 61 
        <Box display='flex' gap={2} justifyContent='center' alignItems='baseline' mt={1}>
59 
          <Typography variant='caption'>{data?.capsuleTotal} Total</Typography>
 62 
          <Typography variant='caption'>{data.capsuleTotal} Total</Typography>
60 
          <Typography variant='caption'>{data?.capsuleStarted} Iniciadas</Typography>
 63 
          <Typography variant='caption'>{data.capsuleStarted} Iniciadas</Typography>
61 
          <Typography variant='caption'>{data?.capsuleToStart} Por realizar</Typography>
 64 
          <Typography variant='caption'>{data.capsuleToStart} Por realizar</Typography>
62 
          <Typography variant='caption'>{data?.capsuleCompleted} Completadas</Typography>
 65 
          <Typography variant='caption'>{data.capsuleCompleted} Completadas</Typography>
63 
        </Box>
 66 
        </Box>
Línea 64... Línea 67...
64 
      </Grid>
 67 
      </Grid>
65 
 
 68 
 
Línea 70... Línea 73...
70 
          <Doughnut
 73 
          <Doughnut
71 
            data={{
 74 
            data={{
72 
              labels: ['Con retorno', 'Sin retorno'],
 75 
              labels: ['Con retorno', 'Sin retorno'],
73 
              datasets: [
 76 
              datasets: [
74 
                {
 77 
                {
75 
                  data: [data?.capsuleWithReturning, data?.capsuleWithoutReturning],
 78 
                  data: [data.capsuleWithReturning, data.capsuleWithoutReturning],
76 
                  backgroundColor: ['#16283c99', '#36a2eb99']
 79 
                  backgroundColor: ['#16283c99', '#36a2eb99']
77 
                }
 80 
                }
78 
              ]
 81 
              ]
79 
            }}
 82 
            }}
80 
            options={chartOptions}
 83 
            options={chartOptions}