JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Gable.js</title>
        <script src="https://raw.github.com/editor/Gable/master/gable.js"></script>
    </head>
    <body>
        <div id='example6'><div id='example6hours'></div><div id='example6minutes'></div><div id='example6seconds'></div></div></div>
    </body>
</html>

JavaScript

var tick = function() {

    var datetime = new Date();
    var doGauge = function(data, id) {
        var chart = {
            target: id,
            type: 'gauge',
            meta: {
                width: 350,
                min: 1
            }
        };
        if ('undefined' !== typeof data['Hours']) {
            chart.meta.max = 24;
        } else if ('undefined' !== typeof data['Minutes'] || 'undefined' !== typeof data['Seconds']) {
            chart.meta.max = 60;
        }
        Gable('time_gauges' + id).add({ //TODO: should be update
            value: data
        }).draw(chart);
    }

        doGauge( { 'Hours': datetime.getHours()
    }, 'example6hours');
    doGauge({
        'Minutes': datetime.getMinutes()
    }, 'example6minutes');
    doGauge({
        'Seconds': datetime.getSeconds()
    }, 'example6seconds');

};

tick();
//window.setInterval( tick, 1000 ); //TODO: Uncomment me