Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React from 'react';
2 
import { Bar } from 'react-chartjs-2';
3 
import {axios} from '../../utils'
4 
 
5 
const DoughnutChart = () => {
6 
  const [percentage, setPercentage] = React.useState(null)
7 
  const [dataSets, setDataSets] = React.useState([])
8 
  const [percentProgress, setPercentProgress] = React.useState(null)
9 
  const [percentReturning, setPercentReturning] = React.useState(null)
10 
  const data = {
11 
    labels: ['Completos', 'Incompletos'],
12 
    datasets: [
13 
      {
14 
        label: 'Progreso',
15 
        data: percentProgress,
16 
        backgroundColor: [
17 
          'rgba(33, 150, 243, 1)',
18 
          '#2c76b3',
19 
          'rgba(154, 206, 248, 1)',
20 
          'rgba(126, 188, 239, 1)',
21 
        ],
22 
        borderColor: [
23 
          'rgba(33, 150, 243, 1)',
24 
          '#2c76b3',
25 
          'rgba(154, 206, 248, 1)',
26 
          'rgba(126, 188, 239, 1)',
27 
        ],
28 
        borderWidth: 1,
29 
      },
30 
    ],
31 
  };
32 
  const data2 = {
33 
    labels: ['Con retorno', 'Sin retorno'],
34 
    datasets: [
35 
      {
36 
        label: 'Retorno',
37 
        data: percentReturning,
38 
        backgroundColor: [
39 
          'rgba(33, 150, 243, 1)',
40 
          '#2c76b3',
41 
          'rgba(154, 206, 248, 1)',
42 
          'rgba(126, 188, 239, 1)',
43 
        ],
44 
        borderColor: [
45 
          'rgba(33, 150, 243, 1)',
46 
          '#2c76b3',
47 
          'rgba(154, 206, 248, 1)',
48 
          'rgba(126, 188, 239, 1)',
49 
        ],
50 
        borderWidth: 1,
51 
      },
52 
    ],
53 
  };
54 
  const load = async () => {
55 
    try {
56 
      const res = await axios.get('microlearning/progress')
57 
      if(res.data.success){
58 
        const {topicCompleted, topicIncompleted, topicStarted, topicTotal, percentCompleted, percentIncompleted, percentWithoutReturning, percentWithReturning} = res.data.data
59 
        const _dataSets = {
60 
          topicCompleted,
61 
          topicIncompleted,
62 
          topicStarted,
63 
          topicTotal
64 
        }
65 
        const _percentProgress = [percentCompleted, percentIncompleted]
66 
        const _percentReturning = [parseFloat(percentWithReturning), parseFloat(percentWithoutReturning)]
67 
        setPercentReturning(_percentReturning)
68 
        setPercentProgress(_percentProgress)
69 
        setDataSets(_dataSets)
70 
        setPercentage(res.data.data)
71 
      }
72 
    } catch (error) {
73 
      console.log('>>: error > ', error)
74 
    }
75 
  }
76 
  React.useEffect(() => {
77 
    load()
78 
  }, [])
79 
  return(
80 
      <div className="acc-setting" style={{ position: "relative" }}>
81 
          <div
82 
              className="container"
83 
          >
84 
            {
85 
              (!!dataSets) && (
86 
                <div className="w-100 text-center ">
87 
                  <h2 class="p-2">
88 
                      <strong>
89 
                          Cápsulas
90 
                      </strong>
91 
                  </h2>
92 
                  <div
93 
                    className="row p-2"
94 
                    style={{
95 
                      borderBottom: 'solid 1px rgb(197 197 197)'
96 
                    }}
97 
                  >
98 
                    <div
99 
                      className="col"
100 
                    >
101 
                      <strong className="p-1">
102 
                        Total:
103 
                      </strong>
104 
                      {dataSets.topicTotal}
105 
                    </div>
106 
                    <div
107 
                      className="col"
108 
                    >
109 
                      <strong className="p-1">
110 
                        Iniciadas:
111 
                      </strong>
112 
                      {dataSets.topicStarted}
113 
                    </div>
114 
                    <div
115 
                      className="col"
116 
                    >
117 
                      <strong className="p-1">
118 
                        Completadas:
119 
                      </strong>
120 
                      {dataSets.topicCompleted}
121 
                    </div>
122 
                    <div
123 
                      className="col"
124 
                    >
125 
                      <strong className="p-1">
126 
                        Incompletas:
127 
                      </strong>
128 
                      {dataSets.topicIncompleted}
129 
                    </div>
130 
                  </div>
131 
                </div>
132 
              )
133 
            }
134 
            {
135 
              percentProgress && (
136 
                <div
137 
                    style={{
138 
                        padding: '3% 20%',
139 
                        textAlign: 'center'
140 
                    }}
141 
                >
142 
                    <h2>
143 
                        <strong>
144 
                            Progreso
145 
                        </strong>
146 
                    </h2>
147 
                    <Bar
148 
                      data={data}
149 
                    />
150 
                </div>
151 
              )
152 
            }
153 
            {
154 
              percentReturning && (
155 
                <div
156 
                    style={{
157 
                        padding: '3% 20%',
158 
                        textAlign: 'center'
159 
                    }}
160 
                >
161 
                    <h2>
162 
                        <strong>
163 
                            Retorno
164 
                        </strong>
165 
                    </h2>
166 
                    <Bar
167 
                      data={data2}
168 
                    />
169 
                </div>
170 
              )
171 
            }
172 
          </div>
173 
      </div>
174 
  )
175 
}
176 
 
177 
export default DoughnutChart;