Bubble Card

Chart style

The Bubble Card is a control widget that is often used to display small pop-up messages. You can customize the style of the button and the card.

Configuration panel

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. 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.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • 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.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 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.

• Button Style

  Parameter	Description
  Display Text	The display text of the bubble card. The default value is Bubble.
  Trigger Method	The trigger method for the bubble card button. Valid values are Click and Hover.
  Text Alignment	The alignment of the text in the bubble card button. Valid values are Align Left, Align Center, and Align Right.
  Text Margin	The left and right margins of the text in the bubble card button. The unit is px.
  Normal Style	The style of the bubble card button in its normal state. Background Color: The background color of the bubble card button. Border Style: The border style of the bubble card button. You can set the line type, border radius, line width, and color of the border. Text Style: The text style for the bubble card button. You can set the font, weight, size, and color of the text.
  Hover Style	The style of the bubble card button when you move the mouse pointer over it. Background Color: The background color of the bubble card button when you move the mouse pointer over it. Border Style: The border style of the bubble card button when you move the mouse pointer over it. You can set the line type, border radius, line width, and color of the border. Text Style: The text style for the bubble card button when you move the mouse pointer over it. You can set the font, weight, size, and color of the text.

• Card Style

  Parameter	Description
  Card Layout	The layout style of the bubble card. You can set the display position of the card and the spacing between the card and the button.
  Card Size	The size of the bubble card. You can set the width of the card and enable automatic height adjustment.
  Pointer Arrow	The style of the pointer arrow for the bubble card. You can set the size and color of the arrow.
  Title	The style of the title section of the bubble card. Click the icon to show or hide the title. Custom Height: The custom height of the title in pixels. Background Color: The background color of the title section. Horizontal Alignment: The horizontal alignment of the title text. Valid values are Align Left, Align Center, and Align Right. Vertical Alignment: The vertical alignment of the title text. Valid values are Align Top, Align Center, and Align Bottom. Text Margin: The horizontal and vertical margins of the title text in pixels. Text Style: The style of the title text. You can set the font, weight, size, and color of the text. Separator: The style of the title separator. You can set the line type, width, and color.
  Content	The style of the content section of the bubble card. Click the icon to show or hide the content. Custom Height: The custom height of the content in pixels. Background Color: The background color of the content section. Horizontal Alignment: The horizontal alignment of the content text. Valid values are Align Left, Align Center, and Align Right. Vertical Alignment: The vertical alignment of the content text. Valid values are Align Top, Align Center, and Align Bottom. Text Margin: The horizontal and vertical margins of the content text in pixels. Text Style: The style of the content text. You can set the font, weight, size, and color of the text.

Data panel

Field description

Table 1. Parameters

Parameter	Description
Controlled Mode	If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data Request	After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data Source	In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data Filter	If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response Result	The response to a data request. If the data source changes, you can click the icon next to Data Response Result to view the data response in real time.

Interactions panel

This widget has no interaction events.

Blueprint Editor configurations

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the Bubble Card widget in the Imported Nodes pane. The configuration parameters for the Bubble Card widget appear on the canvas.

   • Events

     Event	Description
     When a data request for the bubble card is successful	This event is triggered when a data request is returned and processed by a filter. The data is in the JSON format. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     When a data request for the bubble card fails	This event is triggered when a data request fails due to a network issue or an API error. The data is in the JSON format. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.

   • Actions

     Action	Description
     Request data for the bubble card	Sends a request to the server to retrieve data, using data from an input data processing node or a layer node as a parameter. For example, if the API data source for the bubble card is set to https://api.test and the data passed to the Request Data action is { id: '1'}, the final API request is https://api.test?id=1.
     Import data for the bubble card	After processing the data into the format required by the component, you can import and redraw it without requesting server-side data again. For a data example, see the Data Response Result area on the Data tab of the configuration panel, which is to the right of the component in the canvas editor.
     Update widget configurations	Dynamically updates the style configurations of the widget. In the Configuration panel of the widget, click Copy Configuration to Clipboard to obtain the widget configuration data. Then, you can change the field values for the corresponding styles in the data processing node on the Blueprint Editor configuration page as needed.
     Show	Shows the widget. The following code provides a data example. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Hide	Hides the widget. The following code provides a data example. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Toggle visibility	Shows or hides the widget. The following code provides a data example. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     Move	Moves the widget to a specified position. The following code provides a data example. return { // The movement type. Absolute positioning: to. Relative positioning: by. Default value: to. "positionType": "to", // The specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // The animation settings. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation curve. Valid values: linear, easeInOutQuad, and easeInOutExpo. "animationEasing": "linear" } };