Get GraphQL Count Function to populate React Plotly Graph - Map function

Question

I need your help to populate a graph with data.

What i want to do is this:

const chartData = [{
    values: [25,54, 20],
    labels: ['mitre', 'some', 'ok'],
    type: 'pie'
  }]

pie

Currently my code is like this:

import React, { useState } from "react";
import { useQuery, gql } from "@apollo/client";
import Plot from 'react-plotly.js';

const testare = gql`
query GetIntell {
  webs(
    sort: "dateAdded:desc"
    pagination: { start: 0, limit: 90 },
    filters: {dateAdded: {eq: "2022-03-15"}, site   :{eq: "val"}}
  ) {
    data {
      id
      attributes {
 ...
      }
    }
  }
}
`

export default function Test() {

  const { loading, error, data }= useQuery(testare)
  if (loading) return <p>Loading data...</p>;
  if (error) return <p>`Error! ${error}`</p>;

 const chartData = [{
    values: [data.webs.data
      .map((threat) => {
        return {
          data: [threat.count]
        }
        
      })],
    labels: ['mitre'],
    type: 'pie'
  }]

  return (
    <div className="container">
      <Plot
        data= {chartData}
        layout={ {width: 1000, height: 540, title: "Plot"} }
        //layout={ layout}
        config={{responsive: true}}
      />
    </div>
  );
}

Instead of actual values, I am getting an array of objects.

I need to return the length of the array i.e 36 and not all 36 objects ==> see here 2 Please help. I don't know hoe to do a map inside a map.

If you could help, I would owe you a lot!

Answer 1

This was my answer:

 const chartData = [{
    values: [data.webs.data.length],
    labels: ['mitre'],
    type: 'pie'
  }]