ЛопаПарцун:Bar box/doc лопань салава тешксэнь ванома

{{docpage}}
{{tl|bar box}}, {{tl|bar percent}}, {{tl|bar pixel}} и {{tl|bar stacked}} — шаблоны для построения горизонтальных [[гистограмма|гистограмм]].

== Заготовка ==
<pre>
{{Bar box
|расположение   = 
|толщина рамки  = 
|отступ         = 
|ширина         = 
|ширина полосок = 
|цвет фона      = 
|стиль          = 
|заголовок      = 
|цвет заголовка = 
|слева1         = 
|слева2         = 
|справа1        = 
|справа2        = 
|строки         = 
|подпись        = 
|отступ подписи = 
}}
</pre>

== Параметры ==
{| class="wikitable"
! Параметр !! Описание
|-
|{{para|расположение}} || '''слева''', '''справа''' — для расположения в левой или в правой части экрана. '''центр''' — для создания «Пирамид». По умолчанию нет прижатия, гистограмма будет слева.
|-
|{{para|толщина рамки}} || Толщина рамки в пикселях. Указывается только цифра. По умолчанию '''1'''. Для отключения рамки '''0'''.
|-
|{{para|отступ}} || Для задания общего отступа вокруг рамки. Можно использовать все совместимые с padding варианты. По умолчанию '''.4em'''. Для отключения отступа и прижатия рамки введите '''0'''.
|-
|{{para|ширина}} || Обшая ширина гистограммы. По умолчанию ширина высчитывается исходя из содержимого. Если что-то не так, задайте своё нужное значение. Можно использовать любые значения, совместимые с width (px, pt, em, rem, %, auto, inherit)
|-
|{{para|ширина}} || Ширина непосредственно самой гистограммы (полосок). При использовании {{tl|bar pixel}} должно совпадать с шириной самой широкой полоски. При использовании {{tl|bar percent}} как правило достаточно 150-250px.
|-
|{{para|цвет фона}} || По умолчанию белый.
|-
|{{para|стиль}} || Любые дополнительные стили, при необходимости.
|-
|{{para|заголовок}} || Текст заголовка.
|-
|{{para|цвет заголовка}} || Цвет заголовка. Например: синий (#cfe3ff, #dcebff, #eaf3ff) или серый (#eaecf0, #f8f9fa)
|-
|{{para|слева1}} || Заголовок первого столбца слева от гистограммы
|-
|{{para|слева2}} || Заголовок второго столбца слева от гистограммы
|-
|{{para|справа1}} || Заголовок первого столбца справа от гистограммы
|-
|{{para|справа2}} || Заголовок второго столбца справа от гистограммы
|-
|{{para|строки}} || Строки (полоски, прямоугольники) гистограммы. Сюда подставляются {{tl|bar percent}}, {{tl|bar pixel}} или {{tl|bar stacked}}
|-
|{{para|подпись}} || Текст под гистограммой
|-
|{{para|отступ подписи}} || Для задания отступа подписи. Можно использовать все совместимые с padding варианты. По умолчанию '''.5em .4em'''.
|}
{{скрытый блок
|заглавие   = Прежние параметры (поддерживаются)
|содержание = 
 <pre>
 {{Bar box
 |width   =  ''ширина гистограммы'' (необязательно)
 |barwidth=  ''максимальная ширина прямоугольников'' (необязательно; по умолчанию 100px)
 |float   =  (left|right|none) (необязательно; по умолчанию ''none'')
 |title   =  ''заголовок'' (необязательно)
 |titlebar=  ''цвет фона заголовка'' (необязательно, по умолчанию ''none'')
 |left1   =  ''заголовок первого столбца слева от гистограммы'' (необязательно)
 |left2   =  ''заголовок второго столбца слева от гистограммы'' (необязательно)
 |right1  =  ''заголовок первого столбца справа от гистограммы'' (необязательно)
 |right2  =  ''заголовок второго столбца справа от гистограммы'' (необязательно)
 |bars    =  ''прямоугольники'' (см. ниже)
 |caption =  ''подпись гистограммы''   (необязательно)
 }}
 </pre>
}}

== Использование ==
Гистограмма {{tl|bar box}} может содержать любое количество горизонтальных прямоугольников следующих типов:

=== Проценты ===
Прямоугольники с шириной, указанной в процентах целого:
<pre>
{{bar percent|подпись слева|цвет полосы|ширина полосы (в процентах)|подпись справа|слева2 = Вторая подпись слева|справа2 = Вторая подпись справа|делитель = целое число}}
</pre>
* % указывать не нужно, только число
* подпись справа по умолчанию = ширина полосы + %
* делитель нужен для уменьшения ширины полос. Например: 1.5

=== Пиксели ===
Прямоугольники с шириной, указанной в пикселях:
<pre>
{{bar pixel|подпись слева|цвет полосы|ширина полосы (в пикселях)|единицы|подпись справа|слева2 = Вторая подпись слева|справа2 = Вторая подпись справа|делитель = целое число}}
</pre>
* px указывать не нужно, только число
* подпись справа по умолчанию = ширина полосы + единицы
* делитель нужен для уменьшения ширины полос. Например: 2 (полосы будут в половину меньше)

=== 5 в 1 ===
Для создания сложных гистограмм можнно использовать {{tl|bar stacked}}. Данный шаблон дает возможность использовать до 5 цветов в одной строке (подробнее см. в [[Шаблон:Bar stacked|документации шаблона]]).
<pre>
{{bar stacked| слева 1-я колонка | справа 1-я колонка | цвет 1-й полоски | ширина 1-й полоски | цвет 2-й полоски | ширина 2-й полоски | цвет 3-й полоски | ширина 3-й полоски | цвет 4-й полоски | ширина 4-й полоски | цвет 5-й полоски | ширина 5-й полоски  |слева2 = слева 2-я колонка |справа2 = справа 2-я колонка |align = (lcrd) |collapsed = (да, для кнопок) |id = (для кнопок) }}
</pre>

== Примеры гистограмм ==

=== Пиксели ===
{{demo|reverse=1|tag=pre|<nowiki>
{{bar box
|заголовок      = Поголовье
|цвет заголовка = #ddd
|расположение   = справа
|слева1         = Вид
|справа1        = Особей
|ширина полосок = 300px
|строки         =
{{bar pixel|Шушпанчики|#cda434|33|.213}}
{{bar pixel|Вуглускры|darkorange|123|.123}}
{{bar pixel|Йожи|tomato|210|.121}}
{{bar pixel|Кроши|skyblue|210|.476}}
|подпись        = Точность подсчета ±30 %
}}</nowiki>}}

=== Проценты ===
{{demo|reverse=1|tag=pre|<nowiki>
{{bar box
|заголовок      = Поголовье
|цвет заголовка = #cfe3ff
|расположение   = слева
|толщина рамки  = 2
|отступ         = 0
|слева1         = Вид
|справа1        = Особей
|ширина полосок = 300px
|строки         =
{{bar percent|Шушпанчики|#cda434|33}}
{{bar percent|Вуглускры|darkorange|12}}
{{bar percent|Йожи|tomato|100}}
{{bar percent|Кроши|skyblue|76}}
|подпись        = Увеличена толщина рамки, убран общий отступ, цвет заголовка изменен, расположение слева, используется {{tl|bar percent}}
}}</nowiki>}}

=== «Пирамида» ===
{{demo|reverse=1|tag=pre|<nowiki>
{{bar box
|заголовок      = Поголовье
|цвет заголовка = 
|расположение   = центр
|толщина рамки  = 0
|отступ         = 
|слева1         = Вид
|справа1        = Особей
|ширина полосок = 300px
|строки         =
{{bar pixel|Шушпанчики|#cda434|33|.213}}
{{bar pixel|Вуглускры|darkorange|123|.123}}
{{bar pixel|Йожи|tomato|210|.121}}
{{bar pixel|Кроши|skyblue|210|.476}}
|подпись        = Для создания пирамид с текстом с любых сторон, рамка убрана, цвет заголовка белый
}}</nowiki>}}

=== 3 в 1 ===
Сложный вариант на базе {{tl|bar box}} с использованием {{tl|bar stacked}}
{{Medical cases chart
|barwidth    = wide
|numwidth    = wdmd
|disease     = COVID-19
|preposition = во
|location    = Франции
|outbreak    = Распространение COVID-19<!-- Должно совпадами с именем родительского шаблона -->
|togglesbar  =
<div style="text-align:center">
{{Medical cases chart/Month toggle button|jan}}
{{Medical cases chart/Month toggle button|feb}}
{{Medical cases chart/Month toggle button|mar}}
{{Medical cases chart/Month toggle button|apr}}
{{Medical cases chart/Month toggle button}}
</div>
|right2      = Смертей
|collapsible = y
|data        =
2020-01-20;;;1;;;1;firstright1=y
;;;1;;;1;collapsed=y;id=jan
2020-01-24;;;2;;;2;+100%
2020-01-25;;;2;;;2;
2020-01-26;;;3;;;3;+50%
2020-01-27;;;4;;;4;+33%
;;;4;;;4;collapsed=y;id=jan
2020-01-30;;;6;;;6;+50%
2020-01-31;;;11;;;11;+83%
2020-02-01;;;12;;;12;+9.1%
2020-02-02;;;15;;;15;+25%
2020-02-03;;;15;;;15;{{=}};collapsed=y;id=feb
2020-02-04;;;16;;;16;+6.7%
2020-02-05;;1;19;;;19;+19%
2020-02-06;;2;23;;;23;+21%
2020-02-07;;2;24;;;24;+4.3%
2020-02-08;;2;24;;;24;{{=}};collapsed=y;id=feb
2020-02-09;;3;27;;;27;+13%
2020-02-10;;4;27;;;27;{{=}};collapsed=y;id=feb
2020-02-11;;4;28;;;28;+3.7%
;;7;28;;;28;collapsed=y;id=feb
2020-02-16;;9;29;;;29;+3.6%
2020-02-17;;10;30;;;30;+3.4%
2020-02-18;;12;31;;;31;+3.3%
2020-02-19;;16;51;;;51;+65%
2020-02-20;1;16;104;;;104;+104%;1;firstright2=y
2020-02-21;2;17;204;;;204;+96%;2;+100%
2020-02-22;2;18;433;;;433;+112%;2;{{=}};collapsed=y;id=feb
2020-02-23;4;18;602;;;602;+39%;4;+100%
2020-02-24;7;24;833;;;833;+38%;7;+75%
2020-02-25;10;24;977;;;977;+17%;10;+43%
2020-02-26;12;24;1261;;;1,261;+29%;12;+20%
2020-02-27;13;27;1766;;;1,766;+40%;13;+8.3%
2020-02-28;13;27;2337;;;2,337;+32%;13;{{=}};collapsed=y;id=feb
2020-02-29;17;28;3150;;;3,150;+35%;17;+31%
2020-03-01;22;31;4212;;;4,212;+34%;22;+29%;collapsed=y;id=mar
2020-03-02;28;34;4812;;;4,812;+14%;28;+27%
2020-03-03;32;41;5328;;;5,328;+11%;32;+14%
2020-03-04;35;88;5766;;;5,766;+8.2%;35;+9.4%
2020-03-05;42;108;6284;;;6,284;+9.0%;42;+20%
2020-03-06;44;118;6767;;;6,767;+7.7%;44;+4.8%
2020-03-07;50;130;7134;;;7,134;+5.4%;50;+14%
2020-03-08;51;166;7382;;;7,382;+3.5%;51;+2.0%
2020-03-09;54;247;7513;;;7,513;+1.8%;54;+5.9%
2020-03-10;60;288;7755;;;7,755;+3.2%;60;+11%
2020-03-11;66;333;7869;;;7,869;+1.5%;66;+10%
2020-03-12;67;510;7979;;;7,979;+1.4%;67;+1.5%
2020-03-13;72;714;8086;;;8,086;+1.3%;72;+7.4%
2020-03-14;75;834;8162;;;8,162;+0.94%;75;+4.2%
2020-03-15;75;1137;8236;;;8,236;+0.90%;75;{{=}};collapsed=y;id=mar
2020-03-16;81;1401;8320;;;8,320;+1.0%;81;+8.0%
2020-03-17;84;1540;8413;;;8,413;+1.1%;84;+3.7%
2020-03-18;91;1947;8565;;;8,565;+1.8%;91;+8.3%
2020-03-19;94;2233;8652;;;8,652;+1.0%;94;+3.3%
2020-03-20;102;2612;8799;;;8,799;+1.7%;102;+8.5%
2020-03-21;104;2909;8897;;;8,897;+1.1%;104;+2.0%
2020-03-22;111;3166;8961;;;8,961;+0.72%;111;+6.7%
2020-03-23;120;3507;9037;;;9,037;+0.85%;120;+8.1%
2020-03-24;126;3730;9137;;;9,137;+1.1%;126;+5.0%
2020-03-25;131;4144;9241;;;9,241;+1.1%;131;+4.0%
2020-03-26;139;4528;9332;;;9,332;+0.98%;139;+6.1%
2020-03-27;144;4811;9478;;;9,478;+1.6%;144;+3.6%
2020-03-28;152;5033;9583;;;9,583;+1.1%;152;+5.6%
2020-03-29;158;5228;9661;;;9,661;+0.81%;158;+3.9%
2020-03-30;162;5408;9786;;;9,786;+1.3%;162;+2.5%
2020-03-31;165;5567;9887;;;9,887;+1.0%;165;+1.9%
2020-04-01;169;5828;9976;;;9,976;+0.90%;169;+2.4%;collapsed=y;id=apr
2020-04-02;174;6021;10062;;;10,062;+0.86%;174;+3.0%
2020-04-03;177;6325;10156;;;10,156;+0.93%;177;+1.7%
2020-04-04;183;6463;10237;;;10,237;+0.80%;183;+3.4%
2020-04-05;186;6598;10284;;;10,284;+0.46%;186;+1.6%
2020-04-06;192;6694;10331;;;10,331;+0.46%;192;+3.2%
2020-04-07;200;6776;10384;;;10,384;+0.51%;200;+4.2%
2020-04-08;204;6973;10423;;;10,423;+0.38%;204;+2.0%
2020-04-09;208;7117;10450;;;10,450;+0.26%;208;+2.0%
2020-04-10;211;7243;10480;;;10,480;+0.29%;211;+1.4%
2020-04-11;214;7368;10512;;;10,512;+0.31%;214;+1.4%
2020-04-12;217;7447;10537;;;10,537;+0.24%;217;+1.4%
2020-04-13;222;7534;10564;;;10,564;+0.26%;222;+2.3%
2020-04-14;225;7616;10591;;;10,591;+0.26%;225;+1.4%
2020-04-15;229;7757;10613;;;10,613;+0.21%;229;+1.8%
2020-04-16;230;7829;10635;;;10,635;+0.21%;230;+0.44%
2020-04-17;232;7937;10653;;;10,653;+0.17%;232;+0.87%
2020-04-18;234;8042;10661;;;10,661;+0.08%;234;+0.86%;

|caption     = '''Источники:''' [https://www.santepubliquefrance.fr/maladies-et-traumatismes/maladies-et-infections-respiratoires/infection-a-coronavirus/articles/infection-au-nouveau-coronavirus-sars-cov-2-covid-19-france-et-monde Agence Santé Publique France] / Ministère Solidarites-Santé
}}{{-}}

== См. также ==
* {{tl|Medical cases chart}}

<includeonly>
[[Категория:Шаблоны:Гистограммы]]
</includeonly>

== Таблица для виз-редактора ==
<templatedata>
{
	"params": {
		"расположение": {
			"description": "для расположения в левой или в правой части экрана или для создания «Пирамид».",
			"example": "слева, справа, центр",
			"type": "line",
			"default": "слева",
			"suggested": true
		},
		"float": {
			"deprecated": true
		},
		"толщина рамки": {
			"description": "Толщина рамки в пикселях. Указывается только цифра. Для отключения рамки 0.",
			"type": "number",
			"default": "1",
			"suggested": true
		},
		"border_width": {
			"deprecated": true
		},
		"отступ": {
			"description": "Для задания общего отступа вокруг рамки. Можно использовать все совместимые с padding варианты. Для отключения отступа и прижатия рамки введите 0.",
			"default": ".4em",
			"suggested": true
		},
		"padding": {},
		"ширина": {
			"description": "Обшая ширина гистограммы. По умолчанию ширина высчитывается исходя из содержимого. Если что-то не так, задайте своё нужное значение. Можно использовать любые значения, совместимые с width (px, pt, em, rem, %, auto, inherit)",
			"suggested": true
		},
		"width": {
			"deprecated": true
		},
		"слева1": {
			"description": "Заголовок первого столбца слева от гистограммы",
			"type": "string",
			"suggested": true
		},
		"left1": {
			"deprecated": true
		},
		"слева2": {
			"description": "\tЗаголовок второго столбца слева от гистограммы",
			"type": "string",
			"suggested": true
		},
		"left2": {
			"suggested": true
		},
		"ширина полосок": {
			"description": "Ширина непосредственно самой гистограммы (полосок). При использовании {{bar pixel}} должно совпадать с шириной самой широкой полоски. При использовании {{bar percent}} как правило достаточно 150-250px.",
			"example": "250px",
			"suggested": true
		},
		"barwidth": {
			"deprecated": true
		},
		"справа1": {
			"description": "Заголовок первого столбца справа от гистограммы",
			"type": "string",
			"suggested": true
		},
		"right1": {
			"deprecated": true
		},
		"справа2": {
			"description": "Заголовок второго столбца справа от гистограммы",
			"type": "string",
			"suggested": true
		},
		"right2": {
			"deprecated": true
		},
		"цвет фона": {
			"default": "белый",
			"suggested": true
		},
		"background-color": {
			"deprecated": true
		},
		"стиль": {
			"description": "Любые дополнительные стили, при необходимости.",
			"type": "string",
			"suggested": true
		},
		"style": {},
		"заголовок": {
			"description": "\tТекст заголовка.",
			"type": "string",
			"suggested": true
		},
		"title": {
			"deprecated": true
		},
		"цвет заголовка": {
			"description": "Цвет заголовка.",
			"example": " синий (#cfe3ff, #dcebff, #eaf3ff) или серый (#eaecf0, #f8f9fa)",
			"suggested": true
		},
		"titlebar": {},
		"строки": {
			"description": "Строки (полоски, прямоугольники) гистограммы.",
			"example": "{bar percent}}, {{bar pixel}}, {{bar stacked}}, {{Bar pixel relative}}",
			"type": "content",
			"required": true,
			"suggested": true
		},
		"bars": {
			"deprecated": true
		},
		"подпись": {
			"description": "Текст под гистограммой",
			"type": "string",
			"suggested": true
		},
		"caption": {
			"deprecated": true
		},
		"отступ подписи": {
			"description": "Для задания отступа подписи. Можно использовать все совместимые с padding варианты.",
			"default": ".5em .4em.",
			"suggested": true
		},
		"caption padding": {
			"deprecated": true
		}
	},
	"paramOrder": [
		"расположение",
		"толщина рамки",
		"отступ",
		"ширина",
		"ширина полосок",
		"слева1",
		"слева2",
		"справа1",
		"справа2",
		"цвет фона",
		"заголовок",
		"цвет заголовка",
		"строки",
		"стиль",
		"подпись",
		"отступ подписи",
		"padding",
		"float",
		"width",
		"background-color",
		"barwidth",
		"border_width",
		"style",
		"title",
		"left1",
		"left2",
		"right1",
		"right2",
		"titlebar",
		"bars",
		"caption",
		"caption padding"
	],
	"format": "block",
	"description": "Шаблон для построения горизонтальных гистограмм."
}
</templatedata>