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 Pane and enable the Hierarchy Filter Settings to "On."

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. Filter 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. Default Expand to Level:

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

4. 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

5. 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

5. 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

6. 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.

Last updated