Best way to add a progress bar in List view

javier94

javier94

Member
I'm experimenting and i would like add an a progress bar that you can see in a list view as if i were like an element.. i have try to create a button.. to see what happend but the button element.. i can not see in the list view...

first.. which kind of element i have to use
second.. i have to use a plugin.. which one..
third.. i can associate the progress bar to a date element? would be possible??

in the template there is a class for a progress bar, but maybe i can not use.. i have not see add class in any element..

So which would be the best way to do that..

attached the list view.. i would like to do..
 
I think you can use a calc element.
Calculating a value depending on your date element (I don't know what you need) and then displaying the bar with something like

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

https://www.w3schools.com/bootstrap/bootstrap_progressbars.asp
 
hello,

yes the calculating for the progress will depend on a date element..

i have see the stacked progress bar .. in the url you write me.. i think would work..

and the calculation will be... if element date time = have "end" data 25/06/2018 ..

will be green till 6 days to the end date
change to orange during 5, 4, 3, days till the end of date
chante to red during day 2, 1, 0 till end of date

how can i add this details to the calculation ? any suggestion?

thanks

Javier
 
Something like this, which gets the days difference, calculates that as a percentage of 6, and sets a background classd ...

https://getbootstrap.com/docs/4.1/components/progress/#backgrounds

... according to the days.

Code: 
// get the date from the 'raw' placeholder
$myDate = '{yourtable___yourdateelement_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 = 'bg-success';
   }
   else if ($days <= 5 && $days >= 3) {
      $color = 'bg-warning';
   }
   else {
      $color = 'bg-danger';
   }
   // 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 . '%">
      <span class="sr-only">' . $value . '% Complete</span>
    </div>';  
}
// if it wasn't a date, return empty
return '';

-- hugh
 
the code that you gave to me .. is not working.. i can not see nothing .. i think is because the yootheme pro template is not bootstrap template or something happend..

i try to make some changes to obtain something..

you can see here ... https://iocleane-cp22.webjoomla.es/oldselectiumlab/index.php/ca/resultats

as you can see i can see the progress bar.. but something is missing...

as i told you previously.. in my template there are only three class

btn-danger is red
btn-primary is blue
btn-secondary is green

in the same progress bar.. 3 colors... 1.- Green 2.- orange (or blue) 3.- red as progress bar is based on date..

green color means --> from today till 6 days to the ended date
orange color means --> from 6 days to ended date till 2 days to ended date
red color means --> from 2 days till the end date

once date is ended. --> all the progress bar would be one color... red color..

for that I'm using a calc element from fabrik the following code...

$myDate = '{job_a_offer___fi_proces_raw}';
$today = strtotime('now');
$date1 = strtotime($myDate);
$diff=$today-$date1;
$days=floor($diff / (606024));
$percent=round((($days/6)*100),1);
$value = 100; //- $percent;
if ($days >= -2) {$color = 'btn-danger';}
else{$color = 'btn-primary';}
return '<div>

<progress class="btn-secondary" value="80" max="100"></progress></div>';

would you help me to finish please, i have some troubles with class


thanks in advance..

javier
 
return '<div>
<progress class="btn-secondary" value="80" max="100"></progress></div>';
Click to expand...
You are displaying a static progress bar (always blue and 80%, no "readable"=accessable text at all);

You must include colors and values dynamically as in the code @cheesegrits gave you.
return '<div class="progress">
<div class="progress-bar ' . $color . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%">
<span class="sr-only">' . $value . '% Complete</span>
</div>';
Click to expand...
 
ok.. i have change the code and start with the code cheesegrits gave me.

Now i have this..
----------------------------------------------------------------------------------------
// 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 = 'btn-secondary';
}
else if ($days <= 5 && $days >= 3) {
$color = 'btn-primary';
}
else {
$color = 'btn-danger';
}
// 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 . '%">
<span class="sr-only">' . $value . '% Complete</span>
</div>';
}
// if it wasn't a date, return empty
return '';
----------------------------------------------------------------------------
so i can not see nothing because my template from yootheme don´t use bootstrap so i have change colors for the colors i have..

