0

Apex charts accepts data(series) in following format series: series: [{ name: 'Net Profit', data: [44, 55, 57, 56, 61, 58, 63, 60, 66] }, { name: 'Revenue', data: [76, 85, 101, 98, 87, 105, 91, 114, 94] },] https://apexcharts.com/react-chart-demos/area-charts/spline/ and my data looks like...

"clientsOverview": [
        {
            "date": "Mar 2022",
            "count": 1,
            "clientStatus": "inactive"
        },
        {
            "date": "Mar 2022",
            "count": 1,
            "clientStatus": "active"
        },
        {
            "date": "Apr 2022",
            "count": 2,
            "clientStatus": "active"
        },
        {
            "date": "May 2022",
            "count": 1,
            "clientStatus": "inactive"
        },
        {
            "date": "Jun 2022",
            "count": 1,
            "clientStatus": "inactive"
        },
        {
            "date": "Jun 2022",
            "count": 1,
            "clientStatus": "active"
        }
    ],

I wonder if there is any method to make my data look like this...

series: [{
              name: 'active',
              data: [1, 2, 0, 1]
            }, {
              name: 'inactiv',
              data: [1, 0, 1, 1]
            }, 
]

and the category should contain the date of the data
so in this case it should look like this

xaxis: {
         categories: [ 'Mar', 'Apr', 'May', 'Jun']
              },

what i am trying to do with this is an area chart that looks like this enter image description here

I've tried the following

const result = Object.values(clientsOverview.reduce((acc, curr) => {
  acc[curr.clientStatus] = acc[curr.clientStatus] || { title: curr.clientStatus, data: [] };
  acc[curr.clientStatus].data.push({ count: curr.count, date: curr.date });
  return acc;
}, {}));


const clientsOverview = [
  {
    "date": "Mar 2022",
    "count": 1,
    "clientStatus": "inactive"
  },
  {
    "date": "Mar 2022",
    "count": 1,
    "clientStatus": "active"
  },
  {
    "date": "Apr 2022",
    "count": 2,
    "clientStatus": "active"
  },
  {
    "date": "May 2022",
    "count": 1,
    "clientStatus": "inactive"
  },
  {
    "date": "Jun 2022",
    "count": 1,
    "clientStatus": "inactive"
  },
  {
    "date": "Jun 2022",
    "count": 1,
    "clientStatus": "active"
  }
];

const result = Object.values(clientsOverview.reduce((acc, curr) => {
  acc[curr.clientStatus] = acc[curr.clientStatus] || { title: curr.clientStatus, data: [] };
  acc[curr.clientStatus].data.push({ count: curr.count, date: curr.date });
  return acc;
}, {}))

console.log(result)
UPDATE what I have achieved so far ... my data now has this format enter image description here 

const result = Object.values(clientsOverview.reduce((acc, curr) => { 
            acc[curr.clientStatus] = acc[curr.clientStatus] || { title: curr.clientStatus, data: [] };
            acc[curr.clientStatus].data.push(curr.count);
            return acc;
        }, {}))

but I now have the problem with the category because it only reads the first three values (the array length form series) enter image description here

saeed Alh
  • 1
  • 1
  • What have you tried so far? – Ele Jun 24 '22 at 21:31
  • Does this answer your question? [How to group items in an array by property using reduce and return an array of new objects](https://stackoverflow.com/questions/68015747/how-to-group-items-in-an-array-by-property-using-reduce-and-return-an-array-of-n) – pilchard Jun 24 '22 at 21:32
  • also: [How can I group an array of objects by key?](https://stackoverflow.com/questions/40774697/how-can-i-group-an-array-of-objects-by-key) – pilchard Jun 24 '22 at 21:33
  • Just `push(curr.count)` instead of `push({ count: curr.count, date: curr.date })` – pilchard Jun 24 '22 at 22:07

0 Answers0