Skip to content

feat(ratings): use new table #7160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Rathoz merged 12 commits into from
Mar 3, 2026
Merged

feat(ratings): use new table #7160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4d756cc
migrate to Table2
Eetwalt Feb 24, 2026
800b35c
cleanup
Eetwalt Feb 24, 2026
a0f7da3
opt-out striping so rankings own striping works
Eetwalt Feb 24, 2026
9f7bda1
small version
Eetwalt Feb 24, 2026
0e249bc
force override
Eetwalt Feb 25, 2026
584de3c
cleanup
Eetwalt Feb 25, 2026
c4ec148
bring back some colors
Eetwalt Feb 25, 2026
259c97b
gap for the footer div
Eetwalt Feb 25, 2026
2bf2258
fixes
Eetwalt Feb 25, 2026
252ef82
sizes and padding
Eetwalt Feb 25, 2026
de80d52
adjust logo sizing
Eetwalt Feb 25, 2026
c31e988
Merge branch 'main' into d2r-redesign
Eetwalt Mar 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
223 changes: 120 additions & 103 deletions lua/wikis/commons/Widget/Ratings/List.lua
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ local Class = Lua.import('Module:Class')
local Date = Lua.import('Module:Date/Ext')
local Flags = Lua.import('Module:Flags')
local Icon = Lua.import('Module:Icon')
local IconImage = Lua.import('Module:Widget/Image/Icon/Image')
local Logic = Lua.import('Module:Logic')
local MathUtil = Lua.import('Module:MathUtil')
local Operator = Lua.import('Module:Operator')
Expand All @@ -25,6 +26,8 @@ local Link = Lua.import('Module:Widget/Basic/Link')
local PlacementChange = Lua.import('Module:Widget/Standings/PlacementChange')
local RatingsStorageFactory = Lua.import('Module:Ratings/Storage/Factory')

local TableWidgets = Lua.import('Module:Widget/Table2/All')

---@class RatingsList: Widget
---@field _base Widget
---@operator call(table): RatingsList
Expand Down Expand Up @@ -95,23 +98,82 @@ function RatingsList:render()
}
local teams = getRankings(teamLimit)

