JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<textarea...

JavaScript

I'$("#parse_data").click(function () {
    var lines = $("#roll_data").val().split("\n"),
        parsed = {};
    for (var line_i = 0; line_i < lines.length; line_i++) {
        var data = lines[line_i].split(":");
        if (typeof parsed[data[0]] === 'undefined') {
            parsed[data[0]] = {};
        }
        if (typeof parsed[data[0]][data[2]] === 'undefined') {
            parsed[data[0]][data[2]] = [];
        }
        parsed[data[0]][data[2]].push({
            dc: data[3],
            prog: data[4],
            die: data[5],
            bonus: data[6],
            auc_ready: (data[7] == 'yes' ? true : false),
            auc_roll: data[8],
            auc_bonus: data[9],
            auc_result: data[10]
        });
    }
    parsed.length = 50;
    var transformed = [
        [
            'Level',
            'Success diff 1',
            'Success diff 2',
            'Success diff 3',
            'Success diff 4',
            'Success diff 5']
    ],
        charts = [];
    for (var p_i = 1; p_i <= parsed.length; p_i++) {
        var data_arr = [p_i];
        for (var diff_i = 1; diff_i <= 5; diff_i++) {
            var attempted = 0,
                succeeded = 0;
            for (var proj_i = 0; proj_i < 3; proj_i++) {
                attempted++;
                if (parsed[p_i][diff_i][proj_i].auc_ready) {
                    succeeded++;
                }
            }
            var percent_successful = Math.floor((succeeded / attempted) * 100)
            data_arr.push(percent_successful);

        }
        transformed.push(data_arr);
        if (p_i % 10 == 0) {
            charts.push(transformed);
            transformed = [
                [
                    'Level',
                    'Success diff 1',
                    'Success diff 2',
                    'Success diff 3',
                    'Success diff 4',
                    'Success diff 5']
            ];
        }
    }
    var options = {
        title: '',
      ...