Help Center/ Data Lake Visualization/ User Guide/ Managing Components/ Using a Converter
Updated on 2024-06-21 GMT+08:00
View PDF
Share

Using a Converter

When the result returned by the component does not meet the display requirements or requires secondary processing and conversion, you can use a converter to edit the code to process the data returned by the component.

Procedure

  1. Create a screen and go to the screen editing page.
  2. Click Converter at the top of the page. The converter editing area is displayed at the bottom of the page.

    Figure 1 Converter

  3. In the converter editing area, click Create Converter and enter the converter name. After the converter is created, move the cursor to the row where the converter is located, click to rename the converter, or click to delete the converter. If the number of Linked Components is not 0, cancel the link and then delete the converter.

    A converter name can contain only letters, numbers, underscores (_), and hyphens (-), and cannot exceed 32 characters.

  4. Click a converter name to expand the converter code area and edit and run the code.

    1. Write JavaScript code in area 1.
    2. Enter the data to be processed in area 2. The system transfers the original data to the data of the code editor for compilation.
    3. Click in the code editing area to run the code. The converted result data is displayed in area 3.
    4. Click in the code editing area to save the code in the converter.
    Figure 2 Converter code area

  5. Link the converter to components.

    1. Select the components you want to link to the converter and switch to the Data panel.
    2. Select the converter you created next to Converter.
      Figure 3 Selecting a converter
    3. Modify the converter code. Click the icon on the right of the converter to modify, run, and save the code. The Original Data area displays the request response data or static data of the current component.

Sample Code

