CSBL - widgetRadarSeries (IN/OUT)

 

6.1.1 widgetRadarSeries as Reading (OUT) widget

First of all, an existing widgetRadar must be identified in the dashboard, of which the id <TARGET_WIDGET_NAME> must be noted.

The JS function to be inserted in the appropriate CK Editor box (in more options) of another widget of the same dashboard (for example, a button widgetImpulseButton) in order to pilot the <TARGET_WIDGET_NAME> widgetRadar is of the following type:
 

function execute() {
       $('body').trigger({
             type: " showRadarSeriesFromExternalContent_<TARGET_WIDGET_NAME>",
             eventGenerator: $(this),
             targetWidget: <TARGET_WIDGET_NAME>,
             passedData: [{"metricId":"https://servicemap.disit.org/WebAppGrafo/api/v1/?serviceUri=http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/I...","metricHighLevelType":"Sensor","metricName":"DISIT:orionUNIFI:IT0952A1","metricType":"O3_"},{"metricId":"https://servicemap.disit.org/WebAppGrafo/api/v1/?serviceUri=http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/I...","metricHighLevelType":"Sensor","metricName":"DISIT:orionUNIFI:IT0952A1","metricType":"NO2"},{"metricId":"https://servicemap.disit.org/WebAppGrafo/api/v1/?serviceUri=http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/I...","metricHighLevelType":"Sensor","metricName":"DISIT:orionUNIFI:IT0957A1","metricType":"O3_"}]
       });
}

6.1.2 widgetRadarSeries as Writing widget: Click on widgetRadarSeries element

When clicking on an element of the widgetRadarSeries, a JSON object called param is passed to the execute() function set in the CK Editor, in which there are the type of event (in this case "click") and all the elements present inside the widget in the layers field. The following example shows how to send the information to a multi-series widget (widgetCurvedLineSeries) related to a selected Entiy/Device metric which has been clicked on the Radar Series chart:

function execute() {
    var e = JSON.parse(param);
    console.log(e);
    if (e.event == "click") {
       let serviceUri = "http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/" + e.value.metricName.slice(17, e.value.metricName.length);
       var data = [];
       data[0] = {};
       data[0].metricId= "http://servicemap.disit.org/WebAppGrafo/api/v1/?serviceUri=http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/" + e.value.metricName.slice(17, e.value.metricName.length) + "&format=json";
       data[0].metricHighLevelType = "Sensor";
       data[0].metricName = "DISIT:orionUNIFI:" + e.value.metricName.slice(17, e.value.metricName.length);
       data[0].smField = e.value.metricType;
       data[0].serviceUri = serviceUri;
       $('body').trigger({
          type: "showCurvedLinesFromExternalContent_w_AggregationSeries_3721_widgetCurvedLineSeries35547",
          eventGenerator: $(this),
          targetWidget: "w_AggregationSeries_3721_widgetCurvedLineSeries35547",
          range: "7/DAY",
          field: data.smField,
          passedData: data
       });
    }
}

6.1.3 widgetRadarSeries as Writing widget: Click on Legend Items

When clicking on an element of the widgetRadarSeries legend, a JSON object called param is passed to the execute() function set in the CK Editor, in which there are the type of event (in this case "legendItemClick"), all the elements present inside the widget in the layers field with inside even if they are visible or not (corresponding to whether or not they are selected in the legend) and finally all the metrics present.

Below is an example of how to send the sensors visible in the legend of the command widget to a Radar Series when clicking on a legend item of it:

function execute(){
   var e = JSON.parse(param);
   if(e.event == "legendItemClick"){
      var date = [];
      let name, h = 0;
      for (var l in e.layers) {
         if(e.layers[l].visible == true){
            name = e.layers[l].name.slice(17,e.layers[l].name.length);
            for(var m in e.metrics){
               date[h] = {};
               data[h].metricId = "https://servicemap.disit.org/WebAppGrafo/api/v1/?serviceUri=http://www.disit.org/km4city/resource/iot/orionUNIFI/DISIT/"+name ;
               data[h].metricHighLevelType = "Sensor";
               data[h].metricName = e.layers[l].name;
               data[h].metricType = e.metrics[m];
               h++;
            }
         }
      }
      $('body').trigger({
         type: "showRadarSeriesFromExternalContent_w_AggregationSeries_1_widgetRadarSeries49",
         eventGenerator: $(this),
         targetWidget: "w_AggregationSeries_1_widgetRadarSeries49",
         passedData: data
      });
   }
}

6.1.4 widgetRadarSeries Time Selection

The Radar Series widget also allows you to send a date and time parameter as input to another widget to insert in the calendar. In this way it is possible to synchronize more than one widget at the same moment in time.

For example, if in a dashboard there are two RadarSeries widgets with different data and I want them to always show data relating to the same moment in time, I can activate this feature so that when I use the calendar in one of the two, the other is also changed.

This feature is activated when you edit the calendar. The following parameters must be set in the execute() function of the widget writer:

event: "set_time"

It is an important parameter because it is used to activate the synchronization function. It doesn't work without it.

datetime: param

This parameter must receive the date of the datetime automatically from the selection of the Calendar.

passedData: []

Usually when writing the Radar Series widget, it is possible to send a list of elements to the target widget, in the case of the selectionTime this parameter can be represented as an empty array. However, it must be present for the feature to work properly.

function execute() {
    $('body').trigger({
        type: "showRadarSeriesFromExternalContent_w_AggregationSeries_3865_widgetRadarSeries37141",
        targetWidget: "w_AggregationSeries_3865_widgetRadarSeries37141",
        widgetTitle: "RadarWidget",
        event: "set_time",
        datetime: param,
        passedData: []
    });
}