JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="reposChart"></div>

JavaScript

console.clear();

function getUser(userName) {
	return new Promise(function (resolve, reject) {
		var url = 'https://api.github.com/users/' + userName + '/repos',
			method = 'get',
			request = new XMLHttpRequest();

		request.onreadystatechange = function () {
			if (request.readyState === 4) {
				let res = {
					data: JSON.parse(request.response),
					status: request.status
				};
			
				if (res.status == 200) {
					resolve(res)
				}
				else if (request.status === 404) {
					reject(res)
				}
			}
		}
		request.open(method, url); 
		request.send();
	});
}


getUser('mbostock').then(setChartData);

function setChartData(response) {

	console.log(response);

	var chartData_1 = [
		{y: 60, label: "Google"},
		{y: 40, label: "Bing"}
	];
	
	let notDefinedLanguageName = 'not defined';
	let averages = (function (projects) {
			let projectsCount = projects.length;
			let langs = {
				[notDefinedLanguageName]: 0
			};

			projects.forEach(function (project, i) {
				console.log(project.language);
				if (project.language) {
					let language = project.language.toLowerCase();
					if (!langs.hasOwnProperty(language)) {
						langs[language] = 0;
					}
					langs[language]++;
				}
				else {
					langs[notDefinedLanguageName]++;
				}
			});
			
			return langs;
		})(response.data);

	setChart(averages);
}

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function setChart(data) {
	var chart = new CanvasJS.Chart('reposChart', {
		animationEnabled: true,
		data: [{
			type: 'pie',
			yValueFormatString: '##0\"%\"',
			indexLabel: "{label} {y}",
			dataPoints: data
		}]
	});
	chart.render();
}