Adds support for conditional colors to the percentageBars rendering f…

…unction 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.
DataTables · Sep 11, 2023 · aa82831 · aa82831
1 parent 955a390
commit aa82831
Showing 1 changed file with 50 additions and 18 deletions.
diff --git 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 ('<div style="' +
             styleRule1 +