Standard Widgets¶

Standard widgets contain no data fields by default. application creator need to configure the data ites for the widgets. The page describes the standard widgets provided by Portfolio.

Liquid Fill¶

Liquid Fill displays the completing progress of target metrics.

Data Field¶

You can add up to 3 data fields to a Liquid Fill widget.

Chart Style¶

You can configure the following style settings of a Liquid Fill widget.

Field	Description
Color	Select the color of the liquid fill.
Link	Enable to display the link button that can open the URL address specified in Link Address.
Display Name	Enter the name of the link button.
Link Type	Choose On a new page or On the current page when opening the link of the widget.
Link Address	Enter the URL address to open when selecting the link button.
Show Divider	Display a dividing line on the frame of the widget.
Divider Position	After enabling Show Divider, select the position of the divider, supporting top, bottom, left, and right.

Metric¶

Metric displays the data of the selected data fields.

Data Field¶

You can add up to 5 data fields to a Metric widget.

Chart Style¶

You can configure the following style settings of a Metric widget.

Field	Description
Display Style	Select the style to display the names and values of data fields.
Arrangement	Select the layout of data fields, supporting Horizontal and Vertical.
Font Type	Select the font of data, supporting Normal and LED.
Flip Card Effect	Add frames to data values, and flip card animation when data values change.
Show Divider	Display a dividing line on the frame of the widget.
Divider Position	After enabling Show Divider, select the position of the divider, supporting Top, Bottom, Left, and Right.

Progress Bar¶

Progress Bar displays the completion progress in bar chart.

Data Field¶

You can add up to 3 data fields to a Progress Bar widget.

Chart Style¶

You can configure the following style settings of a Progress Bar widget.

Field	Description
Show Data Field Name	Enable to show the data field names above the progress bars of the dat fields.
Color	Select the color of progress bars.
Show Divider	Display a dividing line on the frame of the widget.
Divider Position	After enabling Show Divider, select the position of the divider, supporting Top, Bottom, Left, and Right.

Time Series¶

Time Series display the data trend or the comparison of multiple asset data fields throughout a specified time period.

Data Field¶

You can add up to 4 data fields to a Time Series widget.

Chart Style¶

You can configure the following style settings of a Time Series widget.

Field	Description
Chart Style	Select the style of the time series chart for a specified data field, supporting Line, Bar, Area, and Bullet.
Color	Select the color of the chart for a specified data field.
Show Future Data	Display the data on a future time point, for example the estimated or planned data.
Y Axis Range	Specify the range of values on Axis Y, supporting Auto to automatically specify the range or Fixed to enter the maximum and minimum value to specify the range.
Interpolate Values	Enable to automatically fill in the data according to previous data when the data of specified time points are missed.
Show Divider	Display a dividing line on the frame of the widget.
Divider Position	After enabling Show Divider, select the position of the divider, supporting Top, Bottom, Left, and Right.

Time Settings¶

You can configure the following time settings of a Time Series widget.

Field	Description
Overlapped Intervals	Specify the time interval of adjacent data, supporting the intersection of the time interval for each data field.
Time Range	Specify the start time and end time to acquire data.

Ranking¶

Ranking displays a series of data and progress bars in ascending or descending order.

Note

You can only add 1 Ranking widget for a specified asset dimension.

Data Field¶

You can add up to 30 data fields to a Ranking Widget.

Chart Style¶

You can configure the following style settings of a Ranking widget.

Field	Description
Style	Select the style of ranking.
Tab	Enter the names of the 2 tabs in the Ranking widget.
Show Divider	Display a dividing line on the frame of the widget.
Divider Position	After enabling Show Divider, select the position of the divider, supporting Top, Bottom, Left, and Right.

Pie Chart¶

Pie Chart displays the proportion of values and compares individual data fields in a series of dat fields.

Data Field¶

You can add 1 data field to a Pie Chart widget.

Chart Style¶

You can configure the following style settings of a Pie Chart widget.

Field	Description
Asset Dimension	Select the asset dimension of the chart data, supporting region and site.
Color	Select the color of data in the pie chart.
Display Number	Select the number of data fields displayed individually. Other data fields with fewer proportion are displayed as others on the chart.
Show Divider	Display a dividing line on the frame of the widget.
Divider Position	After enabling Show Divider, select the position of the divider, supporting Top, Bottom, Left, and Right.

Embedded Content¶

Embedded Content displays contents such as pictures and websites.

Data Field¶

You don’t need to add data fields to an Embedded Content widget.

Chart Style¶

You can configure the following style settings of an Embedded Content widget.

Field	Description
Type	Select the type of the embedded content, supporting Image and Subpage.
Style	Select the frame style of the embedded content.
URL	Enter the URL Address to open the target address when selecting the widget on canvas.
Show Divider	Display a dividing line on the frame of the widget.
Divider Position	After enabling Show Divider, select the position of the divider, supporting Top, Bottom, Left, and Right.

Action¶

Action displays the button to perform the specified tasks.

Data Field¶

You don’t need to add data fields to an Action widget.

Chart Style¶

Select Add Action in the Chart Style section for the following configuration.

Field	Description
Action Name	Enter the displayed name for the widget.
Link Type	Choose on a new page or on the current page when opening the link of the widget.
Link Address	Enter the URL Address to open the target address when selecting the widget on canvas.
Button Style	Select the style of the operation button, supporting Solid Button and Outline Button.
Show Icon	Enable to display the icon along side the name tag.
Show Divider	Display a dividing line on the frame of the widget.
Divider Position	After enabling Show Divider, select the position of the divider, supporting Top, Bottom, Left, and Right.

Device List¶

Device List displays the devices of a specified site.

Note

You can only add a Device List widget on the canvas of a site map.

Data Field¶

You can add object types to the Device List widget, and add up to 30 data fields to an object type.

Chart Style¶

You can configure the following style settings for a Device List widget.

Field	Description
Link	Enable to display the link button that can open the URL address specified in Link Address.
Link Name	Enter the name of the link button.
Link Type	Choose On a new page or On the current page when opening the link of the widget.
Link Address	Enter the URL address to open when selecting the link button.
Status Icon	Display the connecting status of devices by icons.
Rows Per Page	Specify the number of devices displayed on one page of the widget.
Show Divider	Display a dividing line on the frame of the widget.
Divider Position	After enabling Show Divider, select the position of the divider, supporting Top, Bottom, Left, and Right.

DTV Widget¶

DTV Widget integrates widgets configured in Digital Twin Visualization (DTV) to Portfolio pages.

Data Field¶

You cannot add data fields to a DTV Widget.

Chart Style¶

You can configure the following style settings for a DTV Widget.

Field	Description
DTV Widget	Enter the URL of the Digital Twin Visualization widget.
Show Divider	Display a dividing line on the frame of the widget.
Divider Position	After enabling Show Divider, select the position of the divider, supporting Top, Bottom, Left, and Right.