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:

• barchart tile: introduced by show barchart
  • series of the values to be displayed
  • title of the tile
• error tile: generated by various show statements when placed in invalid conditions
• form tile: created with show form
  • title of the tile
• histogram tile: created with show histogram
  • series of the values to be displayed
  • haxis the horizontal axis that contains a value
  • title of the tile
• label tile: created with show label
• linechart tile: created with show linechart
  • series (time-series) of the values to be displayed; the number of series is statically defined in the script
  • legend: appears at the bottom of the tile
  • title of the tile
• markdown tile: created with show markdown
• piechart tile: created with show piechart
  • series of values associated to the pie slices
  • legend: appears to the right of the tile
  • title of the tile
• plot tile: created with show plot
  • series of values for each data series
  • haxis the horizontal axis that contains a value
  • legend: appears at the bottom of the tile
  • title of the tile
• scalar tile: created with show table
  • entry: one single pair name-value
• scatter tile: created with show scatter
  • series of values for each data series
  • haxis the horizontal axis that contains a value
  • legend: appears at the bottom of the tile
  • title of the tile
• summary tile: created with show summary
  • entry: the number of entries is statically defined in the script
  • title of the tile
• 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
• 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

List of properties

In the following we provide 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.

Dashboard layout

Properties of tiles

Numbers

Text