DTO Listesini kullanarak recharts çubuk grafiğine veri oluşturma

BillingSummaryDTO[] üzerinden eşlenen ve onu veri modeline dönüştüren bir işlev oluşturma (değişkende görüldüğü gibi data) tarafından tüketilmek üzere belirttiğiniz <BarChart/> geçerli bir yaklaşım.

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

const data : BarChartDataModel []

Bu veriler kullanılacağı <BarChart/> olarak

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

Böyle bir işlev aşağıdakileri takip edecektir map reduce momentjs gibi bir JS tarih yönetimi kütüphanesinden küçük bir yardımla yaklaşın

4 adımlı çözüm

1. Daha kolay harita için tüm faturaları kronolojik olarak düzenleyin (önce en eski fatura)-daha sonra azaltın
2. Yıllara göre kova faturaları 'yearwise-buckets' adı verilen kovalara
3. Her yıl kova faturaları - 'monthwise-bucket'adı verilen kovalara kova
4. Her bir aylık kovadaki tüm faturaları aşağıdaki nesneye indirgeyin BarChartDataModel arayüz. Aşağıdaki nesnelerden oluşan bir koleksiyon BarChartDataModel arayüz aşağıdaki gibidir data bizim için geçeriz <BarChart/> bileşen
5. Bu nesne koleksiyonunu tüketin <BarChart/> bileşen

Aynı şey için kodunuz şöyle olurdu :

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
}
 

"1997 Mayıs" ve "1998 Mayıs" sayılarının aylık raporlarını grafiğimiz için yalnızca "Mayıs" olarak birleştirmek istemediğimizden, önce yıla, sonra da doğrudan aya göre kova yerine aya göre kova yaptım. Onların ayrı olmasını isteriz.