Модуль:Chart
Перейти к навигации
Перейти к поиску
Скопировано с модуля англовики en:Module:Chart.
Модуль для показа в статьях гистограмм и круговых диаграмм.
Гистограммы
Гистогра́мма (от др.-греч. ἱστός— столб + γράμμα — черта, буква, написание) — способ графического представления табличных данных, где количественные соотношения представлены в виде прямоугольников.
Известна также как линейчатая диаграмма (в документации Microsoft Office) и столбиковая диаграмма (в финансово-экономических изданиях), англ. bar chart.
Выводится командой {{ #invoke:Chart | bar chart | параметры ...}}
Параметры
| параметр | назначение |
|---|---|
| delimiter | строка-разделитель нескольких значений в строке, по умолчанию двоеточие ( : ). Не следует без нужды переопределять значение по умолчанию. Однако если внутри самих значений встречается двоеточие, этот параметр окажется полезным. |
| width | ширина гистограммы в пикселях без "px", по умолчанию 500. Минимальное допустимое значение 200. |
| height | высота гистограммы в пикселях без "px", по умолчанию 350. Минимальное допустимое значение 200. |
| group n | (где "n" число — от "group 1" до количества групп на гистограмме) значения для показа, см. ниже. |
| tooltip n | всплывающая подсказка для отдельного столбика. Если для столбика не задана подсказка, но тот является ссылкой, ссылка будет использована как подсказка. Если и ссылки нет, по подсказка будет создана комбинацией названия группы и значения с "units prefix" и "units suffix", если заданы. |
| links n | ссылки на статьи для отдельных столбиковr |
| stack | группировать или нет группы поверх друг друга (гистограмма с группировкой). Любое непустое значение равно "да". Для "нет" просто не указывайте этот параметр или оставьте его значение пустым. |
| tooltip value accumulation | имеет смысл только при включённом stack выше. Если "да", всплывающая подсказка показывает общее значение всех блоков до текущего включительно. |
| colors | цвета для различных групп. Должно быть ровно столько значений, сколько самих групп. Может быть одно из стандартных названий или в формате RGB, например, #C0C0C0.
|
| x legends | Легенды для значений, помещаемые под осью X. Можно использовать вики-разметку, например, внутренние ссылки или шаблоны. |
| hide group legends | если "да", легенды не выводятся. |
| scale per group | отдельные оси Y для каждой группы. Рекомендуется оставить пустым и использовать единную ось для всей гистограммы. Несовместимо с режимом "stack". |
| units prefix | "префикс" значений для всплывающей подсказки, например, $, чтобы значение "500" показывалось как "$500". |
| units suffix | "суффикс" значений для всплывающей подсказки, например, ms, чтобы значение "500" показывалось как "500ms". Знак подчёркивания заменяется пробелом: чтобы задать суффикс % через пробел, используйте _% |
| group names | названия групп |
Примеры
Базовый пример
{{ #invoke:Chart | bar chart
| group names = Яблоки : Бананы : Апельсины
| colors = green : yellow : orange
| group 1 = 40 : 50 : 60 <!-- комментарий: Яблоки -->
| group 2 = 20 : 60 : 12 <!-- комментарий: Бананы -->
| group 3 = 55 : 14 : 33 <!-- комментарий: Апельсины -->
| units suffix = _кг
| x legends = Перед : В течение : После
}}
10
20
30
40
50
60
70
Перед
В течение
После
- Яблоки
- Бананы
- Апельсины
Гистограмма с накоплением
Та же гистограмма с накоплением (англ. stacked column chart):
{{ #invoke:Chart | bar chart
| group names = Яблоки : Бананы : Апельсины
| colors = green : yellow : orange
| group 1 = 40 : 50 : 60
| group 2 = 20 : 60 : 12
| group 3 = 55 : 14 : 33
| units suffix = _кг
| x legends = Перед : В течение : После
| stack = yes <!-- комментарий: on, 1, true, любое непустое значение -->
}}
25
50
75
100
125
150
Перед
В течение
После
- Яблоки
- Бананы
- Апельсины
Гистограмма с накоплением и с большим количеством групп
Приводится более для демонстрации возможностей программы и показа, как такая гистограмма будет выглядеть на странице.
{{ #invoke:Chart | bar chart
| width = 800
| height = 550
| group 1 = 1:2:3:4:5:4:3:2:1
| group 2 = 1:2:3:4:5:4:3:2:1
| group 3 = 1:2:3:4:5:4:3:2:1
| group 4 = 1:2:3:4:5:4:3:2:1
| group 5 = 1:2:3:4:5:4:3:2:1
| group 6 = 1:2:3:4:5:4:3:2:1
| group 7 = 1:2:3:4:5:4:3:2:1
| group 8 = 1:2:3:4:5:4:3:2:1
| group 9 = 1:2:3:4:5:4:3:2:1
| group 10 = 1:2:3:4:5:4:3:2:1
| group 11 = 1:2:3:4:5:4:3:2:1
| group 12 = 1:2:3:4:5:4:3:2:1
| group 13 = 1:2:3:4:5:4:3:2:1
| group 14 = 1:2:3:4:5:4:3:2:1
| group 15 = 1:2:3:4:5:4:3:2:1
| group 16 = 1:2:3:4:5:4:3:2:1
| group 17 = 1:2:3:4:5:4:3:2:1
| group 18 = 1:2:3:4:5:4:3:2:1
| group 19 = 1:2:3:4:5:4:3:2:1
| group 20 = 1:2:3:4:5:4:3:2:1
| group 21 = 1:2:3:4:5:4:3:2:1
| colors = Silver:Gray:Black:Red:Maroon:Yellow:Olive:Lime:Green:Aqua:Teal:Blue:Navy:Fuchsia:Purple:ForestGreen:Tomato:LightSeaGreen:RosyBrown:DarkOliveGreen:MediumVioletRed
| group names = Алабама:Аляска:Аризона:Арканзас:Калифорния:Колорадо:Коннектикут:Делавэр:Флорида:Джорджия: Гавайи:Айдахо:Иллинойс:Индиана:Айова:Канзас:Кентукки:Луизиана:Мэн:Мериленд:Массачусетс
| x legends = 1920 : 1930 : 1940: 1950 : 1960 : 1970 : 1990 : 2000 : 2010
| units prefix = $
| units suffix = _млрд
| stack = 1
}}
25
50
75
100
125
150
1920
1930
1940
1950
1960
1970
1990
2000
2010
- Алабама
- Аляска
- Аризона
- Арканзас
- Калифорния
- Колорадо
- Коннектикут
- Делавэр
- Флорида
- Джорджия
- Гавайи
- Айдахо
- Иллинойс
- Индиана
- Айова
- Канзас
- Кентукки
- Луизиана
- Мэн
- Мериленд
- Массачусетс
Отдельные оси Y для каждой группы
Можно показывать каждую группу с отдельной осью Y и со своей единицей измерения. Обратите внимание, что нам не нужен units prefix для первых двух групп, поэтому ставится двоеточие без значения за ним. Можно писать и без пробелов: ::$ вместо : : $. Также задана отдельная всплывающая подсказка для "Автомобили" за 1965 год.
{{ #invoke:Chart | bar chart
| width = 800
| group 1 = 1500000 : 2500000 : 3500000
| group 2 = 200 : 5000 : 45000
| group 3 = 2000 : 5000 : 20000
| colors = red : blue : green
| group names = Население : Автомобили : Средняя стоимость
| x legends = 1920 : 1965 : 2002
| tooltip 2 = : За 1965 нет точных сведений о числе автомобилей. Указано 5000 как наилучшее приближение.
| units prefix = : : $
| scale per group = 1
}}
1 000 000
2 000 000
3 000 000
4 000 000
10 000
20 000
30 000
40 000
50 000
5000
10 000
15 000
20 000
25 000
30 000
1920
1965
2002
- Население
- Автомобили
- Средняя стоимость
Пропуск меток по оси X
Если значение много, можно визуально разгрузить ось X, оставив только базовые метки.
{{ #invoke:Chart | bar chart
| group 1 = 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30
:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:47:48:49:50:51:52:53:54:55:56:57:58:59
| units suffix = _млн
| group names = Нечто
| x legends = ::::1940::::::::::1950::::::::::1960::::::::::1970::::::::::1980::::::::::1990::::
}}
10
20
30
40
50
60
1940
1950
1960
1970
1980
1990
Круговые диаграммы
Круговая диаграмма — диаграмма, где относительная величина каждого значения изображается в виде сектора круга, площадь которого соответствует вкладу этого значения в сумму значений.
Известна также как секторная диаграмма, англ. pie chart.
Параметры
| параметр | назначение |
|---|---|
| delimiter | строка-разделитель нескольких значений в строке, по умолчанию двоеточие ( : ). Не следует без нужды переопределять значение по умолчанию. Однако если внутри самих значений встречается двоеточие, этот параметр окажется полезным. |
| radius | радиус диаграммы в пикселях без "px". Соответственно, общая ширина диаграммы будет равна radius × 2. |
| slices | группы данных для секторов ("слайсов") в круглых скобках. Данные разделяются двоеточием, сами группы пробелами. Самые крутые :-) могут называть такие группы корте́жами (англ. tuples). Формат записи:( Value1 : Name1 : Color1 : Link1 ) ( Value2 : Name2 : Color2 : Link2 ) ...Value задаются числами. Числа могут быть целыми, с дробной частью в десятичном формате, в экспоненциальной записи: при этом дробная часть отделяется точкой, а не запятой. Форматы 7.24e6, 7240000.00 или 7240000.00 равно приемлемы и задают то же значение 7 миллионов 240 тысяч.Name (названия секторов) задаются строками.Colors необязателен. Для первых 26 секторов задана последовательность цветов, при которой соседние сектора не сливаются. Для 27 сектора и далее, если такое понадобится, нужно будет вручную указать цвета. Однако можно переопределять цвета для любого сектора: одним из стандартных названий или в формате RGB, например, #C0C0C0.Link могут быть внешними или внутренними ссылками, включая ссылки на якоря/разделы в той же статье, где помещена диаграмма. Например:[[Статья|Подсказка]] для внутренней ссылки, [[#Раздел|Подсказка]] для раздела в той же статье или [http://example.org Подсказка] для внешней ссылки.
|
| slice n | альтернативный способ задания секторов. n задаёт номер сектора, начиная с 1. Пропуск в нумерации недопустим, если задано "slice 1", "slice 2", "slice 4", "slice 5"... с пропуском slice 3, будут показаны только первые два сектора. Этот способ несовместим со "slices", оба способа одновременно использовать нельзя, это ведёт к непредсказуемым результатам. В целом это те же кортежи из раздела чуть выше, но без скобок:
| slice 1 = Value1 : Name1 : Color1 : Link1 | slice 2 = Value2 : Name2 : Color2 : Link2 | ... Такой формат позволяет использовать скобки в названиях, ссылках и цветах. |
| percent | если включено, будет подсчитан и показан процент каждого сегмента от общего значения. Если, например, есть два сектора с числом людей ( 1 : Подростки ) ( 3 : Пожилые ) и включён "percent", легенда к диаграмме станет "Подростки: 1 (25%)" и "Пожилые: 3 (75%)" вместо просто "Подростки: 1" and "Пожилые: 3". Любое непустое значение равно "да". Для "нет" просто не указывайте этот параметр или оставьте его значение пустым. |
| units prefix | "префикс" значений для всплывающей подсказки, например, $, чтобы значение "500" показывалось как "$500". |
| units suffix | "суффикс" значений для всплывающей подсказки, например, ms, чтобы значение "500" показывалось как "500ms". Знак подчёркивания заменяется пробелом: чтобы задать суффикс % через пробел, используйте _% |
| hide group legends | если включено, легенда к диаграмме не выводится. Любое непустое значение равно "да". Для "нет" просто не указывайте этот параметр или оставьте его значение пустым. |
Примеры
{{#invoke:Chart|pie chart
| radius = 150
| slices =
( 1000000 : Яблоки )
( 2000000 : Бананы )
( 3000000 : Абрикосы )
| units suffix = _т
| percent = true
}}
- Яблоки: 1 000 000 т (16.7%)
- Бананы: 2 000 000 т (33.3%)
- Абрикосы: 3 000 000 т (50.0%)
Ширина и расположение на странице
Ширина задаётся параметром width (гистограммы) или удвоенным значением radius (круговые диаграммы). При слишком маленьких размерах возможны искажения и налезание меток друг на друга.
В текущей версии позиционирование на странице не предусмотрено, точнее, оно всегда по левому краю страницы с началом нового блока перед и после. Для размещения по правому краю можно использовать "обёртку" из элемента DIV. Например, гистограмма из примеров выше шириной 450px с выравниванием по правому краю и обтеканием текстом:
<div style="float:right;">{{ #invoke:Chart | bar chart
| width = 450
| group 1 = 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30
:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:47:48:49:50:51:52:53:54:55:56:57:58:59
| units suffix = _млн
| group names = Нечто
| x legends = ::::1940::::::::::1950::::::::::1960::::::::::1970::::::::::1980::::::::::1990::::
}}</div>
10
20
30
40
50
60
1940
1950
1960
1970
1980
1990
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum euismod massa pharetra consequat. Suspendisse volutpat ultrices turpis. Ut ultricies semper justo, at gravida felis. Phasellus non mi eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum sapien massa, placerat a sollicitudin sed, molestie et mauris. Pellentesque a tempus ante, ac posuere lacus. Donec pulvinar auctor urna at tristique.
Vestibulum dolor sapien, suscipit sit amet justo in, porttitor lacinia est. Maecenas commodo, turpis vel maximus vehicula, sapien urna molestie felis, at bibendum orci nibh at libero. Fusce elementum, diam sollicitudin porttitor finibus, dui nunc egestas diam, eget accumsan erat nunc quis leo. Duis sit amet sem non nisi hendrerit cursus. In hac habitasse platea dictumst. Aliquam varius convallis mi nec porttitor. Vestibulum sed consequat purus. Cras malesuada mollis mauris, non rutrum tellus rutrum ac. Curabitur sed lacinia dolor. Vivamus a dui vitae metus vestibulum lobortis. Ut condimentum vitae nunc elementum porta.
Cras accumsan dictum massa, quis semper ante dictum eu. Quisque quis finibus elit, in consectetur lorem. Aenean condimentum libero eget sapien rhoncus faucibus. Vivamus quis lorem sed ante finibus volutpat in eu dolor. Sed hendrerit lectus purus, nec scelerisque odio porttitor vel. Sed eget lectus ut nibh convallis sollicitudin non ac nibh. Donec eu ultrices justo. Phasellus id tincidunt nulla. Proin sagittis arcu sit amet nibh convallis dictum rhoncus sed nibh. Mauris maximus dolor diam, nec molestie libero sodales et.
Та же диаграмма по центру страницы в чёрной рамке с отступами 5px от самой диаграммы. Обратите внимание, что задавать ширину здесь нужно и в DIV (с "px"), и в диаграмме (без "px"):
<div style="width:450px; margin:0 auto; padding:5px; border:1px solid black;">{{ #invoke:Chart | bar chart
| width=450
| group 1 = 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30
:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:47:48:49:50:51:52:53:54:55:56:57:58:59
| units suffix = _млн
| group names = Нечто
| x legends = ::::1940::::::::::1950::::::::::1960::::::::::1970::::::::::1980::::::::::1990::::
}}</div>
10
20
30
40
50
60
1940
1950
1960
1970
1980
1990
--<source lang=lua>
--[[
keywords are used for languages: they are the names of the actual
parameters of the template
]]
local keywords = {
barChart = 'bar chart',
pieChart = 'pie chart',
width = 'width',
height = 'height',
stack = 'stack',
colors = 'colors',
group = 'group',
xlegend = 'x legends',
tooltip = 'tooltip',
links = 'links',
defcolor = 'default color',
scalePerGroup = 'scale per group',
unitsPrefix = 'units prefix',
unitsSuffix = 'units suffix',
groupNames = 'group names',
hideGroupLegends = 'hide group legends',
slices = 'slices',
slice = 'slice',
radius = 'radius',
percent = 'percent',
} -- here is what you want to translate
local defColors = {'red','red',
'blue','blue',
'green','green',
'yellow','yellow',
'fuchsia','fuchsia',
'aqua','aqua',
'brown','brown',
'orange','orange',
'purple','purple',
'sienna','sienna',
'amethyst','#F0A3FF',
'ebony','#191919',
'forest','#005C31',
'honeydew','#FFCC99',
'iron','#808080',
'khaki','#8F7C00',
'lime','#9DCC00',
'navy','#003380',
'pink','#FFA8BB',
'quagmire','#426600',
'sky','#5EF1F2',
'turquoise','#00998F',
'uranium','#E0FF66',
'violet','#740AFF',
'xanthin','#FFFF80',
'zinnia','#FF5005'}
local hideGroupLegends;
local function nulOrWhitespace( s )
return not s or mw.text.trim( s ) == ''
end
local function createGroupList( tab, legends, cols )
if #legends > 1 then
table.insert( tab, mw.text.tag( 'div' ) )
local list = {}
local spanStyle = "padding:0 1em;background-color:%s;margin-right:1em;"
for gi = 1, #legends do
local span = mw.text.tag( 'span', { style = string.format( spanStyle, cols[gi] ) }, ' ' ) .. ' '.. legends[gi]
table.insert( list, mw.text.tag( 'li', {}, span ) )
end
table.insert( tab,
mw.text.tag( 'ul',
{style="width:100%;list-style:none;-webkit-column-width:12em;-moz-column-width:12em;column-width:12em;"},
table.concat( list, '\n' )
)
)
table.insert( tab, '</div>' )
end
end
function pieChart( frame )
local res, imslices, args = {}, {}, frame.args
local radius
local values, colors, names, legends, links = {}, {}, {}, {}, {}
local delimiter = args.delimiter or ':'
local lang = mw.getContentLanguage()
function getArg( s, def, subst, with )
local result = args[keywords[s]] or def or ''
if subst and with then result = mw.ustring.gsub( result, subst, with ) end
return result
end
function analyzeParams()
function addSlice( i, slice )
local value, name, color, link = unpack( mw.text.split( slice, '%s*' .. delimiter .. '%s*' ) )
values[i] = tonumber( lang:parseFormattedNumber( value ) )
or error( string.format( 'Slice %d: "%s", first item("%s") could not be parsed as a number', i, value or '', sliceStr ) )
colors[i] = not nulOrWhitespace( color ) and color or defColors[i * 2]
names[i] = name or ''
links[i] = link
end
radius = getArg( 'radius', 150 )
hideGroupLegends = not nulOrWhitespace( args[keywords.hideGroupLegends] )
local slicesStr = getArg( 'slices' )
local prefix = getArg( 'unitsPrefix', '', '_', ' ' )
local suffix = getArg( 'unitsSuffix', '', '_', ' ' )
local percent = args[keywords.percent]
local sum = 0
local i, value = 0
for slice in mw.ustring.gmatch( slicesStr or '', "%b()" ) do
i = i + 1
addSlice( i, mw.ustring.match( slice, '^%(%s*(.-)%s*%)$' ) )
end
for k, v in pairs(args) do
local ind = mw.ustring.match( k, '^' .. keywords.slice .. '%s+(%d+)$' )
if ind then addSlice( tonumber( ind ), v ) end
end
for _, val in ipairs( values ) do sum = sum + val end
for i, value in ipairs( values ) do
local addprec = percent and string.format( ' (%0.1f%%)', value / sum * 100 ) or ''
legends[i] = mw.ustring.format( '%s: %s%s%s%s', names[i], prefix, lang:formatNum( value ), suffix, addprec )
links[i] = mw.text.trim( links[i] or mw.ustring.format( '[[#noSuchAnchor|%s]]', legends[i] ) )
end
end
function addRes( ... )
for _, v in pairs( { ... } ) do
table.insert( res, v )
end
end
function createImageMap()
addRes( '{{#tag:imagemap|', 'Image:Circle frame.svg{{!}}' .. ( radius * 2 ) .. 'px' )
addRes( unpack( imslices ) )
addRes( 'desc none', '}}' )
end
function drawSlice( i, q, start )
local color = colors[i]
local angle = start * 2 * math.pi
local sin, cos = math.abs( math.sin( angle ) ), math.abs( math.cos( angle ) )
local wsin, wcos = sin * radius, cos * radius
local s1, s2, w1, w2, w3, w4, width, border
local style
if q == 1 then
border = 'left'
w1, w2, w3, w4 = 0, 0, wsin, wcos
s1, s2 = 'bottom', 'left'
elseif q == 2 then
border = 'bottom'
w1, w2, w3, w4 = 0, wcos, wsin, 0
s1, s2 = 'bottom', 'right'
elseif q == 3 then
border = 'right'
w1, w2, w3, w4 = wsin, wcos, 0, 0
s1, s2 = 'top', 'right'
else
border = 'top'
w1, w2, w3, w4 = wsin, 0, 0, wcos
s1, s2 = 'top', 'left'
end
local style = string.format( 'position:absolute;%s:%spx;%s:%spx;width:%spx;height:%spx', s1, radius, s2, radius, radius, radius )
if start <= ( q - 1 ) * 0.25 then
style = string.format( '%s;border:0;background-color:%s', style, color )
else
style = string.format( '%s;border-width:%spx %spx %spx %spx;border-%s-color:%s', style, w1, w2, w3, w4, border, color )
end
addRes( mw.text.tag( 'div', { style = 'border: solid transparent;' .. style }, '' ) )
end
function createSlices()
function coordsOfAngle( angle )
return ( 100 + math.floor( 100 * math.cos( angle ) ) ) .. ' ' .. ( 100 - math.floor( 100 * math.sin( angle ) ) )
end
local sum, start = 0, 0
for _, value in ipairs( values ) do sum = sum + value end
for i, value in ipairs(values) do
local poly = { 'poly 100 100' }
local startC, endC = start / sum, ( start + value ) / sum
local startQ, endQ = math.floor( startC * 4 + 1 ), math.floor( endC * 4 + 1 )
for q = startQ, math.min( endQ, 4 ) do drawSlice( i, q, startC ) end
for angle = startC * 2 * math.pi, endC * 2 * math.pi, 0.02 do
table.insert( poly, coordsOfAngle( angle ) )
end
table.insert( poly, coordsOfAngle( endC * 2 * math.pi ) .. ' 100 100 ' .. links[i] )
table.insert( imslices, table.concat( poly, ' ' ) )
start = start + values[i]
end
end
analyzeParams()
if #values == 0 then error( "no slices found - can't draw pie chart" ) end
addRes( mw.text.tag( 'div', { style = string.format( "max-width:%spx", radius * 2 ) } ) )
addRes( mw.text.tag( 'div', { style = string.format( 'position:relative;min-width:%spx;min-height:%spx;max-width:%spx;overflow:hidden;', radius * 2, radius * 2, radius * 2 ) } ) )
createSlices()
addRes( mw.text.tag( 'div', { style = string.format( 'position:absolute;min-width:%spx;min-height:%spx;overflow:hidden;', radius * 2, radius * 2 ) } ) )
createImageMap()
addRes( '</div>' ) -- close "position:relative" div that contains slices and imagemap.
addRes( '</div>' ) -- close "position:relative" div that contains slices and imagemap.
if not hideGroupLegends then
createGroupList( res, legends, colors ) -- legends
end
addRes( '</div>' ) -- close containing div
return frame:preprocess( table.concat( res, '\n' ) )
end
function barChart( frame )
local res = {}
local args = frame.args -- can be changed to frame:getParent().args
local values, xlegends, colors, tooltips, yscales = {}, {}, {}, {} ,{}, {}, {}
local groupNames, unitsSuffix, unitsPrefix, links = {}, {}, {}, {}
local width, height, stack, delimiter = 500, 350, false, ':'
local chartWidth, chartHeight, defcolor, scalePerGroup
local numGroups, numValues
local scaleWidth
function validate()
function asGroups( name, tab, toDuplicate, emptyOK )
if #tab == 0 and not emptyOK then
error( "must supply values for " .. keywords[name] )
end
if #tab == 1 and toDuplicate then
for i = 2, numGroups do tab[i] = tab[1] end
end
if #tab > 0 and #tab ~= numGroups then
error ( keywords[name] .. ' should contain the same number of items as the number of groups (' .. numGroups .. ')')
end
end
-- do all sorts of validation here, so we can assume all params are good from now on.
-- among other things, replace numerical values with mw.language:parseFormattedNumber() result
chartHeight = height - 50
numGroups = #values
numValues = #values[1]
defcolor = defcolor or 'blue'
colors[1] = colors[1] or defcolor
scaleWidth = scalePerGroup and 80 * numGroups or 100
chartWidth = width -scaleWidth
asGroups( 'unitsPrefix', unitsPrefix, true, true )
asGroups( 'unitsSuffix', unitsSuffix, true, true )
asGroups( 'colors', colors, true, true )
asGroups( 'groupNames', groupNames, false, false )
if stack and scalePerGroup then
error( string.format( 'Illegal settings: %s and %s are incompatible.', keyword.stack, keyword.scalePerGroup ) )
end
for gi = 2, numGroups do
if #values[gi] ~= numValues then error( keywords.group .. " " .. gi .. " does not have same number of values as " .. keywords.group .. " 1" ) end
end
if #xlegends ~= numValues then error( 'Illegal number of ' .. keywords.xlegend .. '. Should be exatly ' .. numValues ) end
end
function extractParams()
function testone( keyword, key, val, tab )
i = keyword == key and 0 or key:match( keyword .. "%s+(%d+)" )
if not i then return end
i = tonumber( i ) or error("Expect numerical index for key " .. keyword .. " instead of '" .. key .. "'")
if i > 0 then tab[i] = {} end
for s in mw.text.gsplit( val, '%s*' .. delimiter .. '%s*' ) do
table.insert( i == 0 and tab or tab[i], s )
end
return true
end
for k, v in pairs( args ) do
if k == keywords.width then
width = tonumber( v )
if not width or width < 200 then
error( 'Illegal width value (must be a number, and at least 200): ' .. v )
end
elseif k == keywords.height then
height = tonumber( v )
if not height or height < 200 then
error( 'Illegal height value (must be a number, and at least 200): ' .. v )
end
elseif k == keywords.stack then stack = true
elseif k == keywords.scalePerGroup then scalePerGroup = true
elseif k == keywords.defcolor then defcolor = v
elseif k == keywords.hideGroupLegends then hideGroupLegends = not nulOrWhitespace( v )
else
for keyword, tab in pairs( {
group = values,
xlegend = xlegends,
colors = colors,
tooltip = tooltips,
unitsPrefix = unitsPrefix,
unitsSuffix = unitsSuffix,
groupNames = groupNames,
links = links,
} ) do
if testone( keywords[keyword], k, v, tab )
then break
end
end
end
end
end
function roundup( x ) -- returns the next round number: eg., for 30 to 39.999 will return 40, for 3000 to 3999.99 wil return 4000. for 10 - 14.999 will return 15.
local ordermag = 10 ^ math.floor( math.log10( x ) )
local normalized = x / ordermag
local top = normalized >= 1.5 and ( math.floor( normalized + 1 ) ) or 1.5
return ordermag * top, top, ordermag
end
function calcHeightLimits() -- if limits were passed by user, use ithem, otherwise calculate. for "stack" there's only one limet.
if stack then
local sums = {}
for _, group in pairs( values ) do
for i, val in ipairs( group ) do sums[i] = ( sums[i] or 0 ) + val end
end
local sum = math.max( unpack( sums ) )
for i = 1, #values do yscales[i] = sum end
else
for i, group in ipairs( values ) do yscales[i] = math.max( unpack( group ) ) end
end
for i, scale in ipairs( yscales ) do yscales[i] = roundup( scale ) end
if not scalePerGroup then for i = 1, #values do yscales[i] = math.max( unpack( yscales ) ) end end
end
function tooltip( gi, i, val )
if tooltips and tooltips[gi] and not nulOrWhitespace( tooltips[gi][i] ) then return tooltips[gi][i], true end
local groupName = not nulOrWhitespace( groupNames[gi] ) and groupNames[gi] .. ': ' or ''
local prefix = unitsPrefix[gi] or unitsPrefix[1] or ''
local suffix = unitsSuffix[gi] or unitsSuffix[1] or ''
return mw.ustring.gsub(groupName .. prefix .. mw.getContentLanguage():formatNum( tonumber( val ) or 0 ) .. suffix, '_', ' '), false
end
function calcHeights( gi, i, val )
local barHeight = math.floor( val / yscales[gi] * chartHeight + 0.5 ) -- add half to make it "round" insstead of "trunc"
local top, base = chartHeight - barHeight, 0
if stack then
local rawbase = 0
for j = 1, gi - 1 do rawbase = rawbase + values[j][i] end -- sum the "i" value of all the groups below our group, gi.
base = math.floor( chartHeight * rawbase / yscales[gi] ) -- normally, and especially if it's "stack", all the yscales must be equal.
end
return barHeight, top - base
end
function groupBounds( i )
local setWidth = math.floor( chartWidth / numValues )
local setOffset = ( i - 1 ) * setWidth
return setOffset, setWidth
end
function calcx( gi, i )
local setOffset, setWidth = groupBounds( i )
if stack then
local barWidth = math.min( 38, math.floor( 0.8 * setWidth ) )
return setOffset + (setWidth - barWidth) / 2, barWidth
end
setWidth = 0.85 * setWidth
local barWidth = math.floor( 0.75 * setWidth / numGroups )
local left = setOffset + math.floor( ( gi - 1 ) / numGroups * setWidth )
return left, barWidth
end
function drawbar( gi, i, val )
local color, tooltip, custom = colors[gi] or defcolor or 'blue', tooltip( gi, i, val )
local left, barWidth = calcx( gi, i )
local barHeight, top = calcHeights( gi, i, val )
local style = string.format("position:absolute;left:%spx;top:%spx;height:%spx;min-width:%spx;max-width:%spx;background-color:%s;overflow:hidden;",
left, top, barHeight, barWidth, barWidth, color)
local link = links[gi] and links[gi][i] or ''
local img = not nulOrWhitespace( link ) and mw.ustring.format( '[[File:Transparent.png|1000px|link=%s|%s]]', link, custom and tooltip or '' ) or ''
table.insert( res, mw.text.tag( 'div', { style = style, title = tooltip, }, img ) )
end
function drawYScale()
function drawSingle( gi, color, width, single )
local yscale = yscales[gi]
local _, top, ordermag = roundup( yscale * 0.999 )
local numnotches = top <= 1.5 and top * 4
or top < 4 and top * 2
or top
local valStyleStr =
single and 'position:absolute;height=20px;text-align:right;vertical-align:middle;width:%spx;top:%spx;padding:0 2px'
or 'position:absolute;height=20px;text-align:right;vertical-align:middle;width:%spx;top:%spx;left:3px;background-color:%s;color:white;font-weight:bold;padding:0 2px'
local notchStyleStr = 'position:absolute;height=1px;min-width:5px;top:%spx;left:%spx;border:1px solid %s;'
for i = 1, numnotches do
local val = i / numnotches * yscale
local y = chartHeight - calcHeights( gi, 1, val )
local div = mw.text.tag( 'div', { style = string.format( valStyleStr, width - 10, y - 10, color ) }, mw.getContentLanguage():formatNum( tonumber( val ) or 0 ) )
table.insert( res, div )
div = mw.text.tag( 'div', { style = string.format( notchStyleStr, y, width - 4, color ) }, '' )
table.insert( res, div )
end
end
if scalePerGroup then
local colWidth = 80
local colStyle = "position:absolute;height:%spx;min-width:%spx;left:%spx;border-right:1px solid %s;color:%s"
for gi = 1, numGroups do
local left = ( gi - 1 ) * colWidth
local color = colors[gi] or defcolor
table.insert( res, mw.text.tag( 'div', { style = string.format( colStyle, chartHeight, colWidth, left, color, color ) } ) )
drawSingle( gi, color, colWidth )
table.insert( res, '</div>' )
end
else
drawSingle( 1, 'black', scaleWidth, true )
end
end
function drawXlegends()
local setOffset, setWidth
local legendDivStyleFormat = "position:absolute;left:%spx;top:10px;min-width:%spx;text-align:center;veritical-align:top;"
local tickDivstyleFormat = "position:absolute;left:%spx;height:10px;width:1px;border-left:1px solid black;"
for i = 1, numValues do
if not nulOrWhitespace( xlegends[i] ) then
setOffset, setWidth = groupBounds( i )
-- setWidth = 0.85 * setWidth
table.insert( res, mw.text.tag( 'div', { style = string.format( legendDivStyleFormat, setOffset - 5, setWidth - 10 ) }, xlegends[i] or '' ) )
table.insert( res, mw.text.tag( 'div', { style = string.format( tickDivstyleFormat, setOffset + setWidth / 2 ) }, '' ) )
end
end
end
function drawChart()
table.insert( res, mw.text.tag( 'div', { style = string.format( 'max-width:%spx;padding-top:10px;', width ) } ) )
table.insert( res, mw.text.tag( 'div', { style = string.format("position:relative;min-height:%spx;min-width:%spx;max-width:%spx;", height, width, width ) } ) )
table.insert( res, mw.text.tag( 'div', { style = string.format("position:relative;min-height:%spx;min-width:%spx;max-width:%spx;border-left:1px black solid;border-bottom:1px black solid;margin-left:%spx;", chartHeight, chartWidth, chartWidth, scaleWidth ) } ) )
for gi, group in pairs( values ) do
for i, val in ipairs( group ) do
drawbar( gi, i, val )
end
end
table.insert( res, '</div>' )
table.insert( res, mw.text.tag( 'div', { style = string.format("position:absolute;height:%spx;min-width:%spx;max-width:%spx;top:0px;left:0px;", chartHeight, scaleWidth, scaleWidth, scaleWidth ) } ) )
drawYScale()
table.insert( res, '</div>' )
table.insert( res, mw.text.tag( 'div', { style = string.format( "position:absolute;top:%spx;left:%spx;width:%spx;", chartHeight, scaleWidth, chartWidth ) } ) )
drawXlegends()
table.insert( res, '</div>' )
table.insert( res, '</div>' )
if not hideGroupLegends then
createGroupList( res, groupNames, colors )
end
table.insert( res, '</div>' )
end
extractParams()
validate()
calcHeightLimits()
drawChart()
return table.concat( res, "\n" )
end
return {
['bar-chart'] = barChart,
[keywords.barChart] = barChart,
[keywords.pieChart] = pieChart,
}
--</source>