Generování dat do recharts sloupcový graf pomocí Seznamu DTO

Vytváření funkce, která mapuje více než BillingSummaryDTO[] a převádí je do datového modelu (jak je vidět v proměnné data), které jste zadali pro spotřebu <BarChart/> je platný přístup.

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

const data : BarChartDataModel []

Tyto údaje budou použity v <BarChart/> jako

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

Takové funkce budou následovat map reduce přístup s malou pomocí od JS datum řízení knihovny jako momentjs

4 krok řešení

1. Uspořádat všechny účty chronologicky (nejstarší účet první) pro snadnější map-reduce později
2. Kbelík účty za rok do vědra s názvem 'yearwise-kbelíky
3. Kbelík účty v každé yearwise-vědra do vědra s názvem 'monthwise-kbelík'
4. Snížit všechny účty v každé monthwise-kbelík, aby objekt po BarChartDataModel rozhraní. Kolekce objektů po BarChartDataModel rozhraní je data jsme se projít do našeho <BarChart/> součástí
5. Konzumovat tento objekt kolekce inn naší <BarChart/> součástí

Váš kód pro stejné by to bylo :

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
}
 

Jsem bucketed tím, že první rok a pak bucketed měsíc místo přímo bucketing měsíc, protože nechceme, aby kombinovat měsíční zprávy říkají, "Může z roku 1997" a "Může 1998" do "Možná" pro náš graf. Chceme jim být samostatné