Item

The Item houses a single chart, table, selector or markdown object.

It also informs the width that the chart, table or markdown 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: "# Some inline **markdown**"
  - width: 1
    table: ref(table-name)
  - width: 2
    chart: ref(chart-name)
  - width: 1
    selector: ref(selector-name)

Markdown

You can use markdown to add formatted text to your dashboard. Visivo markdown supports CommonMark and GitHub Flavored Markdown. You can also render raw HTML within your markdown.

To control the alignment of markdown content, you can use the align and justify properties.

Horizontal Alignment (align)Vertical Distribution (justify)

Controls how text aligns horizontally within the container:

align: left (default)

[Header     ]
[Paragraph  ]
[List       ]

align: center

[  Header   ]
[ Paragraph ]
[   List    ]

align: right

[     Header]
[  Paragraph]
[      List]

Controls how content blocks are distributed vertically in fixed-height containers:

justify: start (default)

[Header     ]
[Paragraph  ]
[List       ]
[           ]
[           ]

justify: center

[           ]
[Header     ]
[Paragraph  ]
[List       ]
[           ]

justify: between

[Header     ]
[           ]
[Paragraph  ]
[           ]
[List       ]

justify: around

[           ]
[Header     ]
[           ]
[Paragraph  ]
[           ]
[List       ]
[           ]

justify: evenly

[           ]
[Header     ]
[Paragraph  ]
[List       ]
[           ]

justify: end

[           ]
[           ]
[Header     ]
[Paragraph  ]
[List       ]

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.
width	integer	1	The width of the Item determines is evaluated relative to the other items in a row.
markdown	string	None	Markdown text to include in the dashboard.
align	string	None	Alignment of markdown content. Only valid when markdown is set. Options are 'left', 'center', or 'right'.
justify	string	None	Justification of markdown content within its container. Options are 'start', 'end', 'center', 'between', 'around', or 'evenly'.
chart	Chart	None	A chart object defined inline or a ref() to a chart.
table	Table	None	A Table object defined inline or a ref() to a table
selector	Selector	None	A Selector object defined inline or a ref() to a selector