List carousel

Overview

The list carousel is a table-like widget that uses carousel animation to display data in an orderly list on a data dashboard. You can customize the style and content of rows and columns, and configure list content to include hyperlinks and images.

Prerequisites

• Create a data dashboard. You can use a template, use a blank canvas, or use AI to generate one.

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

Add a list carousel

1. Access the DataV console.

2. On the Workbench page, in the Data Dashboards area, hover over the target dashboard and click Edit. The canvas editor opens.

3. In the navigation pane on the left, add the List Carousel widget to the canvas as shown in the following figure.

You can also use the global search feature to add the widget.

Connect to business data

After you add the widget, connect it to your business data. Click the list carousel, and then on the Data tab on the right, select the data to display in the widget.

• The following table describes the data fields accepted by the list carousel widget.

  Field	Description
  Custom parameters	The content of the list carousel table. You can customize multiple field values. These values must match the Column Field Name that you set in the Style > Custom Columns section. Note The field content can use HTML tags. For example, the following code shows how to use the <a> tag to create a hyperlink: "DataV": "<a href='https://www.aliyun.com/product/bigdata/datav?'>DataV Official Website</a>".

  The following shows the data structure of the example list carousel.

  [
    {
      "area": "China",
      "pv": 688,
      "attribute": "xxxxxxxxxxxxxxxxxxx"
    },
    {
      "area": "USA",
      "pv": 688,
      "attribute": "xxxxxxxxxxxxxxxxxxx"
    },
    {
      "area": "Germany",
      "pv": 688,
      "attribute": "xxxxxxxxxxxxxxxxxxx"
    },
    {
      "area": "UK",
      "pv": 688,
      "attribute": "xxxxxxxxxxxxxxxxxxx"
    }
  ]

• This section describes the core configuration items for the data source.

  Configuration	Description
  Select Data Source	Supports various data types, such as CSV files, APIs, and different databases. For more information, see Supported data source types. Edit data fields in a visual table or in code.
  Configure Filter (Optional)	Customize filter code to transform, filter, display, and perform simple calculations on data. For more information, see Manage data filters.
  Configure Data Mapping	Map fields from the selected data source to the widget's fields. This enables real-time data matching. Click the icon to configure field styles.
  View Response Result	Displays the data connected to the widget in real time. When the widget's data source changes, this section shows the latest data. Click the data response result to view the data field code. Click View Example to see the array type and sample code that the data source accepts. You can write your fields based on the example. Other data request configurations: Disable Loading State: If you check this box, the widget's initial loading content does not appear when the widget updates or when you preview the data dashboard. Controlled Mode: If you check this box, the widget does not request data when it initializes. Data requests can only be started by the blueprint editor or by global variable events. Auto Update Request: If you check this box, the platform polls for data updates at the interval you set. If you do not check this box, you must refresh the page manually or use the blueprint editor or global variable events to trigger data updates.

Configure the list carousel

Click the list carousel widget to configure its settings in the panel on the right. You can configure basic styles, advanced settings such as global variables and interaction events, and Blueprint interactions.

{
  "area": "China",
  "pv": 1,
  "attribute": "Sample data"
}

{
  "data": [
    {                     // Data on the current page.
      "area": "China",
      "pv": 1,
      "attribute": "Sample data"
     }
   ],  
  "index": 1              // The index value of the list row. The data of the first row is always obtained.
}

{
  "data": [
    {                     // Data on the current page.
      "area": "China",
      "pv": 1,
      "attribute": "Sample data"
    }
  ],  
  "index": 1              // The index value of the highlighted row.
}

{
  "message": "The first scroll loop ends",
  "isEnding": "0"
}

{
  "area": "China",
  "pv": 1,
  "attribute": "Sample data"
}

