local p = {}
function p.stackedrect(frame)
    local width = frame.args.width or ''
    local height = frame.args.height or ''
    local fontcolor = frame.args.fontcolor or '50%'

    local html = mw.html.create()
    local container = html:tag('div')
    container:css('width', width .. 'px')
    container:css('height', height .. 'px')
    container:css('display', 'flex')
    container:css('justify-content', 'space-between')
    container:css('align-items', 'flex-end')
    container:css('color', fontcolor)

    local maxY = 0
    local bars = {}
    local i = 1
    while frame.args['y' .. i] do
        local yValues = mw.text.split(frame.args['y' .. i], ',')
        local dataSize = #yValues
        for j = 1, dataSize do
            local yValue = tonumber(yValues[j]) or 0
            maxY = math.max(maxY, yValue)
        end
        bars[i] = { y = yValues, colors = mw.text.split(frame.args.colors, ',')[i] or '' }
        i = i + 1
    end

    for i, barData in ipairs(bars) do
        local yValues = barData.y
        local dataSize = #yValues
        for j = 1, dataSize do
            local bar = container:tag('div')
            bar:css('min-width', '30px')
            bar:css('margin', '.1em')
            bar:css('height', (yValues[j] * 100 / maxY) .. '%')
            bar:css('background', barData.colors)
            local text = mw.html.create('span')
            text:wikitext(yValues[j])
            bar:wikitext(tostring(text))
        end
    end

    return tostring(html)
end
return p