Transform Raw Data Using Six DataV Filter Techniques - DataV - Alibaba Cloud - DataV

Prerequisites

You are on the Canvas Editor page.

Case 1: data format conversion

In the Canvas Editor pane, add the Graph widget.
Click the Data icon in the right-side configuration panel. The Data Settings tab appears.
Click Configure Data Source. The Configure Data Source tab appears.
Modify the static data to the following code:
```
{ "Clothing": 21, "Food": 29, "Building Materials": 13, "Entertainment": 33 }
```
Note
The chart becomes blank because the static data does not match the required parameter fields.

Select Data Filter and enter the following code in the code editor:

function objToArr(obj, name, value) {
  const result = [];
  // Loop object data type
  for (const key in obj) {
    const item = {};
    item[name] = key;
    item[value] = obj[key];
    result.push(item);
  }
  return result;
}
return objToArr(data, 'name', 'value');

The chart now displays normally.

Note
The data in object format is converted to array format. Because the parameter fields now match, the chart displays normally.

Case 2: Data filtering and sorting

In the Canvas Editor pane, add a line chart widget.
On the Configuration tab of the right-side configuration panel, set Axes > x-axis to Category.
Click the Data icon in the right-side configuration panel. The Data Settings tab appears.
Click Configure Data Source. The Configure Data Source tab appears.

Modify the static data to the following code:

[
    { "x": "Clothing", "y": 800 }, { "x": "Food", "y": 779 },
    { "x": "Building Materials", "y": 180 }, { "x": "Entertainment", "y": 523 },
    { "x": "Fresh", "y": 192 }
]

Select Data Filter and modify the fields based on the following code:

// Filter
  const result = data.filter(item => {
    return item.y >= 500;
  });
  // Sort the order.
  result.sort((a, b) => a.y - b.y);
  return result;

The chart results show that the filter keeps only categories with y values greater than or equal to 500 and sorts them in ascending order.

Note
You can filter and sort objects in an array. Modify the filter and sort conditions to select different data and sort the results in ascending or descending order.

Case 3: Obtain the current time and format the display

In the Canvas Editor pane, add the Title widget.
Click the Data icon in the right-side configuration panel. The Data Settings tab appears.
Click Configure Data Source. The Configure Data Source tab appears.

Select Data Filter and modify the fields based on the following code:

Retrieves the current time and formats it as YYYY-MM-DD HH:mm:ss.

Example return value: 2023-02-17Tue 15:30:00.

Note

Time format reference: https://momentjs.com/docs/#/displaying/format/
Date object reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

const getTimeStr = (options = {}) => {
  // Complements the string with zeros. Input: 8, Output: 08
  const strComplement = (str, digit = 2) => {
    str = typeof str !== 'string' ? `${str}` : str;
    const mask = (new Array(digit + 1)).join('0');
    return mask.slice(str.length) + str;
  }
  const { myDate = new Date(), separator = '-' } = options;
  // Obtain the year, month, day, week, hour, minute, and second of the current time.
  const year = myDate.getFullYear();
  const month = strComplement(myDate.getMonth() + 1);
  const date = strComplement(myDate.getDate());
  const day ='Week ${'Day 123456 '.charAt(myDate.getDay())}';
  const hour = strComplement(myDate.getHours());
  const minute = strComplement(myDate.getMinutes());
  const second = strComplement(myDate.getSeconds());
  const timeStr = `${year}${separator}${month}${separator}${date} ${day} ${hour}:${minute}:${second}`;
  return timeStr;
}
// [Try] Change '-' to '/' to see what happens.
return [{ value: getTimeStr({separator: '-'}) }];

Note

This example retrieves the current time. The return value is in the format of Tue, 2023-02-07, 17:37:55.
To change the delimiter, use getTimeStr({separator: '/'}). The return value is in the format of 2023/02/07 Tue 17:37:55.
Modify the timeStr field to customize how the year, month, day, hour, minute, and second are combined. For example, change it to timeStr = '${year}${separator}${month}${separator}${date}'. The format of the return value is 2023-02-07.

Case 4: Configure hyperlink redirection

In the Canvas Editor pane, add the carousel list component.
Click the Data icon in the right-side configuration panel. The Data Settings tab appears.
Click Configure Data Source. The Configure Data Source tab appears.

Modify the static data to the following code:

[{ "area": "Zhejiang", "attribute": "100" }, { "area": "Jiangsu", "attribute": "200" }]

Select Data Filter and modify the fields based on the following code:

