DataV:Icons

Chart style

An icon is a type of media widget. You can add multiple types of icon elements to a data dashboard of various industries to make the data dashboard display more beautiful.

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 edge of the widget. Unit: %. Valid values: -100 to 100. The smaller the value setting, the larger the icon is displayed. If the value is smaller than a certain value, the icon will exceed the size of the widget outline. If the value is larger than a certain value, the icon will be so small that it will disappear.

• 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 rounded corner size of the icon background box. Unit: pixels. When the value is 0, there is no rounded corner, and the background box is square. The larger the setting value, the larger the radian value of the rounded corner of the background box.
  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 the center point. If you turn off the switch, the icon cannot rotate.

• Hyperlink Configuration: You can click the icon to go to the specified hyperlink. You can also open the hyperlink in a new window.

• Gesture Cursor: Set the gesture cursor of the icon. Click the icon to display or hide the cursor.

Data Sources panel

This component does not require configuration data.

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 that is raised when an icon is clicked, along with the data item corresponding to the icon.
     When the mouse moves in	The event that is raised when the mouse is moved to the position of the icon, and the corresponding data item of the icon is also raised.
     When the mouse is removed	The event that is raised when the mouse is moved away from the position of the icon, along with the data item corresponding to the icon.

   • Action

     Action	Description
     Request API Description	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.
     Import Interface Description	After data of a widget is processed in accordance with its drawing format, the widget is imported for redrawing. 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.
     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	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.