3. Hierarchy Filter

The Hierarchy Filter View enables users to display and interact with data in a hierarchical structure within the visual. This feature allows easier navigation and filtering of data, especially when dealing with multi-level categories.

Video 1: Hierarchy Filter

How to enable Hierarchy Filter:

1

Add the required data to the Category field in the visualizations pane.

2

Go to the Format Visual and enable the Hierarchy Filter toggle to "On."

3

By default, checkbox is shown to filter from the hierarchy.

Image 1: Hierarchy Filter with Radio view type.

Configuring the Hierarchy View:

When Hierarchy Filter is enabled, additional sections for customization become available in the format pane:

General Section:

1. Category Styles:

• When enabled allows user to customize specific styling for different levels of the hierarchy.

• When Category Styles is enabled, node-specific sections like Top Node Style, Parent Node Style, and Child Node Style are disabled.

2. View Type:

• Choose from Checkbox, Radio, or List options for selecting items. By default, checkbox is multi select and radio is single select. When the list option is selected, a toggle is provided to enable or disable single select.

Image 2: Radio View Type

Image 3: List View Type

Image 4: Checkbox View Type

3. Leaf Single Select:

• Allows user to customize the default behavior for single selection in hierarchical filters. By default, selecting a parent node selects all its children—even in single select mode.

• When this option is enabled, selecting a parent will instead select only the first child, providing more precise control. This setting is available for both Radio and List view types.

4. Default Expand to Level:

• Configure the "Expand to Level" setting to define the number of hierarchy levels to be expanded in the visual.

5. Parent Child Indent:

• Use this option to set the indentation level for parent-child hierarchies by specifying the desired indentation value.

Image 5: Expand to level and Parent child indent options

6. Custom Context Menu:

• Enable to activate additional options, such as Expand All, Collapse All, and Expand To, accessible via right-click in the visual.

Image 6: Custom Context menu in Hierarchy Filter

7. Display Child Count:

• When enabled, you can select the Child Count Type as Leaf Count or Immediate Child.

• Leaf Count: Shows the total number of child elements at the leaf level.

• Immediate Child: Displays the count of direct child elements.

Image 7: Child count type selection in format pane

8. Single Child Display:

• When enabled, you can select the display as Display All (XABCN), Display Parent Only (XABC), Display Parent (Multi-Level) (XA), Display Child as Parent (XAN).

• Display All (XABCN): Shows all levels.

• Display Parent Only (XABC): Displays only the parent level.

• Display Parent (Multi-Level) (XA): Displays all parent levels.

• Display Child as Parent (XAN): Shows the last level as the parent.

Appearance Section:

Image 8: Appearance Section in format pane

1. Alternate Row Customization:

• Enable it to apply alternating background colors for rows.

• Customize the background color via a color selection pop-up.

Image 9: Alternate Row customisation with options to choose color

2. Expand Collapse Icon:

• Select Arrow or Plus/Minus as the expand collapse icon from the dropdown list.

Image 10: Plus/Minus icon for expand collapse

Image 11: Arrow Icon for expand collapse

3. Utility Icons:

• Enable this option to display utility icons like Copy and Expand/Collapse within the visual on Hover.

Image 12: Utility icons when enabled in the visual

Note Styles Section:

Image 13: Node styles section in Format pane

1. Top Node Style:

   • Enabled when there are three or more levels in the Category Field.

   • Customize Font Style as Bold, Italics, or Default, Font Size and Font Color.

2. Parent Node Style:

   • Enabled when there are two or more levels in the Category Field.

   • Customize Font Style as Bold, Italics, or Default, Font Size and Font Color.

3. Child Node Style:

   • Enabled when there is only one level in the Category Field.

   • Customize Font Style as Bold, Italics, or Default, Font Size and Font Color.

Image 2: Hierarchy Filter with Top, Parent and Child node style configurations.

Category Styles Section:

Enable Category Styles in hierarchy filter options to format the category using Category styles as in facet filter.

1. General Section: Configuring this Applies to all levels in the category field. Configuration options available in this section are the following:

   • Text Color: Click on the Dropdown to select a color.

   • Background Color: Click on the Dropdown to select a color.

   • Font Style: Dropdown to set font style, with size adjustment and formatting options (Bold, Italics, Underline).

   • Header Label Color: Click on the Dropdown to select a color.

   • Header Background Color: Click on the Dropdown to select a color.

   • Header Font Style: Dropdown to set font style, with size adjustment and formatting options (Bold, Italics, Underline).

2. Category Section: Sections are added corresponding to the data entered in the category field. Configuration options available in this section are the following:

   • Filter Type: Dropdown to choose filter icons (Checkbox, Radio, List, Dropdown, Tile, Toggle).

   • Single Select: Toggle to enable or disable single selection (available for List, Dropdown, Tile, and Toggle filter types).

   • Placeholder Text: Option to set placeholder text.

   • Text Color: Dropdown with a pop-up to choose a color.

   • Background Color: Dropdown with a pop-up to choose a color.

   • Font Style: Dropdown to set font style, with size adjustment and formatting options (Bold, Italics, Underline).

   • Header Text Color: Dropdown to select a color for header text.

   • Header Background Color: Dropdown to select a background color for the header.

   • Header Font Style: Dropdown for font customization, with size adjustment and formatting options as described above.

3. Reset to Default: A button located at the bottom left of the Category Styles section to reset all customizations.