For details about the JavaScript syntax, see https://developer.mozilla.org/en-US/docs/Web/JavaScript.

  • Data conversion example 1 (when the data structure in the returned weather data is complex and the indicator data is scattered, the data is converted into a simple format for display)
    • Code 
      return data.results[0].weather_data.map(it => { 
  return {
    date: it.date,
    weather: `${it.weather} ${it.wind} ${it.temperature}`
  };
});
    • Original data 
      {
 "error": 0,
 "status": "success",
 "date": "2020-11-27",
 "results": [{
                 "currentCity": "city A",
                 "pm25": "119",
                 "index": [],
                 "weather_data": [{
                                 "date": "Wednesday, September 16 (real-time temperature: 28°C)",
                                 "dayPictureUrl": "http://s1.bdstatic.com/r/www/aladdin/img/new_weath/bigicon/3.png",
                                 "nightPictureUrl": "http://s1.bdstatic.com/r/www/aladdin/img/new_weath/bigicon/3.png",
                                 "weather": "Overcast to cloudy,",
                                 "wind": "East wind 3 to 4 mph,",
                                 "temperature": "25 to 15°C"
                 },
                 {
                                 "date": "Thursday",
                                 "dayPictureUrl": "http://s1.bdstatic.com/r/www/aladdin/img/new_weath/icon/5.png",
                                 "nightPictureUrl": "",
                                 "weather": "Cloudy to sunny,",
                                 "wind": "Northwest breeze,",
                                 "temperature": "26 to 12°C"
                 },
                 {
                                 "date": "Friday",
                                 "dayPictureUrl": "http://s1.bdstatic.com/r/www/aladdin/img/new_weath/icon/1.png",
                                 "nightPictureUrl": "",
                                 "weather": "Sunny,",
                                 "wind": "East breeze,",
                                 "temperature": "30 to 16°C"
                 },
                 {
                                 "date": "Saturday",
                                 "dayPictureUrl": "http://s1.bdstatic.com/r/www/aladdin/img/new_weath/icon/5.png",
                                 "nightPictureUrl": "",
                                 "weather": "Cloudy to overcast,",
                                 "wind": "Southeast wind 3 to 4 mph,",
                                 "temperature": "30 to 18°C"
                 }]
 }]
}
    • Converted data 
      [
  {
    "date": "Wednesday, September 16 (real-time temperature: 28°C)",
    "weather": "Overcast to cloudy, East wind 3 to 4 mph, 15°C to 25°C"
  },
  {
    "date": "Thursday",
"weather": "Cloudy to sunny, Northwest breeze, 12°C to 26°C"
  },
  {
    "date": "Friday",
    "weather": "Sunny, East breeze, 16°C to 30°C"
  },
  {
    "date": "Saturday",
    "weather": "Cloudy to overcast, Southeast wind 3 to 4 mph, 18°C to 30°C"
  }
]
  • Data conversion example 2 (when data with multiple series values is returned, only data items whose value of series is Search are displayed.)
    • Code 
      return data.filter (it => it.series === 'Search');
    • Original data 
      [
  {
    "area": "city A",
    "series": "Speed",
    "num": "120",
    "id": "1"
  },
  {
    "area": "city B",
    "series": "Search",
    "num": "150",
    "id": "2"
  },
  {
    "area": "city C",
    "series": "3",
    "num": "120",
    "id": "3"
  },
  {
    "area": "aa",
    "series": "44",
    "num": "44",
    "id": "5"
  }
]
    • Converted data 
      [
  {
    "area": "city B",
    "series": "Search",
    "num": "150",
    "id": "2"
  }
]
  • Data conversion example 3 (when the data is a decimal, the data is converted into a percentage and is displayed with two decimal places)
    • Code 
      return data.map(it => {
  it.y = (it.y * 100).toFixed(2);
  return it;
});
    • Original data 
      [
  {
    "x": "Type A",
    "y": 0.78,
    "s": 1
  },
  {
    "x": "Type B",
    "y": 0.55,
    "s": 1
  },
  {
    "x": "Type C",
    "y": 0.68,
    "s": 1
  },
  {
    "x": "Type D",
    "y": 0.48,
    "s": 1
  },
  {
    "x": "Type E",
    "y": 0.7,
    "s": 1
  },
  {
    "x": "Type F",
    "y": 0.85,
    "s": 1
  }
]
    • Converted data 
      [
  {
    "x": "Type A",
    "y": "78.00",
    "s": 1
  },
  {
    "x": "Type B",
    "y": "55.00",
    "s": 1
  },
  {
    "x": "Type C",
    "y": "68.00",
    "s": 1
  },
  {
    "x": "Type D",
    "y": "48.00",
    "s": 1
  },
  {
    "x": "Type E",
    "y": "70.00",
    "s": 1
  },
  {
    "x": "Type F",
    "y": "85.00",
    "s": 1
  }
]
  • Data conversion example 4 (when the returned data is an empty array [], the data is converted into 0 for display)
    • Code 
      if (Array.isArray(data) && data.length === 0) {
  const item = {};
  item['finalName'] ='Modification times'
  item['finalValue'] = 0;
  data.push(item)
  return data;
 } else {
  return data;
}
    • Original data 
      []
    • Converted data 
      [
  {
    "finalName": "Modification times",
    "finalValue": 0
  }
]
  • Data conversion example 5 (variables.cato is referenced in the code to display only the data selected in the drop-down box in the bar chart component)
    • Code 
      return data.filter(it => it.cato === variables.cato);
    • Original data 
      [
 {
    "cato": "city A",
    "num": 678,
    "id": "0"
  },
  {
    "cato": "city B",
    "num": 0,
    "id": "0"
  },
  {
    "cato": "city C",
    "num": 379,
    "id": "0"
  },
  {
    "cato": "city D",
    "num": 678,
    "id": "0"
  },
  {
    "cato": "city E",
    "num": 6666.0024,
    "id": "0"
  },
  {
    "cato": "city F",
    "num": 12345.667,
    "id": "0"
  },
  {
    "cato": "city G",
    "num": 89080,
    "id": "0"
  },
  {
    "cato": "city H",
    "num": 89080,
    "id": "0"
  },
  {
    "cato": "city I",
    "num": 654321.3,
    "id": "0"
  }
]
    • Converted data 
      [
  {
    "cato": "city A",
    "num": 678,
    "id": "0"
  }
]
Parent topic: Managing Components