JSFiddle - React, Tailwind, and code Playground

by Lukasz Skwara

JavaScript

let list = [{
  'teamId': '3008c596-8cf1-4b68-a5f9-e089b973788d',
  'teamName': 'Team-1',
  'states': {
    'ok': 4,
    'compromised': 5,
    'unavailable': 1
  }
}, {
  'teamId': '7a020298-81a9-4b12-8100-b7c851b4ffa2',
  'teamName': 'Team-2',
  'states': {
    'ok': 4,
    'compromised': 12,
    'unavailable': 9
  }
}];

let a = list.map((t) => {
  return {
    stateOk: t.states.ok,
    stateCompromised: t.states.compromised,
    stateUnavailable: t.states.unavailable,
    teamName: t.teamName
  };
});
// console.log(a);
// let b = a.reduce((rv, x) => {
//   (rv[x['ok']] = rv[x['ok']] || []).push(x);
//      return rv;
// });
// console.log(b);

b = a.reduce((rv, x) => {
  return {ok: rv.ok.concat({value: x.stateOk, team: x.teamName}), 
  compromised: rv.compromised.concat({value: x.stateCompromised, team: x.teamName}), 
  unavailable: rv.unavailable.concat({value: x.stateUnavailable, team: x.teamName})};
}, {ok: [], compromised: [], unavailable: []});
console.log(b);