// Obtain the hyperlink label.
const getLinkTag = (baseURL = '', param = {}, style = {}) => {
    const joint = (obj, insideSeparator = '', betweenSeperator = '') => {
        const result = [];
        for (const key in obj) {
            result.push(`${key}${insideSeparator}${obj[key]}`);
        }
        return result.join(betweenSeperator);
    }
    const url = `${baseURL}?${joint(param, '=', '&')}`;
    const styleCss = joint(style, ':', ';');
    return [
        `<a href="${url}" target="_blank" style="${styleCss}" >`,
        '</a>'
    ]
}
return data.map(item => {
    // [Try] Change the https://www.aliyun.com to https://datav.aliyun.com to see the effect
    const baseURL = 'https://www.aliyun.com';
    // [Try] Change area: item.area to id: item.area to see the effect
    const param = {
        area: item.area,
    };
    // [Try] Change color: 'blue' to color: 'red' to see the effect
    const style = {
        color: 'blue',
        background: 'yellow'
    }
    // Set the hyperlink.
    return {
        ...item,
        attribute: getLinkTag(baseURL, param, style).join(item.attribute),
    }
});

Note

This example generates a hyperlink label. The baseURL parameter specifies the target URL, param specifies the query parameters appended to the hyperlink, and style specifies the CSS style of the hyperlink label.

Case 5: Round numbers and keep n decimal places

In the Canvas Editor pane, add the carousel list component.
Click the Data icon in the right-side configuration panel. The Data Settings tab appears.
Click Configure Data Source. The Configure Data Source tab appears.

Modify the static data to the following code:

[{ "y": 1 }, { "y": 1.2246 }, { "y": 1.2332 }]

Select Data Filter and modify the fields based on the following code:

 const toFixDecimal = (num, ...args) => {
     const digit = typeof args[0] === 'number' ? args[0] : 2;
     const options = typeof args[0] === 'object' ? args[0] : (args[1] || {});
     const { keepInt = true } = options;
     const value = Number.parseFloat(num);
     if (keepInt) {
         const base = Math.pow(10, digit);
         return Math.round(value * base) / base;
     } else {
         return value.toFixed(digit);
     }
 }
 // Loop list data type
 const result = data.map((item) => {
     // [Try] Open the following comments separately to see the effect
     const newValue = toFixDecimal(item.y); // [ { y: 1 }, { y: 1.22 }, { y: 1.23 } ]
     // const newValue = toFixDecimal(item.y, 1); // [ { y: 1 }, { y: 1.2 }, { y: 1.2 } ]
     // const newValue = toFixDecimal(item.y, {keepInt: false}); // [ { y: '1.00' }, { y: '1.22' }, { y: '1.23' } ]
     // const newValue = toFixDecimal(item.y, 1, {keepInt: false}); // [ { y: '1.0' }, { y: '1.2' }, { y: '1.2' } ]
     return {
         ...item,
         y: newValue
     }
 });
 return result;

Note

This example rounds a number to a specified number of decimal places. The first parameter is the data field to process. By default, two decimal places are kept. You can specify a different number. For example, newValue = toFixDecimal(item.y,3) keeps three decimal places, and the sample data returns: [{ y: 1 }, { y: 1.225 }, { y: 1.233 }].
To display a value such as '1.00', specify {keepInt: false}. For example, newValue = toFixDecimal(item.y, 3, {keepInt: false}) returns data in string format: [{ y: '1.000' }, { y: '1.225' }, { y: '1.233' }].

Case 6: Complex array deduplication

In the Canvas Editor pane, add the carousel list component.
Click the Data icon in the right-side configuration panel. The Data Settings tab appears.
Click Configure Data Source. The Configure Data Source tab appears.

Modify the static data to the following code:

[
    { "x": "Clothing", "y": 800 }, { "x": "Food", "y": 779 },
    { "x": "Building materials", "y": 180 }, { "x": "Food", "y": 779 },
    { "x": "Clothing", "y": 192 }
]

Select Data Filter and modify the fields based on the following code:
```
function uniq(arr, keyList) {
    const valueSet = {};
    return arr.reduce((result, item) => {
        const key = keyList.map((k) => item[k]).join('#@#');
        if (!valueSet[key]) {
            result.push(item);
            valueSet[key] = true;
        }
        return result;
    }, []);
}
// [Try] Open the following comments in turn to see the effect. x and y are object keys.
return uniq(data, ['y']);
// return uniq(data, ['x']);
// return uniq(data, ['x', 'y']);                    
```
Note
This example deduplicates an array by specified fields. When you deduplicate by the y field with uniq(data, ['y']), the returned data is [{ "x": "clothing", "y": 800 }, { "x": "food", "y": 779 }, { "x": "building materials", "y": 180 },{ "x": "clothing", "y": 192 }]. Only the first occurrence of each y value is kept. When you deduplicate by both x and y fields with uniq(data, ['x', 'y']), only entries with the same combination of x and y values are deduplicated, keeping the first occurrence.