JSFiddle - React, Tailwind, and code Playground

by mrcl

JavaScript

var r=[
		['age13-17', 'female', 1.2],
		['age18-24', 'female', 10.1],
		['age25-34', 'female', 10.7],
		['age35-44', 'female', 8.6],
		['age45-54', 'female', 6.4],
		['age55-64', 'female', 4.3],
		['age65-', 'female', 2.4],
		['age13-17', 'male', 1.1],
		['age18-24', 'male', 13.6],
		['age25-34', 'male', 18.5],
		['age35-44', 'male', 11.4],
		['age45-54', 'male', 6.4],
		['age55-64', 'male', 3.4],
		['age65-', 'male', 2]
	];
  
var t={
	'kind': 'youtubeAnalytics#resultTable',
	'columnHeaders': [{
		'name': 'insightTrafficSourceType',
		'columnType': 'DIMENSION',
		'dataType': 'STRING'
	}, {
		'name': 'views',
		'columnType': 'METRIC',
		'dataType': 'INTEGER'
	}, {
		'name': 'estimatedMinutesWatched',
		'columnType': 'METRIC',
		'dataType': 'INTEGER'
	}],
	'rows': [
		['NO_LINK_OTHER', 20903, 64887],
		['SUBSCRIBER', 883266, 3446866],
		['YT_CHANNEL', 1480, 7768],
		['YT_SEARCH', 89705, 368300],
		['RELATED_VIDEO', 467839, 2252507],
		['YT_OTHER_PAGE', 13282, 85951],
		['EXT_URL', 10437, 35448],
		['ANNOTATION', 1, 2],
		['PLAYLIST', 623, 3053],
		['NOTIFICATION', 3994, 16794],
		['YT_PLAYLIST_PAGE', 306, 1371],
		['END_SCREEN', 1158, 6560]
	]
};
  
console.log(r.filter(function(x) {  return x[1] == 'male'; }).map(function(x) { return x[2]}));
console.log(r.filter(function(x) {  return x[1] == 'female'; }).map(function(x) { return x[2]}));




			function render(task,data) {
				var out="";
				console.log(data);
				console.log(data.columnHeaders.length);
				console.log(data.rows.length);
				
				switch(task) {
					case "trafficSources":
						console.log("ßaßß");
						var out = "<table><tr>";
						for (i = 0; i < data.columnHeaders.length; i++) {
							out += "<td>" + data.columnHeaders[i]["name"] + "</td>";
						}
						out += "</tr>";
						for (i = 0; i < data.rows.length; i++) {
							out += "<tr><td>" + data.rows[i].join("</td><td>") + "</td></tr>"
						}
						out =...