I have data array
and a reduce like this:
const productMapData = [{
"occurredAt": "2021-09-20T00:00:00.000",
"soldTickets": 3836,
"soldRevenue": 70762,
"playedOffTickets": 2068,
"playedOffRevenue": 41429.5,
"changeInPeriodTickets": 1768,
"changeInPeriodRevenue": 29332.5,
"eopAdvanceTickets": 1768,
"eopAdvanceRevenue": 29332.5,
"advanceTickets": 1500,
"advanceRevenue": 11521
},
{
"occurredAt": "2021-09-27T00:00:00.000",
"soldTickets": 4708,
"soldRevenue": 88647.5,
"playedOffTickets": 2127,
"playedOffRevenue": 49526.5,
"changeInPeriodTickets": 2581,
"changeInPeriodRevenue": 39121,
"eopAdvanceTickets": 2581,
"eopAdvanceRevenue": 39121,
"advanceTickets": 700,
"advanceRevenue": 9521
},
{
"occurredAt": "2021-10-04T00:00:00.000",
"soldTickets": 5514,
"soldRevenue": 93969.5,
"playedOffTickets": 988,
"playedOffRevenue": 9983,
"changeInPeriodTickets": 4526,
"changeInPeriodRevenue": 83986.5,
"eopAdvanceTickets": 4526,
"eopAdvanceRevenue": 83986.5,
"advanceTickets": 1730,
"advanceRevenue": 14650
},
{
"occurredAt": "2021-10-11T00:00:00.000",
"soldTickets": 7598,
"soldRevenue": 109059.5,
"playedOffTickets": 1476,
"playedOffRevenue": 16474.5,
"changeInPeriodTickets": 6122,
"changeInPeriodRevenue": 92585,
"eopAdvanceTickets": 6122,
"eopAdvanceRevenue": 92585,
"advanceTickets": 800,
"advanceRevenue": 7560
},
];
const mapWaterfallChartData = () => productMapData.reduce((previous, point) => {
const names = ['sopAdvance', 'playedOff', 'sales', 'eopAdvance'];
const name = names.map(name => name);
previous[name] = previous[name] || {
data: [],
total: 0
};
const sopAdvance = point.advanceTickets;
const playedOff = point.playedOffTickets;
const sales = point.soldTickets;
const eopAdvance = point.eopAdvanceTickets;
return previous;
}, {});
console.log(mapWaterfallChartData(productMapData))what I’m trying to achieve is to create new objects with name and y values where the name would be the value from the names array and y would be the value that belongs to that name. Something like this:
[
{
name: 'sopAdvance',
y: 4730
},
{
name: 'playedOff',
y: 6659
},
{
name: 'sales',
y: 21656
},
{
name: 'eopAdvance',
y: 14997
}
]
I’m kind of stuck and confused about how to do this, so any help will be appreciated.
>Solution :
Here is something that might be what I expect you want
A reduce is just fine. We give the list of stuff to accumulate and you will get each value in the array and a sum
Note we can add more keys to the bucket
const productMapData = [{ "occurredAt": "2021-09-20T00:00:00.000", "soldTickets": 3836, "soldRevenue": 70762, "playedOffTickets": 2068, "playedOffRevenue": 41429.5, "changeInPeriodTickets": 1768, "changeInPeriodRevenue": 29332.5, "eopAdvanceTickets": 1768, "eopAdvanceRevenue": 29332.5, "advanceTickets": 1500, "advanceRevenue": 11521 }, { "occurredAt": "2021-09-27T00:00:00.000", "soldTickets": 4708, "soldRevenue": 88647.5, "playedOffTickets": 2127, "playedOffRevenue": 49526.5, "changeInPeriodTickets": 2581, "changeInPeriodRevenue": 39121, "eopAdvanceTickets": 2581, "eopAdvanceRevenue": 39121, "advanceTickets": 700, "advanceRevenue": 9521 }, { "occurredAt": "2021-10-04T00:00:00.000", "soldTickets": 5514, "soldRevenue": 93969.5, "playedOffTickets": 988, "playedOffRevenue": 9983, "changeInPeriodTickets": 4526, "changeInPeriodRevenue": 83986.5, "eopAdvanceTickets": 4526, "eopAdvanceRevenue": 83986.5, "advanceTickets": 1730, "advanceRevenue": 14650 }, { "occurredAt": "2021-10-11T00:00:00.000", "soldTickets": 7598, "soldRevenue": 109059.5, "playedOffTickets": 1476, "playedOffRevenue": 16474.5, "changeInPeriodTickets": 6122, "changeInPeriodRevenue": 92585, "eopAdvanceTickets": 6122, "eopAdvanceRevenue": 92585, "advanceTickets": 800, "advanceRevenue": 7560 }, ];
// you can have more keys going to the same bucket
const buckets = { "advanceTickets": "sopAdvance", "playedOffTickets": "playedOff", "soldTickets" : "sales", "eopAdvanceTickets": "eopAdvance" };
const names = Object.keys(buckets);
const mapWaterfallChartData = productMapData.reduce((accumulator, point) => {
names.forEach(name => {
const bucket = buckets[name]
accumulator[bucket] = accumulator[bucket] || {
data: [],
total: 0
};
accumulator[bucket].data.push(point[name])
accumulator[bucket].total += point[name]
})
return accumulator
}, {});
console.log(mapWaterfallChartData)Without a list we can do this:
const productMapData = [{ "occurredAt": "2021-09-20T00:00:00.000", "soldTickets": 3836, "soldRevenue": 70762, "playedOffTickets": 2068, "playedOffRevenue": 41429.5, "changeInPeriodTickets": 1768, "changeInPeriodRevenue": 29332.5, "eopAdvanceTickets": 1768, "eopAdvanceRevenue": 29332.5, "advanceTickets": 1500, "advanceRevenue": 11521 }, { "occurredAt": "2021-09-27T00:00:00.000", "soldTickets": 4708, "soldRevenue": 88647.5, "playedOffTickets": 2127, "playedOffRevenue": 49526.5, "changeInPeriodTickets": 2581, "changeInPeriodRevenue": 39121, "eopAdvanceTickets": 2581, "eopAdvanceRevenue": 39121, "advanceTickets": 700, "advanceRevenue": 9521 }, { "occurredAt": "2021-10-04T00:00:00.000", "soldTickets": 5514, "soldRevenue": 93969.5, "playedOffTickets": 988, "playedOffRevenue": 9983, "changeInPeriodTickets": 4526, "changeInPeriodRevenue": 83986.5, "eopAdvanceTickets": 4526, "eopAdvanceRevenue": 83986.5, "advanceTickets": 1730, "advanceRevenue": 14650 }, { "occurredAt": "2021-10-11T00:00:00.000", "soldTickets": 7598, "soldRevenue": 109059.5, "playedOffTickets": 1476, "playedOffRevenue": 16474.5, "changeInPeriodTickets": 6122, "changeInPeriodRevenue": 92585, "eopAdvanceTickets": 6122, "eopAdvanceRevenue": 92585, "advanceTickets": 800, "advanceRevenue": 7560 }, ];
const mapWaterfallChartData = productMapData.reduce((accumulator, point) => {
Object.keys(point).forEach(name => {
accumulator[name] = accumulator[name] || {
data: [],
total: 0
};
accumulator[name].data.push(point[name])
if (isNaN(point[name])) {
delete accumulator[name].total; // no need to total the dates
}
else {
accumulator[name].total += point[name]
}
})
return accumulator
}, {});
console.log(mapWaterfallChartData)