1. Home
  2. TC2.38 - Adding a widget dashboard, exploiting local KPI / metric

TC2.38 - Adding a widget dashboard, exploiting local KPI / metric

Test Case Title

 TC2.38 - Adding a widget dashboard, exploiting local KPI / metric, MyKPI, etc.

Goal

To add a widget in a dashboard representing data available as local KPI / metric, not using the Dashboard Wizard. Please remind that it is also possible to add widgets with KPI/Metrics by using the wizard by selecting on the HLT the KPI, Sensor, MyKPI, etc. Rendering them as single content, gauge and speedometers

Prerequisites

The KPI / metric, MyKPI, Sensor, etc., have to be available locally, by defining them via "Dashboard Metric" menu item in Setting. This feature is accessible only for administrator, or in any OnPremise solution installed from VM and/or from Containers. See installations of Snap4City.

Expected successful result

The widget is shown on the dashboard with the corresponsing data

creation of Dashboards with gauge and/or Speedometer

Steps

 

 

This Test Case is strictly connected with TC1.7. - Dashboard Builder getting data from data sources.

see also tables summarizing: HOW TO: HLT vs Ingestion, and HLT vs Widgets

To add a new widget in a dashboard you have to enter in the edit mode. Click the edit button in the list of available dashboards (Menu: Dashboards) to add a new widget in an existing dashboard or create a new dashboard.

As shown in the above image, a number of buttons will be shown on the top of the page (from left to right):

  • Properties, click here to modify the dashboard settings;
  • Wizard, to enter in the dashboard wizard tool
  • Add Widget, click here to add a widget in your dashboard;
  • Separator, click here to add an empty space in the dashboard to separate the widgets;
  • Embedding, click here to see the HTML code automatically generated to be copied in external webpages to embed the dashboard (as iFrame).
  • Screenshot, to load a preview image of the dashboard to be shown in the dashboard list;
  • Save, click here to save the current position of the widgets in the dashboard. In edit mode, since you can move your widgets on the screen to find a better position, you should click here to save the status when it is satisfactory for you;
  • Preview, click here to see your dashboard in view mode. For a better experience we suggest visualizing your dashboard by the browser in full screen mode;

To add a widget, click the Widget button with the ADD A WIDGET button. A new pop-up form will be open that will allow you to select the widget you prefer and to set the corresponding parameters.

As first step you have to select the Widget type between Actuator or Data viewer. To add a widget based on metric, select “Data viewer” in the drop down list.

 

 

You have then to select the metric category in the corresponding list. Select “Shared metrics” (1). In the Metric dropdown menu on top of the page (2) you have to select the metric of your interest to be shown in the dashboard.

According to the metric selected, you will be able to select the Widget type (3). In the Widget type dropdown menu a list of widgets will be shown coherent with the metric selected. If needed you can add a link to the widget that will be opened if the user clicks on the widget itself (4).

The Generic widget properties on the top right are common for all widgets (5) whereas, once selected the widget, the Specific widget properties will be shown on the bottom left of the page (6). These properties are different for the various widgets. As example, the next image maps the fields available in the Generic widget properties form and the widget areas (in this example the widget is a Speedometer).

In particular, in the Generic widget properties box it is possible to specify:

  1. The title of the widget that will be shown in the header bar;
  2. The color of the widget background;
  3. min and max, and all the segment with different colours
  4. The font size and color of the content text shown in the widget;
  5. The color of the header bar and of the text in the header;
  6. The period dropdown menu is available for specific widget types that represent values showed in a period of time (also the last period can be compared with a previous period of time by using the TimeTrendCompare widget). The period showed in the widget can cover 4 hours, 12 hours, Daily, Weekly, Monthly, Annually. These values have to be stored and available to be showed correctly;
  7. Refresh rate represent the period of time the value in the widget has to be refreshed. As default, every 60 seconds the widget is refreshed but this refresh rate value has to be set according to the metric since it is not useful to update and refresh every 60 secs a widget representing a value updated for example 1 time per day;
  8. Height and width are expressed in columns;
  9. The unit of measure of the value to be shown in the widget.

see dahsboard for example: https://www.snap4city.org/dashboardSmartCity/view/index.php?iddasboard=MjU0MA==

 

 

 

  • Share