UOC for Midstream widget configuration

Save PDF

Last UpdatedJul 30, 2024
3 minute read

For all widgets, through the following properties, respective changes can be made. The table below contains descriptions of properties in widgets:

Property	Description
Click	This property allows you to send any detail of the chart as a parameter. Based on the provided values, you can perform some other action (in the current charts, this property is not used).
Default Options	This property allows you to add any options of highcharts by default. You need to provide it as a valid JSON string in highcharts supported attributes.
Imports	This property supports few external modules from highcharts. For example, Exporting.js and Gantt.js are external js libraries from highcharts that are required for specific charts. You can add them as required, separated by a comma.
Style Sheets	This property allows you to change the background of chart and Legend background color.
Options	This property allows you to change the FontFamily, Title Color Fontsize, XAxis/YAxis title, and label colors.
X Range	This property allows you to specify the range of values to be displayed on the X axis.
Y Range	This property allows you to specify the range of values to be displayed on the Y axis.

Timeline Chart

Timeline charts represent events in chronological order. The exact timeline chart implementation steps depend on the data source.

For a timeline chart widget, you can configure namespace variables with respective strings for properties Data, Period, StyleSheet, Theme, and Title.

UOCMidstream_Timeline>>Data
UOCMidstream_Timeline>>Period
UOCMidstream_Timeline>>StyleSheet
UOCMidstream_Timeline>>Theme
UOCMidstream_Timeline>>Title

Treemap Widget

The treemap widget displays the number of incidents for each process. Based on quantity, the chart size changes, and hovering over a particular incident displays the incident number and percentage.

For a treemap widget, you can configure the namespace variables mentioned below with respective strings for properties Data, Options, and StyleSheet.

UOCMidstream_Widgets>>TreeMapData
UOCMidstream_Widgets>>TreeMapOptions
UOCMidstream_Widgets>>TreeMapStyleSheet

Sankey Diagram

A sankey diagram is a visualization used to depict a flow from one set of values to another. The things being connected are called nodes, and the connections are called links. Sankeys are best used when you want to show a many-to-many mapping between two domains (e.g., universities and majors) or multiple paths through a set of stages (for instance, Google Analytics uses sankeys to show how traffic flows from pages to other pages on your web site).

UOC for Midstream uses the Flexchart widget for Sankey Diagram.

To configure Sankey diagram, you need to configure the namespace variables mentioned below with respective strings for Data, Imports, Options, and StyleSheet.

UOCMidStream_SankeyMain>>Click
UOCMidStream_SankeyMain>>Data
UOCMidStream_SankeyMain>>DefaultOptions
UOCMidStream_SankeyMain>>Imports
UOCMidStream_SankeyMain>>Options
UOCMidStream_SankeyMain>>Styles
UOCMidStream_SankeyMain>>XRange
UOCMidStream_SankeyMain>>YRange

GISMap Widget

GISMap Widget is a web widget for interactive maps that displays map data in web browsers. Graphics placed on a map typically represent business assets located within an area shown by the map. These graphics can include information to show the current state of processes at each business location.

Below are the few properties you can change to customize GISMapWidget:

To change the center of the base map, edit "Center" in the "UOCMidstream_GISMapWidget" namespace. Enter exact coordinates in this field, as the same will be updated in the base map.
To set the zoom percentage at which the map can be zoomed out during runtime, edit "MinZoom" in the "UOCMidstream_GISMapWidget" namespace.
To set the zoom percentage at which the map can be zoomed in during the runtime, edit "MaxZoom" in the "UOCMidstream_GISMapWidget" namespace.
To change the base map color, edit the "Layer_Background" in the "UOCMidstream_GISMapWidgetNS" namespace.
To change which layers are visible at the beginning when the application gets launched, set visibility true or false in each layer defined under the "UOCMidstream_GISMapWidgetNS" namespace.
To add or remove any layers or change the way they are grouped:
- Open the "UOCMidstream_GIS_DefaultLayer1" or "UOCMidstream_GIS_DefaultLayer2" symbol's properties.
- In the "Defaultlayer" custom property, change the string to make the respective changes.

AVEVA™ Unified Operations Center for Midstream