Update plot inside UIViewUsageAndEvents

#1

I have to generate a line plot inside a UIViewUsageAndEvents by means of a evalMetric function. I have a selector button (UIViewFieldSelectField) in the page containing the UIViewUsageAndEvents component. I need to update the plot according to the selected element inside UIViewFieldSelectField.

It’s not clear to how to use the combination of metadata and behavior:

    "data": {
        "record": "PackageUi.DashboardPlants"
    },
    "behavior": [
        {
            "query": "DashboardDtrCodeHistorical",
            "trigger": "change",
            "action": {
                "type": "UIActionUpdateDashboard"
            }
        }
    ]

In addition, if the UIViewFieldSelectField and the UIViewUsageAndEvents are both located inside the page element (instead of being one inside the second), is it possible for UIViewUsageAndEvents to have visibility of information of what has been selected in UIViewFieldSelectField? Is the hierarchy of the component/sub-compoent structure relevant for the visibility of {{record.data.id}}.

I had a look at…

c3ShowType(UIViewUsageAndEvents) --> data

…but it is not clear to me how to make data visible from outside component to inner components.

0 Likes

#2

@rghera within the component I see you have defined

   "data": {
        "record": "PackageUi.DashboardPlants"
    }

is this set with fields record: true / collection false in the datasource? Does the UIActionUpdateDashboard refresh also the fiter of PackageUi.DashboardPlants?

0 Likes

#3

Actually, I need to use record:false/collection:false.

My issue is related to the customization of the record pointed by the evalMetric that the UsageChart calls to plot the metric. Below, the spec and error I see in the Console Network Tab:

The spec that I find in the Header of the call is:

end: “2019-03-06T13:25:11.894Z”
expression: “BoilerIsPowerOff”
id: “”
include: “start, end, dates, data”
interval: “SECOND”
start: “2019-03-06T06:25:11.894Z”

As you can see, id field is empty.

Here, the error in the Response:

“message” : “MetricEngine error : \nEvalMetricSpec is missing id. Incorrect invocation.”

0 Likes

#4

I think root cause is you are using record:false in the component - so record.data.id is not passed to input parameter of the evalMetric

0 Likes

#5

I’m trying a different solution, which is still not working. The plot in UsageChart does not get updated.

In my UIViewUsageAndEvents I have defined the following on top:

"data": {
    "record": "PackageUi.DashboardSibiloSource"
}

My datasource is defined as follows:

ui module PackageBoilerUi {
    dataSource DashboardSibiloSource {
        "collection": false,
        "record": false,
        "c3type": "PackageBoilerTdAsset",
        "c3function": "fetch",
        "responseSelector": "objs.sibilos",
        "c3arguments": {
            "spec": {
                "limit": -1,
                "include": "sibilos.id"
            }
        }
    }
}

In my Dashboard page (Dashboard.c3ui) I define the UIViewUsageAndEvents and the UIViewFieldSelectField as components.

ui module PackageBoilerUi {
    page Dashboard {
        "url": "dashboard",
        "title": "LEAKAGE DETECTION",
        "titleAlign": "center",
        "data": {
          "record": "PackageBoilerUi.DashboardBoilerSource"
        },
        "behavior": [
            {
                "query": "DashboardDtrCode",
                "trigger": "change",
                "action": {
                    "type": "UIActionUpdateDashboardBoiler"
                }
            }
        ],
        "components": [
            {
                "id": "SideMenu",
                "component": "PackageBoilerUi.Menu",
                "renderTo": "#side-menu",
                "activeItem": "PackageBoilerUi"
            },
            {
                "id": "SideSubMenu",
                "component": "PackageBoilerUi.SubMenu",
                "renderTo": "#side-sub-menu",
                "activeItem": "PackageBoilerUi"
            },
            {
                "id": "DashboardDtrCode",
                "component": "UIViewFieldSelectField",
                "renderTo": "#DashboardDtrCode",
                "label": "Asset",
                "labelPosition": "left",
                "sortField": "id",
                "valueField": "id",
                "displayField":"id",
                "autoSelectFirst" : false,
                "data": {
                    "collection": "PackageBoilerUi.DashboardBoilerSource"
                },
                "multiple": false
            },
            {
                "id": "DashboardSibiloCode",
                "component": "UIViewFieldSelectField",
                "renderTo": "#DashboardSibiloCode",
                "label": "Sibilo",
                "labelPosition": "left",
                "sortField": "id",
                "valueField": "id",
                "displayField":"id",
                "autoSelectFirst" : false,
                "data": {
                    "collection": "PackageBoilerUi.DashboardSibiloSource"
                },
                "multiple": false
            },
            {
                "id": "GeneralInfo",
                "component": "UIViewKendoGrid",
                "renderTo": "#GeneralInfo",
                "fixedHeader": true,
                "reRenderOnDataLoad": true,
                "paginate": false,
                "scrollable": false,
                "small": false,
                "listenToPageRecord": false,
                "expandable":false,
                "expandOnClick": false,
                "paginationConfig": {
                    "messages": {
                        "display": "{~PackageBoilerUi.paginationConfig.messages.display~}",
                        "empty": "{~PackageBoilerUi.paginationConfig.messages.empty~}"
                    }
                },
                "data": {
                    "collection": "PackageBoilerUi.GeneralInfoSource"
                },
                "columns": [
                    {
                        "id": "plantName",
                        "label": "{~PackageBoilerUi.Detail.PlantName.label~}",
                        "field": "plantName",
                        "sortable": false
                    },
                    {
                        "id": "boilerUnit",
                        "label": "{~PackageBoilerUi.Detail.BoilerUnit.label~}",
                        "field": "boilerUnit",
                        "sortable": false
                    },
                    {
                        "id": "status",
                        "label": "{~PackageBoilerUi.Detail.Status.label~}",
                        "field": "status",
                        "sortable": false
                    },
                    {
                        "id": "pressureLastUpdate",
                        "label": "{~PackageBoilerUi.Detail.PressureLastUpdate.label~}",
                        "field": "pressureLastUpdate",
                        "sortable": false
                    },
                    {
                        "id": "pressureValue",
                        "label": "{~PackageBoilerUi.Detail.PressureValue.label~}",
                        "field": "pressureValue",
                        "sortable": false
                    }
                ]
            },
            {
                "id": "Container",
                "component": "UIViewContainer",
                "renderTo": "#ContainerDetails",
                "title": "{~PackageBoilerUi.Detail.DetailTabs.UsageChart.title~}",
                "innerTemplate": "PackageBoilerUi.UsageChartOnlineContainer",
                "components":[
                    {
                        "id": "UIViewGenerationBoilerDiagram",
                        "component": "UIViewGenerationBoilerDiagram",
                        "renderTo": "#BoilerDiagram"
                    },
                    {
                        "id": "UsageChart",
                        "component": "PackageBoilerUi.UsageChart",
                        "renderTo" : "#Chart"
                    }
                ]
            }
        ],
    "id": "Dashboard"
    }
}

Finally the UIViewAndEvents implementation:

ui module PackageBoilerUi {
 component UsageChart {
    "id": "PackageBoilerUi.UsageChart",
    "component": "UIViewOnlineUsageAndEventsBoiler",
    "enablePriorPeriod": false,
    "enableExportChart": false,
    "enableStatistics": false,
    "ignoreTimeZone": true,
    "title": "{~PackageBoilerUi.UsageChart.title~}",
    "medianText": "{~PackageBoilerUi.UsageChart.medianText~}",
    "showPriorText": "{~PackageBoilerUi.UsageChart.showPriorText~}",
    "consumptionText": "{~PackageBoilerUi.chart.consumption.axis~}",
    "statisticsDataPointsText": "{~PackageBoilerUi.UsageChart.statisticsDataPointsText~}",
    "statisticsHolidayText": "{~PackageBoilerUi.UsageChart.statisticsHolidayText~}",
    "statisticsFooterText": "{~PackageBoilerUi.UsageChart.statisticsFooterText~}",
    "dateRangeSelectorEnabled": false,
    "data": {
      "record": "PackageBoilerUi.DashboardSibiloSource"
    },
    "dynamicDateRange":true,
    "template":["<div data-expanded='show'>",
                  "<div class='form-inline' style='margin: 15px 0 5px 0;'>",
                    "<div class='col-md-8 text-center'>",
                      "<% if (relativeDate) { %><label class='col-xs-5 col-form-label'> <%= component.get('relativeDateLabel') %> </label> <% } %>",
                      "<% if (dateRangeSelectorEnabled) { %><div class='<%= relativeDate ? 'col-md-auto': 'col-md-auto' %>'><span id='DateRangeSelect'></span></div><% } %>",
                    "</div>",
                    "<div class='col-md-4 text-right' style='margin-right: 0px;'>",
                      "<% if (baselineEnabled) { %><a class='btn btn-default btn-sm baseline-period'><%= baselinePeriodText %></a><% } %>",
                      "<% if (sourceIdSelectEnabled){ %>",
                        "<label id='sourceIdSelectLabel' style='margin: 0 5px 0 0px;'><%= component.get('sourceIdSelectLabel') %></label>",
                        "<div id='sourceIdSelect' style='display: inline-block;'></div>",
                      "<% } %>",
                      "<% if (intervalEnabled){ %>",
                        "<div class='row' style='margin: 0 0 5px 0;'>",
                          "<label style='margin: 0 0 0 0;'><%= component.get('intervalText') %></label>",
                        "</div>",
                        "<div id='IntervalSelect' style='display: inline-block; width: 110px;'></div>",
                      "<% } %>",
                      "<% if (component.get('enablePriorPeriod')) { %>",
                        "<span style='margin-left: 10px;' id='PriorPeriodCheckbox'></span>",
                      "<% } else { %>",
                        "<span style='margin-left: 10px; display:none;' id='PriorPeriodCheckbox'></span>",
                      "<% } %>",
                      "<% if (clearSelectedLegendSeriesButtonEnabled) { %>",
                        "<a class='btn btn-default btn-sm' id='clearSelectedSeries' style='margin-left: 10px;'>",
                          "<%= component.get('clearSelectedSeriesButtonText') %>",
                        "</a>",
                      "<% } %>",
                    "</div>",
                  "</div>",
                  "<div class='summary-container row'></div>",
                  "<div class='chart-container'></div>",
                  "<div class='legend-container'></div>",
                "</div>"],
    "intervalOptions": [
        { "text": "{~PackageBoilerUi.UsageChart.IntervalSelect.opts.6.text~}", "id": "SECOND" }
    ],
    "customChartCfg": {
        "lang": {
            "shortMonths": [
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.shortMonths.0~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.shortMonths.1~}",
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.shortMonths.2~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.shortMonths.3~}",
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.shortMonths.4~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.shortMonths.5~}",
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.shortMonths.6~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.shortMonths.7~}",
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.shortMonths.8~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.shortMonths.9~}",
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.shortMonths.10~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.shortMonths.11~}"
            ],
            "months": [
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.months.0~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.months.1~}",
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.months.2~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.months.3~}",
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.months.4~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.months.5~}",
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.months.6~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.months.7~}",
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.months.8~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.months.9~}",
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.months.10~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.months.11~}"
            ],
            "weekdays": [
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.weekdays.0~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.weekdays.1~}",
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.weekdays.2~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.weekdays.3~}",
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.weekdays.4~}","{~PackageBoilerUi.UsageChart.chartCfg.lang.weekdays.5~}",
                "{~PackageBoilerUi.UsageChart.chartCfg.lang.weekdays.6~}"
            ]
        },
        "xAxis": {
          "title": {
            "text": "Time",
            "align": "middle"
          },
          "opposite": false
        }
    },
    "metricSelectorCollection": {
                "responseSelector": "",
                "collection": true,
                "c3type": "MetricSearchUtil",
                "c3function": "fetchMetrics",
                "c3arguments": {
                    "spec": {
                        "filter": "intersects(name, ['BalanceTubeDeltaPress', 'FilterInDeltaPress', 'PWayInPress', 'PWayThrustBearingOutLubeOilTemp', 'ExternalSideInSealingFluidTemp', 'AuxTurbSideBearingTemp', 'AuxTurbSideBearingVib', 'AuxTurbSideInSealingFluidTemp', 'AuxTurbSideOutSealingFluidTemp', 'AuxTurbSideSealingFluidDeltaTemp', 'BalanceTubeFlow', 'FeedWaterPumpEfficiency', 'ExternalSideBearingTemp', 'ExternalSideBearingVib', 'ExternalSideOutSealingFluidTemp', 'ExternalSideSealingFluidDeltaTemp', 'ExternalThrustPadTemp', 'FilterQuality', 'FeedWaterPumpNetPositiveSuctionHead', 'OutCollectorTemp', 'OutPress'])",
                        "limit": -1,
                        "include": "name, label, unit"
                    }
                }
    },
    "metricSelectorSrcType": "PackageStructureTdGenerationAsset",
    "yAxisMin": null,
    "autoSelectFirstIntervalOption": false,
    "defaultInterval": "SECOND",
    "minutesTimeRange": 60,
    "startDate": {
        "referenceConfig": [
        "now"
        ],
        "direction": "before",
        "number": 6,
        "unit": "hours"
    },
    "endDate": {
        "referenceConfig": [
        "now"
        ],
        "direction": "after",
        "number": 1,
        "unit": "hours"
    },
    "permissions": [
        {
            "typeName": "PackageBoilerTdAsset",
            "action": "evalMetric"
        }
    ],
    "statisticsDataPoints": true,
    "statisticsHoliday": true,
    "series": [
        {
            "id": "RiskScore",
            "isTimeseries": true,
            "name": "{~PackageBoilerUi.UsageChart.series.15MinUsage.name~}",
            "data": {
                "c3type": "PackageBoilerTdAsset",
                "c3function": "evalMetric",
                "c3arguments": {
                    "spec": {
                        "id": "{{record.data.sibilo.id}}",
                        "expression": "BoilerIsPowerOff",
                        "include": "start, end, dates, data"
                    }
                },
                "responseTransform": null,
                "collection": false
            },
            "color": "#f0a63a",
            "unit": "%",
            "chartType": "line",
            "axis": "{~PackageBoilerUi.chart.consumption.axis~}",
            "tooltipGroup": "usage",
            "hasPriorPeriodSeries": false,
            "disabled": false,
            "priorPeriodSeriesConfig": {
                "color": "#d68510"
            }
        }
    ],
    "legendGroups": [
        {
            "id": "usage",
            "name": "{~PackageBoilerUi.UsageChart.legendGroups.Usage~}",
            "series": [
                "RiskScore"
            ]
        }
    ]
}

}

