Toolbar

Overview

List of configuration files

Filename	Short description	Format	Link to documentation
dashboard.view#ToolbarWidget	Defines the ToolbarWidget widget global settings	json	Link

List of examples

Short description	Link to documentation
Define a toolbar for a chart	Send actions to chart with a Toolbar widget

Features

The Toolbar widget allows defining a toolbar that can send information to widgets which subscribed on it. A toolbar is a layout divided in three parts (left, center, right) that can contain multiple widgets.

There are different types of toolbar:

• Custom: lets you define the different parts as you want

• Chart: toolbar dedicated to charts usage. Contains a Refresh widget (left), a Range widget (center) and a Limit widget (right).

Global settings

These settings can be applied to any type of toolbar.

Setting	Usage	Type	Default value
type	Type of toolbar	Custom or Chart	Custom

Custom settings

The custom toolbar allows customizing every part of the toolbar. You need to define the widgets used in each part you want and define the layout configuration.

Setting	Usage	Type	Default value
layout	Defines the width of the different components	ToolbarLayoutArrangement
leftComponent	Layout left component	Widget
centerComponent	Layout center component	Widget
rightComponent	Layout right component	Widget

ToolbarLayoutArrangement

Defines the width of the different parts of the layout.

Setting	Usage	Type	Default value
leftComponentWidth	Layout left component width in percent	0-1	0.15
rightComponentWidth	Layout right component width in percent	0-1	0.15
menuMaxWidth	Max width the dynamic menus can used in the center part of the layout	0-1	0.20

The center component width adapts accordingly with the left/right component width and the menu width.

Example:

{
    "type": "Toolbar",
    "id": "zSvQhHAS",
    "title": "",
    "menuReferences": [
        "root.menus.toolbar"
    ],
    "toolbarWidgetSettings": {
        "type": "Custom",
        "layout": {
            "leftComponentWidth": 0.10,
            "menuMaxWidth": 0.2,
            "rightComponentWidth": 0.20
        },
        "rightComponent": {
            "type": "Range",
            "id": "zSvQhHAS_range",
            "title": "",
            "rangeWidgetSettings": {
                "defaultRange": {
                    "text": "1 week",
                    "duration": {
                        "value": 7,
                        "unit": "DAYS"
                    }
                },
                "ranges": [
                    {
                        "text": "5 min.",
                        "duration": {
                            "value": 5,
                            "unit": "MINUTES"
                        }
                    },
                    {
                        "text": "1 hour",
                        "duration": {
                            "value": 1,
                            "unit": "HOURS"
                        }
                    },
                    {
                        "text": "1 day",
                        "duration": {
                            "value": 1,
                            "unit": "DAYS"
                        }
                    },
                    {
                        "text": "1 week",
                        "duration": {
                            "value": 7,
                            "unit": "DAYS"
                        }
                    }
                ]
            }
        },
        "leftComponent": {
            "type": "Refresh",
            "id": "zSvQhHAS_refresh",
            "title": "",
            "refreshWidgetSettings": {
                "disableSingleRefresh": false,
                "disableAutoRefresh": false,
                "defaultAutoRefresh": false,
                "disableAutoRefreshRate": false,
                "defaultAutoRefreshRate": 1
            }
        }
    }
}

Chart settings

The Chart toolbar contains a Refresh, Range and Limit widget. You can configure each part :

Setting	Usage	Type	Default value
refreshSettings	Refresh widget settings	RefreshWidget.Settings
rangeSettings	Range widget settings	RangeWidget.Settings
limitSettings	Limit widget settings	LimitWidget.Settings

Example:

{
    "id": "toolbar",
    "title": "",
    "type": "Toolbar",
    "toolbarWidgetSettings": {
        "type": "Chart",
        "refreshSettings": {
            "disableSingleRefresh": false,
            "disableAutoRefresh": false,
            "defaultAutoRefresh": false,
            "disableAutoRefreshRate": false,
            "defaultAutoRefreshRate": 5
        },
        "limitSettings": {
            "defaultLimit": 150,
            "defaultLimitFrom": "Last",
            "disableLimitFrom": true
        },
        "rangeSettings": {
            "defaultRange": {
                "text": "30 min.",
                "duration": {
                    "value": 30,
                    "unit": "MINUTES"
                }
            },
            "ranges": [
                {
                    "text": "5 min.",
                    "duration": {
                        "value": 5,
                        "unit": "MINUTES"
                    }
                },
                {
                    "text": "30 min.",
                    "duration": {
                        "value": 30,
                        "unit": "MINUTES"
                    }
                },
                {
                    "text": "1 hour",
                    "duration": {
                        "value": 1,
                        "unit": "HOURS"
                    }
                },
                {
                    "text": "4 hours",
                    "duration": {
                        "value": 4,
                        "unit": "HOURS"
                    }
                },
                {
                    "text": "1 day",
                    "duration": {
                        "value": 1,
                        "unit": "DAYS"
                    }
                }
            ]
        }
    }
}