Metric Tile

This article describes the metric tile component and its properties.

Squirrel 1.12 introduced a “Quick Set-up” tab on many property panels. The properties described on this page are available on the “All Properties” tab of the property panel. For more details on “Quick Set-Up” properties see this article

The Metric Tile is used to display the value of a key numerical value along with supporting textual description and an icon showing its trend:

Select Metric Tile from the Data Viz category of the component library. Move the mouse over the canvas and click to add the component to your project:

Metric Tile Properties

The Metric Tile properties are organized into GENERAL, STYLING, and DYNAMIC VISIBILITY drawers. This guide will describe the general and styling properties only; the dynamic visibility properties are generic and a separate guide and tutorial on Dynamic Visibility can be found here.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set Property Values article for more information on using the different methods.

GENERAL:

The GENERAL property drawer controls the appearance of the Value, Title, Subtitle and Trend Icon of the tile.

VALUE

• Value – This property controls the numeric value displayed in the tile. It must be bound to a cell in the spreadsheet

• Number format – This property determines how the value is formatted. Note:

  • selecting Number, Percentage or Currency provides the option to set the number of decimal places displayed

  • selecting Currency also provides an option to set the currency character and in the case of a custom character whether it should come before or after the number

  • when Percentage is selected the component treats the value in the cell as fractional, i.e. 0.1 to represent 10%, 0.5 to represent 50% etc.

• Font / Size / Text Color / Opacity – These properties control the appearance of the value’s text display.

TITLE / SUBTITLE

• Text – this is the text displayed as the Title or Subtitle. It can be entered directly into the property box or bound to a cell in the spreadsheet

• Font / Size / Text Color / Opacity – These properties control the appearance of the title or subtitle’s text.

TREND ICON

• Trend Indicator Value – This controls which of the three icons in the chosen icon set (see below) are displayed and its value must be bound to a single cell in the spreadsheet. If the value is positive then the first icon is displayed, if the value is zero the second icon is displayed and if the value is negative the third icon is displayed

• Icon set – this dropdown allows the set of icons to be used to display the trend to be chosen

• Positive / Neutral / Negative Color and Opacity – These properties control the color and opacity of the trend icon in the case where the trend indicator value (see above) is positive, zero (neutral) or negative respectively.

STYLING:

The STYLING properties are used to control the appearance of the background of the tile itself.

• Fill / Opacity – the color and opacity of the tile background

• Border / Opacity – the colour and opacity of the outline of the tile

• Weight – the thickness, in pixels, of the outline of the tile.

• Line Style – the style of the outline of the tile (either solid or dashed)

• Corner – the radius of corners of the tile, the larger the number the more rounded the corners, a value of zero produces square corners