ProgressBar

Description

Goal

The ProgressBar macro generates a table showing a progress indicator.

Macro Synopsis

Usage:
  [[ ProgressBar ]]
  [[ ProgressBar (TABLEWIDTH TABLEFORMAT PROGRESS%) ]]
  [[ ProgressBar (TABLEWIDTH TABLEFORMAT CURRENT/STEPS) ]]
  [[ ProgressBar (TABLEWIDTH TABLEFORMAT STARTDATE,ENDDATE) ]]  

If no arguments are given, the usage is inserted in the HTML result.

Options:

  TABLEWIDTH (optional prefix)
    A wiki tablewidth attribute value between []'s
    Examples:
      [100%]
      [80px]

  TABLEFORMAT (optional prefix)
    A pair of wiki table attribute, to format the inactive and active cells.
    Examples:
      <bgcolor="black"><bgcolor="white">                   # black on white bar
      <tablewidth="90%" bgcolor="black"><bgcolor="white">  # same, 90% table

    A third format may be given for STARTDATE,ENDDATE usage

    By default: <tablewidth="100px"#808080><><#8080ff>

  PROGRESS
    Will display a table with two cells:
    - left: completion, taking PROGRESS % of the table width
    - right: remaining

  CURRENT/STEPS
    Will display a table with STEPS cells, CURRENT of which are active.

  STARTDATE,ENDDATE
    Will display a table with the number of days, with the cell
    representing today in active format and background in inactive format.

    If today is before STARTDATE, the left-most cell will be in the
    3rd format. If today is after ENDDATE the rightmost cell will be
    in the 3rd format.

    Dates are in this format: YYYY-MM-DD

Debugging
  Please prepend a '?' to the arguments.

Author

PascalBauermeister - <pascal DOT bauermeister AT gmail DOT com>

Download & Release Notes

Known bugs

• None as of 2006-11-22

Feature requests

• Calling the macro with only formatting prefix (but no value) will set that formatting as default for all the subsequent calls in the page.

Change Log

• [v0.1.2] Tue Nov 21 20:54:59 CET 2006
  • Fixed the bar length errors (was a cell padding issue), works also with IE. Thanks go to Thilo Pfennig for reporting the problem and testing the fix.
• [v0.1.1] Sun Dec 18 21:31:17 CET 2005
  • Changed table cell percentage markup.
• [v0.1.0] Fri Dec 16 22:30:10 CET 2005
  • Original version

Examples

Default colors and size

[[ProgressBar(80%)]]

Change progress bar color (using #)

[[ProgressBar(<#8080ff> 30%)]]

Change progress bar color and background (using color names)

[[ProgressBar(<bgcolor="orange"><bgcolor="lightgrey"> 60%)]]

Remaining instead of done

[[ProgressBar(<><#ff0000>80%)]]

x of N

[[ProgressBar(0/10)]]

[[ProgressBar(6/10)]]

[[ProgressBar(10/10)]]

[[ProgressBar(20/10)]]

[[ProgressBar(15/20)]]

Dates

[[ProgressBar(2006-11-01,2007-01-06)]]

[[ProgressBar(2005-11-01,2005-11-30)]]

[[ProgressBar(2026-11-01,2026-11-30)]]

Changing table width

[[ProgressBar([50%] 60%)]]

[[ProgressBar([50px] 60%)]]

[[ProgressBar([150px]<#8080ff><#808080> 9/12)]]

[[ProgressBar([50px] 6/10)]]

[[ProgressBar([250px] 2005-11-01,2006-01-06)]]

Bar length error

the old "funny effects" is gone in my installation. The bars (that should also should have the same length with background white) did have different lengths.I do not know why it is gone. I do not have a new browser. It also seems to be displayed differently in different browsers

I just wanted to test straight in 10 % steps what it will look like. Let's inlcude some /BarLengthSnapshots.

• Revision 0.1.2 fixes all the width and height issues -- PascalBauermeister 2006-11-22 08:38:57

Ideas

• sorting of progress statuses?. Would be nice if somehow in a list the item with the most progress would be on top.

• progress by color? One could eventually use color values as an alternative. So red would mean something like 0% and green something like 100%. One would have to make good choices for the colors in between, so they do not look ugly. I will eventually look into this alternative. -- ThiloPfennig 2005-12-19 16:28:16

• I have seen another implementation of this at https://ssl.bulix.org/projects/demo/roadmap. they just use a " width: xx% on a normal <A> tag as a style and it looks Ok. Stylesheet is under http://ssl.bulix.org/projects/demo/chrome/common/css/roadmap.css -- ThiloPfennig 2005-12-20 15:28:20

Discussion

Is it right to use tables? I think yes (from the logical markup perspective). I would like to also have the percentage number optional in the field (fitting the colors), because it gives additional information that I do not have to present outside this table. I don#t quite understand how layout is going: What I've see so far is in Moin 1.5beta6

[[ProgressBar(80%)]] 

<div>
<table>
<tr>
<td style="background-color: #808080;">
<p> </p>
</td>

<td>
<p> </p>
</td>
</tr>
</table>
</div>

Where does the Progressbar gets its information about percentage? Is this filtered out in 1.5beta6 or did I just not find it? -- ThiloPfennig 2005-12-18 11:08:07

• The above macro call internally generates the following wiki string:

  ||<tablewidth="100px" #808080 width="80%"> || ||  which is converted to HTML.

  • I did so, because this would allow to specify extra/replacement formatting using MoinMoin table markup

    • pro: standard MoinMoin-generated tables

    • con: sensitive to MoinMoin table markup changes (which is obviously an issue)

  • It uses old style (see HelpOnTables)

  • <width="80%"> no longer works in 1.5.x, <80%> does. Corrected.

  • Tablewidth seems not to work correctly (also in new markup style) in Moin 1.5.x
    • is it a 1.5.x bug ?
    • As long as this issue remains specifying percentage will not give nice results. Use e.g. 8/10 instead of 80%

  • -- PascalBauermeister 2005-12-18 21:20:05

What about including this extention to the core? I think it could be core because it is of general use for many users. Like MonthCalendar. Is this extention mature enough?