# Elements

Element types are used to filter rules so that they only apply to specific kinds of elements.

## Tiles

Every element on the dashboard is contained within exactly one root element, which is always a tile.

All tiles (except logo) further support tileTitle and tileColor.

Most tiles contain data vectors defined in the with section of the Envision script. For tables, these are called columns. For summary tiles, they are called entries. For other tiles, they are called series.

### General hierarchy of elements.

[N] indicates that the number of elements is specified statically in the Envision script, [?] that it is determined when the script is executed.

-  barchart
├ series
│   └ value[?]
└ title
- error
- form
└ title
- histogram
├ series
│   └ value[?]
└ title
- linechart
├ series[N]
│   └ value[?]
├ legend
└ title
- logo
- markdown
- piechart
├ series
│   └ value[?]
├ legend
└ title
- summary
├ entry[N]
│   ├ name
│   └ value
├ legend
└ title
- table
├ column[N]
│   ├ total
│   └ value[?]
└ title


### barchart tile

Created with show barchart. It contains the following sub-elements:

### error tile

Generated by various show statements when placed in invalid conditions. It contains no elements.

### form tile

Created with show form. It contains the following sub-elements:

### histogram tile

Created with show histogram. It contains the following sub-elements:

### label tile

Created with show label. It contains no elements.

### linechart tile

Created with show linechart. It contains the following sub-elements:

### logo tile

Created with show logo. It contains no elements.

### markdown tile

Created with show markdown. It contains no elements.

### piechart tile

Created with show piechart. It contains the following sub-elements:

### plot tile

Created with show plot. It contains the following sub-elements:

### scalar tile

Created with show table with exactly one line and column. As a name-value pair (like entry), it contains the following sub-elements:

### summary tile

Created with show summary. It contains the following sub-elements:

### table tile

Created with show table with more than one line or column. It contains the following sub-elements:

### upload tile

Created with show upload. It contains the following sub-elements:

## Other elements

### column element

Represents a data vector in a table tile, and so supports the property as. It contains the following sub-elements:

### entry element

A combination of a value and its name, it contains the following sub-elements:

For summary tiles, it corresponds to a data vector and so supports the as property.

### header element

The topmost cell in a column, carries the name of the cell, follows the text pipeline.

### legend element

In a linechart, plot, histogram or piechart, represents a section that displays associations between series and their colors or values.

### name element

The name part of an entry, follows the text pipeline.

### series element

Represents a data vector in a linechart, plot, barchart, piechart or histogram.

It supports the as property and follows the plot color pipeline. It has the following sub-elements:

### title element

The title of a tile. Some tiles, such as scalar or logo, do not have a title element. Follows the text pipeline.

### total element

A cell in a column representing the total for that column. Behaves like a value element.

### value element

A value in an entry, column or series. Follows the number pipeline (if a numeric value) or the date pipeline (for date values), as well as the text pipeline in all cases.

# Pipelines

Rendering pipelines describe how dashboard data should be presented. The main purpose of StyleCode is to configure the various pipelines.

## Dashboard Layout Pipeline

This pipeline computes the final position of each tile on the dashboard. Each tile is placed according to its tilePlacement:

1. All tiles with tilePlacement: fixed are placed on the grid at the position specified by tileX, tileY, tileW and tileH. If this would cause an overlap between two tiles, the tile that appears second in the source code is treated as tilePlacement: bottom instead.
2. The dashboard width is defined as the smallest width that can accommodate all tiles placed so far. If no tiles were placed so far, a dashboard width of 6 is assumed.
3. Starting on the row below the bottom-most tile, all tiles with tilePlacement: bottom are placed in the dashboard, filling each row left-to-right (up to the dashboard width) in the order in which they appear in the script, with dimensions 1×1.

## Number Pipeline

This pipeline controls the pretty-printing of numbers. It currently functions in a legacy mode controlled by the unit property.

## Plot Color Pipeline

When plotting multiple series, each must receive its own recognizable color. This pipeline computes a color for each series, using the color.

1. For N series, an N-color gradient is created from the tileColor. If series i has color: gradient it uses color i from this gradient.
2. If the color property is a color, the corresponding series uses that color.

## Text Pipeline

This pipeline controls the display of text. It is composed of independent sub-pipelines that control various aspects of the text.

### Horizontal Text Aligment

Controlled by the textAlign property:

• If left, right, center or justify, enforces the corresponding alignment.
• If default, will use left alignment with a few exceptions:

Text alignment only applies to text positioned within a horizontal box wider than itself. Text in resizable boxes (such as the plot legends) or text attached to specific positions (axis labels, barchart labels) is not affected by horizontal alignment rules.

# Properties

Properties can be assigned values. Each element inherits all the properties specified for its parent, which can then be overwritten by specifying different values for the element.

## List of properties

### as property

Specifies the name of a data vector (table columns, chart series, summary entries).

Applies to Type Default
column, series, entry (summary only) text See below

Although this can be specified with StyleCode syntax, the Envision script always provides values automatically, using, in decreasing order of priority:

1. The name introduced by an as keyword (e.g. "Qty" from Orders.Quantity as "Qty")
2. For a variable, the name without the table (e.g. "Quantity" from Orders.Quantity)
3. The text of the expression (e.g. "sum(Orders.Quantity)" from sum(Orders.Quantity))

### color property

Specifies the color of a series for the plot color pipeline.

Applies to Type Default
series color, gradient gradient

### textAlign property

Specifies the horizontal text alignment in the text pipeline.

Applies to Type Default
value, name, header, title left, right, center, justify, default default

### tileColor property

Choose the accent color for a tile.

Applies to Type Default
any tile color 000

Color pipelines use the accent color in their default mode to give a touch of color to the tile. For more information, refer to the color pipeline for each tile.

In practice, this property is rarely specified with StyleCode syntax. Instead, the standard Envision syntax specifies the tile color after the tile and position in the show xyz statement:

show table "Value" a1b1 tomato with ...

### tilePlacement property

Choose the placement mode of a tile for the dashboard layout pipeline.

Applies to Type Default
any tile fixed, bottom bottom

In practice, this property is rarely specified with StyleCode syntax. Instead, the standard Envision syntax provides tile placement information after the title in the show xyz statement:

show table "Value" a1b1 with ...

If not provided, bottom is used. If provided, this property takes value fixed is used and the position token is used to assign properties tileX, tileY and optionally tileW and tileH (if provided).

### tileTitle property

Set the title of the tile.

Applies to Type Default
any tile text ""

In practice, this property is rarely specified with StyleCode syntax. Instead, the standard Envision syntax places the title after the show xyz statement:

show table "\{missing} items not found" with ...

### tileX and tileY properties

Set the horizontal (vertical) position of the left (top) side of the tile, relative to the left (top) side of the dashboard.

Applies to Type Default
any tile number 0

Part of the dashboard layout pipeline when tilePlacement is set to fixed.

### tileW and tileH properties

Set the width (height) the tile.

Applies to Type Default
any tile number 1

Part of the dashboard layout pipeline when tilePlacement is set to fixed.

### unit property

Controls the unit of numbers in the number pipeline.

Applies to Type Default
value, total text ""

## Data types

### Color

A color can be specified using one of the following patterns:

• Three-digit hexadecimal (such as "F00")
• Six-digit hexadecimal (such as "FF0000")
• CSS color keywords (such as "red") from the full list of color keywords.