DataV:General Title

Overview

The general title is an information widget designed to convey the core content or important information of a module. In a data dashboard, you can use multiple general title widgets to display the titles or central ideas of various submodules in the dashboard.

Scenarios

The general title is commonly used in visualization applications to add titles and explanatory information to clarify the subject of related content, helping you to quickly and intuitively understand the core content. It also supports interaction with other widgets, allowing the title to control the presentation of different dimensional views or data content.

Effect Display

• Static Title

  

• Interactive Scenario

  

• Link Jump

  

Prerequisites

• A data dashboard has been created, supporting creation using a template, creation using a blank canvas.

• Business data is prepared. For more information, see Data Source.

Add General Title

1. Access the DataV console.

2. In the Workbench > All Applications > Data Dashboard, click the target dashboard to enter the canvas editing page.

3. In the Widget Library > Information list on the left-side navigation pane, click the General Title widget to add it to the canvas.

You can also use global search to add related widgets.

Integrate Business Data

After adding the widget, you can integrate the prepared business data into the widget for display. Click the general title and select the data to be presented by the widget on the Data Source tab on the right.

• The data fields received by the general title are introduced as follows.

  Field	Description
  value	(Optional) The content of the title. If not empty, it will overwrite the configuration in the style. If empty, it will use the content in the Style > Basic Style > Title Content configuration item.
  url	(Optional) The hyperlink address for the title jump. If not empty, it will overwrite the configuration in the style. If empty, it will use the URL in the Style > Interaction > Hyperlink Configuration > Hyperlink configuration item.

  The data structure and effect display of the sample general title are as follows.

  [
    {
      "value": "DataV Official Website",
      "url": "https://www.alibabacloud.com/en/product/datav?_p_lc=1&spm=a2c63.p38356.6791778070.263.36702771FLuZOw"
    }
  ]

  In the preview or publish interface, click the widget to jump to the corresponding link.

  

• The key configuration items for the data source are as follows.

  Configuration Item	Description
  Select Data Source	Supports integrating various types of data such as CSV files, APIs, and various databases. For more information, see Data Source. You can edit data fields using a visual table or code.
  Configure Filter (Optional)	Used to customize filter code to achieve data structure transformation, filtering, display, and simple calculations. For more information, see Manage Data Filters.
  Configure Data Mapping	Used to map fields from the selected data source to the corresponding fields of the widget to achieve real-time data matching. Click the icon to configure field styles.
  View Response Results	Used to display the data integrated into the widget in real-time. When the widget data source changes, the latest data will be displayed here. Click the data response result to view the code of the data fields written. Click to view the example to see the array type and code example received by the data source. You can refer to the example to write related fields. Other data request configurations: Disable Loading State: When selected, the loading content during widget initialization will not be displayed when updating or previewing the data dashboard. Controlled Mode: When selected, the widget will not request data in the initialization state. At this time, data requests can only be initiated through the blueprint editor or global variable events. Automatic Update Request: When selected, the platform will dynamically poll and update data according to the polling time you set. If not selected, you need to manually refresh the page or trigger a request to update data through the blueprint editor and global variable events.

Configure General Title

Click the general title widget to configure the basic style, global variables, interaction occurrences, and other advanced configurations, along with blueprint interaction settings, on the right panel.

{
    "value": "Title",
    "url": "https://www.aliyun.com"
}

[
  {
    "value": "Title",
    "url": "https://www.aliyun.com"
  }
]

    {      
      // 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 delay, in ms.
        "animationDuration": 1000,
        // Animation curve. Optional values are: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
      }
    }

{
  "animationType": "fade",
  "animationDuration": 1000,
  "animationEasing": "linear"
}

Demo

This demo uses the carousel function of the Tab list to achieve dynamic display of the general title.

1. Add widgets to the canvas.

   1. Access the DataV console.

   2. Select any data dashboard and click Edit to enter the canvas editor.

   3. In the widget library on the left-side navigation pane, click the Tab List and General Title widgets to add them to the canvas.

2. Configure blueprint interaction.

   1. Click the icon in the upper left corner of the page to enter the blueprint page.

   2. On the Layer Node tab on the left, hover the mouse over the widget and click the icon to add the widget to the main canvas.

      You need to perform this operation in sequence to add the general title and Tab list widgets to the main canvas.

   3. On the Logic Node tab on the left, hover the mouse over the serial data processing node and click the icon to add the widget to the main canvas.

   4. Connect the widgets as shown below to import the corresponding data into the general title when clicking theTab list.

   5. Click the serial data processing node to configure the processing method of the node.

      return [{value:data.content}];

3. Click Preview in the upper right corner of the page to preview the display result.

4. (Optional) If you need to jump to a specific Tab page, you can add a Condition Judgement node before the serial data processing node to execute the processing method when the condition is met. If not met, the default value is displayed. For example, do not display the content of the first Tab page.

   • Condition Judgement Node

     return data.id > 1;

   • Serial Data Processing: Met

     return [{value:data.content}];

   • Serial Data Processing: Not Met

     return [{value: "I am title data"}];

5. Click Preview in the upper right corner of the page to preview the display result.