1. NOTICE: If you are using Fabrik and update to Joomla 3.10, you will need to update to Fabrik 3.10. And, if you are using Fabrik, do not upgrade to Joomla 4, we do not have a supported version ready for release. More information on a release date coming soon. Also, please note that Fabrik 3.10 will not install on any Joomla sites less than 3.8.
    Dismiss Notice

Best way to add a progress bar in List view

Discussion in 'Professional Support' started by javier94, Jun 7, 2018.

  1. javier94

    javier94 Member

    Level: Community
    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!!
     
  2. cheesegrits

    cheesegrits Support Gopher Staff Member

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

    Code (Text):

    <?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 ...

    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
     
  3. cheesegrits

    cheesegrits Support Gopher Staff Member

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

    Code (Text):

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

    Code (Text):

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

    -- hugh
     
  4. javier94

    javier94 Member

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

    thanks!
     
  5. javier94

    javier94 Member

    Level: Community
    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;
    -----------------------
     
  6. cheesegrits

    cheesegrits Support Gopher Staff Member

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

    Not sure what you mean?

    -- hugh
     
  7. javier94

    javier94 Member

    Level: Community
    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!
     
  8. troester

    troester Well-Known Member Staff Member

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

    javier94 Member

    Level: Community
    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;
    -------------------------------
     
  10. troester

    troester Well-Known Member Staff Member

    Level: Community
    You can close a thread by unchecking "open" in Thread Tools.
    Yup, if you don't want any text add a nonbreaking space
    &nbsp;
     
  11. javier94

    javier94 Member

    Level: Community
    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!
     
  12. cheesegrits

    cheesegrits Support Gopher Staff Member

    Level: Community
    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
     
  13. javier94

    javier94 Member

    Level: Community
    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!!
     

Share This Page