Skip to content

Instantly share code, notes, and snippets.

@praveenscience

praveenscience/conditional.html

Created July 25, 2017 14:24
Show Gist options
  • Save praveenscience/3521b13ef3320d0c1ca30f44f61f886c to your computer and use it in GitHub Desktop.
Save praveenscience/3521b13ef3320d0c1ca30f44f61f886c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
conditional.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Conditional Formatting</title>
</head>
<body>
<h1>Conditional Formatting</h1>
<div class="col">
<h2>Cases</h2>
<table>
<tr>
<th>Variant 1</th>
<th>Variant 2</th>
<th>Variant 3</th>
<th>Variant 4</th>
<th>Variant 5</th>
<th>Variant 6</th>
<th>Variant 7</th>
<th>Variant 8</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>9</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>5</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0.75</td>
<td>5</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0.65</td>
<td>5</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>6</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0.5</td>
<td>5</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0.35</td>
<td>5</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>8</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0.25</td>
<td>5</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>9</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0.15</td>
<td>5</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>10</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0.1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>11</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0</td>
<td>0</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<table hidden>
<tr>
<th>Case 1</th>
<th>Case 2</th>
<th>Case 3</th>
<th>Case 4</th>
<th>Case 5</th>
<th>Case 6</th>
<th>Case 7</th>
<th>Case 8</th>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>10</td>
<td>10</td>
<td>10</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>5</td>
<td>9</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>5</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0.75</td>
<td>5</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0.65</td>
<td>5</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>6</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0.5</td>
<td>5</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>7</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0.35</td>
<td>5</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>8</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0.25</td>
<td>5</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>9</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0.15</td>
<td>5</td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td>10</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>0.1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<a href="#" id="colourise">Colourise Me</a>
</div>
<div class="col">
<h2>Debugger</h2>
<pre>Debugger Ready...</pre>
</div>
</body>
<style>
* {margin: 0; padding: 0; list-style: none; line-height: 1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body {padding: 0 15px;}
h1, h2 {font-weight: normal; padding: 0 0 15px; text-shadow: 0 0 1px rgba(0,0,0,0.5);}
table {width: 100%; text-align: center; border-collapse: collapse;}
th, td {border: 1px solid #ccc; padding: 5px;}
strong, th {text-shadow: 0 0 1px rgba(0,0,0,0.25); font-weight: 600;}
td {font-family: 'Monaco', 'Consolas', monospace;}
#colourise {text-decoration: none; margin: 10px 0; display: inline-block; padding: 5px 5px 6px; border-radius: 5px; color: #000; -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.75); overflow: hidden;}
#colourise:hover {background-color: #ccf;}
pre {border: 1px solid #ccc; padding: 3px; font-family: 'Consolas';}
pre span {color: #f90; text-shadow: 0 0 1px rgba(0,0,0,0.5);}
@media screen and (min-width: 960px) {
.col {width: 50%; float: left; padding-left: 15px;}
.col:first-child {padding: 0;}
}
.high {background-color: #f00;}
.medium {background-color: #ffbf00;}
.low {background-color: #090;}
</style>
<script>
function log (stuff) {
if (typeof stuff == "object" && !(stuff instanceof Array))
document.querySelector("pre").innerHTML += "\n" + JSON.stringify(stuff, null, 2);
else if (stuff instanceof Array)
document.querySelector("pre").innerHTML += "\n[" + stuff.join(", ") + "]";
else
document.querySelector("pre").innerHTML += "\n" + stuff;
}
function getColumnValues (tableSelector, colN) {
colN = colN || 1;
colN--;
var myTable = document.querySelector(tableSelector);
var values = [];
for (var i = 1, n = myTable.rows.length; i < n; i++)
// Assuming all the values are numbers. Don't use this function for
values.push(parseFloat(myTable.rows[i].cells[colN].innerHTML.trim()));
return values;
}
function addClassToColumnCells (tableSelector, colN, valObj) {
colN = colN || 1;
colN--;
var myTable = document.querySelector(tableSelector);
for (var i = 1, n = myTable.rows.length; i < n; i++) {
curTD = myTable.rows[i].cells[colN];
curVal = curTD.innerHTML.trim();
if (typeof valObj[curVal] !== "undefined")
curTD.classList.add(valObj[curVal]);
}
}
window.onload = function () {
document.getElementById("colourise").onclick = function () {
var StartTS = Date.now();
for (var c = 1; c <= 8; c++) {
log("");
log("<strong>Working on Case " + c + ".</strong>");
log("Get all the values in an array.");
var colVals = getColumnValues("table", c);
log(colVals);
log("Get all the unique values in the array.");
colVals = colVals.filter(function (value, index, self) {
return self.indexOf(value) === index;
});
log("Sorting all the values by descending order.");
colVals.sort(function (a, b) {
return b - a;
});
log(colVals);
log("The length of the whole array is: " + colVals.length);
var colourMapping = {};
if (colVals.length < 2)
log("<span>Only " + colVals.length + " value found. No colouring.</span>");
else if (colVals.length == 2) {
log("<span>Hard Coding Values. Two colours.</span>");
colourMapping[colVals[0]] = "high";
log(colVals[0] + " is coloured red.\n" + colVals[1] + " is not coloured.");
} else if (colVals.length == 3) {
log("<span>Hard Coding Values. Three colours.</span>");
colourMapping[colVals[0]] = "high";
colourMapping[colVals[1]] = "medium";
colourMapping[colVals[2]] = "low";
log(colVals[0] + " is coloured red.\n" + colVals[1] + " is coloured amber.\n" + colVals[2] + " is coloured green.");
} else {
log("<span>Implementing Bucket Method.</span>");
var quotient = parseInt(colVals.length / 3);
var mapping = [quotient, quotient, quotient];
for (var m = 0, reminder = colVals.length % 3; reminder > 0; reminder--, m++)
mapping[m]++;
log("The first " + mapping[0] + " elements will be red.");
log("The next " + mapping[1] + " elements will be amber.");
log("The rest " + mapping[2] + " elements will be green.");
for (var i = 0; i < mapping[0]; i++)
colourMapping[colVals[i]] = "high";
for (; i < mapping[0] + mapping[1]; i++)
colourMapping[colVals[i]] = "medium";
for (; i < mapping[0] + mapping[1] + mapping[2]; i++)
colourMapping[colVals[i]] = "low";
}
if (Object.keys(colourMapping).length) {
log("<span>Verbose:</span>");
log(colourMapping);
log("");
log("<strong>Applying the colours for column " + c + "...</strong>");
addClassToColumnCells ("table", c, colourMapping);
log("<span>Successfully applied colours for column " + c + ".</span>");
}
}
log("");
var EndTS = Date.now();
log("<strong>Completed in " + (EndTS - StartTS) + " ms.</strong>");
return false;
};
};
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment