Widgets catalogue¶
Closer view to the widget's settings.
For Dashboard and widget's setup, please refer here.
Value widgets¶
Usage of value widgets is, when displaying data in text form is needed.
Single value widget¶
Serves the purpose of displaying just a single value.
Value can be of type: string, boolean, number.
Single value can display just a date (convert e.g. unix timestamp to human readable date), if needed.
Multiple value widget¶
Serves the purpose displaying n values in one widget.
Except displaying n values in one widget, multiple value widget contents the same features as Single value widget.
Values can be of type: string, boolean, number.
Status indicator widget¶
Status indicator widget displays a number value and a color indication based on defined boundaries.
Value can be of type: number.
Table widget¶
Table widget can display multiple values in the table form.
Values can be of type: string, boolean, number.
Tool widgets¶
Tool widgets serves the purpose of a "button" - that when clicked - open a new tab in the browser with a link (URL address) specified in the configuration of the widget. Images for a tool widget can be loaded directly in the application's public folder or loaded as a base64 string image.
Chart widgets¶
Usage of chart widgets is, when displaying data in graphical form is needed.
Recharts are used as library for rendering data in the chart form.
BarChart widget¶
BarChart widget has 4 types of displaying data:
BarChart widget with sample data¶
Displaying the data based on some key on the timeline.
BarChart widget with aggregated data¶
Displaying count of the data based on some key on the timeline.
BarChart widget with grouped data¶
Displaying the data based on key by the total count.
BarChart widget with data table¶
Displaying the chart data in the table. This feature can be enabled in the chart settings and activated by clicking the button in top right corner of the widget.
AreaChart widget¶
Contains the same features as BarChart widget, but it displays the data in the widget in area form.
ScatterChart widget¶
Contains the same features as BarChart widget, but it displays the data in the widget in scatter form.
PieChart widget¶
PieChart displays only grouped data in form of pie chart and table.
PieChart with gradient colors¶
In this example, tooltip is used for displaying detailed informations about the particular part (tooltip is not displayed in this image).
PieChart with multiple colors¶
In this example, tooltip is replaced by indication of an active part in the upper left corner of the widget.
FlowChart widget¶
Mermaid is used as a library for rendering flowcharts.
Mermaid playground can be found here.
