DataV:Icons

Chart style

An icon is a media widget that adds icon elements to data dashboards across various industries, enhancing the visual presentation.

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.

• Icon Resource: the type of the icon resource. You can select General, Industry, or Custom.

  Metric	description
  General test items	Click next to Icon Type and select an icon from the icon library drop-down list. Click the icon in the Icon Type section and select an icon from the icon library drop-down list. Click the icon in the Icon Type section or double-click the text area on the right side of the Icon Type icon and enter the name of the icon in the horizontal bar to search for the corresponding icon in the icon library and select the icon.
  Industries	Click one of the Transportation, Medical, and Industrial Industry configuration items. Select an icon type for different industry configuration items. For more information about how to select an icon type, see General.
  user-defined	You can enter the Unicode font file of the icon in the Icon Type field to use the custom icon in DataV. You can also select an existing icon resource from the drop-down list, as described in the General section.

• Icon Style: the style of the icon.

  Color	The color of the icon. For more information, see color picker description.
  Margin	The percentage of the distance between the icon and the widget edge. Unit: %. Valid values: -100 to 100. Smaller values enlarge the icon. If the value is too small, the icon exceeds the widget boundary. If the value is too large, the icon shrinks until it disappears.

• Background Style: the background style of the icon. Click the icon to display the background.

  Metric	description
  Background color	The background color of the icon. For more information, see color picker description.
  Background Fillet	The corner radius of the icon background box. Unit: pixels. A value of 0 produces square corners. Larger values increase the roundness of the corners.
  Border thickness	The thickness of the background border.
  Border Type	The border type of the background. Valid values: Solid, Dashed, and Dotted.
  Border Color	The color of the background border. For more information, see color picker instructions.

• Rotate Animation: If you turn on the switch, the icon rotates clockwise around its center. If you turn off the switch, the icon does not rotate.

• Hyperlink Configuration: Enables clicking the icon to navigate to a specified hyperlink. You can also open the hyperlink in a new window.

• Gesture Cursor: Sets the cursor style for the icon. Click to show or hide the cursor.

Data Sources panel

This component does not require data configuration.

Advanced Panel

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 clicked	The event raised when an icon is clicked, along with the corresponding data item.
     When the mouse moves in	The event raised when the mouse moves over the icon, along with the corresponding data item.
     When the mouse is removed	The event raised when the mouse moves away from the icon, along with the corresponding data item.

   • Action

     Action	Description
     Request API Description	Requests 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 data interface is { id: '1'}, the final request interface is https://api.test?id=1.
     Import Interface Description	Imports processed widget data in the required drawing format for redrawing. For specific data examples, see the Data Response Result section of the Data Source tab in the right-side configuration panel of the canvas editor.
     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 duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Switch Display /Hide	Toggles the visibility of a widget. No parameters are required.
     Display	Shows 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	Hides 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 }
     Update component configurations	Dynamically updates widget style configurations. In the Style panel, click Copy Configuration to Clipboard to obtain the widget configuration data. Then modify the style field for the data processing node in Blueprint Editor.