Générer des données dans recharts graphique à barres en utilisant la Liste des DTO

Faire une fonction qui parcourt BillingSummaryDTO[] et les convertit dans le modèle de données (comme visible dans la variable data) que vous avez spécifié pour la consommation par l' <BarChart/> est une approche valable.

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

const data : BarChartDataModel []

Ces données seront utilisées dans <BarChart/> comme

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

Une telle fonction sera de suivre les map reduce approche avec un peu d'aide d'un JS date de la gestion de la bibliothèque comme momentjs

4 l'étape de la solution

1. Organiser toutes les factures par ordre chronologique (les plus anciennes projet de loi) pour faciliter l'réduire la carte plus tard
2. Seau de factures par an dans des seaux, appelé " yearwise-compartiments
3. Seau factures dans chaque yearwise-seau dans des seaux, appelé "monthwise-seau"
4. Réduire tous les projets de loi dans chaque monthwise-seau à un objet à la suite de la BarChartDataModel de l'interface. Une collection d'objets à la suite de la BarChartDataModel l'interface est la data nous passons à notre <BarChart/> composant
5. Consommer cet objet de collection inn nos <BarChart/> composant

Votre code pour la même serait :

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
}
 

J'ai placées dans un compartiment de l'année en premier et ensuite placées dans un compartiment par mois au lieu de directement écopage par mois car nous ne voulons pas de combiner les rapports mensuels de dire "Mai 1997" et "Mai 1998" en "Peut" dans notre tableau. Nous voulons qu'ils soient séparés