ထႅမ်းပလဵတ်ႉ:Brick chart/doc

ၼႃႈလိၵ်ႈဢၼ်ၼႆႉၼႆႉ မၼ်းပဵၼ် ၽိုၼ်ၵႅမ်မိုဝ်း လၢႆးၸႂ်ႉတိုဝ်း (documentation) ႁင်း တွၼ်ႈတႃႇ ၼႃႈလိၵ်ႈၽႄ (subpage) ထႅမ်းပလဵတ်ႉ:Brick chart ၼၼ်ႉယဝ်ႉ။
တီႈၼႃႈလိၵ်ႈဢၼ်ၼႆႉၼႆႉ မၼ်းတေၶဝ်ႈပႃးဝႆႉ လၢႆးၸႂ်ႉတိုဝ်း လႄႈ ၶေႃႈၶၢဝ်ႇဢၼ်ၵဵဝ်ႇၵပ်း၊ ပိူင်ထၢၼ်ႈ လႄႈ ၶေႃႈမုၼ်းတၢင်ႇၸိူဝ်း ဢၼ်ဢမ်ႇၵဵဝ်ႇၵပ်း တင်း ထႅမ်းပလဵတ်ႉ page ၼၼ်ႉယဝ်ႉ။

ၶေႃႈမုၼ်းၸိူဝ်းၽၢႆႇတႂ်ႈၼႆႉ ပဵၼ် တူဝ်ထတ်းတႃႁၼ်(VisualEditor) ဢၼ်မီးတီႈ ဝီႇၶီႇၽီးတီးယႃးၼၼ်ႉ ယိူင်းဢၢၼ်း တႃႇဢဝ် ၶိူင်ႈၸိူဝ်းၼၼ်ႉ ၸႂ်ႉလႆႈတီႈ ဝီႇၶီႇၽီးတီးယႃးတႆးသေ ၸင်ႇလႆႈဢဝ် ပိူင် ၶေႃႈမုၼ်းထႅမ်းပလဵၵ်ႉ (TemplateData) ဢၼ်မီးတီႈ ဝီႇၶီႇၽီးတီးယႃး ဢိင်းၵလဵတ်ႈၼၼ်ႉ ႁဵတ်းဝႆႉပဵၼ် တီႈမၢႆတီႈတွင်းယဝ်ႉ။ ႁူမ်ႈဝႃႈ ပႆႇၸႂ်ႉၶိူင်ႈၸိူဝ်းၼၼ်ႉသေတႃႉ ပေႃးပဵၼ် ၵူၼ်းႁူႉလွင်ႈတႅမ်ႈပရူဝ်ႇၵရႅမ်ႇ (computer programming) ဢိတ်းဢွတ်းၵေႃႈ ႁႂ်ႈပေႃးႁၼ်လႆႈၸႅင်ႈလႅင်းလီၼႆသေ ၸၢင်ႈဢဝ်ၸႂ်ႉလႆႈ သၽေႃးတီႈၵႅပ်ႈမၼ်းလႆႈယူႇ။

Brick chart

Draws a "brick chart" (square alternative to pie charts) as a rectangular-box chart with brick segments inside, useful for showing percentages, seats in a legislature, etc.

Template parameters
Parameter		ၶေႃႈသပ်းလႅင်း	Type	Status
Alignment	`thumb`	Align graph to left or right of page (floating), centre it, or no alignment option. Suggested values `left` `right` `none` `center`	String	optional
Style	`style`	Additional CSS for container	String	optional
Width	`width`	Width in pixels Default 180	Number	optional
Total	`total`	The total number of bricks (defaults to 100) Default 100	Number	optional
Stride	`stride`	The number of bricks in each row, defaults to 10. Default 10	Number	optional
Value 1	`value1`	Values for each brick. Values can be integers, decimals ("2.4"), formulas, or use '+' in mixed number fractions ("3+1/2").	Unknown	required
Brick size	`brick_size`	Value represented by one brick - defaults to one.	Number	optional
Colour 1	`color1`	CSS colour of each brick, defaults to various colours. E.g. red, blue, #893. Default red	Unknown	optional
Value 2	`value2`	no description	Unknown	required
Colour 2	`color2`	no description Default green	String	optional
value3	`value3`	no description	Unknown	optional
Color 3	`color3`	no description Default blue	Unknown	optional
value4	`value4`	no description	Unknown	optional
Color 4	`color4`	no description Default yellow	Unknown	optional
value5	`value5`	no description	Unknown	optional
Color 5	`color5`	no description Default magenta	Unknown	optional
value6	`value6`	no description	Unknown	optional
Color 6	`color6`	no description Default cyan	Unknown	optional
value7	`value7`	no description	Unknown	optional
Color 7	`color7`	no description Default brown	Unknown	optional
value8	`value8`	no description	Unknown	optional
Color 8	`color8`	no description Default orange	Unknown	optional
value9	`value9`	no description	Unknown	optional
Color 9	`color9`	no description Default purple	Unknown	optional
Caption	`caption`	no description	Line	optional
Legend margin	`legend_margin`	A CSS margin value to override the default	String	optional
Label 1	`label1`	Legend label for the first brick.	Line	required
Unit	`unit`	Unit to display in the legend, default to %	String	optional
Label 2	`label2`	no description	Line	suggested
Label 3	`label3`	no description	Line	suggested
Label 4	`label4`	no description	Line	suggested
Label 5	`label5`	no description	Line	suggested
Label 6	`label6`	no description	Line	suggested
Label 7	`label7`	no description	Line	suggested
Label 8	`label8`	no description	Line	suggested
Label 9	`label9`	no description	Line	suggested
"Other" label	`other`	Legend for the leftover space in the graph, defaults to "Other".	Line	optional

