cascade-selectors

Chart style

A cascade selector is an advanced control component that serves as a cascade form in visual applications. It submits user-selected data to the backend for processing, or displays user-selected content on other components through interactive configuration.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel to search for a configuration item by name. Fuzzy match is supported. For more information, see Search configuration items.

  • Size: the width and height of the widget. Unit: pixels.

  • Positioning: the x-axis and y-axis of the component. Unit: pixels. X-coordinate is the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate is the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotate: The rotation angle of the widget around its center. Unit: degrees.

    • Enter the degrees in the Rotation Angle spin box, or click the plus sign (+) or minus sign (-) to adjust the value.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 1. A value of 0 hides the widget. A value of 1 fully displays the widget. Default value: 1.

• Input box

  • Default Selected: Enter the default selected path, with items separated by commas (,). Example: zhejiang,hangzhou,xihu.

  • Prompt Text: the placeholder text displayed in the input box when no value is selected.

  • No Data: the text displayed when the drop-down list is empty.

  • Feature Enhancement: the feature enhancement style of the input box.

    Metric	description
    Drop-down search	If you turn on the switch, you can enter search keywords in the input box to filter the drop-down list. If you turn off the switch, custom search is disabled.
    Clear Selected	If you turn on the switch and the input box has a value, a Clear button appears when you hover the mouse over the input box. Click the icon to clear the input box content. If you turn off the switch, the clear feature is disabled.
    Instant Change	If you turn on the switch, the input box content updates in real time when a drop-down option is selected. If you turn off the switch, instant change is disabled.
    Disable	Turn on the switch to disable the cascade selector. Turn off the switch to use the cascade selector normally.

  • Background Color: the background color of the cascade selector.

  • Border Style: the border style of the cascade selector. You can set the line thickness, line type, line color, corner radius, and shadow color.

  • Text Style: the style of the text in the cascade selector.

    Metric	description
    Text Margins	The left margin of the display text inside the cascade selector.
    Text Style	The font family, font weight, font size, and color of the text in the cascade selector.

  • Auxiliary Key: the auxiliary key style of the cascade selector, including the drop-down arrow and clear icon.

    Metric	description
    Size	The size of the auxiliary button in the cascade selector.
    Right Margin	The right margin of the auxiliary key in the cascade selector.
    Drop-down arrow	Turn on the switch to display and configure the color of the drop-down arrow. Turn off the switch to hide the drop-down arrow.
    Clear icon	The icon color and background color of the clear button in the cascade selector.

• Drop-down Box

  • Height: the height of the drop-down box.

    Metric	description
    Container height	The overall height of the drop-down list container.
    Container Top Spacing	The distance between the top of the drop-down container and the cascade selector. Unit: px.

  • Background: the background color of the drop-down box.

  • Border: the border style of the drop-down box.

    Metric	description
    thickness	The thickness of the drop-down box border.
    Type	The border line type of the drop-down box. Valid values: Solid Line, Dashed Line, and Dotted Line.
    Color	The color of the drop-down box border.
    Fillet	The border radius of the drop-down box. Valid values: 0 to 360. A value of 0 produces a square box. A value of 360 produces a fully rounded box.

  • Option Style: the style of the option text in the drop-down list.

    Metric	description
    Option Height	The height of each option in the drop-down box. Unit: pixels.
    Text Style	The text style of options in the drop-down box, including font family, font weight, font size, and color.
    Text Color	The text color in the drop-down box for the hovered and selected states.
    Background Color	The background color of options in the drop-down list for the default, hovered, and selected states.
    Right Arrow	Right Margin: the distance between the right arrow and the right edge. Size: the size of the right arrow. Color: the color of the right arrow.
    Secondary Menu	The display mode of the secondary menu. Valid values: Click and Hover.

Data Sources panel

Advanced Panel

Turn on the switch to enable the global variable feature. You can change the selected items in the cascade selector, trigger data requests, and pass temporary variables for use in other components. By default, the value configured in the Data Source panel is displayed. For more information, see Component interaction configuration.

Blueprint Interaction

1. Click the icon in the upper-left corner to go to the Blueprint page.

2. On the Layer Nodes tab, add the widget to the main canvas.

3. View blueprint configuration parameters.

   • Event

     Event	Description
     When the data interface request is completed	After a data interface request is completed and processed by a filter, this event is triggered with the processed JSON data. For specific data examples, see the Data Response Result section on the Data Source tab in the right-side configuration panel of the canvas editor.
     When the drop-down list is selected	This event is triggered when a drop-down option is selected, along with the corresponding data item. For more information, see the data example. [ { "value": "zhejiang", "label": "Zhejiang" }, { "value": "hangzhou", "label": "Hangzhou", "title": "Data to be accessed" } ]

   • Action

     Action	Description
     Import data	After widget data is processed in the required drawing format, this action imports the data for redrawing without re-requesting server data. For more information, see the data example. [ { "label": "Zhejiang", "value": "zhejiang" } ]
     Request Data Interface	Requests server data again, using data from an upstream data processing node or layer node as parameters. For example, if the API data source is https://api.test and the data passed to the request data interface is { id: '1'}, the final request URL is https://api.test?id=1.
     Set Selected Entries	Specifies the selected entry in the cascade selector. For more information, see the data example. [ "zhejiang", "hangzhou", "xihu" ]
     Clear selected entries	Clears the selected entry in the cascade selector. No parameters are required.
     Clear a component to its default value	Resets the component to its default value. No parameters are required.
     Move	Moves the widget to a specified location. For more information, see the data example. { // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Toggle Display	Toggles the widget between visible and hidden. No parameters are required.
     Display	Displays the widget. For more information, see the data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Hide	Hides the widget. For more information, see the data example. { "animationType": "",// The animation method. Valid value: fade. If you do not specify this parameter, no animation is generated. "animationDuration": 1000,// The animation delay. Unit: ms. "animationEasing": ""// animation curve }
     Update component configurations	Dynamically updates the style configurations of the widget. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data. Then modify the style field for the data processing node in Blueprint Editor.