AML CanvasLayout

CanvasLayout is the value for the view parameter in a Dashboard. It defines the canvas dimensions and positions each block using pixel coordinates.

Dashboard my_dashboard {
  // ... blocks ...

  view: CanvasLayout {
    label: 'View 1'
    width: 1080
    height: 620
    block v1 { position: pos(0, 0, 540, 300) }
    block v2 { position: pos(540, 0, 540, 300) }
  }
}

Parameters

Parameter	Description
label	Display name for this view. Shown as a tab label when multiple views exist.
width	Canvas width in pixels.
height	Canvas height in pixels.
margin	Optional margin around the canvas edge in pixels.
grid_size	Optional grid snap size in pixels for alignment.

Block positioning

Each block declared in the dashboard must be positioned inside CanvasLayout using pos(left, top, width, height) (all values in pixels, measured from the top-left corner of the canvas).

block v1 { position: pos(left, top, width, height) }

Parameter	Description
left	Horizontal offset from the left edge of the canvas.
top	Vertical offset from the top edge of the canvas.
width	Block width.
height	Block height.

Mobile layout

CanvasLayout supports an optional mobile block that controls how the dashboard renders on small screens. Mobile view stacks blocks in a single column.

Parameter	Description
mode	'auto' (default) mirrors the desktop order, 'manual' lets you specify a custom order and sizes, 'none' disables mobile adjustments.

In manual mode, list the blocks in the order they should appear on mobile. Each block entry can override height or aspect_ratio.

view: CanvasLayout {
  width: 1080
  height: 800
  block f1 { position: pos(0, 0, 300, 60) }
  block v1 { position: pos(0, 70, 540, 300) }
  block v2 { position: pos(540, 70, 540, 300) }

  mobile: {
    mode: 'manual'
    block f1             // filter first
    block v1 {
      aspect_ratio: '16 / 9'
    }
    block v2 {
      height: 250
    }
  }
}

In auto mode (the default), Holistics arranges blocks left-to-right, top-to-bottom based on their desktop positions. No extra configuration is needed.

See also

• AML Dashboard: full dashboard syntax including interactions and settings
• Mobile responsiveness: guide with visual examples of mobile modes