How to construct an array with 2 subtotals to insert the data into a graph in Reactjs

Question

How to mount an array that sums the values in 2 subtotals?

I used the .filter, .map and .reduce to add the values but does not work with more than one category in the same array.

var data = [
  { name: 'test1', day: '05/18', company:'1', total_price: 3 },
  { name: 'test4', day: '05/18', company:'1', total_price: 7 },
  { name: 'test2', day: '05/18', company:'2', total_price: 13.6 },
  { name: 'test3', day: '06/18', company:'1', total_price: 8 },
  { name: 'test3', day: '06/18', company:'2', total_price: 15 },
  { name: 'test4', day: '07/18', company:'2', total_price: 8 },
];

const sum = (a, b) => a+b;
const uniqueCategories = (array) => [...new Set(array.map(item => item.day))];
const chartData = uniqueCategories(data).map(day => [
  day,
  data
    .filter(item => item.day===day)
    .map(item => item.total_price)
    .reduce(sum)
]);
chartData.splice(0, 0, ["Day","$"])
console.log(chartData)

Return:

chartData= [
  ["Day", "$"],
  ["05/18", 23.6],
  ["06/18", 23],
  ["07/08", 8]
]

It was expected:

chartData= [
  ["Day", "1", "2"],
  ["05/18", 10, 13.6],
  ["06/18", 8, 15],
  ["07/08", 0, 8]
]

Answer 1

A long way to solve this problem is as follows:

1. create a array with the day without repetition
2. create a array with the company without repetition
3. with these two information make the interaction of days and within this interaction the companies aligned, because this may vary by what is in your question.
4. ready the expected result

Minimal example:

var data = [
  { name: 'test1', day: '05/18', company:'1', total_price: 3 },
  { name: 'test4', day: '05/18', company:'1', total_price: 7 },
  { name: 'test2', day: '05/18', company:'2', total_price: 13.6 },
  { name: 'test3', day: '06/18', company:'1', total_price: 8 },
  { name: 'test3', day: '06/18', company:'2', total_price: 15 },
  { name: 'test4', day: '07/18', company:'2', total_price: 8 },
];

//funções auxiliares
const groupBy = (array, callBack) => new Set(array.map(callBack));
const sumBy = (array, callBackFilter, callBackReduce) =>
  array
  .filter(callBackFilter)
  .reduce(callBackReduce, 0);
  
const createChart = (days, companys, data) => {  
  const chartData = [];
  chartData.push(['Day', ... companys]);
  for (let item of days) {
    const chartItem = [];
    chartItem.push(item);
    for (let com of companys) {
      chartItem.push(
        sumBy(
             data,  
             a => a.day === item && a.company === com, 
             (a, b) => a + b.total_price)
        );
    }
    chartData.push(chartItem);
  }
  return chartData;
}
//utilizando as funções
const days = groupBy(data, item => item.day);
const companys = groupBy(data, item => item.company);
const chartData = createChart(days, companys, data);

///*Exibição em um tabela*///
const table = document.getElementById('table');
for (let items of chartData) {
  var row = table.insertRow(table.rows.length);
  var c0 = row.insertCell(0);
  var c1 = row.insertCell(1);
  var c2 = row.insertCell(2);
  c0.innerHTML = items[0];
  c1.innerHTML = items[1];
  c2.innerHTML = items[2];
}

<table border="1" id="table" width="50%">
  
<table>