Event Dashboard

Chart style

The event gauge is a skeuomorphic chart similar to a car's speedometer. It has a circular dial where the scale represents the measure, the pointer represents the dimension, and the pointer angle represents the value.

Style panel

• Search Configuration: Click the Style icon in the upper right corner of the panel to enter the name of the configuration item you wish to locate in the search field. The system supports fuzzy matching. For more information, see Search configuration item.

• • Size: The width and height of the component in pixels (px).

  • Position: The component's x-coordinate and y-coordinate in pixels (px). The x-coordinate is the horizontal distance from the page's left edge to the component's top-left corner. The y-coordinate is the vertical distance from the page's top edge to the component's top-left corner.

  • Rotation: The rotation of the component around its center point, in degrees (°).

    • Enter an angle value to control the component's rotation.

    • Click the icon to flip the component horizontally.

    • Click the icon to flip the component vertically.

  • Opacity: The value ranges from 0 to 1. A value of 0 is completely transparent, while a value of 1 is fully opaque. The default is 1.

  • Interaction passthrough: When enabled, mouse interactions pass through this component, preventing it from blocking interactions with other components layered underneath it on a dashboard.

  • Alignment: The alignment of the component within the editor.

• Text Style: The style of the text in the gauge, including the font, weight, size, and color.

• Image Style: The style of the event image in the gauge. Drag the sliders to adjust the length, height, and opacity of the icon.

• Background Style: The background style of the gauge.

  Parameter	Description
  Outer Arc Color	The color of the outer arc line of the gauge.
  Middle Arc Color	The color of the middle arc area of the gauge.
  Inner Arc Color	The color of the inner arc line of the gauge.
  Outer Scale Color	The color of the outer scale of the gauge.
  Inner Scale Color	The color of the inner scale of the gauge.
  Triangle Arrow Color	The color of the triangle arrow of the gauge.
  Widget Background Color	The background color of the gauge widget.

Data Source panel

Advanced panel

Turn on the switch to enable global variable association. When you click an event in the gauge, a data request is triggered and a temporary variable is passed to dynamically load data for different events. By default, the id and context values from the data are passed. For more information about the configuration, see Configure widget interaction.

Blueprint interaction

1. In the upper-left corner of the page, click the icon to go to the Blueprint page.

2. On the Layer Node tab, add the current widget to the main canvas.

3. View the Blueprint configuration parameters.

   • Events

     Event	Description
     When a data mapping request is complete	Triggered after the data API request is returned and processed by the filter. The processed data is passed in JSON format. For a data sample, see the Data Response section on the Data Source tab in the widget's configuration panel in the canvas editor.
     Click Trigger	Triggered when you click an event in the gauge. The event data is passed, including the data item that corresponds to the event. For example: { "id": 1, "context": "China" }

   • Actions

     Action	Description
     Import mapping data	Processes data according to the component's drawing format, then imports the data to redraw the component. This action does not request new data from the server. Sample reference data: [ { "id": 139340, "context": "France", "url": "https://img.alicdn.com/tfs/TB1s2CRgv9TBuNjy0FcXXbeiFXa-200-133.png" } ]
     Request mapping data	Requests new data from the server. Data provided by an input data processing node or a layer node is used as a parameter. For example, if an event dashboard has its API data source set to https://api.test and the data passed to the Request mapping data action is { id: '1'}, the final API request URL is https://api.test?id=1.
     Move	Moves the component to a specified position. Sample reference data: { // The move type. 'to' specifies an absolute position. 'by' specifies a relative position. Default: 'to'. "positionType": "to", // The target position, specified by x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation configuration. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation curve. Valid values: linear, easeInOutQuad, or easeInOutExpo. "animationEasing": "linear" } }
     Toggle visibility	Toggles the component between visible and hidden. No parameters are required.
     Show	Shows the component. Sample reference data: { "animationType": "",// The animation method. Set to 'fade'. If left empty, no animation is used. "animationDuration": 1000,// The animation duration in ms. "animationEasing": ""// The animation curve. }
     Hide	Hides the component. Sample reference data: { "animationType": "",// The animation method. Set to 'fade'. If left empty, no animation is used. "animationDuration": 1000,// The animation duration in ms. "animationEasing": ""// The animation curve. }
     Update component configuration	Dynamically updates the style configuration of the component. To get the configuration data, click Copy configuration to clipboard in the component's Style panel. Then, on the blueprint editor's configuration page, modify the field values for the desired styles in the data processing node.

Demo

This demo shows how the rotation feature works. When you click an event on the gauge, the corresponding data in the list carousel is displayed.

1. Access the DataV console.

2. Select a dashboard and click Edit to go to the canvas editor page.

3. Add the List Carousel and Event Gauge widgets to the canvas.

4. Click the list carousel, select the Data Source panel, and modify the static data.

   [
     {
       "id": 206252,
       "context": "United States",
       "url": "https://img.alicdn.com/tfs/TB1L9K2gv5TBuNjSspcXXbnGFXa-224-118.png"
     },
     {
       "id": 152418,
       "context": "Spain",
       "url": "https://img.alicdn.com/tfs/TB1pEu5gv9TBuNjy1zbXXXpepXa-200-133.png"
     },
     {
       "id": 139340,
       "context": "France",
       "url": "https://img.alicdn.com/tfs/TB1s2CRgv9TBuNjy0FcXXbeiFXa-200-133.png"
     },
     {
       "id": 138786,
       "context": "Singapore",
       "url": "https://img.alicdn.com/tfs/TB11znbgx1YBuNjy1zcXXbNcXXa-200-133.png"
     },
     {
       "id": 95516,
       "context": "Netherlands",
       "url": "https://img.alicdn.com/tfs/TB1D4CygrSYBuNjSspiXXXNzpXa-200-133.png"
     },
     {
       "id": 90197,
       "context": "Poland",
       "url": "https://img.alicdn.com/tfs/TB1K4vcguOSBuNjy0FdXXbDnVXa-206-129.png"
     },
     {
       "id": 82697,
       "context": "Israel",
       "url": "https://img.alicdn.com/tfs/TB1DDKIgwaTBuNjSszfXXXgfpXa-192-140.png"
     },
     {
       "id": 50096,
       "context": "Türkiye",
       "url": "https://img.alicdn.com/tfs/TB16lUjgDlYBeNjSszcXXbwhFXa-200-133.png"
     },
     {
       "id": 49162,
       "context": "Ukraine",
       "url": "https://img.alicdn.com/tfs/TB1DbgTgDJYBeNjy1zeXXahzVXa-200-133.png"
     },
     {
       "id": 47290,
       "context": "Brazil",
       "url": "https://img.alicdn.com/tfs/TB1SIAwgCBYBeNjy0FeXXbnmFXa-196-137.png"
     },
     {
       "id": 46465,
       "context": "Italy",
       "url": "https://img.alicdn.com/tfs/TB1bHkTgDJYBeNjy1zeXXahzVXa-200-133.png"
     }
   ]

5. Select the Style panel. Turn on the Highlight and Carousel switches. Set Number of Rows to 5. Align the custom column labels with the parameter fields in the Data Source panel.

6. In the upper-left corner of the page, click the icon to go to the Blueprint editor page.

7. On the Layer Node tab, add all widgets to the main canvas.

8. On the Logic Node tab, add a serial data processing node to the main canvas.

9. Connect the widgets.

10. Configure the processing method for the serial data processing node.

    return [
      {
        "id": data.id,
        "context": data.context,
        "url": data.url
      }
    ]

11. In the upper-right corner of the page, click Preview to preview the result.