JSFiddle - React, Tailwind, and code Playground

by TheDev6

HTML

<h1>Graphinator Proof of Concept</h1>
    <button id="btnBuildTestTable">Build Test Table</button>
    <button id="btnGraphinate">Graphinate This Table</button>
    <div id="content">
    </div>
<script>
    $(function () {
        graphinator.initilize();
        
        $('#btnBuildTestTable').click(function () {
            $('#content').html(graphinator.buildDummyTable(10, 'myTestTable'));
        });
        
        $('#btnGraphinate').click(function () {
            graphinator.graphinate('myTestTable',"http://dev6.blob.core.windows.net/dev6pub/conditionalBack.jpg");
        });
    });
</script>

JavaScript

var graphinator;
(function (graphinator) {
    graphinator.initilize = function () {
        if ($ == null) {
            var msg = 'JQuery is not defined. Please reference JQuery for graphinator to function properly';
            alert(msg);
            throw msg;
        }
    };

    graphinator.buildDummyTable = function (rows, elementId) {
        var fakeDataArray = [];
        for (var i = 0; i <= rows; i++) {
            var fakeData = {
                String: Guid.newGuid(),
                Number: i,
                RandomNumber: Math.floor((Math.random() * 1000) + 1)
            };
            fakeDataArray.push(fakeData);
        }
        return new HtmlTable(elementId, fakeDataArray).toHtmlString();
    };

    graphinator.graphinate = function (tableId, imgSrc) {
        var colCount = $('table#' + tableId + ' tr:first').children().length;

        for (var i = 0; i < colCount; i++) {
            var max = 0;
            var min = 0;

            $('#' + tableId + ' tr').each(function (index, row) {
                var val = $(row).children()[i].innerHTML;
                var cleanVal = cleanValue(val);
                if (isNumber(cleanVal) === true) {
                    var valNum = parseInt(cleanVal);
                    if (isNaN(valNum) === false) {
                        if (valNum > max)
                            max = valNum;
                        if (valNum < min)
                            min = valNum;
                    }
                }
            });

            $('#' + tableId + ' tr').each(function (index, row) {
                var val = $(row).children()[i].innerHTML;
                var cleanVal = cleanValue(val);
                if (isNumber(cleanVal) === true) {
                    var valNum = parseInt(cleanVal);
                    if (isNaN(valNum) === false) {
                        var spread = max - min;
                        var relative = valNum - min;
                        if (spread !== 0) {
        ...