Template:CompositionBar - Revision history

519281851441872906: Blanked the page

2025-07-24T04:34:38Z

Blanked the page

← Older revision		Revision as of 06:34, 24 July 2025
Line 1:		Line 1:
	{{#iferror:{{formatnum:{{{1\|50}}}}}\|{{{1\|50}}}\|{{formatnum:{{{1\|50}}}}}}} / {{#iferror:{{formatnum:{{{2\|100}}}}} \|{{{2\|100}}}\|{{formatnum:{{{2\|100}}}}}}}{{#if:{{{per\|}}}\| ({{#iferror:{{#expr:(({{{1\|50}}}/{{{2\|100}}})100) round 2}}\|N/A\|{{#expr:(({{{1\|50}}}/{{{2\|100}}})100) round 2}}%}})}{{{ref\|}}}

	~~{{Documentation}}~~

519281851441872906 at 04:34, 24 July 2025

2025-07-24T04:34:24Z

← Older revision		Revision as of 06:34, 24 July 2025
Line 1:		Line 1:
	{{#iferror:{{formatnum:{{{1\|50}}}}}\|{{{1\|50}}}\|{{formatnum:{{{1\|50}}}}}}} / {{#iferror:{{formatnum:{{{2\|100}}}}}\|{{{2\|100}}}\|{{formatnum:{{{2\|100}}}}}}}{{#if:{{{per\|}}}\| ({{#iferror:{{#expr:(({{{1\|50}}}/{{{2\|100}}})100) round 2}}\|N/A\|{{#expr:(({{{1\|50}}}/{{{2\|100}}})100) round 2}}%}})}{{{ref\|}}}		{{#iferror:{{formatnum:{{{1\|50}}}}}\|{{{1\|50}}}\|{{formatnum:{{{1\|50}}}}}}} / {{#iferror:{{formatnum:{{{2\|100}}}}} \|{{{2\|100}}}\|{{formatnum:{{{2\|100}}}}}}}{{#if:{{{per\|}}}\| ({{#iferror:{{#expr:(({{{1\|50}}}/{{{2\|100}}})100) round 2}}\|N/A\|{{#expr:(({{{1\|50}}}/{{{2\|100}}})100) round 2}}%}})}{{{ref\|}}}

	{{Documentation}}		{{Documentation}}

519281851441872906 at 04:34, 24 July 2025

2025-07-24T04:34:11Z

← Older revision		Revision as of 06:34, 24 July 2025
Line 1:		Line 1:
	{{formatnum:{{{1\|50}}}}} / {{formatnum:{{{2\|100}}}}}{{#if:{{{per\|}}}\| ({{#expr:(({{{1\|50}}}/{{{2\|100}}})*100) round 2}}%)}}{{{ref\|}}}		{{#iferror:{{formatnum:{{{1\|50}}}}}\|{{{1\|50}}}\|{{formatnum:{{{1\|50}}}}}}} / {{#iferror:{{formatnum:{{{2\|100}}}}}\|{{{2\|100}}}\|{{formatnum:{{{2\|100}}}}}}}{{#if:{{{per\|}}}\| ({{#iferror:{{#expr:(({{{1\|50}}}/{{{2\|100}}})100) round 2}}\|N/A\|{{#expr:(({{{1\|50}}}/{{{2\|100}}})100) round 2}}%}})}{{{ref\|}}}

	{{Documentation}}		{{Documentation}}

519281851441872906: Replaced content with "{{formatnum:{{{1|50}}}}} / {{formatnum:{{{2|100}}}}}{{#if:{{{per|}}}| ({{#expr:(({{{1|50}}}/{{{2|100}}})*100) round 2}}%)}}{{{ref|}}} {{Documentation}}"

2025-07-24T04:32:29Z

Replaced content with "{{formatnum:{{{1|50}}}}} / {{formatnum:{{{2|100}}}}}{{#if:{{{per|}}}| ({{#expr:(({{{1|50}}}/{{{2|100}}})*100) round 2}}%)}}{{{ref|}}} {{Documentation}}"

← Older revision		Revision as of 06:32, 24 July 2025
Line 1:		Line 1:
	~~<noinclude>~~		{{formatnum:{{{1\|50}}}}} / {{formatnum:{{{2\|100}}}}}{{#if:{{{per\|}}}\| ({{#expr:(({{{1\|50}}}/{{{2\|100}}})*100) round 2}}%)}}{{{ref\|}}}
	~~This template creates a single horizontal bar that visually represents a percentage or value relative to a total, similar to how the Wikipedia `Template~~:~~Composition_bar` can be used for a single metric.~~

	~~== Usage ==~~		{{Documentation}}
	~~To use this template, copy the following code to a page named `Template:CompositionBar` (or a similar name of your choice):~~

	~~```wiki~~
	~~<div class="composition-bar-wrapper" style="~~
	{{~~#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}~~
	~~{{#if:{{{float\|}}}\|float:{{{float}}};}}~~
	~~margin-left:auto; margin-right:0; /* Default align right */~~
	~~border:{{{5\|{{{border_style\|1px solid gray}}}}}};~~
	">
	~~<div class="composition-bar-fill" style="~~
	~~width:{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) * 100 round 0}}%;~~
	~~background-color:{{{3\|{{{color\|#4CAF50}}}}}};~~
	~~color:{{{text_color\|white}}};~~
	">
	~~<span class="segment-label">~~
	~~{{#ifeq:{{{per\|no}}}\|yes~~
	~~\|{{{1\|{{{amount\|0}}}}}}/{{{2\|{{{total\|100}}}}}}~~
	~~\|{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) * 100 round 0}}%~~
	}}
	~~</span>~~
	~~</div>~~
	~~</div>~~
	Then, on any page where you want to add a composition bar, you can use either named parameters or the new positional parameters:Using Positional Parameters:{{CompositionBar\|75\|100\|#3498db\|#e0e0e0\|width=400px}}

	~~{{CompositionBar\|15\|20\|#28a745\|#f0f0f0\|2px dashed purple\|per=yes\|width=200px\|float=right\|text_color=black}}~~
	~~Using Named Parameters (still supported):{{CompositionBar~~
	~~\| amount = 75~~
	~~\| total = 100~~
	~~\| color = #3498db~~
	~~\| background_color = #e0e0e0~~
	~~\| width = 400px~~
	}}
	== Parameters =='''1 (amount)''': (Required) The current numeric value to be represented by the filled portion of the bar. (e.g., 50)'''2 (total)''': (Optional) The maximum possible value. Defaults to 100. (e.g., 100)'''3 (color)''': (Optional) The CSS color for the filled portion of the bar (e.g., red, #FF5733, blue). Defaults to #4CAF50.'''4 (background_color)''': (Optional) The CSS color for the unfilled portion of the bar. Defaults to #e0e0e0.'''5 (border_style)''': (Optional) Sets the CSS border for the entire bar container (e.g., 1px solid red, 2px dashed #333, none). Defaults to 1px solid gray.'''per''': (Optional) Set to yes to display the label as amount/total instead of a percentage. Defaults to no.'''width''': (Optional) Sets the overall width of the bar (e.g., 50%, 300px). Defaults to 100px.'''float''': (Optional) Floats the bar. Options: left, right, none. Useful with width.'''text_color''': (Optional) Sets the text color for the label displayed on the bar. Defaults to white.</noinclude><includeonly><style>.composition-bar-wrapper {/* Default width is 100px unless overridden by 'width' parameter /margin: 1em auto; / Default center alignment /font-size: 90%;/ Default border is 1px solid gray, controlled by template parameter /border-radius: 5px;overflow: hidden; / Ensures fill stays within bounds /box-shadow: 0 2px 5px rgba(0,0,0,0.1);box-sizing: border-box; / Include padding/border in width /height: 25px; / Fixed height for the bar itself /background-color: #e0e0e0; / Default background for the unfilled part /position: relative; / For positioning the fill /}.composition-bar-fill {height: 100%;text-align: center;line-height: 25px; / Vertically center the label /color: white; / Default text color for the label /transition: width 0.5s ease-in-out; / Smooth animation for width changes /display: flex; / Use flexbox to center content /align-items: center; / Vertically center content /justify-content: center; / Horizontally center content /font-weight: bold;white-space: nowrap; / Prevent label from wrapping /overflow: hidden; / Hide overflowing label if segment is too small /text-overflow: ellipsis; / Add ellipsis if label is truncated /border-radius: 5px; / Ensure rounded corners for the fill /}.segment-label {/ No specific styles needed here, inherited from .composition-bar-fill /}</style><div class="composition-bar-wrapper" style="{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}{{#if:{{{float\|}}}\|float:{{{float}}};}}margin-left:auto; margin-right:0; / Default align right /border:{{{5\|{{{border_style\|1px solid gray}}}}}};"><div class="composition-bar-fill" style="width:{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) 100 round 0}}%;background-color:{{{3\|{{{color\|#4CAF50}}}}}};color:{{{text_color\|white}}};"><span class="segment-label">{{#ifeq:{{{per\|no}}}\|yes\|{{{1\|{{{amount\|0}}}}}}/{{{2\|{{{total\|100}}}}}}\|{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) * 100 round 0}}%

519281851441872906 at 04:28, 24 July 2025

2025-07-24T04:28:19Z

← Older revision		Revision as of 06:28, 24 July 2025
Line 35:		Line 35:
	\| width = 400px		\| width = 400px
	}}		}}
	== Parameters =='''1 (amount)''': (Required) The current numeric value to be represented by the filled portion of the bar. (e.g., 50)'''2 (total)''': (Optional) The maximum possible value. Defaults to 100. (e.g., 100)'''3 (color)''': (Optional) The CSS color for the filled portion of the bar (e.g., red, #FF5733, blue). Defaults to #4CAF50.'''4 (background_color)''': (Optional) The CSS color for the unfilled portion of the bar. Defaults to #e0e0e0.'''5 (border_style)''': (Optional) Sets the CSS border for the entire bar container (e.g., 1px solid red, 2px dashed #333, none). Defaults to 1px solid gray.'''per''': (Optional) Set to yes to display the label as amount/total instead of a percentage. Defaults to no.'''width''': (Optional) Sets the overall width of the bar (e.g., 50%, 300px). Defaults to 100px.'''float''': (Optional) Floats the bar. Options: left, right, none. Useful with width.'''text_color''': (Optional) Sets the text color for the label displayed on the bar. Defaults to white.</noinclude><includeonly><style>.composition-bar-wrapper {/* Default width is 100px unless overridden by 'width' parameter /margin: 1em auto; / Default center alignment /font-size: 90%;/ Default border is 1px solid gray, controlled by template parameter /border-radius: 5px;overflow: hidden; / Ensures fill stays within bounds /box-shadow: 0 2px 5px rgba(0,0,0,0.1);box-sizing: border-box; / Include padding/border in width /height: 25px; / Fixed height for the bar itself /background-color: #e0e0e0; / Default background for the unfilled part /position: relative; / For positioning the fill /}.composition-bar-fill {height: 100%;text-align: center;line-height: 25px; / Vertically center the label /color: white; / Default text color for the label /transition: width 0.5s ease-in-out; / Smooth animation for width changes /display: flex; / Use flexbox to center content /align-items: center; / Vertically center content /justify-content: center; / Horizontally center content /font-weight: bold;white-space: nowrap; / Prevent label from wrapping /overflow: hidden; / Hide overflowing label if segment is too small /text-overflow: ellipsis; / Add ellipsis if label is truncated /border-radius: 5px; / Ensure rounded corners for the fill /}.segment-label {/ No specific styles needed here, inherited from .composition-bar-fill /}</style><div class="composition-bar-wrapper" style="{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}{{#if:{{{float\|}}}\|float:{{{float}}};}}margin-left:auto; margin-right:0; / Default align right /border:{{{5\|{{{border_style\|1px solid gray}}}}}};"><div class="composition-bar-fill" style="width:{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) 100 round 0}}%;background-color:{{{3\|{{{color\|#4CAF50}}}}}};color:{{{text_color\|white}}};"><span class="segment-label">{{#ifeq:{{{per\|no}}}\|yes\|{{{1\|{{{amount\|0}}}}}}/{{{2\|{{{total\|100}}}}}}		== Parameters =='''1 (amount)''': (Required) The current numeric value to be represented by the filled portion of the bar. (e.g., 50)'''2 (total)''': (Optional) The maximum possible value. Defaults to 100. (e.g., 100)'''3 (color)''': (Optional) The CSS color for the filled portion of the bar (e.g., red, #FF5733, blue). Defaults to #4CAF50.'''4 (background_color)''': (Optional) The CSS color for the unfilled portion of the bar. Defaults to #e0e0e0.'''5 (border_style)''': (Optional) Sets the CSS border for the entire bar container (e.g., 1px solid red, 2px dashed #333, none). Defaults to 1px solid gray.'''per''': (Optional) Set to yes to display the label as amount/total instead of a percentage. Defaults to no.'''width''': (Optional) Sets the overall width of the bar (e.g., 50%, 300px). Defaults to 100px.'''float''': (Optional) Floats the bar. Options: left, right, none. Useful with width.'''text_color''': (Optional) Sets the text color for the label displayed on the bar. Defaults to white.</noinclude><includeonly><style>.composition-bar-wrapper {/* Default width is 100px unless overridden by 'width' parameter /margin: 1em auto; / Default center alignment /font-size: 90%;/ Default border is 1px solid gray, controlled by template parameter /border-radius: 5px;overflow: hidden; / Ensures fill stays within bounds /box-shadow: 0 2px 5px rgba(0,0,0,0.1);box-sizing: border-box; / Include padding/border in width /height: 25px; / Fixed height for the bar itself /background-color: #e0e0e0; / Default background for the unfilled part /position: relative; / For positioning the fill /}.composition-bar-fill {height: 100%;text-align: center;line-height: 25px; / Vertically center the label /color: white; / Default text color for the label /transition: width 0.5s ease-in-out; / Smooth animation for width changes /display: flex; / Use flexbox to center content /align-items: center; / Vertically center content /justify-content: center; / Horizontally center content /font-weight: bold;white-space: nowrap; / Prevent label from wrapping /overflow: hidden; / Hide overflowing label if segment is too small /text-overflow: ellipsis; / Add ellipsis if label is truncated /border-radius: 5px; / Ensure rounded corners for the fill /}.segment-label {/ No specific styles needed here, inherited from .composition-bar-fill /}</style><div class="composition-bar-wrapper" style="{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}{{#if:{{{float\|}}}\|float:{{{float}}};}}margin-left:auto; margin-right:0; / Default align right /border:{{{5\|{{{border_style\|1px solid gray}}}}}};"><div class="composition-bar-fill" style="width:{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) 100 round 0}}%;background-color:{{{3\|{{{color\|#4CAF50}}}}}};color:{{{text_color\|white}}};"><span class="segment-label">{{#ifeq:{{{per\|no}}}\|yes\|{{{1\|{{{amount\|0}}}}}}/{{{2\|{{{total\|100}}}}}}\|{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) * 100 round 0}}%

519281851441872906 at 04:27, 24 July 2025

2025-07-24T04:27:21Z

← Older revision		Revision as of 06:27, 24 July 2025
Line 35:		Line 35:
	\| width = 400px		\| width = 400px
	}}		}}
	== Parameters =='''1 (amount)''': (Required) The current numeric value to be represented by the filled portion of the bar. (e.g., 50)'''2 (total)''': (Optional) The maximum possible value. Defaults to 100. (e.g., 100)'''3 (color)''': (Optional) The CSS color for the filled portion of the bar (e.g., red, #FF5733, blue). Defaults to #4CAF50.'''4 (background_color)''': (Optional) The CSS color for the unfilled portion of the bar. Defaults to #e0e0e0.'''5 (border_style)''': (Optional) Sets the CSS border for the entire bar container (e.g., 1px solid red, 2px dashed #333, none). Defaults to 1px solid gray.'''per''': (Optional) Set to yes to display the label as amount/total instead of a percentage. Defaults to no.'''width''': (Optional) Sets the overall width of the bar (e.g., 50%, 300px). Defaults to 100px.'''float''': (Optional) Floats the bar. Options: left, right, none. Useful with width.'''text_color''': (Optional) Sets the text color for the label displayed on the bar. Defaults to white.</noinclude><includeonly><style>.composition-bar-wrapper {/* Default width is 100px unless overridden by 'width' parameter /margin: 1em auto; / Default center alignment /font-size: 90%;/ Default border is 1px solid gray, controlled by template parameter /border-radius: 5px;overflow: hidden; / Ensures fill stays within bounds /box-shadow: 0 2px 5px rgba(0,0,0,0.1);box-sizing: border-box; / Include padding/border in width /height: 25px; / Fixed height for the bar itself /background-color: #e0e0e0; / Default background for the unfilled part /position: relative; / For positioning the fill /}.composition-bar-fill {height: 100%;text-align: center;line-height: 25px; / Vertically center the label /color: white; / Default text color for the label /transition: width 0.5s ease-in-out; / Smooth animation for width changes /display: flex; / Use flexbox to center content /align-items: center; / Vertically center content /justify-content: center; / Horizontally center content /font-weight: bold;white-space: nowrap; / Prevent label from wrapping /overflow: hidden; / Hide overflowing label if segment is too small /text-overflow: ellipsis; / Add ellipsis if label is truncated /border-radius: 5px; / Ensure rounded corners for the fill /}.segment-label {/ No specific styles needed here, inherited from .composition-bar-fill /}</style><div class="composition-bar-wrapper" style="{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}{{#if:{{{float\|}}}\|float:{{{float}}};}}margin-left:auto; margin-right:0; / Default align right /border:{{{5\|{{{border_style\|1px solid gray}}}}}};"><div class="composition-bar-fill" style="width:{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) 100 round 0}}%;background-color:{{{3\|{{{color\|#4CAF50}}}}}};color:{{{text_color\|white}}};"><span class="segment-label">{{#ifeq:{{{per\|no}}}\|yes\|{{{1\|{{{amount\|0}}}}}}/{{{2\|{{{total\|100}}}}}}~~\|{{#expr: ({{{1~~		== Parameters =='''1 (amount)''': (Required) The current numeric value to be represented by the filled portion of the bar. (e.g., 50)'''2 (total)''': (Optional) The maximum possible value. Defaults to 100. (e.g., 100)'''3 (color)''': (Optional) The CSS color for the filled portion of the bar (e.g., red, #FF5733, blue). Defaults to #4CAF50.'''4 (background_color)''': (Optional) The CSS color for the unfilled portion of the bar. Defaults to #e0e0e0.'''5 (border_style)''': (Optional) Sets the CSS border for the entire bar container (e.g., 1px solid red, 2px dashed #333, none). Defaults to 1px solid gray.'''per''': (Optional) Set to yes to display the label as amount/total instead of a percentage. Defaults to no.'''width''': (Optional) Sets the overall width of the bar (e.g., 50%, 300px). Defaults to 100px.'''float''': (Optional) Floats the bar. Options: left, right, none. Useful with width.'''text_color''': (Optional) Sets the text color for the label displayed on the bar. Defaults to white.</noinclude><includeonly><style>.composition-bar-wrapper {/* Default width is 100px unless overridden by 'width' parameter /margin: 1em auto; / Default center alignment /font-size: 90%;/ Default border is 1px solid gray, controlled by template parameter /border-radius: 5px;overflow: hidden; / Ensures fill stays within bounds /box-shadow: 0 2px 5px rgba(0,0,0,0.1);box-sizing: border-box; / Include padding/border in width /height: 25px; / Fixed height for the bar itself /background-color: #e0e0e0; / Default background for the unfilled part /position: relative; / For positioning the fill /}.composition-bar-fill {height: 100%;text-align: center;line-height: 25px; / Vertically center the label /color: white; / Default text color for the label /transition: width 0.5s ease-in-out; / Smooth animation for width changes /display: flex; / Use flexbox to center content /align-items: center; / Vertically center content /justify-content: center; / Horizontally center content /font-weight: bold;white-space: nowrap; / Prevent label from wrapping /overflow: hidden; / Hide overflowing label if segment is too small /text-overflow: ellipsis; / Add ellipsis if label is truncated /border-radius: 5px; / Ensure rounded corners for the fill /}.segment-label {/ No specific styles needed here, inherited from .composition-bar-fill /}</style><div class="composition-bar-wrapper" style="{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}{{#if:{{{float\|}}}\|float:{{{float}}};}}margin-left:auto; margin-right:0; / Default align right /border:{{{5\|{{{border_style\|1px solid gray}}}}}};"><div class="composition-bar-fill" style="width:{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) 100 round 0}}%;background-color:{{{3\|{{{color\|#4CAF50}}}}}};color:{{{text_color\|white}}};"><span class="segment-label">{{#ifeq:{{{per\|no}}}\|yes\|{{{1\|{{{amount\|0}}}}}}/{{{2\|{{{total\|100}}}}}}

519281851441872906 at 04:25, 24 July 2025

2025-07-24T04:25:53Z

← Older revision		Revision as of 06:25, 24 July 2025
Line 1:		Line 1:
			<noinclude>
			This template creates a single horizontal bar that visually represents a percentage or value relative to a total, similar to how the Wikipedia `Template:Composition_bar` can be used for a single metric.

			== Usage ==
			To use this template, copy the following code to a page named `Template:CompositionBar` (or a similar name of your choice):

			```wiki
	<div class="composition-bar-wrapper" style="		<div class="composition-bar-wrapper" style="
	{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}		{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}
Line 28:		Line 35:
	\| width = 400px		\| width = 400px
	}}		}}
	== Parameters =='''1 (amount)''': (Required) The current numeric value to be represented by the filled portion of the bar. (e.g., 50)'''2 (total)''': (Optional) The maximum possible value. Defaults to 100. (e.g., 100)'''3 (color)''': (Optional) The CSS color for the filled portion of the bar (e.g., red, #FF5733, blue). Defaults to #4CAF50.'''4 (background_color)''': (Optional) The CSS color for the unfilled portion of the bar. Defaults to #e0e0e0.'''5 (border_style)''': (Optional) Sets the CSS border for the entire bar container (e.g., 1px solid red, 2px dashed #333, none). Defaults to 1px solid gray.'''per''': (Optional) Set to yes to display the label as amount/total instead of a percentage. Defaults to no.'''width''': (Optional) Sets the overall width of the bar (e.g., 50%, 300px). Defaults to 100px.'''float''': (Optional) Floats the bar. Options: left, right, none. Useful with width.'''text_color''': (Optional) Sets the text color for the label displayed on the bar. Defaults to white.</noinclude><includeonly><style>.composition-bar-wrapper {/* Default width is 100px unless overridden by 'width' parameter /margin: 1em auto; / Default center alignment /font-size: 90%;/ Default border is 1px solid gray, controlled by template parameter /border-radius: 5px;overflow: hidden; / Ensures fill stays within bounds /box-shadow: 0 2px 5px rgba(0,0,0,0.1);box-sizing: border-box; / Include padding/border in width /height: 25px; / Fixed height for the bar itself /background-color: #e0e0e0; / Default background for the unfilled part /position: relative; / For positioning the fill /}.composition-bar-fill {height: 100%;text-align: center;line-height: 25px; / Vertically center the label /color: white; / Default text color for the label /transition: width 0.5s ease-in-out; / Smooth animation for width changes /display: flex; / Use flexbox to center content /align-items: center; / Vertically center content /justify-content: center; / Horizontally center content /font-weight: bold;white-space: nowrap; / Prevent label from wrapping /overflow: hidden; / Hide overflowing label if segment is too small /text-overflow: ellipsis; / Add ellipsis if label is truncated /border-radius: 5px; / Ensure rounded corners for the fill /}.segment-label {/ No specific styles needed here, inherited from .composition-bar-fill /}</style><div class="composition-bar-wrapper" style="{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}{{#if:{{{float\|}}}\|float:{{{float}}};}}margin-left:auto; margin-right:0; / Default align right /border:{{{5\|{{{border_style\|1px solid gray}}}}}};"><div class="composition-bar-fill" style="width:{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) 100 round 0}}%;background-color:{{{3\|{{{color\|#4CAF50}}}}}};color:{{{text_color\|white}}};"><span class="segment-label">{{#ifeq:{{{per\|no}}}\|yes\|{{{1\|{{{amount\|0}}}}}}/{{{2\|{{{total\|100}}}}}}\|{{#expr: ({{{1~~\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) * 100 round 0}}%}}</span></div></div></includeonly~~		== Parameters =='''1 (amount)''': (Required) The current numeric value to be represented by the filled portion of the bar. (e.g., 50)'''2 (total)''': (Optional) The maximum possible value. Defaults to 100. (e.g., 100)'''3 (color)''': (Optional) The CSS color for the filled portion of the bar (e.g., red, #FF5733, blue). Defaults to #4CAF50.'''4 (background_color)''': (Optional) The CSS color for the unfilled portion of the bar. Defaults to #e0e0e0.'''5 (border_style)''': (Optional) Sets the CSS border for the entire bar container (e.g., 1px solid red, 2px dashed #333, none). Defaults to 1px solid gray.'''per''': (Optional) Set to yes to display the label as amount/total instead of a percentage. Defaults to no.'''width''': (Optional) Sets the overall width of the bar (e.g., 50%, 300px). Defaults to 100px.'''float''': (Optional) Floats the bar. Options: left, right, none. Useful with width.'''text_color''': (Optional) Sets the text color for the label displayed on the bar. Defaults to white.</noinclude><includeonly><style>.composition-bar-wrapper {/* Default width is 100px unless overridden by 'width' parameter /margin: 1em auto; / Default center alignment /font-size: 90%;/ Default border is 1px solid gray, controlled by template parameter /border-radius: 5px;overflow: hidden; / Ensures fill stays within bounds /box-shadow: 0 2px 5px rgba(0,0,0,0.1);box-sizing: border-box; / Include padding/border in width /height: 25px; / Fixed height for the bar itself /background-color: #e0e0e0; / Default background for the unfilled part /position: relative; / For positioning the fill /}.composition-bar-fill {height: 100%;text-align: center;line-height: 25px; / Vertically center the label /color: white; / Default text color for the label /transition: width 0.5s ease-in-out; / Smooth animation for width changes /display: flex; / Use flexbox to center content /align-items: center; / Vertically center content /justify-content: center; / Horizontally center content /font-weight: bold;white-space: nowrap; / Prevent label from wrapping /overflow: hidden; / Hide overflowing label if segment is too small /text-overflow: ellipsis; / Add ellipsis if label is truncated /border-radius: 5px; / Ensure rounded corners for the fill /}.segment-label {/ No specific styles needed here, inherited from .composition-bar-fill /}</style><div class="composition-bar-wrapper" style="{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}{{#if:{{{float\|}}}\|float:{{{float}}};}}margin-left:auto; margin-right:0; / Default align right /border:{{{5\|{{{border_style\|1px solid gray}}}}}};"><div class="composition-bar-fill" style="width:{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) 100 round 0}}%;background-color:{{{3\|{{{color\|#4CAF50}}}}}};color:{{{text_color\|white}}};"><span class="segment-label">{{#ifeq:{{{per\|no}}}\|yes\|{{{1\|{{{amount\|0}}}}}}/{{{2\|{{{total\|100}}}}}}\|{{#expr: ({{{1

519281851441872906 at 04:24, 24 July 2025

2025-07-24T04:24:30Z

← Older revision		Revision as of 06:24, 24 July 2025
Line 1:		Line 1:
	~~<noinclude>~~
	This template creates a single horizontal bar that visually represents a percentage or value relative to a total, similar to how the Wikipedia `Template:Composition_bar` can be used for a single metric.

	~~== Usage ==~~
	~~To use this template, copy the following code to a page named `Template:CompositionBar` (or a similar name of your choice):~~

	~~```wiki~~
	<div class="composition-bar-wrapper" style="		<div class="composition-bar-wrapper" style="
	{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}		{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}
Line 35:		Line 28:
	\| width = 400px		\| width = 400px
	}}		}}
	== Parameters =='''1 (amount)''': (Required) The current numeric value to be represented by the filled portion of the bar. (e.g., 50)'''2 (total)''': (Optional) The maximum possible value. Defaults to 100. (e.g., 100)'''3 (color)''': (Optional) The CSS color for the filled portion of the bar (e.g., red, #FF5733, blue). Defaults to #4CAF50.'''4 (background_color)''': (Optional) The CSS color for the unfilled portion of the bar. Defaults to #e0e0e0.'''5 (border_style)''': (Optional) Sets the CSS border for the entire bar container (e.g., 1px solid red, 2px dashed #333, none). Defaults to 1px solid gray.'''per''': (Optional) Set to yes to display the label as amount/total instead of a percentage. Defaults to no.'''width''': (Optional) Sets the overall width of the bar (e.g., 50%, 300px). Defaults to 100px.'''float''': (Optional) Floats the bar. Options: left, right, none. Useful with width.'''text_color''': (Optional) Sets the text color for the label displayed on the bar. Defaults to white.</noinclude><includeonly><style>.composition-bar-wrapper {/* Default width is 100px unless overridden by 'width' parameter /margin: 1em auto; / Default center alignment /font-size: 90%;/ Default border is 1px solid gray, controlled by template parameter /border-radius: 5px;overflow: hidden; / Ensures fill stays within bounds /box-shadow: 0 2px 5px rgba(0,0,0,0.1);box-sizing: border-box; / Include padding/border in width /height: 25px; / Fixed height for the bar itself /background-color: #e0e0e0; / Default background for the unfilled part /position: relative; / For positioning the fill /}.composition-bar-fill {height: 100%;text-align: center;line-height: 25px; / Vertically center the label /color: white; / Default text color for the label /transition: width 0.5s ease-in-out; / Smooth animation for width changes /display: flex; / Use flexbox to center content /align-items: center; / Vertically center content /justify-content: center; / Horizontally center content /font-weight: bold;white-space: nowrap; / Prevent label from wrapping /overflow: hidden; / Hide overflowing label if segment is too small /text-overflow: ellipsis; / Add ellipsis if label is truncated /border-radius: 5px; / Ensure rounded corners for the fill /}.segment-label {/ No specific styles needed here, inherited from .composition-bar-fill /}</style><div class="composition-bar-wrapper" style="{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}{{#if:{{{float\|}}}\|float:{{{float}}};}}margin-left:auto; margin-right:0; / Default align right /border:{{{5\|{{{border_style\|1px solid gray}}}}}};"><div class="composition-bar-fill" style="width:{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) 100 round 0}}%;background-color:{{{3\|{{{color\|#4CAF50}}}}}};color:{{{text_color\|white}}};"><span class="segment-label">{{#ifeq:{{{per\|no}}}\|yes\|{{{1\|{{{amount\|0}}}}}}/{{{2\|{{{total\|100}}}}}}\|{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}		== Parameters =='''1 (amount)''': (Required) The current numeric value to be represented by the filled portion of the bar. (e.g., 50)'''2 (total)''': (Optional) The maximum possible value. Defaults to 100. (e.g., 100)'''3 (color)''': (Optional) The CSS color for the filled portion of the bar (e.g., red, #FF5733, blue). Defaults to #4CAF50.'''4 (background_color)''': (Optional) The CSS color for the unfilled portion of the bar. Defaults to #e0e0e0.'''5 (border_style)''': (Optional) Sets the CSS border for the entire bar container (e.g., 1px solid red, 2px dashed #333, none). Defaults to 1px solid gray.'''per''': (Optional) Set to yes to display the label as amount/total instead of a percentage. Defaults to no.'''width''': (Optional) Sets the overall width of the bar (e.g., 50%, 300px). Defaults to 100px.'''float''': (Optional) Floats the bar. Options: left, right, none. Useful with width.'''text_color''': (Optional) Sets the text color for the label displayed on the bar. Defaults to white.</noinclude><includeonly><style>.composition-bar-wrapper {/* Default width is 100px unless overridden by 'width' parameter /margin: 1em auto; / Default center alignment /font-size: 90%;/ Default border is 1px solid gray, controlled by template parameter /border-radius: 5px;overflow: hidden; / Ensures fill stays within bounds /box-shadow: 0 2px 5px rgba(0,0,0,0.1);box-sizing: border-box; / Include padding/border in width /height: 25px; / Fixed height for the bar itself /background-color: #e0e0e0; / Default background for the unfilled part /position: relative; / For positioning the fill /}.composition-bar-fill {height: 100%;text-align: center;line-height: 25px; / Vertically center the label /color: white; / Default text color for the label /transition: width 0.5s ease-in-out; / Smooth animation for width changes /display: flex; / Use flexbox to center content /align-items: center; / Vertically center content /justify-content: center; / Horizontally center content /font-weight: bold;white-space: nowrap; / Prevent label from wrapping /overflow: hidden; / Hide overflowing label if segment is too small /text-overflow: ellipsis; / Add ellipsis if label is truncated /border-radius: 5px; / Ensure rounded corners for the fill /}.segment-label {/ No specific styles needed here, inherited from .composition-bar-fill /}</style><div class="composition-bar-wrapper" style="{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}{{#if:{{{float\|}}}\|float:{{{float}}};}}margin-left:auto; margin-right:0; / Default align right /border:{{{5\|{{{border_style\|1px solid gray}}}}}};"><div class="composition-bar-fill" style="width:{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) 100 round 0}}%;background-color:{{{3\|{{{color\|#4CAF50}}}}}};color:{{{text_color\|white}}};"><span class="segment-label">{{#ifeq:{{{per\|no}}}\|yes\|{{{1\|{{{amount\|0}}}}}}/{{{2\|{{{total\|100}}}}}}\|{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) * 100 round 0}}%}}</span></div></div></includeonly

519281851441872906 at 04:23, 24 July 2025

2025-07-24T04:23:21Z

← Older revision		Revision as of 06:23, 24 July 2025
Line 35:		Line 35:
	\| width = 400px		\| width = 400px
	}}		}}
	== Parameters =='''1 (amount)''': (Required) The current numeric value to be represented by the filled portion of the bar. (e.g., 50)'''2 (total)''': (Optional) The maximum possible value. Defaults to 100. (e.g., 100)'''3 (color)''': (Optional) The CSS color for the filled portion of the bar (e.g., red, #FF5733, blue). Defaults to #4CAF50.'''4 (background_color)''': (Optional) The CSS color for the unfilled portion of the bar. Defaults to #e0e0e0.'''5 (border_style)''': (Optional) Sets the CSS border for the entire bar container (e.g., 1px solid red, 2px dashed #333, none). Defaults to 1px solid gray.'''per''': (Optional) Set to yes to display the label as amount/total instead of a percentage. Defaults to no.'''width''': (Optional) Sets the overall width of the bar (e.g., 50%, 300px). Defaults to 100px.'''float''': (Optional) Floats the bar. Options: left, right, none. Useful with width.'''text_color''': (Optional) Sets the text color for the label displayed on the bar. Defaults to white.</noinclude><includeonly><style>.composition-bar-wrapper {/* Default width is 100px unless overridden by 'width' parameter /margin: 1em auto; / Default center alignment /font-size: 90%;/ Default border is 1px solid gray, controlled by template parameter /border-radius: 5px;overflow: hidden; / Ensures fill stays within bounds /box-shadow: 0 2px 5px rgba(0,0,0,0.1);box-sizing: border-box; / Include padding/border in width /height: 25px; / Fixed height for the bar itself /background-color: #e0e0e0; / Default background for the unfilled part /position: relative; / For positioning the fill /}.composition-bar-fill {height: 100%;text-align: center;line-height: 25px; / Vertically center the label /color: white; / Default text color for the label /transition: width 0.5s ease-in-out; / Smooth animation for width changes /display: flex; / Use flexbox to center content /align-items: center; / Vertically center content /justify-content: center; / Horizontally center content /font-weight: bold;white-space: nowrap; / Prevent label from wrapping /overflow: hidden; / Hide overflowing label if segment is too small /text-overflow: ellipsis; / Add ellipsis if label is truncated /border-radius: 5px; / Ensure rounded corners for the fill /}.segment-label {/ No specific styles needed here, inherited from .composition-bar-fill /}</style><div class="composition-bar-wrapper" style="{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}{{#if:{{{float\|}}}\|float:{{{float}}};}}margin-left:auto; margin-right:0; / Default align right /border:{{{5\|{{{border_style\|1px solid gray}}}}}};"><div class="composition-bar-fill" style="width:{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) 100 round 0}}%;background-color:{{{3\|{{{color\|#4CAF50}}}}}};color:{{{text_color\|white}}};"><span class="segment-label">{{#ifeq:{{{per\|no}}}\|yes\|{{{1\|{{{amount\|0}}}}}}/{{{2\|{{{total\|100}}}}}}\|{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}~~}}}}) * 100 round 0~~}}		== Parameters =='''1 (amount)''': (Required) The current numeric value to be represented by the filled portion of the bar. (e.g., 50)'''2 (total)''': (Optional) The maximum possible value. Defaults to 100. (e.g., 100)'''3 (color)''': (Optional) The CSS color for the filled portion of the bar (e.g., red, #FF5733, blue). Defaults to #4CAF50.'''4 (background_color)''': (Optional) The CSS color for the unfilled portion of the bar. Defaults to #e0e0e0.'''5 (border_style)''': (Optional) Sets the CSS border for the entire bar container (e.g., 1px solid red, 2px dashed #333, none). Defaults to 1px solid gray.'''per''': (Optional) Set to yes to display the label as amount/total instead of a percentage. Defaults to no.'''width''': (Optional) Sets the overall width of the bar (e.g., 50%, 300px). Defaults to 100px.'''float''': (Optional) Floats the bar. Options: left, right, none. Useful with width.'''text_color''': (Optional) Sets the text color for the label displayed on the bar. Defaults to white.</noinclude><includeonly><style>.composition-bar-wrapper {/* Default width is 100px unless overridden by 'width' parameter /margin: 1em auto; / Default center alignment /font-size: 90%;/ Default border is 1px solid gray, controlled by template parameter /border-radius: 5px;overflow: hidden; / Ensures fill stays within bounds /box-shadow: 0 2px 5px rgba(0,0,0,0.1);box-sizing: border-box; / Include padding/border in width /height: 25px; / Fixed height for the bar itself /background-color: #e0e0e0; / Default background for the unfilled part /position: relative; / For positioning the fill /}.composition-bar-fill {height: 100%;text-align: center;line-height: 25px; / Vertically center the label /color: white; / Default text color for the label /transition: width 0.5s ease-in-out; / Smooth animation for width changes /display: flex; / Use flexbox to center content /align-items: center; / Vertically center content /justify-content: center; / Horizontally center content /font-weight: bold;white-space: nowrap; / Prevent label from wrapping /overflow: hidden; / Hide overflowing label if segment is too small /text-overflow: ellipsis; / Add ellipsis if label is truncated /border-radius: 5px; / Ensure rounded corners for the fill /}.segment-label {/ No specific styles needed here, inherited from .composition-bar-fill /}</style><div class="composition-bar-wrapper" style="{{#if:{{{width\|}}}\|width:{{{width}}};\|width:100px;}}{{#if:{{{float\|}}}\|float:{{{float}}};}}margin-left:auto; margin-right:0; / Default align right /border:{{{5\|{{{border_style\|1px solid gray}}}}}};"><div class="composition-bar-fill" style="width:{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}}}) 100 round 0}}%;background-color:{{{3\|{{{color\|#4CAF50}}}}}};color:{{{text_color\|white}}};"><span class="segment-label">{{#ifeq:{{{per\|no}}}\|yes\|{{{1\|{{{amount\|0}}}}}}/{{{2\|{{{total\|100}}}}}}\|{{#expr: ({{{1\|{{{amount\|0}}}}} / {{{2\|{{{total\|100}}}}

519281851441872906 at 04:22, 24 July 2025

2025-07-24T04:22:27Z

@@ Line 25: / Line 25: @@
    </div>
 </div>
 Then, on any page where you want to add a composition bar, you can use either named parameters or the new positional parameters:Using Positional Parameters:{{CompositionBar|75|100|#3498db|#e0e0e0|width=400px}}
 {{CompositionBar|15|20|#28a745|#f0f0f0|2px dashed purple|per=yes|width=200px|float=right|text_color=black}}
 Using Named Parameters (still supported):{{CompositionBar
 | amount = 75
 | total = 100
@@ Line 43: / Line 35: @@
 | width = 400px
 }}
+== Parameters =='''1 (amount)''': (Required) The current numeric value to be represented by the filled portion of the bar. (e.g., 50)'''2 (total)''': (Optional) The maximum possible value. Defaults to 100. (e.g., 100)'''3 (color)''': (Optional) The CSS color for the filled portion of the bar (e.g., red, #FF5733, blue). Defaults to #4CAF50.'''4 (background_color)''': (Optional) The CSS color for the unfilled portion of the bar. Defaults to #e0e0e0.'''5 (border_style)''': (Optional) Sets the CSS border for the entire bar container (e.g., 1px solid red, 2px dashed #333, none). Defaults to 1px solid gray.'''per''': (Optional) Set to yes to display the label as amount/total instead of a percentage. Defaults to no.'''width''': (Optional) Sets the overall width of the bar (e.g., 50%, 300px). Defaults to 100px.'''float''': (Optional) Floats the bar. Options: left, right, none. Useful with width.'''text_color''': (Optional) Sets the text color for the label displayed on the bar. Defaults to white.</noinclude><includeonly><style>.composition-bar-wrapper {/* Default width is 100px unless overridden by 'width' parameter /margin: 1em auto; / Default center alignment /font-size: 90%;/ Default border is 1px solid gray, controlled by template parameter /border-radius: 5px;overflow: hidden; / Ensures fill stays within bounds /box-shadow: 0 2px 5px rgba(0,0,0,0.1);box-sizing: border-box; / Include padding/border in width /height: 25px; / Fixed height for the bar itself /background-color: #e0e0e0; / Default background for the unfilled part /position: relative; / For positioning the fill */}.composition-bar-fill {height: 100%;text-align: center;line-height: 25px; /* Vertically center the label /color: white; / Default text color for the label /transition: width 0.5s ease-in-out; / Smooth animation for width changes /display: flex; / Use flexbox to center content /align-items: center; / Vertically center content /justify-content: center; / Horizontally center content /font-weight: bold;white-space: nowrap; / Prevent label from wrapping /overflow: hidden; / Hide overflowing label if segment is too small /text-overflow: ellipsis; / Add ellipsis if label is truncated /border-radius: 5px; / Ensure rounded corners for the fill */}.segment-label {/* No specific styles needed here, inherited from .composition-bar-fill */}</style><div class="composition-bar-wrapper" style="{{#if:{{{width|}}}|width:{{{width}}};|width:100px;}}{{#if:{{{float|}}}|float:{{{float}}};}}margin-left:auto; margin-right:0; /* Default align right */border:{{{5|{{{border_style|1px solid gray}}}}}};"><div class="composition-bar-fill" style="width:{{#expr: ({{{1|{{{amount|0}}}}} / {{{2|{{{total|100}}}}}}) * 100 round 0}}%;background-color:{{{3|{{{color|#4CAF50}}}}}};color:{{{text_color|white}}};"><span class="segment-label">{{#ifeq:{{{per|no}}}|yes|{{{1|{{{amount|0}}}}}}/{{{2|{{{total|100}}}}}}|{{#expr: ({{{1|{{{amount|0}}}}} / {{{2|{{{total|100}}}}}}) * 100 round 0}}