Best way to add a progress bar in List view

javier94 · Jul 14, 2018

I have asked to the yootheme support if the stacked bar is supported... if we can not find.. i can make the presentation with this one color bar... maybe would be ok

i have been testing the bar.. but something is weird.. as you can see here.. i added other process to have 3 progress bar and test the colors..

https://iocleane-cp22.webjoomla.es/oldselectiumlab/index.php/ca/resultats

15/07 --> we are today at 14/07 --> should be red color.. color is ok ... is less than 1 day --> but till tomorrow will not be 100%.. should almost 100 but not 100
09/07 --> when data is end --> color should be red color.. because date of element is older than today --> and % should be 100% --> appears orange color and percentatge 16,7%
22/07 --> i create this data to see --> when is more than 6 days... so color should be green.. and percentaje i dont know.. but not 0% ( or maybe tomorrow percentatge grow)

there is something is not calculating perfect --> IF we can Solving these small mistakes would be fine and the bar would be ok...

last code is:
----------------------------
// get the date from the 'raw' placeholder
$myDate = '{job_a_offer___fi_proces_raw}';
// make sure it's a date and (for example) not blank (if we don't do this, DateTime will error out)
if (FabrikWorker::isDate($myDate)) {
// use DateTime to get the days diff
$myDate = new DateTime($myDate);
$today = new DateTime();
$diff = $myDate->diff($today);
// if days is >6, just set it to 6
$days = $diff->days >= 6 ? 6 : $diff->days;
// get the percentage
$percent = round((($days / 6) * 100), 1);
// flip the percentage into the value we show
$value = 100 - $percent;
// set the bg class
if ($days >= 6) {
$color = 'green';
}
else if ($days <= 5 && $days >= 3) {
$color = 'orange';
}
else {
$color = 'red';
}
// render it
return '<div class="progress">
<div class="progress-bar ' . $color . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%; background:' .$color . '">
<span class="sr-only">' . $value . '% Complete</span>
</div>';
}
// if it wasn't a date, return empty
return;
--------------------------

Many thanks!!

cheesegrits · Jul 14, 2018

Try this, and make sure it now correctly handles end dates in the past.

Code:

<?php
// get the date from the 'raw' placeholder
$myDate = '{job_a_offer___fi_proces_raw}';
// make sure it's a date and (for example) not blank (if we don't do this, DateTime will error out)
if (FabrikWorker::isDate($myDate))
{
    // use DateTime to get the days diff
    $myDate = new DateTime($myDate);
    $today  = new DateTime();
    $diff   = $today->diff($myDate);

    // if invert is set, myDate is in the past
    if ($diff->invert === 1)
    {
        $days = 0 - $diff->days;
    }
    // else if days is >6, just set it to 6
    else if ($diff->days >= 6)
    {
        $days = 6;
    }
    else {
        $days = $diff->days;
    }

    // get the percentage
    $percent = round((($days / 6) * 100), 1);
    // flip the percentage into the value we show
    $value = 100 - $percent;

    // set the bg class
    if ($days >= 6) {
        $color = 'green';
    }
    else if ($days <= 5 && $days >= 3) {
        $color = 'orange';
    }
    else {
        $color = 'red';
    }

    // render it
    return '<div class="progress">
   <div class="progress-bar ' . $color . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%; background:' .$color . '">
   <span class="sr-only">' . $value . '% Complete</span>
</div>';
}

// if it wasn't a date, return empty
return;

For the case where the date is more then 6 days in the future ...

22/07 --> i create this data to see --> when is more than 6 days... so color should be green.. and percentaje i dont know.. but not 0% ( or maybe tomorrow percentatge grow)

That's tricky to know what to show. You are trying to show a progress bar which shows completion relative to a 6 day time frame. In order to show a completion percentage, you need a defined range for the bar, in this case 6 days. If the bar is showing a percentage between 'today' and 'end' then each bar will have a different scale, and can't be compared against each other ... you might have two bars, for two dates which are 7 and 365 days in the future ... so 1% on one bar is a totally different number of days to 1% on the other bar.

IMHO, an empty progress bar for dates >6 days in the future is the only sensible way to do it. The progress bar is basically showing the last 6 days of the range. If the bar is empty, then 'today' hasn't yet entered that frame.

You could tweak it so if the date is >6 days, you always show (say) 10% complete, but that's visually misleading.

Or you could simply color the whole thing some neutral color (like grey) if it's >6 days.

-- hugh

cheesegrits · Jul 14, 2018

If you want to show a fixed minimum percentage, change ...

Code:

    // flip the percentage into the value we show
    $value = 100 - $percent;

... to ...

Code:

    // flip the percentage into the value we show, with a minimum of 10
    $value = max(100 - $percent, 10);

... replace 10 with your minimum.

-- hugh

javier94 · Jul 14, 2018

Ok.. i'm gonna test your specifications and see whats happend..

thanks!

javier94 · Jul 17, 2018

i have follow your instructions.. and i think is working.. i would like to improve 2 things if is possible..

1.- i would like when the data end is passed.. for example .. end data was yesterday .. can we change color to " violet" for example..

if I add this condition would be ok??

}
else if ($days <0 ) {
$color = 'violet';
}

2.- once data is ended can we hide the text per percentage???

i don´t know how to do or if is possible....

Can you tell me how to do.... final code running is this... ( i change from 6 days to 15 days)

