Decomposition

The decomposition tree provides a powerful tool for visualizing data across various dimensions. It allows us to conduct a detailed analysis of data by drilling down into the hierarchical structure. It splits core metrics and identifies key factors that affect these metrics. With the help of artificial intelligence (AI), the decomposition tree can even help identify the next dimension of data to explore based on predefined criteria.

Best Situations to Use a Decomposition chart

• When the user has a time series data set with a clear trend and seasonality patterns. A decomposition tree chart can help to break down the time series into its components and make it easier to analyze.

• To identify underlying trends and seasonality in your business data.

  • E.g., a Decomposition chart can help a retailer to accurately forecast sales for a particular product and adjust inventory and marketing strategies accordingly.

Steps to configure Decomposition Chart

• Drag and drop the decomposition chart from the component library. The chart looks as given in the below image on the Designer canvas page:

• Associate a valid dataset. The sample Dataset used to generate a model chart is given-below:

State	City	Population	Revenue	Indicator	text	TurnOver	LOB	Revenue1
California	San Jose	1000	10	10	This is to test tooltip width in all the components of the designer dashboard.	90000000	Client	301,397,852
California	San Francisco	2500	45	45	This is to test tooltip width in all the components of the designer dashboard.	20000000	Storage	215,354,753
California	Los Angeles	4500	75	75	This is to test tooltip width in all the components of the designer dashbaord.	30000000	Server	190,903,506
California	San Diego	500	5	5	This is to test tooltip width in all the components of the designer dashboard.	70000000	Services	170,247,575
California	Santa Clara	300	3	3	This is to test tooltip width in all the components of the designer dashboard.	50000000	Network	10,384,658
NewYork	Buffalo	100	2	2	This is to test tooltip width in all the components of the designer dashbaord.	60000000	EI	3,883,111
NewYork	NY City	6000	78	78	This is to test tooltip width in all the components of the designer dashboard.	40000000	Client	301,397,852
NewYork	Rochester	278	23	23	This is to test tooltip width in all the components of the designer dashboard.	80000000	Storage	215,354,753
Texas	Houston	3000	45	45	This is to test tooltip width in all the components of the designer dashbaord.	10000000	Server	190,903,506
Texas	Austin	3000	45	45	This is to test tooltip width in all the components of the designer dashboard.	130000000	Services	170,247,575
Texas	Dallas	2500	34	34	This is to test tooltip width in all the components of the designer dashboard.	110000000	Network	10,384,658
Texas	San Antonio	1500	23	23	This is to test tooltip width in all the components of the designer dashbaord.	190000000	EI	3,883,111
Rajasthan	Jaipur	7500	1	1	This is to test tooltip width in all the components of the designer dashboard.	100000000	Client	301,397,852
Rajasthan	Ajmer	5000	0.5	0.5	This is to test tooltip width in all the components of the designer dashboard.	220000000	Storage	215,354,753
Rajasthan	Udaipur	3000	0.5	0.5	This is to test tooltip width in all the components of the designer dashbaord.	150000000	Server	190,903,506
Rajasthan	Bikaner	3000	0.5	0.5	This is to test tooltip width in all the components of the designer dashboard.	160000000	Services	170,247,575
Rajasthan	Jodhpur	4500	1	1	This is to test tooltip width in all the components of the designer dashboard.	250000000	Network	10,384,658
Rajasthan	Kota	2500	0.4	0.4	This is to test tooltip width in all the components of the designer dashbaord.	180000000	EI	3,883,111
UP	Kanpur	8000	3	3	This is to test tooltip width in all the components of the designer dashboard.	120000000	Client	301,397,852
UP	Allahabad	6700	2	2	This is to test tooltip width in all the components of the designer dashboard.	200000000	Storage	215,354,753
UP	Lucknow	7800	3	3	This is to test tooltip width in all the components of the designer dashbaord.	210000000	Server	190,903,506
UP	Noida	4500	4	4	This is to test tooltip width in all the components of the designer dashboard.	140000000	Services	170,247,575
Karnataka	Bengaluru	10000	15	15	This is to test tooltip width in all the components of the designer dashboard.	230000000	Network	10,384,658
Karnataka	Mysore	3000	2	2	This is to test tooltip width in all the components of the designer dashbaord.	240000000	EI	3,883,111
Karnataka	Belagum	2500	0.5	0.5	This is to test tooltip width in all the components of the designer dashboard.	170000000	EI	3,883,112

• Consider the Series field as Population and visualize population data as per various categories such as Country, State, and City in a hierarchical order.

• The total population per country, state, and city is displayed in each node while opening the Preview of the Dashboard.

  • While clicking on one node, other nodes of the particular hierarchy get closed, and all the sub-categories/ children nodes get displayed. E.g., the sub-categories of the USA are displayed in the below-given image:

Properties of the Decomposition chart

General Property

Users can change the height, width, top, and left. If initial visibility is unchecked, then the component won’t be visible at the first preview. Users can manage the max button to minimize and maximize the chart.

General Properties

Use a checkmark for the Enable Context Levels property field. Users can select the next hierarchy levels as per requirement.

Enabling Context Level using the General Properties fields

Use a right-click on the node to select the next level.

The Parent Node will display the children nodes by using the right click on it

The user can use the Right-click at each level to open the sub-nodes

