JSFiddle - React, Tailwind, and code Playground

by jtbowden

HTML

<textarea id="data">
1 | 1:00
0 | 2:15
1 | 3:15
0 | 9:00</textarea>
<br/>
<button id="generate">Generate</button>
<br/>
<canvas id="myCanvas"></canvas>

CSS

#data {
    width: 100px;
    height: 100px;
}

JavaScript

$(function () {

    gen();
    
    $('#generate').on('click', function() {
         gen();
    });

    function gen() {
        var rawdata = $('#data').val();
        var rows = rawdata.split(/[\n\r]+/);
        var data = [];

        var state = 0;

        for (var i = 0; i < rows.length; i++) {
            var d = rows[i].split(/\s*\|\s*/);
            var x = 0;
            var secs = 0;
            if (Math.abs(d[0] - 1) == state) {
                var time = d[1].split(/\:/);
                while(time[x] != null) {
                    secs += parseInt(time[x])*(3600/Math.pow(60,x));
                    x++;
                }
                secs = (secs/21600) - 0.5;
                data.push(secs);
                state = Math.abs(state - 1);
            }
        }
            
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#ffffff";

        ctx.fillRect(0,0,300,300);
        
        var s = 1;
        while(data[s] != null) {
            ctx.fillStyle = "#22dd22";
            ctx.beginPath();
            ctx.moveTo(100, 75);
            ctx.arc(100, 75, 50, data[s-1] * Math.PI, data[s] * Math.PI);
            ctx.moveTo(100, 75);
            ctx.fill();
            
            s += 2
        }
    };

});