Template:Composition bar compact

Template documentation

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

Full numeric information is show within the box, as a top layer over the bar.

It includes functions from clàssic en:template:composition bar compact + en:template:composition bar textless and includes numeric formatting in function of lang we're using (as a parameter or from preferences), and some others features. The parameter names are compatibles with en:template:composition bar compact, in order to make easier a further migration.

Usage

Basic version

{{Composition bar compact|1|2|3}}

Description

These are positionals and mandatory parameters

The first parameter is the number of sub-units.

The second parameter is the total number of sub-units possible.

(default is medium-light grey) The third parameter is the background color for 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 representative color available in sRGB color hex triplet (P465).

---

Full version

{{Composition bar compact|1|2|3|width= |background-color= |border-color= |border-width= |color= |valuestyle= |per= |perstyle= |void= |parenthesis= |round= |nodivisor= }}

Optional & extra parameters

background-color=...

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

color=...

(default is inherit) is the color of the text

valuestyle

change any value for the text; size, shadow, etc. For shadow, text-shadow:0.1em 0.1em 0.2em #FFFFFF; is recommended

border=...

(default is medium grey) is the color of a border around the bar, or "none" for no border

border-width

(default is 1px) is the size of the border

width=...

(default is 100px) is the width of the bar, set to "auto" for inline use, "100%" for most table uses (unitless numbers are interpreted as px)

per=...

(default is "no show percent), 1 = rate is the result of "parameter 1 / parameter 2". 2 = rate is the complement "100 - rate".

perstyle=...

(default is none), additional style declarations for the percentage text

round

indicate the number of decimals to round the rate

parenthesis

(default is "embrace rate between ( )". Any value (no, for instance) avoid use ( ).

void

any value avoid to show text "param 1 / param 2" inside the bar. The effect is similar to "composition bar textless".

nodivisor

any value avoid to show parameter 2 in the result. It's useful when different bars are together showing results that share same divisor. For instance, results of differents parties in an specific election.

Examples

Markup	Renders as
Color barra en model de color RGB {{Composition bar compact|150|630|rgb(152,267,152)}}	150 / 630
Color barra en colors HTML {{Composition bar compact|150|630|#98FB98|height=1.1em}}	150 / 630
Mostrar % dins caixa (paràmetre ''per'') {{Composition bar compact|150|630|#98FB98|per=1|perstyle=font-size:85%;color:red;|round=2}}	150 / 630   (23.81٪)
Mostrar % complementari (paràmetre ''per'') {{Composition bar compact|150|630|#98FB98|per=2|perstyle=font-size:85%;color:blue;}}	150 / 630   (76.2٪)
Ample barra a elecció (paràmetre ''width'') {{Composition bar compact|150|630|#98FB98|width=200}}	150 / 630
Color lletra a elecció (paràmetre ''color''. Sense xifres a l'interior) {{Composition bar compact|150|630|#98FB98|width=200|void=y}}
Color lletra a elecció (paràmetre ''color'') {{Composition bar compact|150|630|#98FB98|width=200 |color=purple}}	150 / 630
Color fons caixa a elecció (paràmetre ''background-color'') {{Composition bar compact|150|630|#98FB98|width=200 |color=purple|background-color=yellow|nodivisor=y}}	150   (23.8٪)
Color marc caixa elecció (paràmetre ''border-color'') {{Composition bar compact|150|630|#98FB98|width=200 |color=purple|background-color=yellow|border-color=red}}	150 / 630
Gruix marc caixa elecció (paràmetre ''border-width'') {{Composition bar compact|150|630|#98FB98|width=200 |color=purple|background-color=yellow|border-color=red|border-width=3px}}	150 / 630
Text amb shadow {{Composition bar compact|260|630|blue|valuestyle=text-shadow:0.1em 0.1em 0.2em #FFFFFF;}}	260 / 630

See also