Aggregation Type

The Aggregation type property displays the value of the node based on the selected aggregation.

• When the selected aggregation type is sum.

• When the selected aggregation type is Mean.

• When the selected aggregation type is Percentage.

• When the selected aggregation type is Count.

Maximum Nodes

Another property called Maximum Nodes has been provided to control the number of nodes in each hierarchy.

• The set value for the Maximum Node field is 10 so if a particular node contains more than 10 children nodes, only 9 children nodes with comparatively more values get displayed as visible nodes, and the remaining children nodes with less value are shown as others.

E.g., In the given Decomposition chart the Maximum Nodes are set as 3

The number of Maximum Nodes gets limited to 3 and the nodes with less values get clubbed as Others as displayed in the below-given image:

Background Property

Provide the following Background Properties for the Decomposition chart:

• Gradient Rotation

• Opacity

• Gradient

• Border

• Border Color

• Border Radius

• Shadow

• Shadow Color

• Shadow Transparency

Node Style

Provide Node Style for styling the nodes and their default values.

• Node Height: Set the height of nodes.

• Node Color: Set the background color of the node.

• Fill Color: Control node fill color

• Stroke Color: Set the Border color of the node.

• Label Font Color: Select a color for the Fonts.

• Label Font Size: Set the Font Size.

• Label Font Style: Select an option out of the given choices from the drop-down menu.

• Label Font Weight: Select an option out of the given choices from the drop-down menu.

• Label Font Family: Select a Font Family type using the drop-down menu.

• Control Node Label font properties.

The following image displays a customized Decomposition chart.

ToolTip

Provided Tooltip property in the property section.

The Tooltip appears for the chart as shown below:

Formatter

Use the Formatter property fields to format the default Decomposition

The default chart chart gets fomatted as shown below:

Data Used

State	City	Population	Revenue	Indicator	text	TurnOver	LOB	Revenue1
California	San Jose	1000	10	10	This is to test tooltip width in all the components of the designer dashboard.	90000000	Client	301,397,852
California	San Franscisco	2500	45	45	This is to test tooltip width in all the components of the designer dashboard.	20000000	Storage	215,354,753
California	Los Angeles	4500	75	75	This is to test tooltip width in all the components of the designer dashbaord.	30000000	Server	190,903,506
California	San Diego	500	5	5	This is to test tooltip width in all the components of the designer dashboard.	70000000	Services	170,247,575
California	Santa Clara	300	3	3	This is to test tooltip width in all the components of the designer dashboard.	50000000	Network	10,384,658
NewYork	Buffalo	100	2	2	This is to test tooltip width in all the components of the designer dashbaord.	60000000	EI	3,883,111
NewYork	NY City	6000	78	78	This is to test tooltip width in all the components of the designer dashboard.	40000000	Client	301,397,852
NewYork	Rochester	278	23	23	This is to test tooltip width in all the components of the designer dashboard.	80000000	Storage	215,354,753
Texas	Houston	3000	45	45	This is to test tooltip width in all the components of the designer dashbaord.	10000000	Server	190,903,506
Texas	Austin	3000	45	45	This is to test tooltip width in all the components of the designer dashboard.	130000000	Services	170,247,575
Texas	Dallas	2500	34	34	This is to test tooltip width in all the components of the designer dashboard.	110000000	Network	10,384,658
Texas	San Antonio	1500	23	23	This is to test tooltip width in all the components of the designer dashbaord.	190000000	EI	3,883,111
Rajasthan	Jaipur	7500	1	1	This is to test tooltip width in all the components of the designer dashboard.	100000000	Client	301,397,852
Rajasthan	Ajmer	5000	0.5	0.5	This is to test tooltip width in all the components of the designer dashboard.	220000000	Storage	215,354,753
Rajasthan	Udaipur	3000	0.5	0.5	This is to test tooltip width in all the components of the designer dashbaord.	150000000	Server	190,903,506
Rajasthan	Bikaner	3000	0.5	0.5	This is to test tooltip width in all the components of the designer dashboard.	160000000	Services	170,247,575
Rajasthan	Jodhpur	4500	1	1	This is to test tooltip width in all the components of the designer dashboard.	250000000	Network	10,384,658
Rajasthan	Kota	2500	0.4	0.4	This is to test tooltip width in all the components of the designer dashbaord.	180000000	EI	3,883,111
UP	Kanpur	8000	3	3	This is to test tooltip width in all the components of the designer dashboard.	120000000	Client	301,397,852
UP	Allahabad	6700	2	2	This is to test tooltip width in all the components of the designer dashboard.	200000000	Storage	215,354,753
UP	Lucknow	7800	3	3	This is to test tooltip width in all the components of the designer dashbaord.	210000000	Server	190,903,506
UP	Noida	4500	4	4	This is to test tooltip width in all the components of the designer dashboard.	140000000	Services	170,247,575
Karnataka	Bengaluru	10000	15	15	This is to test tooltip width in all the components of the designer dashboard.	230000000	Network	10,384,658
Karnataka	Mysore	3000	2	2	This is to test tooltip width in all the components of the designer dashbaord.	240000000	EI	3,883,111
Karnataka	Belagum	2500	0.5	0.5	This is to test tooltip width in all the components of the designer dashboard.	170000000	EI	3,883,112