Description#

The ProgressBarPlugin creates a graphical representation of a percentage number. Setting the percentage to "X" will create a bar with the left X% of its width draw in green and the remaining (1 - X)% in red. The bar is implemented as two "img" entries aligned inside a table cell, with the same height, and with the width calculated based on the "width" and "percentage" parameters.

The typical usage is to indicate how close to completion a given task is in a project management situation; other uses include representing the number of testcases succesfully executed, the percentage of code covered by unit tests, and so on.

This plugin is a very simple extension of the Image plugin created by JanneJalkanen. Most of the parameters are the same.

Parameters#

percentage = 'Percentage'

The percentage number that the bar should reflect[1].

src_left = 'Image source(left)'

This can either be a full URL (http://...) or a WikiAttachment name. If not provided, "images/green.png" will be used. Copy the attached file to the "images" directory under you wiki installation.

src_right = 'Image source(right)'

This can either be a full URL (http://...) or a WikiAttachment name. If not provided, "images/red.png" will be used. See above.

align = 'left|right|center'

The image alignment.

height = 'integer'

The height of the image. If not provided a default value will be used.

width = 'integer'

The combined width of the bar. If not provided a default value will be used[1].

caption = 'caption text'

The text that should be shown as a caption under the image.

link = 'hyperlink'

A hyperlink (http://...).

border = 'integer'

Size of the image border.

style = 'style info'

Any style markup you would like to apply to the table surrounding the image.

class = 'class name'

Redefine the default class for this image, which is "imageplugin".

The alt text of the image is always set to reflect the percentage number.

Examples#

[{ProgressBar percentage=30 }]

Shows a progress bar reflecting a 30% completion rate.

Installation#

Place all the images inside the "\WebContent\images" folder.
Place the ProgresBar.java file inside your source directory and update the sourcePath inside "jspwiki.properties" to pick it up.

CSS#

.imageplugin

The table that encompasses the image. It consists of two subcategories:

img = IMG tag that gets embedded.

caption = caption that is embedded.

[#1] Use only an integer number; in particular, do not attach a '%' character.

---

This plugin was based off the old Wiki, but I updated the imports and tested the plugin on the newest Wiki and it worked fine.
The original plugin can be found here.

--rveach, 02-Feb-2014 23:10

---

Category.Plugins