bubble-cards

Chart style

The bubble card is an advanced widget that displays small pop-up information. You can customize the button style and card display style.

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.

• Button Style

  Metric	description
  Show Text	The display text of the bubble card. The default value is Bubble.
  Trigger	The trigger mode of the bubble card. Valid values: Click and Hover.
  Text alignment	The text alignment of the bubble card. Valid values: Left, Center, and Right.
  Text Margins	The horizontal padding between the text and the button edges. Unit: px.
  Normal Style	The style of the bubble card button in the normal state. Background Color: the background color of the bubble card button. Border Style: the border style of the button, including the line type, corner angle, line width, and border color. Text Style: Specify the font style, weight, font size, and color of the text in the selected bubble card.
  Hover Style	The style of the button in the hover state. Background Color: the background color of the bubble card button. Border Style: the border style of the button, including line type, corner radius, line width, and border color. Text Style: Set the font style, weight, font size, and color of the text in the bubble.

• Card Style

  Metric	description
  Card Layout	The layout of the bubble card, including the card position and the spacing between the card and the button.
  Card Size	The size of the bubble card, including the card width and whether adaptive height is enabled.
  Pointing Arrow	The style of the pointing arrow, including its size and color.
  title	The title style of the bubble card. Click the icon to toggle title visibility. Custom Height: the height of the title. Unit: pixels. Background Color: Set the background color of the title. Horizontal Alignment: The horizontal alignment of the title text. Validity values: Left, Center, and Right. Vertical Alignment: The vertical alignment of the title text. Valid values: Alignment, Alignment, and Alignment. Text Margin: specifies the horizontal and vertical margins of the title text. Unit: pixels. Text Style: Set the text style of the title text, including the text font style, text weight, font size, and text color. line separator: Set the line separator style of the title, including the line type of the line separator, the width value of the line, and the color of the line.
  Content	The content style of the bubble card. Click the icon to toggle content visibility. Custom Height: the height of the content. Unit: pixels. Background Color: Set the background color of the content. Horizontal Alignment: The horizontal alignment of the text. Validity values: Left, Center, and Right. Vertical Alignment: The vertical alignment of the content text. You can select Alignment, Alignment, and Alignment. Text Margin: Specify the horizontal and vertical margins of the text. Unit: pixels. Text Style: Specify the text style of the content, including the text font style, text weight, font size, and text color.

Data Sources panel

Advanced Panel

This component has no event 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. Refer to the blueprint configuration parameters.

   • Event

     Event	Description
     When the bubble card data port request is completed	Triggered after a data interface request is responded to and processed by a filter. The processed JSON data is included. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel.

   • Action

     Action	Description
     Import bubble card data port	Imports pre-processed data to redraw the widget without re-requesting server data. [ { "title": "Title", "content": "This is a description of the bubble card. ", "show": false } ]
     Request bubble card 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 transferred to the request data interface is { id: '1'}, the final request interface is https://api.test?id=1.
     Move	Moves the widget to a specified location. { // 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" } }
     Switch Display /Display	Toggles whether the widget is displayed or hidden. No parameters are required.
     Display	Displays the widget. { "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. { "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 widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the configuration data, then modify the style field in the data processing node of Blueprint Editor.