Template:VersusBar: Difference between revisions

Latest revision as of 00:09, 12 December 2024

46 (23%)

154 (77%)

Compares two values. The percentages are of the total.

Template parameters
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
1st value	`1`	The first value.	Number	required
2nd value	`2`	The second value.	Number	required
Height	`height`	Customise the height of the bar. Default 2em	String	optional
1st value color	`color1` `color`	Customise the color of the first value. Default orange	String	optional
2nd value color	`color2`	Customise the color of the second value. Default green	String	optional
Show total switch	`show_total`	Use with any input to show the total of the two values.	String	optional

@@ Line 1: / Line 1: @@
 <div style="width:100%; display:flex; flex-wrap:wrap; flex-direction:row;">
-<div style="flex-basis:50%">{{{1|46}}} ({{#expr: floor(({{{1|46}}} / ({{{1|46}}} + {{{2|154}}})) * 100) }}%)</div>
+<div style="flex-basis:{{#if:{{{show_total|}}}|33|50}}%">{{{1|46}}} ({{#expr: ({{{1|46}}} / ({{{1|46}}} + {{{2|154}}})) * 100 round 0 }}%)</div>
-<div style="flex-basis:50%; text-align:right;">{{{2|154}}} ({{#expr: 100 - floor(({{{1|46}}} / ({{{1|46}}} + {{{2|154}}})) * 100) }}%)</div>
+{{#if:{{{show_total|}}}|<div style="flex-basis:34%; text-align:center">Total: {{#expr: {{{1|46}}} + {{{2|154}}} }}</div>}}
-<div style="background-color:green; height:4em; border:1px black solid; box-sizing:border-box; width:{{#expr: floor(({{{1|46}}} / ({{{1|46}}} + {{{2|154}}})) * 100) }}%;">
+<div style="flex-basis:{{#if:{{{show_total|}}}|33|50}}%; text-align:right;">{{{2|154}}} ({{#expr: 100 - ({{{1|46}}} / ({{{1|46}}} + {{{2|154}}})) * 100 round 0 }}%)</div>
-</div>
+<div style="background-color:{{{color2|green}}}; width:100%; height:{{{height|2em}}}; border:1px black solid; box-sizing:border-box;>
-<div style="background-color:orange; height:4em; border:1px black solid; border-left:none; box-sizing:border-box; width:{{#expr: 100 - floor(({{{1|46}}} / ({{{1|46}}} + {{{2|154}}})) * 100) }}%">
+<div style="background-color:{{{color1|{{{color|orange}}}}}}; height:100%; border-right:1px black solid; box-sizing:border-box; width:{{#expr: ({{{1|46}}} / ({{{1|46}}} + {{{2|154}}})) * 100 round 0 }}%">
-</div>
+</div></div>
 </div><noinclude>
+<templatedata>
+{
+	"description": "Compares two values. The percentages are of the total.",
+	"format": "inline",
+	"params": {
+		"1": {
+			"label": "1st value",
+			"type": "number",
+			"description": "The first value.",
+			"required": true
+		},
+		"2": {
+			"label": "2nd value",
+			"type": "number",
+			"description": "The second value.",
+			"required": true
+		},
+		"height": {
+			"label": "Height",
+			"type": "string",
+			"description": "Customise the height of the bar.",
+			"default": "2em"
+		},
+		"color1": {
+			"label": "1st value color",
+			"aliases": ["color"],
+			"type": "string",
+			"description": "Customise the color of the first value.",
+			"default": "orange"
+		},
+		"color2": {
+			"label": "2nd value color",
+			"type": "string",
+			"description": "Customise the color of the second value.",
+			"default": "green"
+		},
+		"show_total": {
+			"label": "Show total switch",
+			"type": "string",
+			"description": "Use with any input to show the total of the two values."
+		}
+	}
+}
+</templatedata>
 [[Category:Templates]]
 </noinclude>