In my Angular 16 application, I utilized ApexCharts.
The issue I am facing is that my response is not being appended to the chart. Can someone assist me in adjusting the API response?
Response from API:
let data = [
{
tenantName: 'OBC+',
labelName: 'Application',
total: 85,
postiveTotal: '21',
negativeTotal: '64',
},
{
tenantName: 'Discovery-world',
labelName: 'Application',
total: 194,
postiveTotal: '119',
negativeTotal: '75',
},
{
tenantName: 'OBC+',
labelName: 'Channels',
total: 40,
postiveTotal: '0',
negativeTotal: '40',
},
{
tenantName: 'Discovery-world',
labelName: 'Channels',
total: 59,
postiveTotal: '0',
negativeTotal: '59',
},
];
I need to adjust my response to match this format.
Expected Format:
this.stackedChartData = [
{
name: 'OBC Postivie',
group: 'OBC',
data: [21, 0],
},
{
name: 'OBC Negative',
group: 'OBC',
data: [64, 40],
},
{
name: 'Discovery-world Postivie',
group: 'Discovery-world',
data: [119, 0],
},
{
name: 'Discovery-world Negative',
group: 'Discovery-world',
data: [75, 59],
},
];
Although I attempted the following code, it is not functioning correctly.
let labels = [...new Set(data.map((x: any) => x.labelName))];
let subLabels = data.reduce((acc, cur: any) => {
if (
acc.findIndex(
(x) =>
//console.log(x)
x.tenantName == cur.tenantName && x.labelName == cur.labelName
) == -1
)
acc.push({
tenantName: cur.tenantName,
labelName: cur.labelName,
postiveTotal: cur.postiveTotal,
negativeTotal: cur.negativeTotal,
});
return acc;
}, [] as { tenantName: string; labelName: string; postiveTotal: number; negativeTotal: number }[]);
console.log(subLabels);
I plan to implement postiveTotal and negativeTotal with groups of labelName.
Here is a link to my chart demo for reference: link.