Metric Tile
This article describes the metric tile component and its properties.
Last updated
This article describes the metric tile component and its properties.
Last updated
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:
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.
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.
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
