Help Center> Data Lake Visualization> Developer Guide> Component Development Guide> UI Types
Updated on 2022-02-22 GMT+08:00
View PDF

UI Types

This section describes the component configuration items supported by DLV. You can use the type field defined in the gui.json file to define types and configurations of components.

Supported Types

The Type field supports the following:

Text Box

Table 1 Parameter description

Field Name

Mandatory

Parameter Type

Description

placeholder

No

String

Message displayed when the value is empty.

value

Yes

String

Value in the text box.

The following provides an example:

1
2
3
4
5
6
7
 
{
  "label": "Init value",  
  "name": "initvalue",  
  "type": "input",  
  "placeholder": "input value",  
  "value": ""
}

Numeric Control

Table 2 Parameter description

Field Name

Mandatory

Parameter Type

Description

value

Yes

Number

Value of the numeric control. The default value is 0.

min

No

Number

The minimum value. The default value is -30,000.

max

No

Number

The maximum value. The default value is 30,000.

precision

No

Number

Number of decimal places to be reserved. The default value is 0.

step

No

Number

Adjustment range. The default value is 1.

The following provides an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
 
{
  "label": "Size",  
  "name": "size",  
  "type": "number",  
  "min": 0.1,  
  "max": 1.5,  
  "precision": 1,  
  "step": 0.1,  
  "value": "0.6"
}

Drop-down List

Table 3 Parameter description

Field Name

Mandatory

Parameter Type

Description

value

Yes

string

Value selected from the drop-down list.

data

Yes

Array<Object>

All the optional values contained in the drop-down list.

isSearch

No

Boolean

Indicates whether the drop-down list supports the search function. The default value is false.

The following provides a data example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
 
{
  "label": "Layout",  
  "name": "initvalue",  
  "type": "select",  
  "data": [    
    {
      "key": "Center",      
      "value": "center"    
    },    
    {
      "key": "Left",      
      "value": "left"    
    },    
    {
      "key": "Right",      
      "value": "right"    
     }  
   ],  
   "value": "center"
}
Figure 1 Drop-down list

Color Selector

Table 4 Parameter description

Field Name

Mandatory

Parameter Type

Description

value

Yes

String

Value selected by the color selector. The value can be a gradient color or an echarts color value.

gradient

No

Boolean

Indicates whether gradient colors are supported. The default value is true.
The following provides an example: 
1
2
3
4
5
6
7
 
{
  "label": "Color",  
  "name": "color",  
  "type": "color",  
  "value": "rgba(70,94,212,1)",
  "gradient": true
},

Check Box

Table 5 Parameter description

Field Name

Mandatory

Parameter Type

Description

value

Yes

Boolean

Value of the check box. The value can be true or false.

The following provides an example:

Figure 2 Check box
1
2
3
4
5
6
 
{
  "label": "Checked",  
  "name": "checked",  
  "type": "checkbox",  
  "value": true
}

Slider

Table 6 Parameter description

Field Name

Mandatory

Parameter Type

Description

value

Yes

Number

Value of the slider. The default value is 0.

min

No

Number

Minimum value of the slider. The default value is 0.

max

No

Number

Maximum value of the slider. The default value is 100.

step

No

Number

Adjustment range. The default value is 1.

The following provides an example:

Figure 3 Slider
1
2
3
4
5
6
7
8
9
 
{
  "label": "Radius Value",  
  "name": "radius",  
  "type": "slider",  
  "value": 0,  
  "min": 0,  
  "max": 10,  
  "step": 1
}