Status Card

Overview

The 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. You can configure multiple status categories.

Scenarios

Display status information for multiple categories in a visualization application. For example, show the running status of multiple servers in a cluster.

Demonstration

• Landscape layout

• Portrait layout

• Interaction scenario

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

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, choose Widgets > Information. Click the Status Card widget to add it to the canvas.

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

Ingest business data

After you add the widget, connect it to your business data. Click the status card, and then on the Data Source tab in the right-side panel, select the data for the widget.

• The following table describes the data fields accepted by the Status Card widget.

  Field	Description
  name	The text content for each status in the status card.
  value	The status type, represented by the dot before the text. This value must match a Status Type Name configured under Style > Series > Status Category. The widget uses the style defined for that status type. If the value does not match any configured Status Type Name, the status is not displayed.

  The following shows the data structure and appearance of the sample status card.

  [
    {
      "name": "Running",
      "value": "1"
    },
    [
      "Waiting",
      "2"
    ],
    [
      "Completed",
      "3"
    ],
    [
      "Failed",
      "4"
    ]
  ]

  

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

Click the Status Card widget to configure its basic style, interaction events, and Blueprint interactions in the right-side panel.

[
  {
    "name": "VM started",
    "value": "1"  // This corresponds to the status type name on the Style panel
  }
]

{ 
  // Movement type. Absolute positioning: to, relative positioning: by. Default: to.
    "positionType": "to",
  // Specified position. x-coordinate, y-coordinate.
  "attr": {
   "x": 0,
   "y": 0
   },
  // Animation method.
  "animation": {
    "enable": false,
    // Animation duration.
   "animationDuration": 1000,
    // Animation curve. Optional values: linear|easeInOutQuad|easeInOutExpo.
   "animationEasing": "linear"
  }
}

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

Demo

This demo shows an interaction between a list carousel and a status card that displays virtual machine statuses across regions. Clicking a row in the list carousel dynamically updates the status card.

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. In the widget library in the navigation pane on the left, click the List Carousel and Status Card widgets to add them to the canvas.

2. Configure the list carousel.

   1. Modify data access.

      Click the list carousel. On the Data Source tab, modify the static data as shown below.

      

      Sample data

      [
        {
          "cluster": "East China",
          "vm": "vm-001",
          "status": "Normal"
        },
        {
          "cluster": "South China",
          "vm": "vm-002",
          "status": "Not connected"
        },
        {
          "cluster": "West China",
          "vm": "vm-003",
          "status": "Faulty"
        },
        {
          "cluster": "North China",
          "vm": "vm-004",
          "status": "Normal"
        }
      ]

   2. Configure the widget style.

      On the Style tab, configure the settings as shown below. Set the number of table rows to 3 in the global settings and enable the carousel. Then, modify the labels for the custom columns as follows:

      • Column Field Name: Change the values to "cluster", "vm", and "status" in order.

      • Column Display Name: Change the values to "Cluster", "Virtual Machine", and "Status" in order.

      

3. Configure the status card.

   1. Modify data access.

      Click the status card. On the Data Source tab, modify the static data as shown below.

      

      Sample code

      [
        {
          "name": "Status: Normal",
          "value": "Normal"
        },
        [
          "Status: Abnormal",
          "Faulty"
        ],
        [
          "VM not connected",
          "Not connected"
        ]
      ]

   2. Configure the widget style.

      On the Style tab, modify the status categories for the status card as shown below. Configure three statuses: Normal (green), Faulty (red), and Not connected (white).

4. Configure the Blueprint interaction.

   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 component and click the icon to add it to the canvas.

      To execute this operation, sequentially add the list carousel and status card components to the main canvas.

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

   4. Connect the nodes as shown below. This configuration imports the status from a selected row in the list carousel to the status card.

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

      The following code processes the data so that clicking a row in the list carousel imports the virtual machine name and status into the status card.

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

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