Examples

Example of 6 amounts

one - 42 %

two - 32 %

three - 12 %

four - 3 %

five - 2 %

six - 0.4 %

Other - 8.6 %

The following 2 examples have numbers in the range of 0-100 units, as percentages. The total is assumed as total=100, to calculate the "other" amount by subtracting all brick values from 100.

{{Brick chart
| caption=Example of 6 amounts
| value1=42 | label1=one
| value2=32 | label2=two
| value3=12 | label3=three
| value4=3 | label4=four
| value5=2 | label5=five
| value6=0.4 | label6=six
}}

Note how the bottom value, value6=0.4, generates a "tiny sliver" of a brick, and the calculated remainder, the "other" value is also a decimal amount as 8.6.

The brick colours use the defaults: red, dark green, blue, yellow, purple, and cyan, as the first 6 hues. The next example, below, shows use of some colour parameters by setting: color1, color2, color3.

Religion in the Czech Republic

Atheists / agnostics - 59 %

Catholics - 26.8 %

Protestants - 2.5 %

Other - 11.7 %

{{Brick chart
| caption=Religion in the Czech Republic
| label1 = [[Atheist]]s / [[agnostic]]s
  | value1 = 59 | color1 = silver
| label2 = [[Catholic Church|Catholics]]
  | value2 = 26.8 | color2 = #008
| label3 = [[Protestantism|Protestants]]
  | value3 = 2.5 | color3 = #08f
| legend_margin=0 0 0 6px
}}

The 2nd example, for Religion in the Czech Republic, shows the use of indented parameters for the value/color under each label phrase. The color #008 (for "Catholic") is a hexadecimal code for dark blue, using RGB notation, where the 3rd digit "8" is half of blue intensity levels, 0-F.

It is customary to list the larger percentages first, in a table; however, the numbers can be displayed in any order as needed for the text on a page. A small decimal amount, such as 0.4, will show a tiny sliver among the various brick bars.

The option "legend_margin=0 0 0 6px" resets the alignment of the legend boxes, as only 6 pixels from the left margin (default: 3px 0 0 10px).

Seats in the German federal parliament

Christian Democratic Union - 180 seats

Christian Social Union of Bavaria - 46 seats

Social Democratic Party of Germany - 222 seats

Free Democratic Party - 61 seats

The Left Party.PDS - 54 seats

Alliance '90/The Greens - 51 seats

Larger amounts: The following example has numbers in the range of 0-300 units, as counts. The total is set to total=614. The options stride=20 and brick_size=2.6 scale the bar line segments to fit within the box, rather than 6x times larger, as 614 compared to 100.

{{Brick chart
|caption = Seats in the German federal parliament
|total = 614
|unit = seats
|stride = 20
|brick_size=2.6
|label1=[[Christian Democratic Union (Germany)
     |Christian Democratic Union]]
  | color1=black
  | value1=180
|label2=[[Christian Social Union of Bavaria]]
  | color2=#ccf
  | value2=46
|label3=[[Social Democratic Party of Germany]]
  | color3=red
  | value3=222
|label4=[[Free Democratic Party]]
  | color4=yellow
  | value4=61
|label5=[[The Left Party.PDS]]
  | color5=#800
  | value5=54
|label6=[[Alliance '90/The Greens]]
  | color6=green
  | value6=51
}}

Performance considerations

The Template:Brick_chart draws the chart by using div-tags ("<div>") to show colored bars for line segments of the calculated length. The template can format a brick chart within 1/6 second, so 3 brick charts could appear within a page and add only 1/2 second to reformat, or edit-preview. The initial creation of the template occurred in August 2009; however, the alignment for display problems with overlapped bars was fixed in September 2012, over 3 years later.

တူၺ်းပႃး

{{Pie chart}}