{
  "isOrder": true,                       // Whether to scroll and highlight in sequence. Supports sequential scrolling highlight and specified highlight.
  "hightLightIndex": "1",                // The specified highlight value. The serial number of the row to highlight (for example, '1,2,3').
  "hightLightStyle": {                   // Style. The highlight style.
    "color": "#f00",                     // Text color.
    "borderColor": "#f00",               // Border color.
    "borderWidth": 1,                    // Border width.
    "backgroundColor": "yellow",         // Background color.
    "fontSize": 12,                      // Font size.
    "fontWeight": "normal",              // Font weight.
    "fontFamily": "Microsoft Yahei"      // Font.
  }
}

{
  "isLoop": true // Whether to loop. The default value is true.
}

{   // The movement method. Absolute positioning: to. Relative positioning: by. Default value: to.
    "positionType": "to",
    // The specified position. x-coordinate, y-coordinate.
    "attr": 
      {
        "x": 0,
        "y": 0
       },
      // The animation method.
      "animation": 
   {
       "enable": false,
       // The animation duration in milliseconds.
       "animationDuration": 1000,
       // The animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo.
        "animationEasing": "linear"
   }
}

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

Demo

This demo shows how to combine a column chart with a list carousel to display annual sales by month in a carousel.

1. Add widgets to the canvas.

   1. Access the DataV console.

   2. Select a data dashboard and click Edit to open the canvas editor.

   3. From the widget library in the navigation pane on the left, add the Column Chart and List Carousel widgets to the canvas as shown in the following figure.

2. Configure the column chart.

   1. Connect to a data source.

      Click the column chart widget, click the Data panel, and then modify the static data.

      The data is as follows.

      [
        {
          "colorField": 100,
          "x": "Jan",
          "y": 280000
        },
        {
          "colorField": 200,
          "x": "Feb",
          "y": 200000
        },
        {
          "colorField": 300,
          "x": "Mar",
          "y": 180000
        },
        {
          "colorField": 400,
          "x": "Apr",
          "y": 160000
        },
        {
          "colorField": 100,
          "x": "May",
          "y": 430000
        },
        {
          "colorField": 200,
          "x": "Jun",
          "y": 200000
        },
        {
          "colorField": 300,
          "x": "Jul",
          "y": 290000
        },
        {
          "colorField": 400,
          "x": "Aug",
          "y": 760000
        },
        {
          "colorField": 100,
          "x": "Sep",
          "y": 260000
        },
        {
          "colorField": 200,
          "x": "Oct",
          "y": 370000
        },
        {
          "colorField": 300,
          "x": "Nov",
          "y": 290000
        },
        {
          "colorField": 400,
          "x": "Dec",
          "y": 150000
        }
      ]

   2. Configure the widget style.

      Click the Style panel, set Label Display on the x-axis to 12, and then disable Animation Effect.

3. Configure the list carousel.

   • Click the Data tab and enable Controlled Mode. This prevents the widget from requesting its own static data during initialization. Data requests can be initiated only through the Blueprint editor, which retrieves the data output after an interaction with the column chart.

   • Click the list carousel widget, click the Style panel, enable the global highlight effect, keep two label columns in the custom columns, and then modify the Column Field Name and Column Display Name.

   • Column Field Name: Set to Month and Total in that order.

   • Column Display Name: Set to Month and Sales in that order.

4. Configure the Blueprint interaction.

   Use the Blueprint editor to display annual sales by month in a carousel.

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

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

      Perform this step for both the column chart and list carousel widgets.

   3. On the Logic Node tab on the left, hover over the Serial Data Processing node and click the icon to add the node to the main canvas. Repeat this step to add two Serial Data Processing nodes.

   4. Connect the widgets and configure the Serial Data Processing nodes as shown in the following figure.

      Configure the processing methods for the Serial Data Processing nodes.

      • Import data

        return data.map(i => {
          return {
            Month: i.x,
            Total: i.y
          }
        })

      • Interactive highlighting

        return {
          "data": {
            "x": data.data[0].Month,
            "y": data.data[0].Total
          },
          "style": {
            "fillStyle": "#f00"
          }
        }

5. In the upper-right corner of the page, click Preview to view the result.