StyleCode sub-language
Envision contains a sub-language called StyleCode, specifically dedicated to dealing with tiles appearance. It allows to precisely set up the style of all elements contained in a tile. StyleCode’s snippets can be easily introduced within an Envision code, inside curly brackets and using semicolons to delimit attributes (e.g., {textColor: tomato; unit: "€"}).
Table of contents
Hierarchy and properties
A dashboard is primarily divided into tiles. Each tile contains some sub-elements such as title or legend, depending on the tile type. Finally, these ones includes different types of content (e.g. value or name).
Tiles
Here is a description of all types of tiles that can appear in a dashboard, along with their supported sub-elements:
- assert tile: introduced by
show assert - barchart tile: introduced by
show barchart - chart tile: introduced by
show chart - error tile: generated by various
showstatements when placed in invalid conditions - form tile: created with
show form- title of the tile
- histogram tile: created with
show histogram - label tile: created with
show label - linechart tile: created with
show linechart - logo tile: created with
show logo - markdown tile: created with
show markdown - menu tile: created with
show menu - piechart tile: created with
show piechart - plot tile: created with
show plot - scalar tile: created with
show scalar- entry: one single pair name-value
- scatter tile: created with
show scatter - slicepicker tile: created with
show slicepicker - summary tile: created with
show summary - table tile: created with
show table- column: the number of columns is statically defined in the script; all rows are displayed, including headers;
- title of the tile
- tabs tile: created with
show tabs - treemap tile: created with
show treemap - upload tile: created with
show upload
Sub-elements
Most tiles contain data vectors defined in the with section of the Envision script. They are called columns in tables tiles, entries in summary tiles, while in in other tiles they are called series.
- column represents a data vector in a table tile, and then supports the property as
- header: cell at the top of the column, follows the text pipeline
- value to be displayed; follows the number pipeline or the date pipeline, as well as the text pipeline
- entry: a combination of a value and its name; for summary tiles, it corresponds to a data vector and so supports the as property
- name displays the name of the entry, follows the text pipeline
- value displays the name of the entry; follows the number pipeline or the date pipeline, as well as the text pipeline
- legend: displays associations between series and their colors or values
- series: represents a data vector, supports the as property and follows the plot color pipeline
- value to be displayed; follows the number pipeline or the date pipeline, as well as the text pipeline
- title follows the text pipeline
- haxis: The first data column of chart tiles is describing horizontal values, and has special stylecode properties that can tune it.
List of properties
A full list of stylecode properties is available here. We provide there an overview of all properties that can be tuned through StyleCode to customize elements appearance. Each element inherits all the properties specified for its parent, which can then be overwritten by specifying different values for the element.