StyleCode sub-language

StyleCode is a sub-language included in Envision, specifically dedicated to dealing with tiles appearance. It allows to precisely set up the style of all elements contained in a tile, with the additional possibility of defining custom templates (mixins). StyleCode’s snippets can be easily introduced within an Envision code, inside curly brackets (e.g., {text-color: tomato}), while mixins are identified by an at sign (e.g., @financial).

Hierarchy and properties of elements within a dashboard

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

Property Description Applies to Type Default
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

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
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, total A color (see tileColor), or default White in normal view and #F8F8F8 when the table is zoomed in.

Numbers

Property Description Applies to Type Default
numbers Specifies the number rendering mode value, total Can take the values:
- old: old rendering system
- simple: float, with a certain number of trailing digits
- thousands: scale $1$k
- millions: scale $1$km
- 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, total 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, total Integer between 0 and 16 0
thousandSeparator The thousands separator value, total text U+00A0 (non-breaking space)
fractionSeparator Specifies the separator between integer and fractional digits value, total text .
unit Controls the unit of numbers value, total text ""
unitPosition Controls the position of the unit value, total 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