ProgressBar

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