Indicator trend chart

Chart style

The indicator trend chart is a widget that displays metric trends using a title, an icon, and a value.

Configuration panel

• Search for Configurations: In the right-side panel of Canvas Editor, click the Settings tab, and click Search for Configurations in the upper-right corner. Enter the required configuration item in the search box, and click the search icon to quickly locate the configuration item. Fuzzy match is supported. For more information, see Search for Configurations.
• Size: indicates the size of a widget, including its pixel width and height. You can click the icon to proportionally adjust the width and height of a widget. After you click this icon again, you can adjust the width and height as needed.
• Position: the position of a widget, which is indicated by pixel X and Y coordinates. 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.
• Rotation Angle: the angle of a rotation that uses the center point of a widget as the rotation point. The unit is degrees (°). You can use one of the following methods to control the rotation angle of a widget:
  • 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.
  • Drag the black dot in the icon.
  • Click the icon to horizontally flip a widget.
  • Click the icon to vertically flip a widget.
• Opacity: the opacity of a widget. Valid values: 0 and 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.

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

  Parameter	Description
  Vertical	The vertical alignment of the widget. Options: Align Top, Align Center, and Align Bottom.
  Horizontal	The horizontal alignment of the widget. Options: Align Left, Align Center, and Align Right.

• Spacing: The horizontal and vertical spacing between the title, icon, and value, in px.

• Title

  Parameter	Description
  Title Content	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	If enabled, the title wraps to a new line when it exceeds the available width.

• Icon

  Parameter	Description
  Icon Selection	The icon style. Five styles are available.
  Icon Size	The size of the icon, in px.
  Icon Color	The color of the icon for rising, flat, and falling trends.
  Sync Text Color	If enabled, the icon color matches the value text color.

• Value

  Parameter	Description
  Content Style	The style of the value content, including font family, font weight, font size, and color.
  Base Value	The icon trend is calculated based on this value. The default base value is 0. The initial value in the data panel has priority.
  Thousands Separator	For numbers with more than four digits, a default separator is applied. You can customize the separator symbol. Click the icon to show or hide this setting.
  Value Suffix	The suffix for the value. The default is %.
  Show	If enabled, specifies how invalid data is displayed. This setting has no effect on valid data.

Data panel (default mode)

Field descriptions

Table 1. Parameters

Parameter	Description
Controlled Mode	If you turn on the switch, data is not requested when a widget is initialized. Data requests are triggered only based on callback IDs or the method configured in Blueprint Editor. If you turn off the switch, data requests are automatically triggered. By default, the switch is turned off.
Auto Data Request	After you select the Auto Data Request check box, you can enable dynamic polling, and manually specify the polling interval. If you do not select this check box, data is not automatically requested. You must manually refresh the page to request data or use Blueprint Editor or callback ID events to trigger data requests.
Data Source	In the right-side panel of Canvas Editor, click the Data tab. Click Set next to Static Data. In the Configure Datasource panel, select a data source from the Data Source Type drop-down list. Enter code for data query in the code editor, click Preview Data Response to preview the response of the data source, and then view the response. For more information, see Configure asset data.
Data Filter	If you select the Data Filter check box, you can convert the data structure, filter data, and perform simple calculations. If you click the plus sign (+) next to Add Filter, you can configure the script for the data filter in the editor that appears. For more information, see Use the data filter.
Data Response Result	The response to a data request. If the data source changes, you can click the icon next to Data Response Result to view the data response in real time.

Data panel (analysis mode)

For more information about the BI analysis data configuration panel, see Introduction to the BI analysis mode data panel.

Field descriptions

Interaction panel

On Click: Select Enable to activate the click interaction. When a user clicks the widget, a callback is triggered that passes the values of all custom column fields. For more information, see How to configure the callback ID for a ticker board widget.

Blueprint editor interaction configuration

1. In Canvas Editor, right-click a widget in the Layer panel and select Add to Blueprint Editor.
2. Click the icon in the upper-left corner of the page.

3. On the blueprint editor configuration page, click the Indicator Trend Chart widget in the imported nodes pane. The configuration parameters for the widget appear on the canvas.

   • Events

     Event	Description
     When the API Description Request Completes	Triggered after the data API request succeeds and the response is processed by the filter. The processed data is passed in JSON format. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     When Data Request Fails	Triggered when the data API request fails due to network issues, API errors, or other causes. The error response is processed by the filter and passed in JSON format. For a data example, see the Data Response section on the Data tab of the widget's configuration panel in the canvas editor.
     On Click	Triggered when the widget is clicked. Passes the data of the current node.

   • Actions

     Action	Description
     Request data interface	Re-requests data from the server, using upstream data processing or layer node data as parameters. For example, if the widget uses the API data source https://api.test and the data { id: '1'} is passed to the Request data interface action, the final request URL is https://api.test?id=1.
     Import data interface	Imports formatted data directly to redraw the component without requesting data from the server. For a data sample, see the Data Response area on the Data tab in the component's configuration pane in the canvas editor.
     Update component configuration	Dynamically updates the component's style configuration. Click Copy Configuration to Clipboard in the component's Configuration pane to get the configuration data, then modify the style field values as needed in the data processing node on the blueprint editor's configuration page.
     Show	Shows the component. The following is a data sample. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Hide	Hides the component. The following is a data sample. return { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }
     Toggle visibility	Toggles the component between visible and hidden. The following is a data sample. return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }
     Move	Moves the component to a specified position. The following is a data sample. return { // The move type. Absolute positioning: to. Relative positioning: by. Default: to. "positionType": "to", // The target position. x-coordinate, y-coordinate. "attr": { "x": 0, "y": 0 }, // The animation settings. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation curve. Valid values: linear, easeInOutQuad, and easeInOutExpo. "animationEasing": "linear" } }

Demo

The following demo shows how to use the carousel feature of the Tab List widget to dynamically display indicator trends.

1. Log on to the DataV console.

2. Select a visualization application and click Edit to open the canvas editor.

3. Add the Tab List and Indicator Trend Chart widgets to the canvas.

4. Select the Indicator Trend Chart widget, open its data panel, and copy the static data to the clipboard.

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

5. Paste the static data into the static data field for the Tab List widget. Map the id field to value and the content field to base.

6. On the configuration panel, enable the carousel feature for the Tab List and use the default interval.

7. Right-click the widgets and import both into the blueprint editor.

8. Connect the widgets.

9. You can configure the serial data processing method.

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

10. Click the icon in the upper-right corner of the page to preview the result.

    Note

    If you only need to dynamically display metric trends, you can right-click the canvas and select Hide to hide the Tab List widget.