Adds support for conditional colors to the percentageBars rendering function

[PrzemyslawKlys]

This PR 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.

Are you happy for it to be included and distributed under the MIT license? ✔️

Here's the output after the change:

"columnDefs": [{
    "targets": 4,
    "render": $.fn.dataTable.render.percentBar('', '', '', '', '', 0, '')
}, {
    "targets": 3,
    "render": $.fn.dataTable.render.percentBar('round', '#ffffff', '#808080', '#ffd700', '#0000ff', 0, 'ridge', [
        { "min": 0, "max": 10, "backgroundColor": "#0000ff", "textColor": "#ffffff", "barColor": "#ff0000" },
        { "min": 11, "max": 20, "backgroundColor": "#0000ff", "textColor": "#ffffff", "barColor": "#008000" },
        { "min": 21, "max": 25, "backgroundColor": "#0000ff", "textColor": "#ffffff", "barColor": "#b05c52" },
        { "min": 26, "max": 85, "backgroundColor": "#808080", "textColor": "#000000", "barColor": "#00ffff" },
        { "min": 86, "max": 100, "backgroundColor": "#0000ff", "textColor": "#ffffff", "barColor": "#ffff00" }
    ])
}]

This change was requested in:

• New-TablePercentageBar - Conditional BarColor? EvotecIT/PSWriteHTML#408

I thought this is a cool idea and seemed pretty easy (for a noob like me). It takes array of hashes and depending on settings can overwrite color based on condition. It's conditioned for backgroundColor, textColor and barColor. If any of them are not provided it takes the default one, so users can provide min,max, barColor if that's what they want to play with as well.

I didn't "format" the file even tho the spacing is a mess (tabs in the begining, spaces in the end). I can fix that if required as well?

Here's live example, with code inline:

• https://live.datatables.net/voyuhoma/1/edit

[AllanJard]

That's a nice idea - I like it. Thanks for sending this over.

[AllanJard]

Just as I was pressing the merge button I realised that this change had been made to the distribution umd file rather than the source Typescript file. I've committed the change and rebuilt the dist files now, so that the change doesn't get lost. In future, the src directory contains the files that need to be updated for this repo. Its a little weird I know, but it was so I could use a single source file and then wrap it into UMD or ESM without breaking the backwards compatibility for the original UMD only file paths.

[PrzemyslawKlys]

Sorry. I wasn't sure about the .ts, and it was showing me 'errors' in vscode, so it is what it is ;) I'll make sure for future to not make this mistake

[AllanJard]

There should only be one error - on the line DataTable.render.percentBar about precentBar not existing. I need to look into that - the quick fix is to change DataTablesStaticRender to ApiStaticRender, but I think that naming is inconsistent with the other names in the DataTables type defs.

The TS file is formatted with PrettierX to make things a bit more consistent as well :)

[PrzemyslawKlys]

That's the error I have:

I didn't want to investigate. Probably something on my end. It's all good

[AllanJard]

Probably needs an npm install in the repo dir.

[PrzemyslawKlys]

You were correct npm install datatables.net fixed this issue. Copilot for the rescue: