This component provides the templates you can use to display the connection information for the connected products.
The templates below can be used to display the status and quality of the connection, even aggregated on location or customer, helping the various users of the DPS to understand if there is any connectivity problem. To do this, in addition to the Connection Status metric, it is necessary to configure the Connection Index insight.
Technical templates require also to define additional thing properties to save the connection type (Wi-Fi o Cellular), and a metric to register the signal level. For each template, you can find the list of required data.
Templates
space_dashboardCustomer Details
Displays aggregate connection analysis across multiple machines.
This template displays:
- the average connection index over the selected period;
- the trend of the Connection Index over the selected period;
- the number of machines grouped by quality of Connection Index.
Template Name: connection_customer_details
Where can be used: page content.
code
<div class="d-flex flex-wrap components-row">
<composite-widget [title]="'Connection Index'" class="w-100">
<div class="d-flex flex-wrap components-row justify-content-end">
<period-field-v2></period-field-v2>
</div>
<div class="d-flex flex-wrap components-row justify-content-center">
<value-widget [title]="'Index'" class="card-border flex-fill">
<statistic resource="thing" aggregation="AVG" property="properties.connection_index_LAST_30_DAYS" filter="integerFormat" unit="%"></statistic>
</value-widget>
<time-series-chart-widget [title]="'Trend'" class="card-border flex-fill" [config]="{exportEnabled: false, scrollbarEnabled: false, filterEnabled: false, legendPosition: 'none', height: '300px'}" [inputs]="{period: 'period'}">
<metric name="thing.connection_index" unit="%" aggregation="AVG_DAYS_1" filter="integerFormat" [chartOptions]="{rendering: 'COLLAPSED', valueGrouping: 'AVG'}"></metric>
</time-series-chart-widget>
<composite-widget [title]="'Machines'" class="card-border flex-fill">
<div class="d-flex flex-wrap components-row">
<value-widget [showTitle]="false" valueMode="VALUE" [showColors]="false" [showDetailsBar]="false" class="w-100">
<statistic resource="thing"></statistic>
</value-widget>
<bar-chart-widget-v2 layout="BARS" class="w-100" [config]="{rotate: true, mode: 'MICRO', height: '96px'}" [inputs]="{period: 'period'}">
<statistic resource="THING" aggregation="COUNT" sortDirection="DESC" [groupBy]="['properties.connection_index_LAST_30_DAYS']" unit="%"></statistic>
</bar-chart-widget-v2>
</div>
</composite-widget>
</div>
</composite-widget>
</div>
<div class="d-flex flex-wrap components-row">
<location-list-widget-v2 [title]="'Locations'" accordionTemplate="connection_thing_grid" class="w-100">
<property name="name" label="Location"></property>
<property name="properties.connection_index_LAST_30_DAYS" label="Connection Index" filter="integerFormat|dictionary:{'showIcon':true,'showValue':true,'showLabel':true}"></property>
</location-list-widget-v2>
</div>
This template requires the following data:
DATA |
TYPE |
DESCRIPTION |
Connection Index |
Metric |
The insight metric providing the daily connection index of the machine. |
space_dashboardCustomers Overview
Visualization of connection analysis among multiple customers.
This template displays:
- the number of customers grouped by connection index level;
- the number of machines grouped by connection index level;
- the list of customers sorted by customer connection index.
Template Name: connection_customers_overview
Where can be used: page content.
code
<div class="d-flex components-row flex-fill">
<composite-widget [title]="'Customers Distribution over Connection Index Thresholds - Last 30 Days'" class="flex-fill">
<div class="d-flex flex-wrap components-row">
<value-widget [showTitle]="false" valueMode="VALUE" [showColors]="false" [showDetailsBar]="false" class="w-100">
<statistic resource="customer" aggregation="COUNT"></statistic>
</value-widget>
<bar-chart-widget-v2 class="w-100" [config]="{rotate: true, mode: 'MICRO', height: '150px'}" [inputs]="{period: 'period'}">
<statistic resource="CUSTOMER" aggregation="COUNT" [groupBy]="['properties.connection_index_LAST_30_DAYS']" sortDirection="DESC"></statistic>
</bar-chart-widget-v2>
</div>
</composite-widget>
<composite-widget [title]="'Machine Distribution over Connection Index Thresholds - Last 30 Days'" class="flex-fill">
<div class="d-flex flex-wrap components-row">
<value-widget [showTitle]="false" valueMode="VALUE" [showColors]="false" [showDetailsBar]="false" class="w-100">
<statistic resource="thing" aggregation="COUNT"></statistic>
</value-widget>
<bar-chart-widget-v2 class="w-100" [config]="{rotate: true, mode: 'MICRO', height: '150px'}" [inputs]="{period: 'period'}">
<statistic resource="THING" aggregation="COUNT" sortDirection="DESC" [groupBy]="['properties.connection_index_LAST_30_DAYS']"></statistic>
</bar-chart-widget-v2>
</div>
</composite-widget>
</div>
<div class="d-flex flex-wrap components-row">
<composite-widget [title]="'Customers list - Last 30 Days'" class="w-100">
<div class="d-flex flex-wrap components-row">
<search-field id="query" searchTarget="CUSTOMERS" class="w-100">
<search-input type="PROPERTY" property="properties.connection_index_LAST_30_DAYS"></search-input>
<search-input type="KEY"></search-input>
</search-field>
</div>
<div class="d-flex flex-column components-column flex-fill">
<customer-list-widget-v2 detailsPath="connection" queryFieldRef="query" [pageSize]="10" [enableActions]="false" [controlsEnabled]="false" class="w-100">
<property name="name" label="Customer"></property>
<property name="properties.connection_index_LAST_30_DAYS" label="Connection Index" filter="integerFormat|dictionary:{'showIcon':true,'showValue':true,'showLabel':true}"></property>
<property name="properties.thingCount" label="Total Machines"></property>
</customer-list-widget-v2>
</div>
</composite-widget>
</div>
This template requires the following data:
DATA |
TYPE |
DESCRIPTION |
Connection Index |
Metric |
The insight metric providing the daily connection index of the machine. |
Connection Index AVG LAST 30d |
Property |
The customer property that provides the average connection index for the past 30 days. |
dropdownThing Card Detailed
Displays machine connection information in a card, including:
- the connection index of the last day;
- the percentage of time spent in online status;
- the number of disconnections;
- the total disconnection time.
Template Name: connection_thing_card_detailed
code
<div class="d-flex flex-wrap components-row">
<thing-details-widget [title]="getThing()?.name" class="card-border flex-fill">
<metric name="connection_index" label="Connection Index" filter="integerFormat|dictionary:{'showIcon':true,'showValue':true,'showLabel':false}"></metric>
<metric name="connection_index_online_time_perc" label="Online Percentage" filter="integerFormat|dictionary:{'showIcon':true,'showValue':true,'showLabel':false}"></metric>
<metric name="connection_index_disc_count" label="Disconnections" filter="integerFormat"></metric>
<metric name="connection_index_offline_time" label="Disconnected Time" filter="millisToPeriod"></metric>
</thing-details-widget>
</div>
This template requires the following data:
DATA |
TYPE |
DESCRIPTION |
Connection Index |
Metric |
The insight metric providing the daily connection index of the machine. |
Disconnection Count |
Metric |
The insight metric providing the daily disconnection count of the machine. |
Offline Time |
Metric |
The insight metric providing the daily time the machine is offline. |
Online Time Percentage |
Metric |
The insight metric providing the daily percentage the machine is online. |
How to include this template:
<include-template name="connection_thing_card_detailed"></include-template>
dropdownThing Card Index
Displays the machine connection index over the last 30 days into a card.
The value is highlighted according to the connection index thresholds. In this way at a quick glance it will be possible to see if everything is okay.
Template Name: connection_thing_card_index
code
<value-widget [title]="'Connection Index'" class="flex-fill">
<property name="properties.connection_index_LAST_30_DAYS" filter="integerFormat"></property>
</value-widget>
This template requires the following data:
DATA |
TYPE |
DESCRIPTION |
Connection Index |
Metric |
The insight metric providing the daily connection index of the machine. |
Connection Index AVG LAST 30d |
Property |
The customer property that provides the average connection index for the past 30 days. |
How to include this template:
<include-template name="connection_thing_card_index"></include-template>
space_dashboardThing Details
Provides the operations manager with a detailed view of the connection index of a single machine.
This template displays:
- the average value and trend of the connection index over the past 30 days, highlighted by threshold.
- the percentage of time spent in online status;
- the number of disconnections;
- the total time disconnected;
- the detail over the last 7 days of the connection status.
Template Name: connection_thing_details
Where can be used: thing details page.
code
<div class="d-flex flex-wrap components-row">
<value-widget [title]="'Connection Index - Last 30 Days'" class="flex-fill">
<property name="properties.connection_index_LAST_30_DAYS" filter="integerFormat"></property>
</value-widget>
<micro-chart-widget [title]="'Trend'" class="flex-fill" height="121px" defaultPeriodValue="LAST_30_DAYS">
<metric name="connection_index" filter="integerFormat"></metric>
</micro-chart-widget>
</div>
<div class="d-flex flex-wrap components-row">
<value-widget [title]="'Online percentage'" [showColors]="false" [showDetailsBar]="false" class="flex-fill">
<metric name="connection_index_online_time_perc" filter="integerFormat"></metric>
</value-widget>
<value-widget [title]="'Disconnections'" [showColors]="false" [showDetailsBar]="false" class="flex-fill">
<metric name="connection_index_disc_count" filter="integerFormat"></metric>
</value-widget>
<value-widget [title]="'Disconnected time'" [showColors]="false" [showDetailsBar]="false" class="flex-fill">
<metric name="connection_index_offline_time" filter="millisToPeriod"></metric>
</value-widget>
</div>
<div class="d-flex flex-wrap components-row">
<metric-state-diagram-widget metricName="Connection Status" predicate="lt" value="1" stateBarColor="#DF2316" [title]="'Disconnections - Last 7 Days'" detailsLabel="Disconnections" totalLabel="Total disconnected time" class="w-100">
<metric name="connection_index" filter="integerFormat|dictionary:{'showIcon':true,'showValue':true,'showLabel':'false'}"></metric>
</metric-state-diagram-widget>
</div>
This template requires the following data:
DATA |
TYPE |
DESCRIPTION |
Connection Index |
Metric |
The insight metric providing the daily connection index of the machine. |
Connection Index AVG LAST 30d |
Property |
The customer property that provides the average connection index for the past 30 days. |
Disconnection Count |
Metric |
The insight metric providing the daily disconnection count of the machine. |
Connection Status |
Metric |
The predefined metric providing the machine connection status. |
Offline Time |
Metric |
The insight metric providing the daily time the machine is offline. |
Online Time Percentage |
Metric |
The insight metric providing the daily percentage the machine is online. |
space_dashboardThing Details Technical
Provides technical users with useful information about the connection of a single machine.
This template displays:
- the type of connection and signal level;
- the connection index for the past 30 days;
- the detail of the connection status for the past 7 days;
- the connection index benchmark of the past 30 days compared with similar products;
- the Wi-Fi and signal level;
- the firmware version history.
Template Name: connection_thing_details_technical
Where can be used: thing details page.
code
<div class="d-flex flex-wrap components-row justify-content-center">
<value-widget [title]="'Connection Index'" class="flex-fill">
<metric name="connection_index" unit="%" filter="singleDecimalFormat"></metric>
</value-widget>
<micro-chart-widget [title]="'Trend'" height="121px" class="flex-fill">
<metric name="connection_index" unit="%" filter="singleDecimalFormat"></metric>
</micro-chart-widget>
</div>
<div class="d-flex flex-wrap components-row">
<metric-state-diagram-widget metricName="Connection Status" predicate="lt" value="1" stateBarColor="#DF2316" [title]="'Disconnections - Last 7 Days'" detailsLabel="Disconnections" totalLabel="Total disconnected time" class="w-100">
<metric name="connection_index" filter="integerFormat|dictionary:{'showIcon':true,'showValue':true,'showLabel':'false'}"></metric>
<metric name="signalLevel" aggregation="AVG"></metric>
</metric-state-diagram-widget>
</div>
<div class="d-flex flex-wrap components-row">
<benchmark-widget [title]="'Connection Index Benchmark - Last 30 days'" target="THING" valueProperty="properties.connection_index_LAST_30_DAYS" valueFilter="integerFormat" valueLabel="Connection Index (Last 30 days)" unit="%" [minValue]="0" [maxValue]="100" [maxBarNumber]="10" [clusterProperties]="['thingDefinition.name']" class="flex-fill" height="300px"></benchmark-widget>
</div>
<div class="d-flex flex-wrap components-row justify-content-center">
<div class="d-flex flex-column components-column align-self-start flex-fill">
<value-widget [title]="'Connection Type'" class="flex-fill">
<property name="properties.connectionType"></property>
</value-widget>
<thing-details-widget [title]="'SIM'" *ngIf="getThing().simDetails?.simIccid">
<property name="simDetails.simIccid" label="ICCID"></property>
<property name="simDetails.simStatus" label="Status"></property>
<property name="simDetails.sessionStatus" label="Session Status"></property>
</thing-details-widget>
<value-widget [title]="'Signal Level (Last 7 days)'" class="flex-fill" period="LAST_7_DAYS">
<metric name="signalLevel" aggregation="AVG"></metric>
</value-widget>
<micro-chart-widget [title]="'Signal Level'" defaultPeriodValue="LAST_7_DAYS" height="118px" class="flex-fill">
<metric name="signalLevel"></metric>
</micro-chart-widget>
</div>
<div class="d-flex flex-column components-column w-50 flex-fill">
<multi-metric-list-widget [title]="'Historical Firmware Updates'" [filterEnabled]="false" defaultPeriodValue="LAST_30_DAYS" class="flex-fill">
<metric name="Firmware"></metric>
</multi-metric-list-widget>
</div>
</div>
This template requires the following data:
DATA |
TYPE |
DESCRIPTION |
Connection Index |
Metric |
The insight metric providing the daily connection index of the machine. |
Connection Type |
Property |
The thing property providing the connection type (e.g. WiFi or Cellular). |
Firmware |
Metric |
The Raw data metric providing the installed firmware version number. |
Signal level |
Metric |
The Raw data metric providing the WiFi or Cellular signal level. |
space_dashboardThing Grid
Displays the connection insight of multiple machine through a thing grid widget.
Template Name: connection_thing_grid
Where can be used: page content.
code
<div class="d-flex flex-wrap components-row">
<thing-grid-widget template="connection_thing_card_detailed" class="w-100"></thing-grid-widget>
</div>
This template requires the following data:
DATA |
TYPE |
DESCRIPTION |
Connection Index |
Metric |
The insight metric providing the daily connection index of the machine. |
Configuration
Here are some tips for integrating the Connection Index within your DPS, supporting the various users who need to know how products are connected to the cloud.
The templates provided by this component can be used inside main pages, tabs or embedded into cards.
Connection Page
For the Service Manager and Sales Manager, you can add a main page called Connection, which provides to these users a connection index overview on the customers.
To add the Connection page, you should:
- Enter the Interfaces / Views page.
- Select the General tab and then the View you want to modify (e.g Service Manager).
- Press the Add Page button and provide the required information.
As the icon for the menu item, you can use one of the images in the Resources paragraph below.
- Press the Add Sub Page button and provide the required information.
- Select the connection_index_customers_overview template.
- Confirm and save the page.
For the Service Manager view, you have also to configure an additional page:
- Enter the Service Manager view.
- Select the Customer details page.
- Add a sub page named Connection, set the navigation as Tab and the path as connection.
Select the template named connection_customer_details.
Resources
You can use the following icons in case the page is visible into a menu.
Dark |
Light |
|
|
For more icons you can refer to this page.
Comments
0 comments
Please sign in to leave a comment.