Progress bar with conditionnal color

[apprentiLAB-Suzanne]

Hi !

First of all thanks for this amazing plugin, I'm using it a lot on my fablab's wiki -> wiki.apprentilab.cnam.fr

I am looking for advice on how to implement something. I am not a developer, I know a bit about PHP/JS/CSS, same for dokuwiki, but not so much about Bootstrap.

I'd like to make a bar (already implemented in issue #8) which color depends on its value (for example, values 0-24 : red - 25-49 : orange, 50-74 : yellow, 75-100 : green). This could be a new "dynamic" type.

Any idea how to do this ?

Do you think this could interest other people, and be a feature request ?

Thanks 🙂

[apprentiLAB-Suzanne]

Hi !
I managed to do what I was looking for, by tweaking the php syntax file (syntax/progressbar.php) so that the progress bar value sets the background-color hue using hsl function (which is convenient since it goes from red to green with values 0-100).
I did it only for the warning type bar, maybe this could be a nice new fifth type for this element ?
I am not sure I should do a PR, but if anyone is interested, you can see it in action there -> https://wiki.apprentilab.cnam.fr/fab:machines:accueil, and here is the code (l 83) :

if($type=='warning') {
  $markup = '<div class="bs-wrap bs-wrap-progress-bar progress-bar progress-bar-' . $type . ' ' . $classes . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%;' . ($showvalue ? 'min-width: 2em; background-color: hsl('.$value.', 100%, 40%);' : '') . '">';
} else {
  $markup = '<div class="bs-wrap bs-wrap-progress-bar progress-bar progress-bar-' . $type . ' ' . $classes . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%;' . ($showvalue ? 'min-width: 2em;' : '') . '">';
}