Transform Chart Data Action (Deprecated)

The action module for this action is vb/action/builtin/transformChartDataAction. The transformChartDataAction is deprecated. Data should be set directly on the chart instead.

Transforms a JSON array with a particular structure into a JSON object containing (array) properties that JET chart component expects.

Page Authors can use this action to take the response from a REST action, turn into a format that this action expects, and use the result returned by this action to assign to a variable bound to the chart component. 

The action supports the following parameter.

Parameter Name	Type	Description	Example
source	Array<Object>	An array of objects, or data points, where each data point has one of the two structures below. The first is used with charts that show groups of data for one or more series, such as bar and pie. The second is used with charts that show three dimensions of data, such as bubble. // Structure 1 { group: '<group-name>', series: '<series-name>', value: '<value-number>' } // Structure 2 { group: '<group-name>', series: '<series-name>', valueX: '<valueX-number>', valueY: '<valueY-number>', valueZ: '<valueZ-number>' }	// JSON for Structure 1 [{ group: 'bob', series: 'Feb', value: 5 }, { group: 'joe', series: 'Feb', value: 2 }] // JSON for Structure 2 [{ group: 'bob', series: 'Feb', valueX: 5, valueY: 1, valueZ: 3 }, { group: 'joe', series: 'Feb', valueX: 6, valueY: 2, valueZ: 4 }]

The action returns a JSON object with the following properties.

Return Type	Description	Example
Object	The Object has two properties. The properties differ based on the structure that's passed in. groups: {Array} of one or more group names series: {Array} of objects where each object has 2 properties: name and items name: {String} name of the series items: {Array} of numbers when the input resembles the Structure 1 above; or {Array} of objects, when the input resembles the second structure above, with each object containing the following properties: x: {Number} y: {Number} z: {Number}	// Return Value for Structure 1 { groups: ['bob', 'joe'], series: [{ name: 'Feb', items: [5, 2] }] } // Return Value for Structure 2 { groups: ['bob', 'joe'], series: [{ name: 'Feb', items: [{ x: 5, y: 1, z: 3 }, { x: 6, y: 2, z: 4 }] }] }

The example below shows a chain called "fetchTechnicianStatsChain" with four actions chained together to take a REST response and turn the JSON response into a form that can be used by a Chart UI component. The four actions are:

1. Use a Call REST endpoint action to fetch technician stats.

2. Use an Assign Variables action to map the response from (1) to a form that the Transform Chart Data action expects. If the REST response is so deeply nested that a simple transformation of source to target using an Assign Variables action is not possible, page authors can use a page function (using a Call Function action) to transform the data into a form that the Transform Chart Data action expects.

3. Use a Transform Chart Data action to take the response from (2) and turn it into a form that a Chart component can consume.

4. Use an Assign Variables action to store the return value from (3) in a page variable.

"actions": {
    "fetchTechnicianStatsChain": {
        "variables": {
            "flattenedArray": {
                "type": [
                    {
                        "group": "string",
                        "series": "string",
                        "value": "string"
                    }
                ],
                "description": "array of data points",
                "input": "none"
            }
        },
        "root": "fetchTechnicianStats",
        "actions": {
            "fetchTechnicianStats": {                                       // (1)
                "module": "vb/action/builtin/restAction",
                "parameters": {
                    "endpoint": "ifixitfast-service/getTechnicianStats",
                    "uriParams": {
                        "technician": "{{ $page.variables.technician }}"
                    }
                },
                "outcomes": {
                    "success": "flattenDataForBar"
                }
            },
            "flattenDataForBar": {                                          // (2)
                "module": "vb/action/builtin/assignVariablesAction",
                "parameters": {
                    "$chain.variables.flattenedArray": {
                        "source": "{{ $chain.results.fetchTechnicianStats.body.metrics }}",
                        "reset": "toDefault",
                        "mapping": {
                            "$target.group": "$source.technician",
                            "$target.series": "$source.month",
                            "$target.value": "$source.incidentCount"
                        }
                    }
                },
                "outcomes": {
                    "success": "transformToBarChartData"
                }
            },
            "transformToBarChartData": {                                    // (3)
                "module": "vb/action/builtin/transformChartDataAction",
                "parameters": {
                    "source": "{{ $chain.variables.flattenedArray }}"
                },
                "outcomes": {
                    "success": "assignToPageVariable"
                }
            },
            "assignToPageVariable": {                                      // (4)
                "module": "vb/action/builtin/assignVariablesAction",
                "parameters": {
                    "$page.variables.incidentChartDS": {
                        "source": "{{ $chain.results.transformToBarChartData }}",
                        "reset": "toDefault"
                    }
                }
            }
        }
    }
}