Grid sizing

Widget sizing is described in cols on the dashboard grid. There is no xs / S / M / L notion anywhere — neither in props, names, stories, nor comments.

Canonical sizes

There are 15 canonical widget sizes, written <rows>x<cols>:

1 row : 1x1 · 1x2 · 1x3 · 1x4 · 1x6 · 1x8
2 rows: 2x2 · 2x3 · 2x4 · 2x6 · 2x8
3 rows: 3x3 · 3x4 · 3x6 · 3x8

The type is exported as RoWidgetSize.

Base units

Constant	Value	Meaning
RO_WIDGET_ROW_HEIGHT_PX	176	Height of one grid row.
RO_WIDGET_COL_WIDTH_PX	193	Minimum width of one grid column.
RO_WIDGET_GUTTER_PX	16	Gap between adjacent widgets in the host grid.

Slot dimensions:

width  = cols x COL_WIDTH + (cols - 1) x GUTTER
height = rows x ROW_HEIGHT

Heights are pure multiples of ROW_HEIGHT (1 row -> 176, 2 rows -> 352, 3 rows -> 528). Width is a minimum — the host layout may stretch a slot wider when columns flex.

Exported helpers

Export	Meaning
RO_WIDGET_GRID_PX	Record<RoWidgetSize, RoWidgetSlotDimensions> — { width, height, rows, cols } per slot.
RO_WIDGET_CELL_PX	The 1x1 slot footprint (smallest cell).
toRingoWidgetSize(cols, rows)	Maps a host grid (cols, rows) to the canonical RoWidgetSize.
RoWidgetSize (type)	Union of the 15 canonical slots.
RoWidgetSlotDimensions (type)	{ width, height, rows, cols }.

Usage

import { RO_WIDGET_GRID_PX, toRingoWidgetSize, type RoWidgetSize } from '@ringover/ringo-charts'

const slot: RoWidgetSize = '2x4'
const { width, height } = RO_WIDGET_GRID_PX[slot] // { width: 820, height: 352, rows: 2, cols: 4 }

const fromHostGrid = toRingoWidgetSize(4, 2) // '2x4'

All of these are re-exported from the package entry (packages/ringo-charts/src/index.ts).