Tiles
Tiles
The Tiles plug in displays key data for a good overview.
Usage
The tiles plug-in can only be included as panels in Dashboards. See Dashboard documentation for general tips on creating dashboard configurations.
- Each table viewer panel is defined inside a row in a
dashboard-*.yaml
file. - Use panel
type: csv
in the dashboard configuration. - Standard title, description, and width fields define the frame.
Sample dashboard.yaml config snippet
layout:
row1:
- type: 'tile'
title: Tiles Plug-in Example
dataset: 'data.csv'
CSV Structure
The following .csv structure belongs to the sample image above. The column line contains the titles, the second column the values, the third column the names or paths of the icons and the fourth defines the url. The values, the icons and the url are not required.
custom Image | text | vsp_logo.png | https://vsp.berlin |
custom Image (parent folder) | 1234 | ../warning.png | |
image from assets Folder (Material UI) | 3517 | emoji_transportation | https://tu.berlin |
Fontawesome Icon 1 | 75135 | virus-covid | |
Fontawesome Icon 2 | transport | chart-simple |
Add icons to the tile
There are three ways to add icons. When adding icons, these three options are also checked in this order:
Custom Icons: To add your own icons, the file must be in the same directory and the relative path (including extension) must be specified in the .csv file.
Predefined Icons: See Predefined Icons. For adding only the name (without extension) must be specified.
Font Awesome Free Icons: For adding these icons only the name must be specified. An overview of the available icons can be found here. Only the icons from the Solid series will work.
Predefined Icons
Name | Icon |
---|---|
departure_board | |
electric_car | |
route | |
local_gas_station | |
And many more... | And many more... |
For a complete overview, you can check here. You can also add more icons and save them in this folder. Please use this link and select these options for a consistent design: Grade: 0; Fill: true; Weight: 400; Optical Size: 48px.
Table viewer properties
Tiles plug-in properties:
dataset: String. The filepath containing the csv-file. The first row describes the header text and the second row describes the values
Notes
- Currently, Predefined Icons can't be used. GitHub Issue