Styling dashboards

Envision includes a dedicated sub-language, called StyleCode, that allows a refined control over the dashboards style. It borrows strongly from CSS and its extensions, LESS and SCSS. Indeed, as in CSS, elements’ appearances are controlled within StyleCode by attributing a value to a property (e.g. textColor: tomato), and sub-elements inherit their parent elements’ properties, unless these are expressly redefined. Also, mixins are available in StyleCode.

StyleCode integration within Envision is straightforward: StyleCode snippets can be introduced in an Envision code by simply enclosing them into curly brackets (e.g., { unit: "€" }). In the following, we review the potentialities of StyleCode, showing how every detail of a tile can be tuned in practice. A full list of target elements and their properties is provided in our 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.NetAmount

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

show table "Orders" {
    textColor: tomato
    unit: "€" 
} with Id, 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.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 "Ordered quantities" with sum(Orders.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 
  Orders.Date { textColor: green}
  Orders.NetAmount { textColor: tomato; unit: "€" } 

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