Proyectos de Subversion LeadersLinked - Antes de SPA

import React from 'react';
import { Bar } from 'react-chartjs-2';
import {axios} from '../../utils'

const DoughnutChart = () => {
  const [percentage, setPercentage] = React.useState(null)
  const [dataSets, setDataSets] = React.useState([])
  const [percentProgress, setPercentProgress] = React.useState(null)
  const [percentReturning, setPercentReturning] = React.useState(null)
  const data = {
    labels: ['Completos', 'Incompletos'],
    datasets: [
      {
        label: 'Progreso',
        data: percentProgress,
        backgroundColor: [
          'rgba(33, 150, 243, 1)',
          '#2c76b3',
          'rgba(154, 206, 248, 1)',
          'rgba(126, 188, 239, 1)',
        ],
        borderColor: [
          'rgba(33, 150, 243, 1)',
          '#2c76b3',
          'rgba(154, 206, 248, 1)',
          'rgba(126, 188, 239, 1)',
        ],
        borderWidth: 1,
      },
    ],
  };
  const data2 = {
    labels: ['Con retorno', 'Sin retorno'],
    datasets: [
      {
        label: 'Retorno',
        data: percentReturning,
        backgroundColor: [
          'rgba(33, 150, 243, 1)',
          '#2c76b3',
          'rgba(154, 206, 248, 1)',
          'rgba(126, 188, 239, 1)',
        ],
        borderColor: [
          'rgba(33, 150, 243, 1)',
          '#2c76b3',
          'rgba(154, 206, 248, 1)',
          'rgba(126, 188, 239, 1)',
        ],
        borderWidth: 1,
      },
    ],
  };
  const load = async () => {
    try {
      const res = await axios.get('microlearning/progress')
      if(res.data.success){
        const {topicCompleted, topicIncompleted, topicStarted, topicTotal, percentCompleted, percentIncompleted, percentWithoutReturning, percentWithReturning} = res.data.data
        const _dataSets = {
          topicCompleted,
          topicIncompleted,
          topicStarted,
          topicTotal
        }
        const _percentProgress = [percentCompleted, percentIncompleted]
        const _percentReturning = [parseFloat(percentWithReturning), parseFloat(percentWithoutReturning)]
        setPercentReturning(_percentReturning)
        setPercentProgress(_percentProgress)
        setDataSets(_dataSets)
        setPercentage(res.data.data)
      }
    } catch (error) {
      console.log('>>: error > ', error)
    }
  }
  React.useEffect(() => {
    load()
  }, [])
  return(
      <div className="acc-setting" style={{ position: "relative" }}>
          <div
              className="container"
          >
            {
              (!!dataSets) && (
                <div className="w-100 text-center ">
                  <h2 class="p-2">
                      <strong>
                          Cápsulas
                      </strong>
                  </h2>
                  <div
                    className="row p-2"
                    style={{
                      borderBottom: 'solid 1px rgb(197 197 197)'
                    }}
                  >
                    <div
                      className="col"
                    >
                      <strong className="p-1">
                        Total:
                      </strong>
                      {dataSets.topicTotal}
                    </div>
                    <div
                      className="col"
                    >
                      <strong className="p-1">
                        Iniciadas:
                      </strong>
                      {dataSets.topicStarted}
                    </div>
                    <div
                      className="col"
                    >
                      <strong className="p-1">
                        Completadas:
                      </strong>
                      {dataSets.topicCompleted}
                    </div>
                    <div
                      className="col"
                    >
                      <strong className="p-1">
                        Incompletas:
                      </strong>
                      {dataSets.topicIncompleted}
                    </div>
                  </div>
                </div>
              )
            }
            {
              percentProgress && (
                <div
                    style={{
                        padding: '3% 20%',
                        textAlign: 'center'
                    }}
                >
                    <h2>
                        <strong>
                            Progreso
                        </strong>
                    </h2>
                    <Bar
                      data={data}
                    />
                </div>
              )
            }
            {
              percentReturning && (
                <div
                    style={{
                        padding: '3% 20%',
                        textAlign: 'center'
                    }}
                >
                    <h2>
                        <strong>
                            Retorno
                        </strong>
                    </h2>
                    <Bar
                      data={data2}
                    />
                </div>
              )
            }
          </div>
      </div>
  )
}

export default DoughnutChart;