Proposing New Component - Bar Graph - Areteans

[s-thutupalli]

Title: BAR GRAPH COMPONENT

Overview

The custom bar graph DX component has been built as a “page type widget component”, to be used across different landing pages within the application.
It allows us to configure a list type data page as the source for the graph with or without any parameter. Additionally, the data page can be filtered and queried based on the some given condition.
The graph component is flexible enough to be configured with a single or double sets of data illustrating a detailed visual representation of it.
The custom component also allows us to demonstrate the graphical comparison with two types of bar graph:
Simple bar graph
Stacked bar graph

Configuration
General configurations
In general configuration, the chart title, its font-size and the color of the title text can be configured.

Default settings:
Font-size of chart title: 16px
Color code of chart title: #000000

Chart settings
Type of chart: Two types of bar charts can be shown i.e. single or stacked.
Container width: The width of the chart container can be configured based on percentages (%) or specific units of pixels (px).
Container height: The height of the chart container can be configured based on percentages (%) or specific units of pixels (px).

Data source for the bar graph
The graph component takes in a list type data page which can be a simple or parametrized.
It also takes in a data key which serves as the key for the x-axis to show the data.
The data page name and data key must be specified.

Grid lines on the bar graph
The horizontal and vertical grid lines can be enabled and disabled at the time of configuration in the APP studio.

X-Axis configurations
The label for the X-axis can be specified. Additionally, the color for the label can be set with a hex color code.
The X-axis units can also be appended or prepended with some constant values, if required.
The X-axis line can also be enabled or disabled. Based on the configuration, either the line will be visible or hidden.
The labels for the X-axis can be enabled or disabled.
Additionally, the user can also enable or disable the tick lines for the labels in the X-axis.

Default settings:
Grid Labels – Enabled
Grid unit labels color - #000000
X-axis grid line- Enabled
X-axis tick lines – Disabled

Y-Axis configurations
The label for the Y-axis can be specified. Additionally, the color for the label can be set with a hex color code.
Number of grid lines can be set for the Y-axis. Based on the number of grid lines, a unit scale will be dynamically configured.
In case of numeric values such as currency or any floating value, number of decimal places can be set.
The Y-axis units can also be appended or prepended. The values to be appended or prepended can either be a constant value or a referenced property.
The Y-axis line can also be enabled or disabled. Based on the configuration, either the line will be visible or hidden.
The labels for the Y-axis can be enabled or disabled.
Additionally, the user can also enable or disable the tick lines for the labels in the Y-axis.

Default settings:
Grid Labels – Enabled
Grid unit labels color - #000000
Number of grid lines - 6
Y-axis grid line - Enabled
Y-axis tick lines – Disabled

Series configurations
The type of series can be of two types: single or multiple
Based on the type of series, the data keys can be configured. By default, the type of series will be primary with only one set of series to be configured.
In case, the type of series is multiple, then there will be two data keys to be configured: primary series and secondary series.
The primary series bar color can be configured either by OOTB theme design token or through custom color.
If custom color is chosen as color type for a series, then the hex color code must be specified for it.
Additionally, the column spacing can be configured.

Legend configurations
The legends can be enabled or disabled.
They can be positioned to the bottom or to the right of the graph. Additionally, they can be aligned horizontally or vertically.

Default settings:
Legends – Enabled
Position – Bottom
Alignment – Horizontal

Use cases
The custom bar graph component allows us to demonstrate a graphical comparison between two sets of data.
It can also be used to illustrate the frequency of occurrence for some given item over a given period.
Examples: Active cases per work list, Active cases per workbasket, for showing some comparison between two sets of data.

Attached the component code and detailed description with images below.

Bar graph description with screenshots.pdf
CustomBarGraph.zip

[ricmars]

same as pie chart component - Why build a Constellation DX component when this UX pattern can be achieved using a dashboard with promoted filters and an insight?

[s-thutupalli]

Hi Richard,

The three chart components (Bar chart, Line chart and Pie chart) are similar in nature as they are based on almost the same logic. The idea behind creating individual Constellation DX components was to simplify the need and usage of the graph components.

Although, to create a visual demonstration within a dashboard, insights can be used. But as insights are usually built on Report definitions, these custom constellation components are simple and straight forward which would take in a list type data page as a source. Based on whether the data page is parameterised or not, it will further filtered down the response and use a simplified data page to create the visual representation from it.

Thanks,
Sowjanya