# 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 (e.g., {text-color: tomato}).

## 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:

• barchart tile: introduced by show barchart
• series of the values to be displayed
• title of the tile
• assert tile: generated by various show statements when placed in invalid conditions
• form tile: created with show form
• histogram tile: created with show histogram
• series of the values to be displayed
• 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
• logo tile: created with show logo
• 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
• legend: appears at the bottom of the tile
• title of the tile
• scalar tile: created with show table
• entry: one single pair name-value
• summary tile: created with show summary
• entry: the number of entries is statically defined in the script
• legend
• 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.

## 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
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.

### 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