progress-doughnut-charts

Chart style

The progress doughnut chart visually displays task progress on digital screens by filling rotating column bars.

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 progress circle area and the four boundaries of the widget. Unit: px by default.
  RADIUS DIMENSION	Set the inner diameter and outer diameter dimensions of the progress loop, in %.
  Ring color	Set the background colors of the progress ring for the filled and unfilled portions. For more information, see the color picker description.
  Ring Stroke	Set the stroke style of the progress ring, including line type, weight, and color.
  Projection Style	The plane projection style of the widget, including blur color, blur radius, and the X-axis and Y-axis offsets of the ring center relative to the widget border center.
  Center Content	Set the text and graphic styles for the center content of the progress doughnut chart. Text Title: the title of the content. Title Style: Set the title style, including font, weight, size, and color. Position: Set the X-axis and Y-axis offsets of the center text relative to the widget center. Number: Set the prefix style and suffix style of the digital content. Number Style: Set the number style, including font, weight, size, and color. Position: Set the X-axis and Y-axis offsets of the number text relative to the widget center. Graphics Image Link: the link to the image in the progress chart center. To use an image on a remote server, enter the URL of the image in the upper-right corner. Click Change or Delete below the image to modify or delete the image. For more information about the features of other design assets, see Use interfaces. Image Style: The style of the center image, including width, height, transparency, and rounded corners. Offset: The horizontal and vertical position and offset of the center image relative to the widget border.

• Condition: Configure conditional styles for the widget.

  Conditional Style: Click the or icon to add or remove a conditional style. Click the or icon to configure the arrangement style of multiple conditional styles. Click the icon to copy the selected conditional style configuration and add a conditional style. For more information about how to configure conditional patterns, see Use conditional trees.

  Progress Color: If you turn on the switch, you cannot configure the progress color in the condition style. If you turn off the switch, you cannot configure the progress color in the condition style.

Data Sources panel

percent: displays the percentage of the progress loop chart relative to the entire loop chart. The value is a decimal, and 1 indicates 100%.

Advanced panel

There are no global variables associated with this component.

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 interface description 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.

   • Action

     Action	Description
     Import Interface Description	After widget data is processed into the required drawing format, it is imported for redrawing without requesting 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 API Description	This action requests the server data again, using the data sent by an upstream data processing node or layer node as parameters. For example, if the API data source is https://api.test and the data passed to the Request API Description action 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	Dynamically update the style configurations of widgets. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data. Then change the style field for the data processing node in Blueprint Editor.

Case demonstration

This example shows the progress and deadline of three features in a project.

1. Log on to the DataV console.

2. On the console page, select a dashboard and click Edit to go to Canvas Editor.

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

4. Repeat the preceding operations to add two progress graph widgets, one Yujue graph widget, and one countdown widget.

5. Click the Jade chart. In the Data Source panel, modify the static data.

   [
     {
       "r": "Multi-frequency modulation function",
       "t": 0.86,
       "colorField": 100
     },
     {
       "r": "Bluetooth transmission function",
       "t": 0.64,
       "colorField": 200
     },
     {
       "r": "Mask Distribution",
       "t": 0.49,
       "colorField": 300
     }
   ]

6. In the left-side navigation pane, click Progress. In the left-side navigation pane, choose Graphics> Central Content> Text. On the page that appears, change the title of the widget to Multi-channel Modulation. Change the name of the widget to Progress Loop -1. Repeat the operation to complete the setting of the content text and name of the other 2 progress loop center.

7. Click the Countdown component. In the Data Source panel, modify the static data.

   [
     {
       "endTime": "2023-06-20 00:00:00"
     }
   ]

8. Click the icon to switch to the Blueprint.

9. On the Layer Nodes tab, drag all widows except the countdown widget to the main canvas.

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

11. Configure the sequence execution node processing method.

    // Progress loop chart -1
    return [{
      "percent": data[0].t
    }]
    // Progress loop chart -2
    return [{
      "percent": data[1].t
    }]
    // Progress loop chart -3
    return [{
      "percent": data[2].t
    }]

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

13. (Optional) Adjust the style and position of all components and add other decorative components to make the digital screen fuller.