Liquid chart

Chart style

The liquid chart is a type of basic chart. You can customize its outline, text, and wave animation effects. It also supports color configuration for multiple series and uses waves to display real-time changes in levels.

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.

• Outline

  Parameter	Description
  Shape	Specifies the shape of the component's outline. Options: Circle, Square, and Rounded square.
  Radius	Specifies the radius of the outline, expressed as a proportion of the component's height. The value ranges from 0 to 1.
  Border color	Specifies the color of the outline. For more information, see Color picker.
  Border width	Specifies the width of the outline in pixels (px).
  Padding	Specifies the distance between the outline and the liquid wave in pixels (px).

• Text: Sets the style for all text in the component.

  Parameter	Description
  Color	The default color of the text.
  Inside color	The color of the text when it is inside the liquid wave.
  Font size	Specifies the font size of the text. The value ranges from 10 to 100.
  Font weight	Specifies the font weight of the text.
  Height position	Specifies the text's vertical position as a proportion of the outline's radius. The value ranges from 0 to 1.
  Percentage display	Specifies the number of decimal places to display for the percentage value. Options: integer, one decimal place, and two decimal places.

• Wave: Sets the style of the liquid wave.

  Parameter	Description
  Number of peaks	Specifies the number of wave peaks. The value ranges from 1 to 10.
  Amplitude	Specifies the amplitude of the wave. The value ranges from 0 to 1.
  Phase	Specifies the phase of the wave. The value ranges from 0 to 360.
  Period	Specifies the period of the wave in seconds. The value ranges from 0.5 to 60.
  Opacity	Specifies the opacity of the wave. The value ranges from 0 to 1.
  Animation	Configures the wave animation. Click the icon to enable or disable it. Direction: Specifies the direction of the wave's movement. Options: Left to right and Right to left. Easing: Specifies the easing effect of the wave's movement. Options: constant speed, acceleration, and deceleration.

• Series: Click the or icon to add or remove a color series. Click the or icon to configure the arrangement of multiple color series. Click the icon to copy the current series configuration and create a new one with the same settings.

  Color: Specifies the color of the wave in this series.

Data panel

The value field specifies the percentage for the liquid level. The chart displays the percentage from the first value in the data response.

Interaction panel

This component has no interaction events.

Blueprint Editor interaction configuration

1. In the Canvas Editor, right-click the component and select Export to Blueprint Editor.

2. Click the icon in the upper-left corner of the page.

3. On the Blueprint Editor configuration page, click the liquid chart component in the Import Node pane. The Blueprint Editor configuration parameters for the liquid chart appear on the canvas, as shown in the following figure.

   • Events

     Event	Description
     When data request is successful	This event is triggered after the data API request is successful and the data filter has processed the response. The event passes the processed data as a JSON object. For an example of the data structure, see the data response section in the Data panel of the Canvas Editor.
     When data request fails	This event is triggered if the data API request fails due to issues such as network problems or API errors. The event passes the error information as a JSON object. For an example of the data structure, see the data response section in the Data panel of the Canvas Editor.

   • Actions

     Action	Description
     Request data	Reruns the data request to the server. This action passes data from upstream nodes as parameters. For example, if the liquid chart's API data source is set to https://api.test and the data passed to the Request data action is { id: '1'}, the final request URL will be https://api.test?id=1.
     Import data	Processes and imports data in the component's required format to redraw the chart. This action does not send a new request to the server. For an example of the data structure, see the data response section in the Data panel of the Canvas Editor.
     Update component configuration	To dynamically update the style configuration of a component, first click Copy configuration to clipboard in the component's Configuration panel to obtain the component configuration data. Then, change the field values for the corresponding styles in the data processing node on the configuration page of the Blueprint Editor as needed.
     Show	Shows the component. The following code is an example of the data structure: return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Hide	Hides the component. The following code is an example of the data structure: return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" };
     Toggle visibility	Toggles the visibility of the component. The following code is an example of the data structure: return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } };
     Move	Moves the component to a specified position. The following code is an example of the data structure: return { // Position type. 'to' for absolute, 'by' for relative. Default: 'to'. "positionType": "to", // The target position, including x and y coordinates. "attr": { "x": 0, "y": 0 }, // Animation settings. "animation": { "enable": false, // Animation duration. "animationDuration": 1000, // Easing function. Options: 'linear', 'easeInOutQuad', 'easeInOutExpo'. "animationEasing": "linear" } };