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.
pull/579/head
Przemyslaw Klys 1 year ago
parent 955a390cd5
commit aa82831640
No known key found for this signature in database
GPG Key ID: B8EEAEC08238FF53

@ -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'; pShape = pShape || 'square';
cText = cText || '#000'; cText = cText || '#000';
cBorder = cBorder || '#BCBCBC'; cBorder = cBorder || '#BCBCBC';
@ -107,23 +107,7 @@ DataTable.render.percentBar = function (pShape, cText, cBorder, cBar, cBack, vRo
bType = bType || 'ridge'; bType = bType || 'ridge';
//Bar templates //Bar templates
var styleRule1 = 'max-width:100px;height:12px;margin:0 auto;'; 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) { return function (d, type, row) {
//Remove % if found in the value //Remove % if found in the value
//Round to the given parameter vRound //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') { if (typeof d !== 'number' && typeof d !== 'string') {
return d; 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 the code for the bar
return ('<div style="' + return ('<div style="' +
styleRule1 + styleRule1 +

Loading…
Cancel
Save