Dashboards, layout
Layout is defined in the script. Placement syntax and StyleCode blocks are 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 inside the StyleCode block and uses left..right, top..bottom in grid. 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 grid rules and constraints are documented 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.