Indicator trend chart

Chart style

The Indicator Trend Chart widget displays indicator trends using a title, an icon, and a 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.

• Alignment: The vertical and horizontal alignment of the widget.

  Parameter	Description
  Vertical	The vertical alignment of the widget. Options: Align top, Align middle, and Align bottom.
  Horizontal	The horizontal alignment of the widget. Options: Align left, Align center, and Align right.

• Pitch: The horizontal and vertical spacing between the title, icon, and value within the widget, in pixels.

• Title

  Parameter	Description
  Title	The content of the title.
  Content Style	The style of the title content, including font family, font weight, font size, and color.
  Title Line Break	Enable this option to allow long titles to wrap to a new line. Disable it to prevent wrapping.

• Icon

  Parameter	Description
  Select Icon	The icon style. Five styles are available.
  Icon Size	The size of the icon in pixels.
  Icon Color	The color of the icon. Supports different colors for upward, flat, and downward trends.
  Sync Text Color	Enable this option to synchronize the icon color with the value text color. Disable it to use different colors.

• Value

  Parameter	Description
  Content Style	The style of the value content, including font family, font weight, font size, and color.
  Base Value	The base value used to calculate the icon trend. The default value is 0. The initial value from the data panel takes precedence.
  Thousands Separator	For numbers with more than four digits, a separator is applied. You can customize the separator symbol. Click the icon to show or hide this configuration item.
  Value Suffix	The suffix for the value. The default suffix is %.
  Show	Turn on the switch to control the display of invalid data. Valid data is not affected by this setting.

Data Source panel

Advanced panel

Turn on the switch to associate the widget with global variables. When you click the Indicator Trend Chart widget, a temporary variable is created, and the values of all custom column fields in the data, such as value and base, are passed. For more information, see Configure widget interactions.

Blueprint interaction

1. Click the icon in the upper-left corner of the page to go to the Blueprint page.

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

3. View the Blueprint configuration parameters.

   • Events

     Event	Description
     When Data API Request is Completed	Triggered after the data API request returns and the data is processed by the filter. The processed data is output in JSON format. For a data example, see the Data Response section on the Data Source tab in the widget's configuration panel in the canvas editor.
     When Clicked	When you click the indicator trend chart, the data of the current node is output. See the following data example. { "value": "12", "base": 0 }

   • Actions

     Action	Description
     Import Data API	Processes data according to the widget's drawing format and imports it to redraw the widget without sending a new server request. See the following data example. [ { "value": 12, "base": 0 } ]
     Request Data API	Resends a server-side data request. Data from input data processing nodes or layer nodes is used as parameters. For example, if the API data source is set to https://api.test and the data passed to the Request Data API action is { id: '1'}, the final request URL is https://api.test?id=1.
     Move	Moves the widget to a specified position. See the following data example. { // Movement method. Absolute positioning: to. Relative positioning: by. Default value: to. "positionType": "to", // Specified position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // Animation method. "animation": { "enable": false, // Animation duration in milliseconds. "animationDuration": 1000, // Animation curve. Options: linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }
     Toggle Visibility	Shows or hides the widget. No parameters are required.
     Show	Shows the widget. See the following data example. { "animationType": "",//Animation method. Optional value: fade. If left blank, there is no animation. "animationDuration": 1000,//Animation duration in milliseconds. "animationEasing": ""//Animation curve. }
     Hide	Hides the widget. See the following data example. { "animationType": "",//Animation method. Optional value: fade. If left blank, there is no animation. "animationDuration": 1000,//Animation duration in milliseconds. "animationEasing": ""//Animation curve. }
     Update Widget Configuration	Dynamically updates the widget's style configuration. In the widget's Style panel, click Copy Configuration to Clipboard to get the configuration data, then modify the field values in the data processing node on the Blueprint editor page as needed.

Demo

Use the carousel feature of the Tab List widget to dynamically display the indicator trend chart.

1. Access the DataV console.

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

3. Add a Tab List widget and an Indicator Trend Chart widget to the canvas.

4. Click the Tab List widget, select the Data Source panel, and then modify the static data.

   [
     {
       "value": 12,
       "base": 0
     },
     {
       "value": 1,
       "base": 10
     },
     {
       "value": 10,
       "base": -7
     },
     {
       "value": 16,
       "base": 110
     },
     {
       "value": 37,
       "base": 279
     }
   ]

5. Set the mapping for the id field to value and the mapping for the content field to base.

6. Select the Style panel and turn on the carousel feature. Keep the default interval.

7. Click the Indicator Trend Chart widget, select the Style panel, and then change the Title to Dynamic Trend Display.

8. Click the icon in the upper-left corner of the page to go to the Blueprint page.

9. On the Layer Nodes tab, add all widgets to the main canvas.

10. On the Logic Nodes tab, add a Serial Data Processing node to the main canvas.

11. Connect the widgets.

12. Configure the processing method for the Serial Data Processing node.

    return [{"value": data.value - data.base}]

13. Click Preview in the upper-right corner of the page to preview the result.