0 Likes

#6

@rghera I would proceed in this way to troubleshoot the issue:

  1. is the DashboardSibiloSource invoked in networkTab?
  2. Do you have an action ( follow up of a “behaviour” ) that updates the filter of DashboardSibiloSource according to the selected sibilo?
  3. Is “sibilos” in type PackageBoilerTdAsset an array? if so then record.data.id won’t work since it is an array and not a single record.
  4. Again I think that
"collection": false,
 "record": false,

is not correct - you should pass record true

0 Likes

#7

I created a new dataSource in order to set it as a record=true and to be updated by means of user selection on UIViewFieldSelectField. Here the code:

ui module MyPackageBoilerUi {
    dataSource DashboardSibiloSource {
        "collection": true,
        "record": false,
        "c3type": "MyPackageBoilerTdAsset",
        "c3function": "fetch",
        "responseSelector": "objs.sibilos",
        "c3arguments": {
            "spec": {
                "limit": -1,
                "include": "sibilos.id"
            }
        }
    }
}

Since the dashboard contains two elements UIViewFieldSelectField I setup two different behaviors… but only the first seems to run. The second, associated to DashboardSibiloCode is not triggered.

 "behavior": [
        {
            "query": "DashboardDtrCode",
            "trigger": "change",
            "action": {
                "type": "UIActionUpdateDashboardBoiler"
            }
        },
        {
            "query": "DashboardSibiloCode",
            "trigger": "change",
            "action": {
                "type": "UIActionUpdateDashboardSibilo"
            }
        }
    ],

The second action should update (refreshDataSource) of another dataSource defined as follows:

ui module MyPackageBoilerUi {
    dataSource DashboardSibiloSourcePlot {
        "collection": false,
        "record": true,
        "c3type": "MyPackageBoilerTdAsset",
        "c3function": "fetch",
        "responseSelector": "objs.sibilos",
        "c3arguments": {
            "spec": {
                "limit": -1,
                "include": "sibilos.id"
            }
        }
    }
}

This latter is the one which feeds the UIViewUsageAndChart component which is located inside the dashboard itset. But the chart doen’t not get updated and UIActionUpdateDashboardSibilo.js is not actually called.

0 Likes

#8

Issue solved by adding a further dataSource. Now I have:

  • DataSource for Selector 1 of type Collection
  • DataSource for Selector 2 (which is updated on the basis of the selection made in Selector 1) of type Collection
  • DataSource for UIViewUsageAndChart element of type Record
0 Likes