Styling dashboards

Envision includes a dedicated sub-language to allow a refined control over the dashboard style: StyleCode snippets can be easily introduced within an Envision code, inside curly brackets (e.g., {textColor: tomato }).

The properties of each tiles and of its sub-elements can be directly accessed through StyleCode. A full list of elements and properties is provided in the StyleCode reference section.

Setting tiles properties

Tiles properties, such as the position and color, can be set up in StyleCode as a list of options enclosed in curly brackets:

{ textColor: tomato; unit: "€" }

This StyleCode snippet can be equivalently placed in the line before the show statement, in the same line as the show statement or spread over several lines, as illustrated in the following examples:

// 3 equivalent syntaxes

{ textColor: tomato; unit: "€" }
show table "Orders" with Id, Orders.OrderId, Orders.NetAmount

show table "Orders" { textColor: tomato; unit: "€" } with Id, Orders.OrderId, Orders.NetAmount

show table "Orders" {
    textColor: tomato
    unit: "€" 
} with Id, Orders.OrderId, Orders.NetAmount

Placing a tile within a dashboard

The placement of a tile is chiefly determined by the property tilePlacement, which can take the values fixed and bottom (the default).

If fixed is chosen, the position and dimensions of the tile can all be directly specified by the user. The position of a tile is defined by setting up the x and y coordinates of the top-left corner of the tile with respect to the dashboard surface (the top-left corner of the dashboard has coordinates (0,0)). This is accessible through the properties tileX and tileY (default value is $0$). The tile’s dimensions can as well be determined, using tileW for the width and tileH for the height, both having the value $1$ as default.

Otherwise, by default (bottom) a tile is placed on the first empty row of the dashboard (below all user-positioned tiles), starting from the left. If several tiles have to be positioned by default, they are placed from left to right up to the dashboard width, in the order in which they appear in the script, with dimensions $1 \times 1$. The bottom placement mode is applied also in the case where two fixed tiles overlap: the tile appearing second in the script is switched to tilePlacement: bottom.

As an example:

{ tilePlacement: fixed; tileX: 2; tileY: 3; tileW: 4; tileH: 5 }
show table "Orders" with Id, Orders.OrderId, Orders.NetAmount

Setting the style of tiles sub-elements

Properties of tiles sub-elements, such as the appearance of a table column or a linechart axis, can also be customized one by one. This is obtained by specifying the sub-element target before listing its properties’ values, enclosed in additional curly brackets:

{ y-axis { axis-tally-minor: 1 } }
show linechart "Returned quantities" with sum(ReturnOrders.Quantity)

Moreover, the appearance of all of the different data vectors displayed in a tile can be specified separately, inline or as a prefix:

show table "Orders" with 
  Id
  Orders.Date { textColor: green}
  Orders.NetAmount { textColor: tomato; unit: "€" } 

show linechart "Returned quantities" with 
    { cellBackground: tomato }
    sum(ReturnOrders.Quantity) as "Returned Quantity"