Skip to content

serban-petrescu/ui5-viz

Repository files navigation

UI5 Data Visualization Build Status Built with Grunt GitHub Release License

A set of controls centered around the visualization of data.

Graph

Plain

The core control of this library is the Graph control. It can represent an (un)directed graph with the help of two aggregations: Nodes and Links. The Graph control is based on the d3 force-directed graph.

Each link has two associated nodes and may have a label. Nodes may be expanded or collapsed by clicking on them. Further details for a node may be displayed with the help of the details event (based on the HTML contextmenu event: left-click on desktops, long tap on mobiles). Nodes also may be in a busy state, when they display a busy indicator.

Sample.

Key Based

The plain approach has one major downside: the links between nodes are done via UI5 associations. This means that it is not suitable for data binding. To overcome this, two specialized classes are provided: KeyNode and KeyLink. Each KeyNode must have a unique key (unique inside the graph) and each KeyLink stored the keys of two nodes. This representation is more suitable for data binding, because the keys are properties of both the nodes and the links.

Sample.

OData Metadata Explorer

The MetadataExplorer is a specialized control for visualizing the metadata of an OData service. For each OData entity type a node is created and for each OData association a link between the associated entity types is created. The explorer may either display all the nodes at once or it can start with a subset of root nodes, allowing the user to expand and collapse the further nodes.

Sample (left - all nodes; right - root nodes).

OData Explorer

The ODataExplorer is a splecialized control for visualizing the contents of an OData service. It starts from a root entity given as a path in the model. The user may expand each node to obtain the related nodes (linked through a navigation property). For single-cardinality navigation properties, a simple link is created between the nodes. For multiple-cardinality navigation properties, a dedicated node is used to represent the navigation property. Paging is also enabled by creating a dedicated 'More' node (similar mechanism as for the UI5 growing list).

Sample (the root node may be changed with the context menu).

Links

For a specific version of this library, check the releases section.

You can also cosume this library through bower: bower install spet-ui5-viz.