1. Introduction
The supervision tool includes a new category “Dashboards”:
This command causes the main supervision window to display the dashboard widgets container.
2. Widgets container
The widgets container is an area able to receive various dashboard widgets. When first accessed, the area is empty:
The area content is edited using the toolbox appearing when the mouse hovers the left top corner. The toolbox is hidden automatically when the mouse leaves that area.
3. Edit toolbox This action allows editing the container. When triggered, the container area displays its editing grid and the edit toolbox is displayed.
The edition toolbox on the left is contextual. When no widget is selected, the toolbox shows controls allow editing the widgets container. When a widget is selected, the toolbox displays controls allowing editing the selected widget.
The following sections explain the properties of the widgets container. The widget properties will be explained later in their own section (See chapter “Widgets types”, page 8).
3.1 Appearance – Background color
This controls allow to specify the background color of the widget container. This setting overrides the color defined in the theme. To use the background appearance defined in the theme, the user must select the “Transparent” color or delete the selection of the control.
3.2 Appearance – Current theme
This control allows the user to select one of the available theme. A theme defines the general appearance of the container and its widgets.
3.3 Dashboard base – Description
This textbox allows specifying a title or description for the container. This description as two purposes: it provides a default name when saving the dashboard (See section “Save”, page 6) and it provides a title when a dashboard runs in a standalone window (See section “Duplicate in new window”, page 6).
3.4 Size – Overflow mode
This setting specifies how the widgets container reacts to size restrictions.
• Crop: when the container does not have enough space to display all widgets, the overflowing widgets are cropped to the visible area. This is the default mode.
• Scroll: when needed, scrollbars are added, allowing the user to scroll on the appropriate area of the container.
• Scale: the dashboard is scaled to fill the available space.
These behaviors are only applied when the edit mode is left. While editing the container always uses scrollbars as overflow handling technique.
3.5 Size – Rows
This setting specifies the number of rows in the widget container. The number of rows cannot be reduced if it would not let enough space for existing widgets.
3.6 Size – Columns
This setting specifies the number of columns in the widget container. The number of columns cannot be reduced if it would not let enough space for existing widgets.
3.7 Widgets
This section displays the available widgets that can be included in the container. See section “Basic operation” in chapter “Widgets generalities”, page 6.
This action allows the user to open a previously saved dashboard. The dialog shows the list of available saved dashboards. The “Show only my contexts” checkbox controls if shared dashboards must be included in the list.
This action allows to save the current dashboard. The dialog allows the user to save the current dashboard as a new saved dashboard or as an existing one, overwriting the previous content. The “Show only my contexts” checkbox controls if shared dashboards must be included in the list of existing dashboards. The “Shared” checkbox allows the user to save the dashboard in a context that can be accessed by all user.
3.8 Duplicate in new window
This action opens a new standalone window containing a copy of the current dashboard. That new window includes a complete widgets container, including
4. Widgets generalities
This chapter provides details on interactions with the widgets themselves.
4.1 Basic operations
To add a new widget to the container, a drag and drop operation must be done. The target grid cell must be empty, providing enough space for the widget being added. The appearance of the mouse should indicates to the user if the operation is allowed. The picture shows the result after nine widgets have been added.
actions:
In edit mode, the widgets include parts allowing various A sizing adorner allowing to resize the widget.
Please notice that resizing is permitted according to the widget definition itself.
A delete button allowing the user to remove the widget.
A bounding box is displayed around the selected widget. In the picture, the widget on the center is the selected one.
4.2 Common widgets properties
This section describes important properties shared by most widgets.
4.3 Widget base - Title
The title is the widget description, displayed in the widget title box. This behavior relies on the selected theme. This implies that custom themes are able to use the title value differently.
4.4 Widget base – DataSource
This important property allows the user to select the data displayed
on the widget. A datasource defines a list of supervision objects and their properties. The datasource’s configuration is done through the dialog open by the button.
The “Type” dropdown list contains the base supervisions types: “Agent”, “Inbound”, “Outbound”, “Queue” and “Campaign”. This indicates on which object type the datasource will be based. The type can only be changed when there is no object and property selected in the following listboxes.
The “Objects” listbox contains the objects used by the datasource. The buttons on the right of the listbox allows the user to perform various actions:
Add a new object of the selected type. This action opens a new dialog showing all objects of the selected type. The following picture shows the dialog for type “Inbound” when the system only defines one inbound activity. This dialog allows multiple selection using the
SHIFT and
CTRL keys.
Delete the object selected in the listbox.
Move the selected object up.
Move the selected object down.
The “All” checkbox allows the user to specify that the datasource does not use a static list of objects but uses rather all objects of the selected type.
The “Properties” listbox contains the properties used the datasource. The buttons on the right of the listbox allows the user to perform various actions:
Add a new property chosen among the properties available on objects of the selected type. This action opens a new dialog showing all available properties. The following picture shows the dialog for type “Inbound. This dialog allows multiple selection using the
SHIFT and
CTRL keys.
Delete the property selected in the listbox
Move the selected object up
Move the selected object down
Please notice that the order of objects and properties is most of the time very important as it impacts the way the data will be presented in the widget.
4.5 Appearance - Palette
The palette defines the colors that will be used in the widget. A palette can be based on colors defined by the current theme or can define its own custom colors. A palette configuration is done through the dialog opened by the
button. The picture below shows the configuration dialog.
The “Type” dropdown list allows the user to select one of the palette defined in the current theme or a custom palette definition. The picture above shows the dialog when a theme palette is chosen.
The “move up” (
) and “move down” (
) buttons allow the user to change the color order in the list. The order is important as it impact the association between a color and a data element of the widget.
The picture on the below shows the dialog when the “custom palette” choice is made. In addition to the buttons controlling the order, the dialog includes also the “add” (
) and “remove” (
) buttons allowing to add and remove colors respectively. Each color can be edited in place using the include color pickers.
5. Widgets types
This chapter describes the default widgets.
5.1 Stacked columns
This widget displays multiple data series in stacked bar graph format. Each bar represents a data series based on objects or on properties.
5.2 Appearance – Show labels
Indicates if each bar is labelled with the series description.
5.3 Appearance – Show values
Indicates if the bar pieces include a textual representation of their values.
5.4 Behavior – Swap axis
Allows the user to choose if the data series is object or property based. The following screenshots illustrate the effect of this setting.
On the right, “SwapAxis” is not active while it is on the left screenshot. The following screenshots specify the palette and datasource settings that were in place to generate the example.
5.5 Behavior – Satck 100%
Indicates if the stacked values are converted to percentages. Here are screenshots of the previous example with this option active.
5.6 Behavior – Update zoom interval
Indicates the time (in seconds) between evaluations of the zoom factor. When the value is increasing and the widget needs more space to display the bar, the zoom factor is decreased immediately to ensure the bar is not overflowing. When the value is decreasing, there is no immediate evaluation of the zoom factor; instead, this evaluation is done at interval specified by the current setting.
5.7 History
This widget displays a single value identified by the first object and the first property of its datasource. This value is represented by a graphical bar. At regular interval, the graph is translated providing a history of the value. On top of every vertical bar, a mark indicates the maximum reached during a time interval.
5.8 Appearance – Show current value
Indicates if the current value should be displayed in a textual form in addition to the graph.
5.9 Behavior – History length
Specifies the number of bars present in the graph.
5.10 Behavior – Refresh interval
Indicates the duration represented by one bar in the graph.
5.11 Behavior – Update zoom interval
Indicates the time (in seconds) between evaluations of the zoom factor. When the value is increasing and the widget needs more space to display the bar, the zoom factor is decreased immediately to ensure the bar is not overflowing. When the value is decreasing, there is no immediate evaluation of the zoom factor; instead, this evaluation is done at interval specified by the current setting.
The following screenshot shows an example of widget and its configuration:
This example shows consequently the evolution of the value for the last 450 seconds.
5.12 Pie
This widget displays a pie chart based on one data series. The parts of the pie chart are consequently representing values of different properties for one object or the value of a property
for multiple objects.
5.12.1 Appearance – Keep aspect ratio
Indicates if the pie chart is constrained to a circle.
5.12.2 Appearance – Show description
Indicates if the pie parts include a description.
5.12.3 Appearance – Show percentage
Indicates if the pie parts include the percentage corresponding to the pie part.
5.12.4 Appearance – Show value
Indicates if the pie parts include their value in a text form in addition to their graphical representation.
5.12.5 Behavior – Swap axis
Allows the user to choose if the data series is object or property based. The following screenshots show the effect of this setting.
On the left, SwapAxis was inactive while it was active on the picture on the right. The widget’s datasource of this example was configured in the way described by the screenshot.
5.13 Value with alert
This widget displays a single value identified by the first object and the first property of its datasource. The widget’s background can also change according its value. Due to its limited
displayed data, this widget size is limited to only one grid cell. Here are the widget settings:
5.13.1 Behavior – Flash level
This indicates when the widget background color begins to flash. A negative value indicates that the background should never flash. The flash color is specified by the other properties (“Behavior – Levels”, page 11 and “Appearance - Palette”, page 8)
5.13.2 Behavior – Levels
This setting controls the value threshold triggering a background color change. The colors used are the ones defined in the configured palette (See “Appearance - Palette”, page 8). The levels are edited using the dialog pictured below.
The “add” (
) button is used to add a new threshold entry to the list. The “remove” (
) button is used to remove the selected entry from the list. Every value can be edited in place using the provided numeric up down control.
The provided example specifies that when the widget values reaches 2, the first color of the palette will be used as background color. When value reaches 5, the second color will be used. When value reaches 10, the third color will be used.
Here are screenshots of the widget with various values (this example uses the default palette).
6. Miscellaneous
Creating useful dashboards is usually a long task, requiring to configure multiple widgets and to associate them in a logical way. As this task is time consuming, it is important to be able to save and load the dashboards environments. As seen in chapter “Widgets container”(See page 3), it is already possible to open and save specific widgets containers. Nevertheless, it is useful to be able to save and open complete supervision contexts, in particular when multiple dashboards are opened simultaneously in standalone windows.
This functionality has been added to the already present “Save workspace” and “Open workspace” supervision functions. When the supervision workspace is saved, standalone windows and their contents are also saved. This includes windows size and positions. Obviously, opening the supervision workspace restore the standalone windows accordingly.
Moreover, the “Save workspace” and “Open workspace” supervision functions have been extended to include the same dialogs as the ones used for saving and opening dashboards: that means that a workspace can now be named and shared between users.
7. Further readings
Dashboard widgets are not limited to the default ones, provided by Nixxis: the platform is open and allows integrators to develop custom made widgets according to customers’ needs. Please use the NCS Dashboard API documentation for more information.