DataV:cascade-selectors

Chart style

A cascade selector is a type of advanced control component that can be used in visual applications as a cascade form to submit user-selected data to the backend for processing or through interactive configuration to display user-selected content on other components.

Style Panel

• Search Configuration: Click the Search configuration items icon in the upper-right corner of the Style panel. In the Search Configuration panel, enter the name of the configuration items that you want to search for and locate the configuration items. 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 indicates the pixel distance between the upper-left corner of the widget and the left border of the canvas. Y-coordinate indicates the pixel distance between the upper-left corner of the widget and the upper border of the canvas.

  • Rotate: The widget is rotated around the center of the widget. Unit: degrees.

    • Directly enter the degrees in the Rotation Angle spin box or click the plus sign (+) or minus sign (-) to increase or decrease the value in the Rotation Angle spin box.

    • Click the icon to flip the widget style.

    • Click the icon to flip the widget style.

  • Opacity: Valid values: 0 to 1. If this parameter is set to 0, the widget is hidden. If this parameter is set to 1, the widget is completely displayed. Default value: 1.

• Input box

  • Default Selected: Enter the default selected path, separated by English, such as zhejiang,hangzhou,xihu.

  • Prompt Text: the prompt text in the input box. If no value is selected, the prompt text is displayed by default.

  • No Data: the content that is 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 custom search content in the input box and filter out the data content in the corresponding drop-down list. If you turn off the switch, you cannot use the custom input search content function.
    Clear Selected	If you turn on the switch and the input box has a value, the Clear button appears when you move the mouse in. You can click the icon to clear the content of the input box. If you turn off the switch, you cannot use the function to clear the selected content.
    Instant Change	Turn on the switch, when the drop-down box content is selected, the input box content will change in real time; Turn off the switch, you cannot use the instant change function.
    Disable	Turn on the switch to disable the current cascade selector; turn off the switch. Cascade selectors are used normally.

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

  • Border Style: the style of the border of the cascade selector. In the default style, you can set the line thickness, optional line type, line color, corner angle, and shadow color of the border.

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

    Metric	description
    Text Margins	The margin to the left of the display text distance within the cascade selector.
    Text Style	The font style of the text, the weight of the text, the size of the font size, and the color of the text are displayed in the cascade selector.

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

    Metric	description
    Size	Cascade selector auxiliary button size.
    Right Margin	The margin to the right of the secondary key of the cascade selector.
    Drop-down arrow	Turn on the switch to set the color of the drop-down arrow. Turn off the switch to set the color of the drop-down arrow.
    Clear icon	The Cascade Selector clears the icon color and the background color.

• Drop-down Box

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

    Metric	description
    Container height	The height value of the overall list of drop-down boxes.
    Container Top Spacing	The distance between the top of the drop-down box 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 line.
    Type	The style of the border line type of the drop-down box. You can select Solid Line, Dashed Line, or Dotted Line.
    Color	The color of the drop-down box border.
    Fillet	The size of the rounded corners of the drop-down box. Valid values: 0 to 360. When the value is 0, the drop-down box is square. When the value is 360, the drop-down box is round.

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

    Metric	description
    Option Height	The height of the drop-down box. Unit: pixels.
    Text Style	Select the text style in the drop-down box, including the font, weight, font size, and color of the text.
    Text Color	The color of the text in the drop-down box when the mouse is hovered and selected.
    Background Color	The background color of the options in the drop-down list, including the background color of the default option, the background color of the option when you move the pointer over, and the background color of the selected option.
    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 associated global variable feature. You can change the contents of the selection items in the cascade selector, trigger data requests, throw temporary variables, and configure them for use in other components. By default, the value 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	The event is triggered with the processed JSON data after a data interface request is responded and processed by a filter. For more information about specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
     When the drop-down list is selected	The event that is raised when the content of the drop-down box is selected, and the data item corresponding to the value is also raised. 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 data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. You do not need to request server data again. For more information, see the data example. [ { "label": "Zhejiang", "value": "zhejiang" } ]
     Request Data Interface	This action is performed to request the server data again. The data sent by an upstream data processing node or layer node is used as a parameter. 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 interface is https://api.test?id=1.
     Set Selected Entries	Specify the entry selected by the current cascade selector. For more information, see the data example. [ "zhejiang", "hangzhou", "xihu" ]
     Clear selected entries	Clears the value of the selected entry in the cascade selector. No parameters are required.
     Clear a component to its default value	Clear the default value of the component. No parameters are required.
     Move	Move a 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 whether the widget is displayed or hidden. No parameters are required.
     Display	Display the widget. For more information, see 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	Hide the component. For more information, see 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	Style configurations of widgets are dynamically updated. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data of the widget. After that, change the style field for the data processing node in Blueprint Editor.