gui.json File

The gui.json file is the configuration file of a component. This section describes the fields in the gui.json file. You can modify the gui.json file and customize the component configuration panel based on the field description in this document.

The following is a gui.json file example:

{
  "name": "newCom",
  "attr": {
    "w": 650,
    "h": 378
  },
  "style": [...],
  "data": {...},
  "event": {...}
}

**Table 1** Description of parameters in **gui.json**
Parameter	Mandatory	Type	Description
name	Yes	String	Name of the component.
attr	No	attr object	Basic configuration of the component width and height (unit: pixel).
style	Yes	Array of Style object	Configuration of the pattern panel.
data	Yes	Object	Configuration of the data panel. For details, see Configuring Component Data.
event	Yes	Object	Configuration of the interaction panel. For details, see Configuring Component Interaction.

**Table 2** Description of the **attr** parameters
Parameter	Mandatory	Type	Description
w	No	Number	Component width (unit: pixel).
h	No	Number	Component height (unit: pixel).

Configuring the Component Style

"style": [
  {
     "label": "global",
     "isExpand": true,
     "children": [
        {
          "label": "Font",
          "name": "font",
          "type": "fontfamily",
          "value": "YouYuan"
        },
        {
          "label": "Color",
          "name": "color",
          "type": "color",
          "value": "rgba(70, 94, 212, 1)"
        }
     ]
  }
]

The Style parameter is in array format. Each data element forms a style configuration item, and can contain related sub-configuration items. A maximum of three levels are supported. The parameter is described as follows:

**Table 3** Description of the **Style** parameters
Parameter	Mandatory	Type	Description
label	Yes	String	Label name of the configuration item.
isExpand	No	Boolean	Indicates whether sub-configuration items can be collapsed or expanded. true: yes; false: no
type	Yes	String	UI type of the configuration item. For details about the UI types supported by DLV, see Supported Types.
name	Yes	String	Key value of the configuration item. The value must be unique.
Other	No	-	Different UI types have different attribute parameters. For details, see UI Types.
children	No	Array of children object	Sub-configuration items of the configuration item. As shown in the following figure, the Global style contains Font and Color.

**Table 4** Description of the **children** parameters
Parameter	Mandatory	Type	Description
label	Yes	String	Label name of the configuration item.
type	Yes	String	UI type of the configuration item. For details about the UI types supported by DLV, see UI Types.
name	Yes	String	Key value of the configuration item. The value must be unique.
Other	Yes	-	Different UI types have different attribute parameters. For details, see UI Types.

Configuring Component Data

data: data panel configuration of the component.

The following provides an example:

"data": {
  "fields": {...},
  "config": {...}
}

**Table 5** Description of the **data** parameters
Parameter	Mandatory	Type	Description
fields	Yes	Object	Field mapping area. For details about the field mapping area on the data panel, see fields.
config	Yes	Object	Static data area on the data panel. For details, see config.

fields

In the example, the fields parameter is as follows:

"fields": {
  "x": {
    "value": "", 
    "desc": "x"  
  },  
  "y": {
    "value": "",    
    "desc": "y"  
   },  
   "s": {
     "value": "",    
     "desc": "s",    
     "type": "series",    
     "gui": [      
       {
          "label": "",        
          "isCheck": true,        
          "children": [          
             {
                "label": "Name",            
                "name": "series.name",            
                "type": "input",            
                "value": ""          
             },          
             {
                "label": "Color",            
                "name": "series.color",            
                "type": "color",            
                "value": "rgba(195,53,53,1)"          
             }        
           ]      
         }    
      ]  
   }
}

The fields parameter contains multiple objects in the key:value format. The value of key is the field name. The value of value corresponding to the key value is defined as follows:

**Table 6** Description of the **Fields value** parameters
Parameter	Mandatory	Type	Description
value	Yes	String	Field name in the mapped source data.
desc	Yes	String	Field name description, which is the same as the key value.
type	No	String	The value is fixed to series. If the type parameter exists, the field is a series field (indicating that the field is used to distinguish two or more groups of data displayed in the same chart). Each series can map the value of the field. In the example, the s field contains a default series and a series corresponding to value 1. Each series contains some component style configurations.
gui	No	Array	The gui parameter is available only when type is set to series. This parameter lists the style configuration required by the series.

config

In the example, the config parameter is as follows:

"config": {
  "data": [    
    {  
      "x": "2018",      
      "y": 78,      
      "s": 1    
    },    
   {
      "x": "2016",      
      "y": 55,      
      "s": 1    
   },    
  {
      "x": "2017",      
      "y": 68,      
      "s": 1    
  },    
  {
      "x": "2018",      
      "y": 48,      
      "s": 1    
  },    
  {
      "x": "2019",      
      "y": 70,      
      "s": 1    
   },     
  {
      "x": "2020",      
      "y": 85,      
      "s": 1    
   }  
 ]
}

The data parameter in the Config parameter corresponds to the static data displayed on the data panel. The dynamic data source can be connected after the component package is uploaded. The data format needs to be defined based on the source data of the user.

Configuring Component Interaction

event: component interaction configuration.

The following provides an example:

"event": {
   "Data change": {
     "enable": false,    
     "fields": {
       "value": ""    
      }  
   }
}

The event parameter is an object in the key: value format. The value of key is the event name, and the value of value is the configuration of the event. The details are as follows:

**Table 7** Description of the **event value** parameters
Parameter	Mandatory	Type	Description
Enable	Yes	Boolean	Indicates whether to enable the event. true: enable, false: disable
Fields	Yes	Object	Field mapping relationship corresponding to the interaction event, including one key:value at least. The value of key is the parameter name transferred during interaction, and the value of value is the transferred value that is obtained from the component data.