local anyTeam = teams[1]
local lastDate = anyTeam.progression[#anyTeam.progression].date
local formattedDate = Date.toYmdInUtc(Date.parseIsoDate(lastDate))
Comment thread
Rathoz marked this conversation as resolved.

local columns = {
{ align = 'right' },
{ align = 'left' },
{ align = 'left' },
{ align = 'right' },
{ align = 'left' },
{ align = 'center' },
}

local title = HtmlWidgets.Div {
children = {
HtmlWidgets.Div {
children = {
HtmlWidgets.B { children = 'BETA' },
HtmlWidgets.Span { children = 'Last updated: ' .. formattedDate }
},
classes = { 'ranking-table__top-row-text' }
},
HtmlWidgets.Div {
children = {
HtmlWidgets.Span { children = 'Data provided by ' },
IconImage { imageLight = 'SAP_logo.svg', size = '90px' }
},
classes = { 'ranking-table__top-row-logo-container' }
}
},
classes = { 'ranking-table__top-row' },
}

local columnHeaderRow = TableWidgets.Row {
children = WidgetUtil.collect(
TableWidgets.CellHeader { attributes = { ['data-ranking-table-cell'] = 'rank' }, children = 'Rank' },
TableWidgets.CellHeader { attributes = { ['data-ranking-table-cell'] = 'change' }, children = '+/-' },
TableWidgets.CellHeader { attributes = { ['data-ranking-table-cell'] = 'team' }, children = 'Team' },
TableWidgets.CellHeader { attributes = { ['data-ranking-table-cell'] = 'rating' }, children = 'Points' },
TableWidgets.CellHeader { attributes = { ['data-ranking-table-cell'] = 'region' }, children = 'Region' },
showGraph and TableWidgets.CellHeader {
attributes = { ['data-ranking-table-cell'] = 'graph' },
children = Icon.makeIcon { iconName = 'chart' }
} or nil
),
}

local teamRows = Array.map(teams, function(team, index)
local uniqueId = index
local changeText = (not team.change and 'NEW') or PlacementChange { change = team.change }

local teamRow = WidgetUtil.collect(
HtmlWidgets.Td { attributes = { ['data-ranking-table-cell'] = 'rank' }, children = team.rank },
HtmlWidgets.Td { attributes = { ['data-ranking-table-cell'] = 'change' }, children = changeText },
HtmlWidgets.Td {
local rowClasses = {}
local isEven = team.rank % 2 == 0
if isEven then
table.insert(rowClasses, 'ranking-table__row--even')
end
if team.rank > 5 and isSmallerVersion then
table.insert(rowClasses, 'ranking-table__row--overfive')
end

local teamRowCells = WidgetUtil.collect(
TableWidgets.Cell { attributes = { ['data-ranking-table-cell'] = 'rank' }, children = team.rank },
TableWidgets.Cell { attributes = { ['data-ranking-table-cell'] = 'change' }, children = changeText },
TableWidgets.Cell {
attributes = { ['data-ranking-table-cell'] = 'team' },
children = OpponentDisplay.BlockOpponent { opponent = team.opponent, teamStyle = 'hybrid' }
},
HtmlWidgets.Td { attributes = { ['data-ranking-table-cell'] = 'rating' }, children = MathUtil.round(team.rating) },
HtmlWidgets.Td {
TableWidgets.Cell {
attributes = { ['data-ranking-table-cell'] = 'rating' },
children = MathUtil.round(team.rating)
},
TableWidgets.Cell {
attributes = { ['data-ranking-table-cell'] = 'region' },
children = Flags.Icon { flag = team.region } .. Flags.CountryName { flag = team.region }
},
showGraph and (HtmlWidgets.Td {
showGraph and TableWidgets.Cell {
attributes = {
class = 'ranking-table__toggle-graph-cell',
['data-ranking-table-cell'] = 'graph'
Expand All @@ -125,125 +187,80 @@ function RatingsList:render()
tabindex = '1'
},
children = Icon.makeIcon { iconName = 'expand' }
} }) or nil
} } or nil
)

local graphRow = showGraph and {
HtmlWidgets.Td {
attributes = {
colspan = '7',
['data-ranking-table-cell'] = 'graph'
},
children = HtmlWidgets.Div {
children = {
OpponentDisplay.InlineOpponent { opponent = team.opponent },
Logic.tryOrElseLog(
function() return makeTeamChart(team, teamLimit) end,
function() return 'Failed to make graph for team' end
)
local teamRow = TableWidgets.Row {
children = teamRowCells,
classes = rowClasses,
}

local graphRow = nil
if showGraph then
graphRow = TableWidgets.Row {
children = TableWidgets.Cell {
attributes = {
colspan = '6',
['data-ranking-table-cell'] = 'graph'
},
children = HtmlWidgets.Div {
children = {
OpponentDisplay.InlineOpponent { opponent = team.opponent },
Logic.tryOrElseLog(
function() return makeTeamChart(team, teamLimit) end,
function() return 'Failed to make graph for team' end
)
Comment thread
Eetwalt marked this conversation as resolved.
}
},
classes = { 'ranking-table__graph-row-container' }
}
}
} or nil

local isEven = team.rank % 2 == 0
local rowClasses = { 'ranking-table__row' }
if isEven then
table.insert(rowClasses, 'ranking-table__row--even')
end
if team.rank > 5 and isSmallerVersion then
table.insert(rowClasses, 'ranking-table__row--overfive')
end

return {
HtmlWidgets.Tr { children = teamRow, classes = rowClasses },
showGraph and HtmlWidgets.Tr {
children = graphRow,
},
classes = { 'ranking-table__graph-row d-none' },
attributes = {
['data-ranking-table'] = 'graph-row',
['aria-expanded'] = 'false',
['data-ranking-table-id'] = uniqueId
},
} or nil
}
end)

local anyTeam = teams[1]
local lastDate = anyTeam.progression[#anyTeam.progression].date
local formattedDate = Date.toYmdInUtc(Date.parseIsoDate(lastDate))
}
end

local tableHeader = HtmlWidgets.Tr {
children = HtmlWidgets.Th {
attributes = { colspan = '7' },
children = HtmlWidgets.Div {
children = {
HtmlWidgets.Div {
children = {
HtmlWidgets.B { children = 'BETA' },
HtmlWidgets.Span { children = 'Last updated: ' .. formattedDate }
},
classes = { 'ranking-table__top-row-text' }
},
HtmlWidgets.Div {
children = {
HtmlWidgets.Span { children = 'Data provided by ' },
HtmlWidgets.Div { children = '[[File:SAP_logo.svg|link=|SAP]]' }
},
classes = { 'ranking-table__top-row-logo-container' }
}
}
},
classes = { 'ranking-table__top-row' },
return {
teamRow,
graphRow
}
}
end)

local buttonDiv = HtmlWidgets.Div {
children = { 'See Rankings Page', Icon.makeIcon { iconName = 'goto' } },
classes = { 'ranking-table__footer-button' },
}

local tableFooter = HtmlWidgets.Tr {
children = HtmlWidgets.Th {
attributes = { colspan = '7' },
children = Link {
link = 'Portal:Rankings',
linktype = 'internal',
children = { buttonDiv },
},
classes = { 'ranking-table__footer-row' },
}
local footer = Link {
link = 'Portal:Rankings',
linktype = 'internal',
children = { buttonDiv },
}

return HtmlWidgets.Div {
attributes = {
['data-ranking-table'] = 'content',
},
children = WidgetUtil.collect(
HtmlWidgets.Table {
attributes = { ['data-ranking-table'] = 'table' },
classes = { 'ranking-table', isSmallerVersion and 'ranking-table--small' or nil },
children = WidgetUtil.collect(
tableHeader,
HtmlWidgets.Tr {
children = WidgetUtil.collect(
HtmlWidgets.Th { attributes = { ['data-ranking-table-cell'] = 'rank' }, children = 'Rank' },
HtmlWidgets.Th { attributes = { ['data-ranking-table-cell'] = 'change' }, children = '+/-' },
HtmlWidgets.Th { attributes = { ['data-ranking-table-cell'] = 'team' }, children = 'Team' },
HtmlWidgets.Th { attributes = { ['data-ranking-table-cell'] = 'rating' }, children = 'Points' },
HtmlWidgets.Th { attributes = { ['data-ranking-table-cell'] = 'region' }, children = 'Region' },
showGraph and HtmlWidgets.Th {
attributes = { ['data-ranking-table-cell'] = 'graph' },
children = Icon.makeIcon { iconName = 'chart' }
} or nil
),
classes = { 'ranking-table__header-row' },
},
Array.flatten(teamRows),
isSmallerVersion and tableFooter or nil
)
}
)
children = TableWidgets.Table {
columns = columns,
striped = false,
title = title,
footer = isSmallerVersion and footer or nil,
classes = { isSmallerVersion and 'ranking-table--small' or nil },
tableAttributes = { ['data-ranking-table'] = 'table' },
tableClasses = { 'ranking-table' },
children = WidgetUtil.collect(
TableWidgets.TableHeader {
children = { columnHeaderRow }
},
TableWidgets.TableBody {
children = Array.flatten(teamRows)
}
)
}
}
end

Expand Down
11 changes: 10 additions & 1 deletion lua/wikis/commons/Widget/Table2/Table.lua
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ local Table2Contexts = Lua.import('Module:Widget/Contexts/Table2')
---@field children Renderable[]?
---@field variant 'generic'|'themed'?
---@field sortable (string|number|boolean)?
---@field striped (string|number|boolean)?
---@field caption Widget|Html|string|number?
---@field title Widget|Html|string|number?
---@field footer Widget|Html|string|number?
Expand All @@ -51,6 +52,7 @@ local Table2 = Class.new(Widget)
Table2.defaultProps = {
variant = 'generic',
sortable = false,
striped = true,
classes = {},
columns = {},
}
Expand Down Expand Up @@ -89,7 +91,14 @@ function Table2:render()
if props.columns and #props.columns > 0 then
tableChildren = {Table2Contexts.ColumnContext{
value = props.columns,
children = props.children,
children = tableChildren,
}}
end

if Logic.readBool(props.striped) then
tableChildren = {Table2Contexts.BodyStripe{
value = true,
children = tableChildren,
}}
end

Expand Down
8 changes: 8 additions & 0 deletions lua/wikis/commons/Widget/Table2/TableBody.lua
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,14 @@ function Table2Body:render()
local props = self.props
local children = props.children or {}

local stripeEnabled = self:useContext(Table2Contexts.BodyStripe)
if stripeEnabled == nil then
return Table2Contexts.Section{
value = 'body',
children = children,
}
end

local stripedChildren = {}
local stripe = 'even'
local groupRemaining = 0
Expand Down
Loading
Loading