Genera date în recharts diagramă cu bare utilizând Lista de DTO

Făcând o funcție care mapează peste BillingSummaryDTO[] și o transformă în modelul de date (la fel de vizibil în variabila data) pe care le-ați specificat pentru consumul de <BarChart/> este o abordare valabilă.

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

const data : BarChartDataModel []

Aceste date vor fi folosite în <BarChart/> ca

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

O astfel de funcție va urma map reduce abordare cu un pic de ajutor de la un JS data management de bibliotecă, ca momentjs

4 pas soluție

1. Aranja toate facturile în ordine cronologică (cel mai vechi proiect de lege în primul rând) pentru a fi mai ușor map-reduce mai târziu
2. Găleată facturile de an în găleți numit 'yearwise-găleți'
3. Găleată facturile în fiecare yearwise-găleată în găleți numit 'monthwise-găleată
4. Reduce toate facturile în fiecare monthwise-găleată pentru un obiect în urma BarChartDataModel interfață. O colecție de obiecte urma BarChartDataModel interfata este data vom trece nostru <BarChart/> componenta
5. Consuma acest obiect de colectare inn nostru <BarChart/> componenta

Codul pentru aceeași ar fi :

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
}
 

Am bucketed de anul întâi și apoi bucketed de lună, în loc de direct bucketing de lună pentru că nu vrem să combine rapoarte lunare de spus "Mai 1997" și "Mai 1998" doar "Poate" pentru graficul nostru. Ne-am dori să fie separate