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.

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 determines is evaluated relative to the other items in a 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.