Filtering multi-layer data: Tree label filtering - vividime Community

Tree Label Filtering component is to display filtering options in a tree label structure, which allows direct filtering of multiple levels of data. Multiple dimension fields of any query can be bound.

Putting multiple related filtering conditions together and expanding them in the form of labels makes it convenient for users to directly select multi-layer conditions to complete the filtering.

1)Create a new dashboard, create a bar chart, bind "Product Type", "Product Name", "Sales", "Sales Volume" as shown below.

2)Add the Tree Label Filter component, drag and drop the Tree Label Filter component from the Components area to the canvas.

3)To bind data to the tree label filter component, select component and drag "Product Type" and "Product Name" columns to the bind data area.

b)Setting Option: Keep the default selection of Multi-Selection, and check Commit on Change, Show All, Ignore Null Value , and Filter between Levels remain unchanged.

5)Save dashboard, click the "Save" button on the upper right corner of the page, and set the file name in the Save dialog . For more information about dashboard saving, please refer to Dashboard Operation and Setting > Save, Save As, Auto Save.

6)Preview and view dashboard, select Herbal Tea, Lemon Tea in the tree Label Filter. The bar chart only shows the sales volume and sales data of Herbal Tea.

You can set layout of the component through Setting > Layout on the right side, and the product provides two forms of presentation: List and Dropdown List. By default, the product is displayed in the form of list.

[Bottom Show Button] is not checked by default. After checking, the button will be displayed at the bottom of the drop-down options, and will no longer be displayed in the toolbar at the top right of the component. After checking options, you can click Clear to clear all the checkboxes, and click Apply button to filter according to the checkboxes. If you don't check Bottom Show Button, you can click Clear to clear all the checkboxes, and click Apply button to filter the results according to the checkboxes.

[Vertical Arrangement] the arragement of fields and values is vertical, the default is Vertical Arragement.

[Display at most N values] The maximum number of values to be displayed for each level of field is 30 by default. Label values exceeding this number will no longer be displayed and a tip will be given at the end.

On right side Setting > Option, including single-selection and multi-selection, you can set the option rules, as shown below.

[Single-Selection]After checking this option, only one data can be selected for filtering under each dimension.

[Multi-selection] After checking this option, you can select multiple data for filtering under each dimension.

[Commit On Change] This option is checked by default, which means that the filter function is executed immediately after checking. When this option is unchecked, the Apply button will be displayed in the tree label filter component, and filter function will be executed by clicking this button after checking the data in the tree label filter.

[Display Unlimit] is checked by default. After checking, an "Unlimit" will be added at the beginning of the value, check "Unlimited" to select all options quickly, usually used when there are more options; Uncheck "Unlimited" and there will be no "Unlimit" option.

[Ignore Null Value] is checked by default, when it is checked, the null is ignored. When unchecked, the null option is displayed as null.

[Filter Between Levels]: Checked by default, the data of each level will be linked to each other and only the data under the selected dimension will be displayed; when unchecked, all the values will be displayed under each level, and they will not affect each other when they are selected.

[Unselected Value Tip] The layout is dropdown list, when the value is not selected, the user can customize the tip, the default is "Please select...".

You can also set the style of the component in Format on the right side, including text, border, background color, alpha, etc. For details, please refer to Component Operation and Setting > Format.