JamoCA/HeatColor.cfm

## HeatColor.cfm
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>ColdFusion HeatColor UDF Demo</title>
<link rel="STYLESHEET" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.0/css/theme.blue.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.0/js/jquery.tablesorter.min.js"></script>
<script>
$(function(){
	$('#myTable').tablesorter();
});
</script>
<!--- 2024-09-24 ColdFusion HeatColor UDF Demo
GIST: https://gist.github.com/JamoCA/3220867aaa5e56917221c07d0dadfdd4
BLOG: https://dev.to/gamesover/heatcolor-udf-based-on-jquery-library-d5c
TWEET: https://x.com/gamesover/status/1839035629218443300
--->
</head>

<body>

	<h1>ColdFusion HeatColor UDF Demo</h1>

	<p>Inspired by the <a href="https://github.com/joshuanathanson/jquery-heatcolor">jQuery-heatcolor</a> library.</p>

	<cfscript>
	public string function heatColor(numeric num, numeric minVal=1, numeric maxVal=100, string colorStyle="greentored", numeric lightness=0, boolean reverseOrder=false) output=false hint="Generates heat colors based on min, max & current values" {
		local.x = 0;
		local.shft = 0;
		local.position = 0;
		if (arguments.reverseOrder){
			local.x = arguments.minVal;
			arguments.minVal = arguments.maxVal;
			arguments.maxVal = local.x;
		}
		arguments.lightness = (arguments.lightness gte 0 && arguments.lightness lt 1) ? arguments.lightness : 0;
		local.position = (arguments.num - arguments.minVal) / (arguments.maxVal - arguments.minVal);
		if (arguments.colorStyle eq 'roygbiv') {
			local.shft = 0.5*local.position + 1.7*(1-local.position);
		} else {
			local.shft = local.position + 0.2 + 5.5*(1-local.position);
		}
		local.x = local.shft + local.position * (2*pi());
		if (arguments.colorStyle neq 'roygbiv') local.x = local.x * -1;
		local.r = int((cos(local.x) + 1) * 128);
		local.r = ucase(formatbasen(int(local.r + arguments.lightness * (256 - local.r)),16));
		if (len(local.r) eq 1) local.r = "0" & local.r;
		local.g = int((cos(local.x+pi()/2) + 1) * 128);
		local.g = ucase(formatbasen(int(local.g + arguments.lightness * (256 - local.g)),16));
		if (len(local.g) eq 1) local.g = "0" & local.g;
		local.b = int((cos(local.x+pi()) + 1) * 128);
		local.b = ucase(formatbasen(int(local.b + arguments.lightness * (256 - local.b)),16));
		if (len(local.b) eq 1) local.b = "0" & local.b;
		return '##' & local.r & local.g & local.b;
	}

	// pre-configuration
	colorStyle = "greentored"; // Use "greentored" or "roygbiv"
	lightness = 0;
	reverseOrder = false;

	</cfscript>


	<table id="myTable" class="tablesorter-blue">
		<thead>
			<tr><th>Row</th><th>Count</th><th>Sum</th><th>Avg</th></tr>
		</thead>
		<tbody>
			<cfoutput>
				<cfloop from="1" to="15" index="thisRow">
					<cfset C = randrange(20,300)>
					<cfset S = randrange(200,3000)>
					<cfset A = numberformat((S/C)*100, "999.00")>
					<tr>
						<td>#ThisRow#</td>
						<td style="background-color:#heatColor(C, 20, 300, colorStyle, lightness, reverseOrder)#">#C#</td>
						<td style="background-color:#heatColor(S, 200, 3000, colorStyle, lightness, reverseOrder)#">#S#</td>
						<td style="background-color:#heatColor(A, 100, 15000, colorStyle, lightness, reverseOrder)#">#A#</td>
					</tr>
				</cfloop>
			</cfoutput>
		</tbody>
	</table>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en"><head>
	<meta charset="utf-8">
	<title>ColdFusion HeatColor UDF Demo</title>
	<link rel="STYLESHEET" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.0/css/theme.blue.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.0/js/jquery.tablesorter.min.js"></script>
	<script>
	$(function(){
	$('#myTable').tablesorter();
	});
	</script>
	<!--- 2024-09-24 ColdFusion HeatColor UDF Demo
	GIST: https://gist.github.com/JamoCA/3220867aaa5e56917221c07d0dadfdd4
	BLOG: https://dev.to/gamesover/heatcolor-udf-based-on-jquery-library-d5c
	TWEET: https://x.com/gamesover/status/1839035629218443300
	--->
	</head>

	<body>

	<h1>ColdFusion HeatColor UDF Demo</h1>

	<p>Inspired by the <a href="https://github.com/joshuanathanson/jquery-heatcolor">jQuery-heatcolor</a> library.</p>

	<cfscript>
	public string function heatColor(numeric num, numeric minVal=1, numeric maxVal=100, string colorStyle="greentored", numeric lightness=0, boolean reverseOrder=false) output=false hint="Generates heat colors based on min, max & current values" {
	local.x = 0;
	local.shft = 0;
	local.position = 0;
	if (arguments.reverseOrder){
	local.x = arguments.minVal;
	arguments.minVal = arguments.maxVal;
	arguments.maxVal = local.x;
	}
	arguments.lightness = (arguments.lightness gte 0 && arguments.lightness lt 1) ? arguments.lightness : 0;
	local.position = (arguments.num - arguments.minVal) / (arguments.maxVal - arguments.minVal);
	if (arguments.colorStyle eq 'roygbiv') {
	local.shft = 0.5local.position + 1.7(1-local.position);
	} else {
	local.shft = local.position + 0.2 + 5.5*(1-local.position);
	}
	local.x = local.shft + local.position * (2*pi());
	if (arguments.colorStyle neq 'roygbiv') local.x = local.x * -1;
	local.r = int((cos(local.x) + 1) * 128);
	local.r = ucase(formatbasen(int(local.r + arguments.lightness * (256 - local.r)),16));
	if (len(local.r) eq 1) local.r = "0" & local.r;
	local.g = int((cos(local.x+pi()/2) + 1) * 128);
	local.g = ucase(formatbasen(int(local.g + arguments.lightness * (256 - local.g)),16));
	if (len(local.g) eq 1) local.g = "0" & local.g;
	local.b = int((cos(local.x+pi()) + 1) * 128);
	local.b = ucase(formatbasen(int(local.b + arguments.lightness * (256 - local.b)),16));
	if (len(local.b) eq 1) local.b = "0" & local.b;
	return '##' & local.r & local.g & local.b;
	}

	// pre-configuration
	colorStyle = "greentored"; // Use "greentored" or "roygbiv"
	lightness = 0;
	reverseOrder = false;

	</cfscript>


	<table id="myTable" class="tablesorter-blue">
	<thead>
	<tr><th>Row</th><th>Count</th><th>Sum</th><th>Avg</th></tr>
	</thead>
	<tbody>
	<cfoutput>
	<cfloop from="1" to="15" index="thisRow">
	<cfset C = randrange(20,300)>
	<cfset S = randrange(200,3000)>
	<cfset A = numberformat((S/C)*100, "999.00")>
	<tr>
	<td>#ThisRow#</td>
	<td style="background-color:#heatColor(C, 20, 300, colorStyle, lightness, reverseOrder)#">#C#</td>
	<td style="background-color:#heatColor(S, 200, 3000, colorStyle, lightness, reverseOrder)#">#S#</td>
	<td style="background-color:#heatColor(A, 100, 15000, colorStyle, lightness, reverseOrder)#">#A#</td>
	</tr>
	</cfloop>
	</cfoutput>
	</tbody>
	</table>

	</body>
	</html>