Dashboards, layout
Layout is defined in the script. Placement syntax and StyleCode are separate language features that determine where tiles land and how they are rendered.
Table of contents
Placement blocks and grids
Tiles can be placed on the dashboard grid or on a named region grid. The
placement syntax appears in the block attached to a show statement, and it
can share those braces with StyleCode declarations. It uses
left..right, top..bottom in grid, and one axis may use first(n) to request
the first available span of size n. The in dash part is optional.
Dashboard grid (12 columns wide, rows grow downward)
Columns: 1 2 3 4 5 6 7 8 9 10 11 12
Rows:
1 [ A A A A | B B B B | C C C C ]
2 [ A A A A | B B B B | C C C C ]
3 [ A A A A | . . . . | . . . . ]
4 [ A A A A | D D D D D D D D D ]
5 [ A A A A | D D D D D D D D D ]
A: { 1..4, 1..5 } B: { 5..8, 1..2 } C: { 9..12, 1..2 }
D: { 5..12, 4..5 }
table A = with
[| as Label, as Value |]
[| "A1", 8 |]
[| "A2", 5 |]
[| "A3", 3 |]
table B = with
[| as Label, as Value |]
[| "B1", 6 |]
[| "B2", 4 |]
table C = with
[| as Label, as Value |]
[| "C1", 5 |]
[| "C2", 3 |]
table D = with
[| as Label, as Value |]
[| "D1", 7 |]
[| "D2", 6 |]
[| "D3", 4 |]
show table "A" { 1..4, 1..5; tileColor: "blue/900" } with
A.Label
A.Value
show table "B" { 5..8, 1..2; tileColor: "emerald/900" } with
B.Label
B.Value
show table "C" { 9..12, 1..2; tileColor: "amber/800" } with
C.Label
C.Value
show table "D" { 5..12, 4..5; tileColor: "rose/900" } with
D.Label
D.Value
The canonical placement reference is show, while region covers named grids and special regions. The older language-level discussion remains in positioning.
Regions as layout containers
show region defines secondary grids. Regions can have headers and footers, can be set to nocard, and can use the special top and bottom regions. See region for the full rules and examples.
Region grid (columns/rows reset inside a region)
overview = show region { 1..6, 1..8 }
Region "overview" grid:
Columns: 1 2 3 4 5 6
Rows:
1 [ X X X X X X ]
2 [ X X X X X X ]
3 [ . . . . . . ]
4 [ Y Y Y Y Y Y ]
5 [ Y Y Y Y Y Y ]
X: { .., ..2 in overview } Y: { .., 4..5 in overview }
overview = show region { 1..6, 1..8 nocard }
table X = with
[| as Label, as Value |]
[| "X1", 9 |]
[| "X2", 5 |]
[| "X3", 3 |]
table Y = with
[| as Label, as Value |]
[| "Y1", 8 |]
[| "Y2", 6 |]
[| "Y3", 4 |]
show table "X" { .., ..2 in overview; tileColor: "indigo/900" } with
X.Label
X.Value
show table "Y" { .., 4..5 in overview; tileColor: "teal/900" } with
Y.Label
Y.Value
StyleCode drives presentation
StyleCode is the CSS-like sub-language used to style tiles and their elements. It is part of the script and can be data-driven through #(expr) and #[expr] injections. See stylecode for syntax and the element/property inventory.