Gerar dados para recharts gráfico de barras usando a Lista de DTO

Fazer uma função que mapeia mais de BillingSummaryDTO[] e converte-o para o modelo de dados (como é visível na variável data) que você especificou para o consumo do <BarChart/> é uma abordagem válida.

export interface BarChartDataModel {
  name: string,
  Chargebacks: number,
  Transactions: number,
  USD: number,
}

const data : BarChartDataModel []

Estes dados serão utilizados em <BarChart/> como

<BarChart
            data={data}
            // ....
          >
         // ...
 </BarChart>

Tal função vai seguir o map reduce abordagem com uma pequena ajuda de um JS data de gerenciamento de biblioteca como momentjs

4 passo de solução de

1. Organizar todas as contas em ordem cronológica (do mais antigo projeto de lei de primeira) para facilitar o mapa-reduzir mais tarde
2. Balde de contas por ano em baldes chamado 'yearwise-baldes'
3. Balde de contas em cada yearwise-balde em baldes chamado 'monthwise-balde"
4. Reduzir todas as contas em cada monthwise-balde para um objeto o seguinte BarChartDataModel interface. Uma coleção de objetos a seguir o BarChartDataModel a interface é o data vamos passar para o nosso <BarChart/> componente
5. Consumir este objeto de coleção inn <BarChart/> componente

O seu código para que o mesmo seria :

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

export interface BarChartDataModel {
  name: string,
  Chargebacks: number,
  Transactions: number,
  USD: number,
}

export async function getBillingSummary(): Promise<AxiosResponse<BillingSummaryDTO[]>> {
  const response = await axios.get<BillingSummaryDTO[]>(
      `${baseUrl}/management/billing/summary`
  );
  // STEP 1 : Chronological ordering. Oldest bills will show first
  const chronologicallyOrdered = response.sort((a:BillingSummaryDTO,b:BillingSummaryDTO)=> a.createdAt - b.createdAt )

  // STEP 2 : Bucket by year
  const groupByYear = chronologicallyOrdered.reduce((yearwiseBills : any, bill:BillingSummaryDTO, currIdx:number)) => 
     {
        const year = moment(bill.createdAt).year().toString()
        if(!yearwiseBills[year]){ 
          yearwiseBills[year] = []
        } 
        yearwiseBills[year].push(bill)
        return yearwiseBills
     }
  ,{})

  // STEP 3 : In each yearwise bucket -> bucket by month
  const groupByMonth = Object.keys(groupByYear).map((year, yearwiseBills) => yearwiseBills.reduce((monthwiseBills: any, bill:BillingSummaryDTO, currIdx:number)) => 
     {
        const moment = moment(bill.createdAt).month().toString()
        if(!yearAcc[month]){ 
          monthwiseBills[month] = []
        } 
        monthwiseBills[month].push(bill)
        return monthwiseBills
     }
  ,{}) );

 // STEP 4 : Reduce all bills in a monthwise bucket into a monthlyReport object and store all monthlyReport objects in an monthlyReportArray
 const monthlyReportArray:BarChartDataModel[] = Object.keys(groupByMonth).map((year, yearwiseBills) => 
   Object.keys(bills).map((month, monthwiseBills) => monthwiseBills.reduce((monthlyReport:BarChartDataModel,bill:BillingSummaryDTO) => {
    if(bill.cancelled){
      monthlyReport.Chargebacks++
    }else{
      monthlyReport.Transactions++,
      monthlyReport.USD += bill.paid
    }
    return monthlyReport
  },{
    name : moment(month, 'M').format('MMM')
    Transactions : 0,
    USD : 0,
    Chargebacks:0
   } )
 )


 // STEP 5 : Consume this as the "data" for the "<BarChart/>" component
 return monthlyReportArray
}
 

Eu bucketed por ano, primeiro e, em seguida, bucketed por mês, em vez de diretamente bucketing por mês, porque não queremos combinar os relatórios mensais de dizer "Maio de 1997" e "de Maio de 1998, que" só "Pode" para o nosso gráfico. Nós queremos ser separado