i have change bg-success --> btn-secondary
i have change bg-warning--> btn-primary
i have change bg-danger --> btn-danger

changing colors.. i still can not see nothing..

Maybe i have to give a value .. but i can not see where..

in the $days = $diff-> days >=6 ? 6 : $diff->days; --> is the only line that the "6 ? 6" --> i think maybe is weir but i dont know much about..

so any suggestion??

thanks

Javier
 
There's no progress bar at all in your page source.
It seems
FabrikWorker::isDate($myDate) is false so it's returning '';
You may put something in there for testing e.g.
return 'no valid date: '. $myDate;

You can also include
var_dump($some-variable);
or install jDump extension and do
dump($some-variable,'some text');

for debugging.
 
lets try..

the progress bar should appear here
https://iocleane-cp22.webjoomla.es/oldselectiumlab/index.php/ca/resultats

last item "progreso proceso" is where should appear the progress bar...

following your instructions i have added the code you gave me... in the second return.. i'm not sure if is ok..

// 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 . '%">
<span class="sr-only">' . $value . '% Complete</span>
</div>';
}
// if it wasn't a date, return empty
return 'no valid date: '. $myDate; --> (here your suggestion..)


also i have instaled jdump extension component + plugin and activate plugin ... but when you say write --> dump($some-variable,'some text'); --> i dont know where to write this.. in the component i just see a pop up button i clicked there.. appears a new window but i can not write nothing..

I wait for your comments..

thanks!

Javier
 
i have put the missed (

all the 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 = 'btn-secondary';
}
else if ($days <= 5 && $days >= 3) {
$color = 'btn-primary';
}
else {
$color = 'btn-danger';
}
// 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 . '%">
<span class="sr-only">' . $value . '% Complete</span>
</div>';
}
// if it wasn't a date, return empty
return;

-----

if you check the progress bar..

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

something is doing.. you can see a 0% but progress bar didn´t appear .. we are close i think ...

if can help you. i don´t now the template class for progress bar is here

https://getuikit.com/docs/progress

yootheme use ulkit

thanks!
 
0% means: progress bar width =0, so you won't see anything.
Additionally there's no "btn-secondary" CSS defined in your template
Make sure you get some meaningfull values for testing.
 
in the style template --> i have found the attached image.. maybe can help.. to see the CSS styles

View attachment 17345
As you say the datas for testing are the table and the element.. and are coming from;


1.- and DB where the element is : job_a_offer
2.- and element complete name: job_a_offer___fi_proces ( now date is 30-08-2018) is not blanked as cheesegrits told to me)



i have change colors in the code.. but is not working.. so the code.. now 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 = 'Success';
}
else if ($days <= 5 && $days >= 3) {
$color = 'Warning';
}
else {
$color = 'Danger';
}
// 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 . '%">
<span class="sr-only">' . $value . '% Complete</span>
</div>';
}
// if it wasn't a date, return empty
return;

---------------
I'm not sure if is the way to do it...
 
If your template doesn't define classes like "Danger" (and as far as I see it doesn't) you won't get any background color.
("Danger" in your screenshot is only a text, same with "Secondary")

But as long as your value is 0 your won't see anything anyway.

The complete example is relying on bootstrap, I don't know how your ukit template is doing progress bar stuff. It seems it's working with JS so you can't just set CSS for styling.
You can try to set it directly:
...
$color ="green"; //or some #xyz
...

return '<div class="progress">
<div class="progress-bar ' . '" role="progressbar" aria-valuenow="' . $value . '" aria-valuemin="0" aria-valuemax="100" style="width:' . $value . '%; background:' . $color . '">
<span class="sr-only">' . $value . '% Complete</span>
</div>';
 
well, we have two troubles for the moment..

