# 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: "€}).

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

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
textLinkNameReplaces the visible text for a linkvaluetextinactive