DataV:Status card

Component overview

A status card is a text widget that displays the current status and related information of an entity, such as a server, using a colored dot. It allows for the configuration of multiple status categories.

Scenarios

Status cards are widely used in visualization applications to display status information across various categories. For instance, they can indicate the operational status of servers within a cluster.

Effect display

• Horizontal layout

• Portrait layout

• Interactive scenarios

Prerequisites

• A data dashboard is available that supports creation using a template, a blank canvas.

• Business data is ready for use. For more information, see Data Source.

Add status card

1. Access the DataV console.

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

3. From the Widget Library > Information list in the left-side navigation pane, select the Status Card widget to add it to the canvas.

You can also use global search to find and add widgets.

Connect to business data

Once the widget is added, connect it to the prepared business data for display. Click the status card and, in the Data Source tab on the right, select the data for the widget to display.

• The data fields accepted by the status card are outlined below.

  Field	Description
  name	Set the text content corresponding to each status in the status card.
  value	Set the status type of the status card (that is, the dot before the text). It must correspond to the content of the Style > Edition > Status Category > Status Type Name configuration item and use the style defined in the status type for rendering. If it exceeds the value range of Status Type Name, the corresponding status type cannot be displayed.

  Below is the data structure and effect display of a sample status card.

  [
    {
      "name": "Normal status",
      "value": "normal"
    },
    [
      "Error status",
      "error"
    ],
    [
      "Virtual machine disconnected",
      "not connected"
    ]
  ]

  

• 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 status card

Select the status card widget to configure its basic style, interaction occurrences, and blueprint interaction in the right-side panel.

[
  {
    "name": "Virtual machine started",
    "value": "1"  //This corresponds to the content of the status type name in the style panel
  }
]

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

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

Case demonstration

This case demonstrates the interaction between a list carousel and a status card, displaying the statuses of virtual machines in different regions. Clicking a row in the list carousel dynamically updates the status card with the virtual machines' status in the selected region.

1. Add widgets to the canvas.

   1. Access the DataV console.

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

   3. In the widget library in the left-side navigation pane, add the List Carousel and Status Card widgets to the canvas.

2. Configure the list carousel.

   1. Modify the input data.

      Click the list carousel and update the static data in the data source panel as shown below.

      

      The sample data is as follows.

      [
        {
          "cluster": "East China",
          "vm": "vm-001",
          "status": "normal"
        },
        {
          "cluster": "South China",
          "vm": "vm-002",
          "status": "not connected"
        },
        {
          "cluster": "West China",
          "vm": "vm-003",
          "status": "error"
        },
        {
          "cluster": "North China",
          "vm": "vm-004",
          "status": "normal"
        }
      ]

   2. Configure the widget style.

      In the style panel, set the number of rows to 3 and enable the carousel. Modify the custom column labels as follows:

      • Column field names: Change to "cluster", "vm", and "status" respectively.

      • Column display names: Change to "cluster", "vm", and "status" respectively.

      

3. Configure the status card.

   1. Modify the input data.

      Click the status card and update the static data in the data source panel as shown below.

      

      The sample code is as follows.

      [
        {
          "name": "Normal status",
          "value": "normal"
        },
        [
          "Error status",
          "error"
        ],
        [
          "Virtual machine disconnected",
          "not connected"
        ]
      ]

   2. Configure the widget style.

      In the style panel, set the status categories of the status card to Normal (green), Error (red), and Disconnected (white) as shown below.

4. Set up blueprint interaction.

   1. Enter the blueprint page by clicking the icon in the upper-left corner.

   2. In the Layer Node tab, hover over the widget and click the to add it to the main canvas. Perform this step for both the list carousel and status card widgets.

      To add the list carousel and status card widgets to the main canvas, you must perform this operation in sequence.

   3. In the Logic Node tab, hover over the serial data processing node and click the to add it to the main canvas.

   4. Connect the components as illustrated below to map the selected row's status from the list carousel to the status card.

   5. Configure the serial data processing node to handle the data accordingly.

      Upon clicking a specific row in the list carousel, the status card will import the virtual machine name and status from that row. The sample code is as follows.

      return [
        {
          "name": data.vm,
          "value": data.status,
        }
      ]

5. To preview the display result, click Preview in the upper-right corner of the page.