Generar datos en recharts gráfico de barras utilizando la Lista de DTO

Hacer una función que asigna a través de BillingSummaryDTO[] y la convierte en el modelo de datos (como visible en la variable data) que se ha especificado para el consumo de la <BarChart/> es un enfoque válido.

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

const data : BarChartDataModel []

Estos datos serán utilizados en <BarChart/> como

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

Una función de este tipo va a seguir el map reduce enfoque con un poco de ayuda de un JS fecha de administración de la biblioteca como momentjs

4 solución paso

1. Organizar todas las facturas en orden cronológico (la más antigua ley primera) para facilitar reducir el mapa más tarde
2. Cubo de facturas por año en depósitos llamados 'yearwise-depósitos
3. Cubo de cuentas en cada yearwise-cubo en depósitos llamados 'monthwise-cubo'
4. Reducir todos los gastos en cada monthwise-cubo a un objeto de la siguiente BarChartDataModel la interfaz. Una colección de objetos de la siguiente BarChartDataModel la interfaz es la data pasamos a nuestro <BarChart/> componente
5. El consumo de este objeto de colección inn nuestro <BarChart/> componente

El código para el mismo sería :

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
}
 

Yo bucketed por año por primera vez y, a continuación, bucketed por mes en lugar de directamente o por mes, porque no queremos combinar los informes mensuales de decir "de Mayo de 1997" y "de Mayo de 1998" solo "Puede" para nuestra tabla. Queremos estar separados