Currently Working Explanation:
This is similar to the data array received from the API response
responseBarDataStacked = [
{ sku: "Data 1", month: "Jun", value: 20 },
{ sku: "Data 2", month: "Jun", value: 25 },
{ sku: "Data 3", month: "Jun", value: 35 },
{ sku: "Data 4", month: "Jun", value: 10 },
{ sku: "Data 5", month: "Jun", value: 10 },
{ sku: "Data 1", month: "Jul", value: 20 },
{ sku: "Data 2", month: "Jul", value: 30 },
{ sku: "Data 3", month: "Jul", value: 15 },
{ sku: "Data 4", month: "Jul", value: 20 },
{ sku: "Data 5", month: "Jul", value: null },
{ sku: "Data 1", month: "Aug", value: 20 },
{ sku: "Data 2", month: "Aug", value: 30 },
{ sku: "Data 3", month: "Aug", value: 15 },
{ sku: "Data 4", month: "Aug", value: 20 },
{ sku: "Data 5", month: "Aug", value: 15 },
];
Please Note: This depiction of data does not guarantee consistency in the number of SKU sets or months. However, it assures that neither SKU nor month will be null.
I am endeavoring to utilize this response data with Charts (ng2-chart) for the creation of Stacked Bar Graphs. In order for this data to function effectively on the Stacked Bar Chart, I needed to format it logically to obtain the final data as follows,
{
data: [20, 25, 35, 10, 10], label: 'Jun', stack: 'sameStack',
data: [20, 30, 15, 20, null], label: 'Jul', stack: 'sameStack',
data: [20, 30, 15, 20, 15], label: 'Aug', stack: 'sameStack',
}
The arrangement of the data array is structured in the following sequence
data: [valueof[Data 1] for month Jun, valueof[Data 2] for month Jun, valueof[Data 3] for month Jun, valueof[Data 3] for month Jun, valueof[Data 5] for month Jun]
and so forth for others.
Why this specific order??
Because uniqueSku is set in FCFS method below formatStackedBarData()
i.e.
["Data 1", "Data 2", "Data 3", "Data 4", "Data 5"]
This is the methodology adopted to align the data accordingly.
formatStackedBarData(dataToFormat: Array<any>) {
let uniqueMonth = [...new Set(dataToFormat.map(item => item.month))];
let uniqueSku = [...new Set(dataToFormat.map(item => item.sku))];
let stackedBarChartData = [];
uniqueMonth.forEach(month => {
let uniqueMonthData = dataToFormat
.filter(barStackData => barStackData.month == month)
.map(uniqueStackData => uniqueStackData.value);
stackedBarChartData.push({
data: uniqueMonthData,
label: month,
stack: 'sameStack'
});
});
return {
stackedBarChartData,
uniqueSku
};
}
Query:
If the response gets disorganized or if the order of sku changes, I encounter difficulties obtaining appropriate data on the stackedBarChartData.
Now, the response data has been altered as shown below
responseBarDataStacked = [
{ sku: 'Data 1', month: 'Jun', value: 20 },
{ sku: 'Data 2', month: 'Jun', value: 25 },
{ sku: 'Data 3', month: 'Jun', value: 35 },
{ sku: 'Data 5', month: 'Jun', value: 10 },
{ sku: 'Data 1', month: 'Jul', value: 20 },
{ sku: 'Data 2', month: 'Jul', value: 30 },
{ sku: 'Data 1', month: 'Aug', value: 20 },
{ sku: 'Data 2', month: 'Aug', value: 30 },
{ sku: 'Data 3', month: 'Aug', value: 15 },
{ sku: 'Data 4', month: 'Aug', value: 20 },
{ sku: 'Data 5', month: 'Aug', value: 15 }
];
As observed
- Data 4 is missing for the month of Jun
- Data 3, Data 4, and Data 5 are absent for the month of Jul
In such scenarios, the anticipated value for stackedBarChartData would resemble the following
[
{data:[20, 25, 35, 10, null], label: 'Jun', stack: 'sameStack'},
{data:[20, 30, null, null, null], label: 'Jun', stack: 'sameStack'},
{data:[20, 30, 15, 15, 20], label: 'Jun', stack: 'sameStack'},
]
Note: In the first object's data, the last value is null due to the order determined by uniqueSku, where Data 5 precedes Data 4 in our API Response.
["Data 1", "Data 2", "Data 3", "Data 5", "Data 4"]
To facilitate understanding, a test implementation has been showcased here. stackblitz implementation