the 0% remains the same --> so i think the code is not working.. if till the end of data remains 1 month.. the 0% should be "x" but not cero i think.. so in the code should be a mistake
the color for the bar--> the ulkit css style is giving troubles --> I'm gonna check with yootheme support if the can help to us with this..

yootheme support answer me this..

https://www.yootheme.com/support/question/122211

after read the yootheme support question i have created the CSS style as can you see here in the attached imageView attachment 17348

So the color trouble should be resolved... but i can not see nothing.. i have try diferent things but i can not see nothing..

the code now remains like this.
---------------------------------------------------------
// 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'; (change to css style )
}
else if ($days <= 5 && $days >= 3) {
$color = 'orange'; (change to css style )
}
else {
$color = 'red'; (change to css style )
}
// 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;
---------------------------------------------------
maybe adding the css style we have to change something
 
Last edited:
The "get the %-value from date" code is working fine on my site (copy/paste of your code + replacing the date element placeholder).
Does
'{job_a_offer___fi_proces_raw}'
really contain the date you are expecting?

Debug with var_dump or dump.
 
attached the element image where the element used is.......
View attachment 17349
this is the element where take the date.. and if you see here...

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

in the Column "Fi process" have a date... 30/08 and 31/08 --> so element i'm sure is ok.. name is --> job_a_offer___fi_proces .. and cheesegrits told me add "_raw"

$myDate = '{job_a_offer___fi_proces_raw}'; --> this is code so i think is the same.. the trouble is not here...!
 
ok, digging into php dateDiff:

$diff->days is returning the absolute number of days (always positive)
$diff->invert is 1 if the diff is negative, 0 if it's positive

So you have to play with this to get your positive or negative days.

For just testing the progress bar stuff use dates like 15-07-2018 or 09-07-2018 (I don't know what you exectly want to see on which date difference).
 
ok.. i'll tell you the date difference... because i think cheesegrits make the code thinking about this...

we have a Final date progress --> the date element is the end date to finalice the process

so the idea is... that the progress bar show the following.

in green color ... from today .....till 6 days before the end date
in orange color.. from 5 days before the end date .. to 3 days till the end date
in red color ... from 3 days before end date.... till end date...

so the progress bar will show.. from today.. the progress till the end of date..

Following this .. if i try with a date older than today will not work the cheesegrits code

but i will change to the date you told me to check if something is happen.

https://iocleane-cp22.webjoomla.es/...leccio-ajuntament-ca/veure-documents-admin-ca

now is working something... as you can see..

but the trouble is... the progress bar is in one bar... 3 colors depending of today date till end date ...... green+orange+red

so.. if we are in 15/07 --> we want to see.. green.. orange.. and red.. because are 3 days till the end of date.. red color should appear.. 83% would be correct.. if we have 2 days till the end date...

so. if we are in 9/07--> i'm not sure why es orange.. because time is ended.. all the progress bar should show.. and the three colors in the progress bar.. and didn´t understand why is 33% maybe should negative because end date is older than today..

why the bar doesn´t show the 3 colors.. ??
 
All the code I've given you just creates a single color, I didn't realize you wanted different colors.

In Bootstrap, if you want multiple colors, you can build a "stacked" bar, see:

https://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=stacked-progress-bar
https://getbootstrap.com/docs/4.1/components/progress/

(Bootstrap v4 calls them "multiple")

... which involves calculating the percentage for each of the three sections.

I'm not very familiar with UIKit, but from the documentation I can find:

https://getuikit.com/v2/docs/progress.html

... it doesn't look like they support "stacked" progress bars like that.

Do you have any examples of a UIKit site which shows stacked progress bars?

-- hugh
 
You must log in or register to reply here.

Useful links

  • Create a Fabrik Account (Downloads)
  • Create a Forum Account
  • Fabrik Wiki
  • Fabrik 4 Changelog /Install /Upgrade
    • We are in need of some funding.
    More details.

    Thank you.

    Members online

    Total: 70 (members: 4, guests: 66)
    Back
    Top