Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useParams } from 'react-router-dom';
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
import { Doughnut } from 'react-chartjs-2';
import { Box, Grid, Typography } from '@mui/material';

import { useAlert, useApi } from '@shared/hooks';
import { getProgress } from '@microlearning/services';

import { Spinner } from '@shared/components';

ChartJS.register(ArcElement, Tooltip, Legend);

export function ProgressPage() {
  const { uuid } = useParams();

  const { showError } = useAlert();

  const { data, loading } = useApi(getProgress, {
    autoFetch: true,
    autoFetchArgs: [uuid],
    onError: (error) => {
      showError(error.message);
    }
  });

  const chartOptions = {
    maintainAspectRatio: true,
    responsive: true,
    plugins: {
      legend: {
        display: false
      }
    }
  };

  if (loading || !data) {
    return <Spinner />;
  }

  return (
    <Grid container spacing={1}>
      <Grid size={{ xs: 12, md: 6 }}>
        <Typography variant='h1'>Cápsulas</Typography>

        <Box mx='auto' mt={2} maxWidth={400}>
          <Doughnut
            data={{
              labels: ['Completado', 'Por completar'],
              datasets: [
                {
                  data: [data.percentCompleted, data.percentIncompleted],
                  backgroundColor: ['#16283c99', '#36a2eb99']
                }
              ]
            }}
            options={chartOptions}
          />
        </Box>

        <Box display='flex' gap={2} justifyContent='center' alignItems='baseline' mt={1}>
          <Typography variant='caption'>{data.capsuleTotal} Total</Typography>
          <Typography variant='caption'>{data.capsuleStarted} Iniciadas</Typography>
          <Typography variant='caption'>{data.capsuleToStart} Por realizar</Typography>
          <Typography variant='caption'>{data.capsuleCompleted} Completadas</Typography>
        </Box>
      </Grid>

      <Grid size={{ xs: 12, md: 6 }}>
        <Typography variant='h1'>Retorno</Typography>

        <Box mx='auto' mt={2} maxWidth={400}>
          <Doughnut
            data={{
              labels: ['Con retorno', 'Sin retorno'],
              datasets: [
                {
                  data: [data.capsuleWithReturning, data.capsuleWithoutReturning],
                  backgroundColor: ['#16283c99', '#36a2eb99']
                }
              ]
            }}
            options={chartOptions}
          />
        </Box>
      </Grid>
    </Grid>
  );
}