DataV:liquid-fill-charts

Chart style

The water wave chart displays the percentage value of a set of data or the progress of a project in the form of dynamic water waves.

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.

• Graphics

  Metric	description
  Chart Margins	Click the icon to control the display of the chart margins. If you turn on the switch, you can configure the distance between the hydrograph area and the four boundaries of the widget. Unit: px by default.
  Background Color	Set the background color of the Water Graph widget. For more information, see color picker description.
  Outer ring radius	This parameter specifies the radius of the outer ring of the Water Graph widget relative to the widget border. Valid values: 0 to 100. Unit: %.
  Projection Style	Sets the plane projection style of the outer ring of the Waterwave Image component, including the color of the outer ring, the blur radius, and the offset of the center of the outer ring relative to the center of the component x-axis and on the Y axis.
  Water Wave Style	Set the color, number of waves, and wave length of the water wave chart. Note If you turn on the Map switch, the waterwave color does not support gradient color.
  OUTER FRAME	Sets the bounding style of the water wave chart. Frame Shape: Specify the shape of the frame, including circle, diamond, triangle, pin, and rectangle. Frame Stroke: Specify the stroke style of the frame, including the stroke thickness, stroke spacing, and stroke color. Dashed Line Stroke: the dashed line stroke style of the outline, including the length and interval of the stroke.
  Tag the data	Set the title style and data content style of the water chart. title Content: the text content of the water chart label. Text Style: the text style of the caption. Position: You can set the X offset, Y offset, and rotation angle of the water chart label relative to the water chart widget. Data Content Content: the text content of the data that is labeled in the hydrograph. Text Style: the text style of the data that is labeled in the hydrograph. Position: Specify the X-offset, Y-offset, and rotation angle of the water graph dimension relative to the water graph widget.
  Map	Sets the map style of the water wave map. Type: the type of the map, including Point, Linear, and Square. Fill Color: Specify the fill color of the map. This parameter is available only when you set Type to Point or Square. Stroke Style: Set the stroke style of the map. This parameter is available only when the type is Point or Square. Fill Style: the fill style of the texture map, including the fill color and width. This parameter is available only when the Type parameter is set to Linear. Extra Style: Sets the line spacing and rotation angle of the map. If you set the Type parameter to Dot or Square, you can configure the graphic size, graphic spacing, rotation angle, and whether to stagger.

• Animation

  Metric	description
  Animation Switch	Turn on the switch to configure the animation effect of the water wave chart.
  Animation	The effect type of the animation. This parameter is configurable only after you turn on the Animation switch.
  Animation Duration	The duration of the widget animation effect. Unit: ms. This value is configurable only after you turn on the Animation switch.

Data Sources panel

percent: displays the percentage of water waves in the chart. The value is a decimal. 1 indicates 100%.

Advanced panel

This widget does not support interaction events.

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 Results section on the Data Source tab of the right-side configuration panel in the Canvas Editor.

   • 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 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.
     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.
     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 animation delay. Unit: milliseconds. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Toggle Display	Specifies whether to show or hide a widget. 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.

Case demonstration

This case shows the degree of attention of various countries to the World Table Tennis Championships through multiple water wave components.

1. Log on to the DataV console.

2. On the console page, select a dashboard and click Edit.

3. In the top toolbar, click Search, enter a water wave chart, and then click Add to Canvas.

4. Repeat the preceding operations to add six water pattern widgets and one donut chart widget.

5. Click the donut chart component. On the Data Source tab, modify the static data.

   [
     {
       "x": "China",
       "y": "89%"
     },
     {
       "x": "Brazil",
       "y": "53%"
     },
     {
       "x": "Spain",
       "y": "18%"
     },
     {
       "x": "France",
       "y": "10%"
     },
     {
       "x": "Italy",
       "y": "20%"
     },
     {
       "x": "Japan",
       "y": "34%"
     },
     {
       "x": "United States",
       "y": "4%"
     }
   ]

6. Click the Style tab and add a data series.

7. Modify the color value and name of the water wave pattern of each of the seven water wave widows to ensure that the color and name are different.

8. Modify the title content under Style> Labeling> Title of each of the seven water wave diagrams to be consistent with the x parameter fields in the donut chart data source. For example: Water Wave Figure 1: China.

9. Click the icon to switch to the Bluechart.

10. On the Layer Nodes tab, drag all widgets to the main canvas.

11. Click the Logical Nodes tab, add a sequence execution node to the main canvas, and connect the component.

12. Configure the sequence execution node processing method.

    // Water wave map -1
    return [{
      "percent": (data[0].y) / 100
    }]
    // Water wave map -2
    return [{
      "percent": (data[1].y) / 100
    }]
    // Water wave map -3
    return [{
      "percent": (data[2].y) / 100
    }]
    // Water wave map -4
    return [{
      "percent": (data[3].y) / 100
    }]
    // Water wave diagram -5
    return [{
      "percent": (data[4].y) / 100
    }]
    // Water wave diagram -6
    return [{
      "percent": (data[5].y) / 100
    }]
    // Water wave diagram -7
    return [{
      "percent": (data[6].y) / 100
    }]

13. Click Preview in the upper-right corner. View the display results.

14. (Optional) Add other components such as the Timer and General Title to make the digital screen fuller.