Item

The Item houses a single chart, table, markdown, or input object — or a list of nested rows.

It also informs the width that the chart, table, markdown, or row-container should occupy within a row. Widths are evaluated for each item in a row relative to all of the other items in the row.

In the example below, the markdown would take up 1/4th of the row and would be positioned on the left edge. The table would also take up 1/4th of the page and would sit to the right of the markdown. The chart would take up 1/2 of the page and would touch the right edge of the row.

items:
  - width: 1
    markdown: ref(welcome-markdown)
  - width: 1
    table: ref(table-name)
  - width: 2
    chart: ref(chart-name)
  - width: 1
    input: ref(input-name)

Markdown

Reference a markdown object to add formatted text to your dashboard:

markdowns:
  - name: welcome-markdown
    content: |
      # Welcome to Visivo
      This is **formatted** text.
    align: center
    justify: start

dashboards:
  - name: my-dashboard
    rows:
      - items:
          - markdown: ref(welcome-markdown)

Markdown content supports CommonMark and GitHub Flavored Markdown. You can also render raw HTML within your markdown.

Nested rows (row-container items)

An Item can also act as a row-container by setting rows instead of a leaf object. The item's rows are a list of nested rows that render as a vertical stack inside the slot the parent row reserved for the item. Heights of nested rows are interpreted as relative weights inside the parent slot.

Row-container items live as siblings of leaf items inside a row's items, so a single row can mix charts, markdowns, tables, inputs, and row-containers freely.

rows:
  - height: large
    items:
      - width: 2
        chart: ref(big-chart)
      - width: 1
        rows:
          - height: small
            items: [{ chart: ref(small-a) }]
          - height: small
            items: [{ chart: ref(small-b) }]
          - height: small
            items: [{ chart: ref(small-c) }]

rows is mutually exclusive with markdown, chart, table, and input — at most one of the five may be set on a given item.

Empty items

An item may also be truly empty — with none of markdown, chart, table, input, or rows set. An empty item reserves whitespace in its row (sized by width) and is used to persist intentional gaps or unfilled canvas template slots. At most one of the five leaf/container fields may be set, but zero is allowed.

rows:
  - items:
      - width: 1
        chart: ref(chart-name)
      - width: 1   # empty slot — reserves whitespace next to the chart

Attributes

Field	Type	Default	Description
path	string	None	A unique path to this object
name	string	None	The unique name of the object across the entire project.
file_path	string	None	The path to the file that contains the object definition.
width	integer	1	The width of the item, evaluated relative to the widths of the other items in the row.
markdown	Any of: Markdown, string or string	None	A Markdown object defined inline or a ${ ref() } to a markdown.
chart	Any of: Chart, string or string	None	A chart object defined inline or a ${ ref() } to a chart.
table	Any of: Table, string or string	None	A Table object defined inline or a ${ ref() } to a table.
input	Any of: MultiSelectInput, SingleSelectInput, string or string	None	An Input object defined inline or a ${ ref() } to an input.
rows	Any of: Row, array	None	An optional list of nested rows. When set, this item renders as a row-container inside the slot the parent row reserved for it. Mutually exclusive with markdown/chart/table/input. Each sub-row carries its own height, which is interpreted as a relative weight inside the parent slot.