JSFiddle - React, Tailwind, and code Playground

by Mike Rawling

HTML

<script src="https://rawgithub.com/DLarsen/jquery-hottie/master/jquery.hottie.js"></script>
<div class="sharerank-heatmap" data-max-value="35">
<a id="add-heat" href="#add-heat" class="unruly-button unruly-button-primary-cta" style="float:right;">Update heatmaps</a>
<div class="FileterLabel">Heat Map: Intense Positive Emotion</div><br><br>

<div id="placeholder_64d70827-f526-4804-88cf-70163512e1b1" class="" style="opacity: 1;">
    <table id="confirmit_agg_table_1" class="t1_table Table">
  <thead>
    <tr class="t1_tr TableRow">
      <td colspan="2" class="t1_cc">
      </td><td class="t1_chc">Happiness</td>
      <td class="t1_chc">Exhilaration</td>
      <td class="t1_chc">Amazement</td>
      <td class="t1_chc">Warmth</td>
      <td class="t1_chc">Hilarity</td>
      <td class="t1_chc">Pride</td>
      <td class="t1_chc">Sadness</td>
      <td class="t1_chc">Nostalgia</td>
      <td class="t1_chc">Inspiration</td>
    </tr>
  </thead>
  <tbody>
    <tr class="t1_tr TableRow">
      <td class="t1_rhc">Betrayal</td>
      <td class="t1_rhc">Nat. Rep.</td>
      <td class="t1_dc TableDataCell">2%</td>
      <td class="t1_dc TableDataCell">0%</td>
      <td class="t1_dc TableDataCell">2%</td>
      <td class="t1_dc TableDataCell">3%</td>
      <td class="t1_dc TableDataCell">4%</td>
      <td class="t1_dc TableDataCell">1%</td>
      <td class="t1_dc TableDataCell">1%</td>
      <td class="t1_dc TableDataCell">2%</td>
      <td class="t1_dc TableDataCell">1%</td>
    </tr>
    <tr class="t1_tr TableRow">
      <td rowspan="2" class="t1_rhc">LAG2_Box</td>
      <td class="t1_rhc">Nat. Rep.</td>
      <td class="t1_dc TableDataCell">6%</td>
      <td class="t1_dc TableDataCell">3%</td>
      <td class="t1_dc TableDataCell">1%</td>
      <td class="t1_dc TableDataCell">36%</td>
      <td class="t1_dc TableDataCell">0%</td>
      <td class="t1_dc TableDataCell">13%</td>
      <td class="t1_dc TableDataCell">11%</td>
      <td class="t1_dc TableDataCell">1%</td>
    ...

CSS

/*
---------- local styles
*/

body{
   font-family:ubuntu; 
   font-size:0.5em;
}

body div.sharerank-heatmap table tbody td{
    width:20px;
    height:20px;
}
body div.sharerank-heatmap table tbody tr.TableRow td.TableDataCell{
    Xborder-radius:60px;
    border:0;
}


div.FileterLabel{
  font-size: 20px;
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 40px;
  font-weight: bold;
  font-size: 16px;
  color: #222121;
    
}

/* // */

/* COPY FROM HERE BELOW: main styles for production */

#add-heat{
	float:right;
}

.sharerank-heatmap .sharerank-heatmap-legend{
	display:none;
  	margin-top:1em;
    margin-bottom:3em;
    margin-left: 16.45em;
    font-size: 0.8em;
}

div.sharerank-heatmap {
    width:100%
    border-collapse: collapse;
}

div.sharerank-heatmap table th,
div.sharerank-heatmap table td{
border:1px solid #fff;
    text-align:center;
    padding:10px;
}

.sharerank-heatmap tr:nth-child(odd) td{
	xbackground-color:#f9f9f9 !important; 
}

div.sharerank-heatmap table thead td,
div.sharerank-heatmap table td[class*="_rhc"],
div.sharerank-heatmap table td[class*="_chc"]{
    font-weight:bold !important;
  	color:#222121 !important;
  	background-color:#f2f2f2; 	
}



body div.sharerank-heatmap table td:nth-of-type(1){
    color:#222121 !important;    
  	  vertical-align: top;
}

div.sharerank-heatmap table td:nth-of-type(1){
    width:100px;
}

div.sharerank-heatmap table tbody td{
    width:60px;
    height:60px;
}


div.sharerank-heatmap table.sharerank-heatmap-legend{
    border-collapse: collapse;
}

div.sharerank-heatmap table.sharerank-heatmap-legend  tbody td{
    width:10px;
height:10px;
}

div.sharerank-heatmap table td.TableHeaderLines{
  text-align: left;
  font-weight:bold;
  font-size:1.3em;
}


/* utils */

.hide,
.h{
    display:none;
}

JavaScript

function makeHeat(){
    
/* detect add a class to split data SR tables  */   

    jQuery("div.sharerank-heatmap tr").each(function() {
    var rowTitle = jQuery(this).find("td[class*='_rhc']:nth-of-type(2)").text();    
    if(rowTitle != "Nat. Rep." && rowTitle != "Male"){
        jQuery(this).find( ".TableDataCell" ).each (function() {
            jQuery(this).addClass("boost");
        });
    }
});

    
jQuery(".sharerank-heatmap td.TableDataCell").hottie({
    colorArray : [ 
        "#ffffff", // highest value
        "#0BBBEF",
        "#00E0FF"  // lowest value
    ]
});
    
    
jQuery(".sharerank-heatmap td.TableDataCell.boost").hottie({
    colorArray : [ 
        "#ffffff", // highest value
        "#C81921",
        "#881116"  // lowest value
    ]
});
    
    
    
/* setting a colour ceiling */
    
// var maxDynamicColor = jQuery("div.sharerank-heatmap td.TableDataCell").text()").
var pMax = "35";
//var pMax = jQuery("div.sharerank-heatmap").prop("data-max-value").text();
alert(pMax);

jQuery("td.TableDataCell").each(function() {
    var cellScore = parseInt($(this).text(), 10); 
    // var pMax = "35";
    
    if(cellScore >= pMax){
        if(jQuery(this).hasClass('boost')){
            jQuery(this).css("background-color","#881116");
        }else{
            jQuery(this).css("background-color","#00E0FF");
        }
    }
    jQuery(this).on('click', function () {
           //debugger;
           alert("pMax =" + pMax + " --- " + "pMax data attrib = " + jQuery("div.sharerank-heatmap").prop("data-max-value"));
      });
});


/* do some small things*/

jQuery(".sharerank-heatmap td.TableDataCell").css("color","#ffffff");
jQuery("div.sharerank-heatmap table td[class*='_rhc'], div.sharerank-heatmap table thead td, div.sharerank-heatmap table td[class*='_chc']").css("background-color","#ffffff");
jQuery( ".sharerank-heatmap .sharerank-heatmap-legend" ).css("display","table");

}
function makeHeatAfterAMo(){
     setTimeout(function(){
      ...