DataV:Switch

Component overview

The switch is a control widget that simulates a physical switch, allowing users to toggle between on and off states. Configurable interactions enable it to work in tandem with other widgets to manage content visibility, render different states, and more.

Scenarios

Switches are typically used in visualization applications to toggle the display or concealment of specific content based on the switch's state. For instance, a switch can be used to enable or disable sound or to show or hide sidebar configurations.

Effect display

• Static Switch

  

• 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 a switch

1. Access the DataV console.

2. Navigate to Workbench > > All Applications > > Data Dashboard and select the desired dashboard to access the canvas editing page.

3. In the Widget Library > Controls > Button Category list in the left-side navigation pane, click the Switch widget to add it to the canvas.

You can also use global search to add related widgets.

Connect to business data

After adding the widget, connect it to prepared business data for display. Click the switch, and in the Data Source tab on the right, select the data for the widget to render.

• The data fields received by the switch are as follows.

  Field	Description
  onValue	The value emitted when the switch is turned on. The default is 1.
  offValue	The value emitted when the switch is turned off. The default is 0.
  state	The on or off state of the switch. This parameter value can only be configured as the value of onValue or offValue. The default is 0 or 1, where 0 indicates the switch is off, and 1 indicates the switch is on.

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

  // Turn on the switch
  [
    {
      "onValue": 1,
      "offValue": 0,
      "state": 1
    }
  ]
  
  // Turn off the switch
  [
    {
      "onValue": 1,
      "offValue": 0,
      "state": 0
    }
  ]

  

• 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 the switch

Click the switch widget to access its configuration options for basic styles, global variables, interaction occurrences, and other advanced settings, along with blueprint interaction configurations, in the right-side panel.

{
  "value": 1  // Current state value
}

[
  {
    "onValue": "1",
    "offValue": "0",
    "state": 1
  }
]

{
  "value": 1  // Current state value. 1 indicates the switch is on, and 0 indicates the switch is off.
}

    {
      // 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"
}