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
- 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
- label tile: created with
show label
- linechart tile: created with
show linechart
- markdown tile: created with
show markdown
- piechart tile: created with
show piechart
- plot tile: created with
show plot
- scalar tile: created with
show table
- entry: one single pair name-value
- scatter tile: created with
show scatter
- 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
- 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
Property | Description | Applies to | Type | Default |
---|---|---|---|---|
dashButton | Specifies the label - and presence - of the dashboard’s Start Run button. As this stylecode applies to the dashboard itself, the statement should appear as a stand-alone line @{ dashButton: "Run My Way" } . If the specified text value is empty, then no button is displayed. Also other factors, such as the presence of slicing, can hide the button. | dashboard | text | "Start run" |
tilePlacement | Choose the placement mode of a tile | any tile | Can take the values: - fixed: related to the properties tileX , tileY and optionally tileW and tileH )- bottom | bottom |
tileTitle | Set the title of the tile | any tile | text | "" |
tileX , tileY | Set the horizontal (vertical) position of the left (top) side of the tile, relative to the left (top) side of the dashboard; it is applied when tilePlacement is set to fixed | any tile | number | 0 |
tileW , tileH | Set the width (height) the tile; it is applied when tilePlacement is set to fixed | any tile | number | 1 |
tileColor | Choose the accent color for a tile; see the color pipeline for each tile | any tile | A color, expressed as: - Hash-prefixed, three-digit hexadecimal (such as "#F00" )- Hash-prefixed, six-digit hexadecimal (such as "#FF0000" )- CSS color keywords (such as "red" ) from the full list of color keywords. | 000 |
Properties of tiles
Property | Description | Applies to | Type | Default |
---|---|---|---|---|
as | Specifies the name of a data vector (e.g. columns in table tiles, series in charts, entries in summaries) | column, series, entry (in summary tiles only) | text | The name of the variable (e.g. "Quantity" for column Orders.Quantity ) or the expression converted to a text (e.g. “sum(Orders.Quantity)” for sum(Orders.Quantity)) |
seriesType | Specifies the display type of a series in a linechart | series in a linechart | Can take the values: - line: line plot - stack: bar chart, with bars associated to different series stacked on top of each other | line |
seriesPattern | Specifies the pattern for displaying a line series in a linechart or plot | series with {seriesType: "line"} in a linechart or plot | Can take the values: - solid - dotted - dashed | solid |
color | Specifies the color of a series | series | A color (see tileColor ), can also take the value gradient (to each series is attributed a shade of tileColor ) | gradient |
cellBackground | Specifies the background of a cell in a show table | In a column: header, value | A color (see tileColor ), or default | White in normal view and #F8F8F8 when the table is zoomed in. |
columnAppend | Adds a row below a table tile to display additional column information | column | text | "" |
columnPrepend | Adds a row on top of a table tile to display additional column information | column | text | "" |
columnReadOnly | Prohibits editing a specific column on an editable table tile | column | boolean | false |
columnWidth | Defines the standard column size of an editable table tile (Zoomed in only) | column | number | 1 |
Numbers
Property | Description | Applies to | Type | Default |
---|---|---|---|---|
numbers | Specifies the number rendering mode | value | Can take the values: - old: old rendering system - simple: float, with a certain number of trailing digits - thousands: scale $1$k - millions: scale $1$M - percent - scientific: scientific notation - auto: depending on all numbers in scope, the optimal scale among $10^9$, $10^6$, $10^3$, $1$, $10^{-3}$, $10^{-6}$, $10^{-9}$ and optimal precision | old, then auto |
precision | Specifies the maximum number of digits to be displayed (between 0 and 16) | value | Integer between 0 and 16 | 2 |
minPrecision | Specifies the minimum number of fractional digits to be displayed; minPrecision ** Overrides precision ** if greater, so {precision: "2"; minPrecision: "3"} actually uses {precision: "3"} | value | Integer between 0 and 16 | 0 |
thousandSeparator | The thousands separator | value | text | U+00A0 (non-breaking space) |
fractionSeparator | Specifies the separator between integer and fractional digits | value | text | . |
unit | Controls the unit of numbers | value | text | "" |
unitPosition | Controls the position of the unit | value | Can take the values: - left - right - auto (this is based on the value of unit : it is right, except for the units € , $ , £ ) | auto |
Text
Property | Description | Applies to | Type | Default |
---|---|---|---|---|
textAlign | Specifies the horizontal text alignment | value, name, header, title | Can take the values: - left - right - center - justify - default | default |
textColor | Specifies the color of any text on the dashboard | any | A color (see tileColor ), or default | default |
text | Controls the display of text values | value | Can take the values: - text: displays value as-is - link: turns http:// or https:// URLs into links | text |
textLinkName | Replaces the visible text for a link | value | text | inactive |