learning-analytics/src/index.js

Learning Analytics Web Dependency

import React, { useEffect, useState } from 'react';

import PropTypes from 'prop-types';
import axios from "axios";

import {Card, CardBody, Col, Row} from "reactstrap";
import {Doughnut} from "react-chartjs-2";
import Loader from 'react-loader-spinner';

import {API_BASE_URL} from "./utilities/constant";

import 'bootstrap/dist/css/bootstrap.min.css';
import './assets/style/css/style.css';

const propsTypes = {
	institutionId: PropTypes.string.isRequired,
	authToken: PropTypes.string.isRequired,
};

const LearningAnalytics = props => {

	const {institutionId, authToken} = props;

	const [approvedData, setApprovedData] = useState(null);
	const [error, setError] = useState('');

	useEffect(() => {
		console.log(institutionId, authToken);
		if (!!authToken) {
			setApprovedData(null);
			setError('');
			axios.get(`${API_BASE_URL}/activity/approvedData`, {headers: {Authorization: `Bearer ${authToken}`}})
				.then(res => {
					console.log(res.data);
					setApprovedData(res.data.data);
					setError('');
				})
				.catch(e => {
					console.log(e.message);
					setApprovedData({});
					setError(e.message);
				})
		}
	}, [institutionId, authToken]);

	return (
		<div className='learning-analytics-wrapper'>
			<Row>
				<Col sm={3}/>
				<Col sm={6}>
					<Card className='graphic-container'>
						<CardBody>
							<p className='mb-0 font-regular'>Índice de aprobados</p>
							<div className='d-flex justify-content-center align-items-center'>
								{
									approvedData === null ?
										<Loader type="ThreeDots" color="#DDDDDD" height={28} width={28} /> :
										!!error ?
											<p className='error'>{error}</p> :
											<Doughnut data={{
												labels: ["Aprobadas", "Desaprobadas"],
												datasets: [
													{
														data: [
															approvedData.approvedNumber,
															approvedData.totalNumber - approvedData.approvedNumber
														],
														backgroundColor: ["#8FA3B6", "#B9CAD9"],
														hoverBackgroundColor: ["#8a9daf", "#c1d2e2"],
													},
												],
											}} options={{
												legend: { display: false },
												cutoutPercentage: 70,
												title: {
													display: true,
													fontSize: 16,
													position: 'bottom',
													fontFamily: "'Open sans regular', serif",
													text: `${Math.ceil((approvedData.approvedNumber / approvedData.totalNumber) * 100)}%`
												},
												events: ['mousemove']
											}}/>
								}
							</div>
						</CardBody>
					</Card>
				</Col>
				<Col sm={3}/>
			</Row>
		</div>
	)
};

LearningAnalytics.propTypes = propsTypes;

export default LearningAnalytics