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:

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.

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

PropertyDescriptionApplies toTypeDefault
dashButtonSpecifies 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.dashboardtext"Start run"
tilePlacementChoose the placement mode of a tileany tileCan take the values:
- fixed: related to the properties tileX, tileY and optionally tileW and tileH)
- bottom
bottom
tileTitleSet the title of the tileany tiletext""
tileX, tileYSet 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 fixedany tilenumber0
tileW, tileHSet the width (height) the tile; it is applied when tilePlacement is set to fixedany tilenumber1
tileColorChoose the accent color for a tile; see the color pipeline for each tileany tileA 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

PropertyDescriptionApplies toTypeDefault
asSpecifies 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)textThe 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))
seriesTypeSpecifies the display type of a series in a linechartseries in a linechartCan take the values:
- line: line plot
- stack: bar chart, with bars associated to different series stacked on top of each other
line
seriesPatternSpecifies the pattern for displaying a line series in a linechart or plotseries with {seriesType: "line"} in a linechart or plotCan take the values:
- solid
- dotted
- dashed
solid
colorSpecifies the color of a seriesseriesA color (see tileColor), can also take the value gradient (to each series is attributed a shade of tileColor)gradient
cellBackgroundSpecifies the background of a cell in a show tableIn a column: header, valueA color (see tileColor), or defaultWhite in normal view and #F8F8F8 when the table is zoomed in.
columnAppendAdds a row below a table tile to display additional column informationcolumntext""
columnPrependAdds a row on top of a table tile to display additional column informationcolumntext""
columnReadOnlyProhibits editing a specific column on an editable table tilecolumnbooleanfalse
columnWidthDefines the standard column size of an editable table tile (Zoomed in only)columnnumber1

Numbers

PropertyDescriptionApplies toTypeDefault
numbersSpecifies the number rendering modevalueCan 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
precisionSpecifies the maximum number of digits to be displayed (between 0 and 16)valueInteger between 0 and 162
minPrecisionSpecifies the minimum number of fractional digits to be displayed; minPrecision** Overrides precision** if greater, so {precision: "2"; minPrecision: "3"} actually uses {precision: "3"}valueInteger between 0 and 160
thousandSeparatorThe thousands separatorvaluetextU+00A0 (non-breaking space)
fractionSeparatorSpecifies the separator between integer and fractional digitsvaluetext.
unitControls the unit of numbersvaluetext""
unitPositionControls the position of the unitvalueCan take the values:
- left
- right
- auto (this is based on the value of unit: it is right, except for the units , $, £)
auto

Text

PropertyDescriptionApplies toTypeDefault
textAlignSpecifies the horizontal text alignmentvalue, name, header, titleCan take the values:
- left
- right
- center
- justify
- default
default
textColorSpecifies the color of any text on the dashboardanyA color (see tileColor), or defaultdefault
textControls the display of text valuesvalueCan take the values:
- text: displays value as-is
- link: turns http:// or https:// URLs into links
text
textLinkNameReplaces the visible text for a linkvaluetextinactive