JSFiddle - React, Tailwind, and code Playground

by nathanziarek

HTML

<script src="https://rawgit.com/tannerlinsley/Chart.js/master/Chart.min.js"></script>
<li><div class="m-artifact-card x-full-label"><div class="m-artifact-card-thumbnail" id="chart2"></div><div class="m-artifact-card-intro">GL 21548-9854</div><div class="m-artifact-card-label">Food &amp; Kitchen</div><ul class="m-artifact-card-details"><li class="x-style-price">Order $837.12</li><li class="x-style-trend-up">Trending 94%</li></ul></div></li>

CSS

body {
    font-family: Open Sans;
    font-size: 13px;
}
.wrap {position: relative; margin: 30px; height: 60px;}
.values {
    width: 500px;
    position: absolute;
    top: 10px;
    left: 70px
}
.small {
    color: #777;
    font-size: .85em
}
canvas {
    position: absolute;
    top: 10px;
    left: 0
}
.values div {
    margin: 3px 0;
}.values div:first-child {
    margin: 0;
}

JavaScript

function chart(id, gl, gldesc, std, os, budget){
    var template = $('<div class="wrap"><canvas id="' + id + '" width="50" height="50"></canvas><div class="values"><div class="small">GL '+gl+'</div><div class="gl-desc">'+gldesc+'</div><div class="desc">Order $'+os.toFixed(2)+'&nbsp;&nbsp;&bull;&nbsp;&nbsp;Trending <span class="trending"></span></div></div></div>');
    
    var hue = 140;
    if((std + os) > (budget * .80)) { hue = 50; }
    if((std + os) > (budget * .95)) { hue = 350; }
    console.log(std + os, budget * .95, budget * .80);

    var data = [
        { value: std, color: "hsl("+hue+", 40%, 45%)", label: "Spend To-Date" }, 
        { value: os, color: "hsl("+hue+", 40%, 40%)", label: "This Order" }, 
        { value: Math.max(0, budget - (std + os)), color: "hsl("+hue+", 30%, 95%)", label: "Remaining" }
    ],
    options = { percentageInnerCutout: 75, segmentStrokeWidth: 1, animation: false, showTooltips: false },
    canvas = $('#' + id, template),
    context = $(canvas).get(0).getContext("2d"),
    chart = new Chart(context).Doughnut(data, options);
    
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.fillStyle = "hsl("+hue+", 40%, 45%)";
    context.font = (($(canvas).width() * options.percentageInnerCutout / 100) / 3) + 'px Open Sans';
    if(budget > 0) {
        var g = Math.floor(((os+std) / budget)*100, 1) + "%";
    } else {
        var g = "∞";
    }
    context.fillText(g, $(canvas).width() / 2, $(canvas).height() / 2);
    
    if( ((((30*(std+os))/10)/budget)*100).toFixed(0) > 150 ) {
        $(".trending", template).css({"color": "hsl(350, 40%, 45%)", "font-weight": "600"}).text(g);
    } else if( ((((30*(std+os))/10)/budget)*100).toFixed(0) > 100 ) {
        $(".trending", template).css({"color": "hsl(50, 40%, 45%)", "font-weight": "600"}).text(g);
    } else {
        $(".trending", template).css({"color": "hsl(140, 40%, 45%)", "font-weight": "600"}).text(g);
    }
    
   ...