Template:Composition bar/doc

This template displays the numeric composition of a thing in terms of its sub-units. For example, it is frequently used as part of Infobox political party to show the number of seats a given political party holds in a legislature.

Usage

 * amount
 * is the number of sub-units


 * total
 * is the total number of sub-units possible

In the case of political parties, most will have their logo color available in templates.
 * bar-color
 * (default is light grey) is the background color of the left part of the bar - a valid web color, which can be specified by name, as a hex triplet (#rrbbgg), or rgb triplet (rgb(0–255,0–255,0–255)).


 * background-color
 * (default is very light grey) is the background color of the right part of the bar - a valid web color.


 * width
 * is the width of the bar in px.


 * per
 * (default is false), when set to 1 (true), adds a percentage to the bar as well.

The background colour for the right part of the bar may then be too light to give sufficient contrast, in which case the background-color parameter may be used to provide a dark background for that part of the bar. See the first three examples below. Snook's Colour Contrast Check may be used to check compliance with WCAG guidelines for contrast.

TemplateData
{   "description": "A composition bar.", "params": { "1": {           "label": "1", "description": "The number of sub-units.", "type": "string/line", "required": true },       "2": {            "label": "2", "description": "The total number of sub-units possible.", "type": "string/line", "required": true },       "3": {            "label": "3", "description": "The background color of the left part of the bar - a valid web color, which can be specified by name, as a hex triplet (#rrbbgg), or rgb triplet (rgb(0–255,0–255,0–255)). In the case of political parties, most will have their logo color available in  templates.", "default": "#CCC", "type": "string/line", "required": false, "aliases": ["hex"], },       "Background color": { "label": "background-color", "description": "The background color of the right part of the bar - a valid web color.", "default": "#F0F0F0", "type": "string/line", "required": false },       "Width": { "label": "width", "description": "The width of the bar in px.", "default": "100px", "type": "string/line", "required": false },       "Show Percent": { "label": "per", "description": "When set to 1 (true), adds a percentage to the bar as well.", "default": "0", "type": "string/line", "required": false }   } }