From aa8283164081fbc8572fe9721c74fcf9e901c15f Mon Sep 17 00:00:00 2001 From: Przemyslaw Klys Date: Mon, 11 Sep 2023 21:11:58 +0200 Subject: [PATCH] Adds support for conditional colors to the percentageBars rendering function This commit modifies the `DataTable.render.percentBar` function by adding the `conditionalColors` parameter to support conditional coloring of the percentage bars. If the `conditionalColors` parameter is provided, the function will iterate through the conditional colors array and apply the appropriate color based on the range specified. If `conditionalColors` is not provided, the function will default to the original color settings. These changes enable more customization of the appearance of the percentage bars. --- dataRender/percentageBars.js | 68 ++++++++++++++++++++++++++---------- 1 file changed, 50 insertions(+), 18 deletions(-) diff --git a/dataRender/percentageBars.js b/dataRender/percentageBars.js index ce44338..81b592a 100644 --- a/dataRender/percentageBars.js +++ b/dataRender/percentageBars.js @@ -97,7 +97,7 @@ var DataTable = $.fn.dataTable; * } ] * } ); */ -DataTable.render.percentBar = function (pShape, cText, cBorder, cBar, cBack, vRound, bType) { +DataTable.render.percentBar = function (pShape, cText, cBorder, cBar, cBack, vRound, bType, conditionalColors) { pShape = pShape || 'square'; cText = cText || '#000'; cBorder = cBorder || '#BCBCBC'; @@ -107,23 +107,7 @@ DataTable.render.percentBar = function (pShape, cText, cBorder, cBar, cBack, vRo bType = bType || 'ridge'; //Bar templates var styleRule1 = 'max-width:100px;height:12px;margin:0 auto;'; - var styleRule2 = 'border:2px ' + - bType + - ' ' + - cBorder + - ';line-height:12px;font-size:14px;color:' + - cText + - ';background:' + - cBack + - ';position:relative;'; - var styleRule3 = 'height:12px;line-height:12px;text-align:center;background-color:' + - cBar + - ';padding:auto 6px;'; - //Square is default, make template round if pShape == round - if (pShape == 'round') { - styleRule2 += 'border-radius:5px;'; - styleRule3 += 'border-top-left-radius:4px;border-bottom-left-radius:4px;'; - } + return function (d, type, row) { //Remove % if found in the value //Round to the given parameter vRound @@ -139,6 +123,54 @@ DataTable.render.percentBar = function (pShape, cText, cBorder, cBar, cBack, vRo if (typeof d !== 'number' && typeof d !== 'string') { return d; } + + var cBackConditional; + var cBarConditional; + var cTextConditional; + // do conditional colors based on user input + if (conditionalColors) { + for (var i = 0; i < conditionalColors.length; i++) { + if (s >= conditionalColors[i].min && s <= conditionalColors[i].max) { + if (conditionalColors[i].barColor) { + cBarConditional = conditionalColors[i].barColor; + } else { + cBarConditional = cBar; + } + if (conditionalColors[i].backgroundColor) { + cBackConditional = conditionalColors[i].backgroundColor; + } else { + cBackConditional = cBack; + } + if (conditionalColors[i].textColor) { + cTextConditional = conditionalColors[i].textColor; + } else { + cTextConditional = cText; + } + break; + } + } + } else { + cBackConditional = cBack; + cBarConditional = cBar; + cTextConditional = cText; + } + var styleRule2 = 'border:2px ' + + bType + + ' ' + + cBorder + + ';line-height:12px;font-size:14px;color:' + + cText + + ';background:' + + cBackConditional + + ';position:relative;'; + //Bar template + var styleRule3 = 'height:12px;line-height:12px;text-align:center;background-color:' + + cBarConditional + ';padding:auto 6px;'; + //Square is default, make template round if pShape == round + if (pShape == 'round') { + styleRule2 += 'border-radius:5px;'; + styleRule3 += 'border-top-left-radius:4px;border-bottom-left-radius:4px;'; + } //Return the code for the bar return ('