// get the date from the 'raw' placeholder
$myDate = '{job_a_offer___fi_proces_raw}';
// make sure it's a date and (for example) not blank (if we don't do this, DateTime will error out)
if (FabrikWorker::isDate($myDate))
{
// use DateTime to get the days diff
$myDate = new DateTime($myDate);
$today = new DateTime();
$diff = $today->diff($myDate);

// if invert is set, myDate is in the past
if ($diff->invert === 1)
{
$days = 0 - $diff->days;
}
// else if days is >6, just set it to 6
else if ($diff->days >= 15)
{
$days = 15;
}
else {
$days = $diff->days;
}

// get the percentage
$percent = round((($days / 15) * 100), 1);
// flip the percentage into the value we show
$value = 100 - $percent;

// set the bg class
if ($days >= 6) {
$color = 'green';
}
else if ($days <= 5 && $days >= 3) {
$color = 'orange';
}
else {
$color = 'red';
}

// render it
return '<div class="progress">
<div class="progress-bar ' . $color . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%; background:' .$color . '">
<span class="sr-only">' . $value . '% Complete</span>
</div>';
}

// if it wasn't a date, return empty
return;
-----------------------

cheesegrits · Jul 17, 2018

javier94 said:
i have follow your instructions.. and i think is working.. i would like to improve 2 things if is possible..

1.- i would like when the data end is passed.. for example .. end data was yesterday .. can we change color to " violet" for example..

if I add this condition would be ok??

}
else if ($days <0 ) {
$color = 'violet';
}

Should work, did you try it and see? Add it before the final 'else' when the colors get set.

2.- once data is ended can we hide the text per percentage???

Not sure what you mean?

-- hugh

javier94 · Jul 18, 2018

seems is working..

2.- my question is.. seeing the bars..

https://iocleane-cp22.webjoomla.es/oldselectiumlab/index.php/ca/resultats

if you see the violet progress bar... percentatge continue growing.. percentatge is 120%.. but the end date is 15/07/2018.. so "date is ended"

would be possible... hide the percentatge text in the bar.. once the date is ended? but only in this case??

thanks!

troester · Jul 18, 2018

Do something like
...
$value = 100 - $percent;
$valuetext = $value . '% Complete';
...
//where you are setting violet
$valuetext = '  ';
...
<span class="sr-only">' . $valuetext . '</span>

javier94 · Jul 18, 2018

Many thanks !!! .. is perfect now.. !!!

we can close thread!! i leave a resume for other people if they need..

i add "finished" to the valuetext.. if you don´t add nothing, you can not see the progress bar..

//where you are setting violett
$valuetext = ' finished';

Resume of all..

progress bar calculating time.. from today till a end date ( based in a date element)
the progress bar is based on 15 days.. and depending of days remaining will change color.
----------------------------------------------
Final code.:

// get the date from the 'raw' placeholder
$myDate = '{job_a_offer___fi_proces_raw}';
// make sure it's a date and (for example) not blank (if we don't do this, DateTime will error out)
if (FabrikWorker::isDate($myDate))
{
// use DateTime to get the days diff
$myDate = new DateTime($myDate);
$today = new DateTime();
$diff = $today->diff($myDate);

// if invert is set, myDate is in the past
if ($diff->invert === 1)
{
$days = 0 - $diff->days;
}
// else if days is >6, just set it to 6
else if ($diff->days >= 15)
{
$days = 15;
}
else {
$days = $diff->days;
}

// get the percentage
$percent = round((($days / 15) * 100), 1);
// flip the percentage into the value we show
$value = 100 - $percent;
$valuetext = $value.'% Complete';
// set the bg class
if ($days >= 6) {
$color = 'green';
}
else if ($days <= 5 && $days >= 3) {
$color = 'orange';
}
else if ($days < 0 ) {
$color = 'violet';
$valuetext = ' Finished';
}
else {
$color = 'red';
}

// render it
return '<div class="progress">
<div class="progress-bar ' . $color . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%; background:' .$color . '">
<span class="sr-only">'.$valuetext.'</span>
</div>';
}

// if it wasn't a date, return empty
return;
-------------------------------

troester · Jul 18, 2018

You can close a thread by unchecking "open" in Thread Tools.

if you don´t add nothing, you can not see the progress bar..

Yup, if you don't want any text add a nonbreaking space
 

javier94 · Jul 18, 2018

with ' finished' is perfect.. many thanks. cheesegrits, and troester!

in other way.. troester .. would you contact me through ... javier@ahora94.com.. i have a question but is not from support.. Thanks!

cheesegrits · Jul 18, 2018

Yay!

Btw, did you ever get a response about stacked progress bars?

Although I don't think there's anything the template authors can do, I think UIKit just doesn't implement it.

-- hugh

javier94 · Jul 18, 2018

yes.. they answer me today.. here you are the answer...

----------

As far as I can see the "stacked" progress bar you quoted is part of Bootstrap version 3 and 4.x.

But Joomla 3.x (including the current 3.8.10) natively comes with a modified version of Bootstrap 2.3.2 which (to my knowledge) does also not include the stacked progress bar.

Unfortunately the "stacked" progress bar is not supported by UIkit 3. The UIkit "Progress" component does not offer the differently coloured sub-sections in the bar.

Thank you

-------------

Many thanks!!

Best way to add a progress bar in List view

javier94

Member

cheesegrits

Support Gopher

cheesegrits

Support Gopher

javier94

Member

javier94

Member

cheesegrits

Support Gopher

javier94

Member

troester

Administrator

javier94

Member

troester

Administrator

javier94

Member

cheesegrits

Support Gopher

javier94

Member

Useful links

Members online