I have this chart created using Recharts. I would like to fill the chart with data from backend API call. I tried this:

export default function Billing() {
  const [chartData, setChartData] = useState([]);
  const [ isLoading, setIsLoading ] = useState(true);

  useEffect(() => {
    getBillingSummary().then(r =>
      Reflect.ownKeys(data).forEach((data) => {
        chartData.push(
          [r.data];
          setIsLoading(false);
        );
      });
  }, []);

  return (
    <>
      <Grid container justifyContent="center" alignItems="center">
        <Grid item xs={11}>
          {/*Padding on the top*/}
          <Box m="5rem" />
        </Grid>

        <Grid item xs={12} >
          <h4 className="chart-label">Invoices Summary</h4>
          <BarChart
              width={500}
              height={300}
              data={chartData}

              margin={{
                top: 20,
                right: 30,
                left: 20,
                bottom: 5,
              }}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="pv" stackId="a" fill="#8884d8" />
            <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
            <Bar dataKey="amt" stackId="a" fill="#E791CB" />
            <Bar dataKey="adt" stackId="a" fill="#71D3F8" />
          </BarChart>
        </Grid>
      </Grid>
    </>
  );
}

With API call I want to generate stubbed bar chart:

export async function getBillingSummary(): Promise<AxiosResponse<BillingSummaryDTO[]>> {
  return await axios.get<BillingSummaryDTO[]>(
      `${baseUrl}/management/billing/summary`
  );
}

export interface BillingSummaryDTO {
    paid?: number,
    outstanding?: number,
    pastDue?: number,
    cancelled?: number,
    createdAt?: Moment | null,
}

API call response:

[
    {
        "paid": 11,
        "outstanding": 32,
        "pastDue": 12,
        "cancelled": 6,
        "createdAt": "2022-02-01T00:00:00"
    },
    {
        "paid": 5,
        "outstanding": 5,
        "pastDue": 2,
        "cancelled": 5,
        "createdAt": "2022-01-02T00:00:00"
    },
    {
        "paid": 5,
        "outstanding": 4,
        "pastDue": 2,
        "cancelled": 4,
        "createdAt": "2021-12-12T00:00:00"
    },
    {
        "paid": 4,
        "outstanding": 3,
        "pastDue": 4,
        "cancelled": 2,
        "createdAt": "2021-11-11T00:00:00"
    },
    {
        "paid": 3,
        "outstanding": 2,
        "pastDue": 4,
        "cancelled": 3,
        "createdAt": "2021-03-03T00:00:00"
    }
]

I this code I get multiple errors:

Reflect.ownKeys(data).forEach((data) => {
        chartData.push(
          [r.data];
          setIsLoading(false);
        );
      });

TS2322: Type 'BillingSummaryDTO[]' is not assignable to type 'never'.

Do you know ho I can set properly the data?

CodePudding user response：

const [chartData, setChartData] = useState([]); Should be const [chartData, setChartData] = useState(BillingSummaryDTO[])

Typescript assign [] as a never[] type. So there is a error, when you want to insert BillingSummaryDTO data inside a never array.