Wygeneruj dane do wykresu słupkowego ładowania, za pomocą listy DTO

Tworzenie funkcji, która koreluje BillingSummaryDTO[] i przekształca ją w modelu danych (jak widać w zmiennej data) , które podałeś do spożycia <BarChart/> jest to właściwe podejście.

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

const data : BarChartDataModel []

Dane te będą wykorzystywane w <BarChart/> jak

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

Taka funkcja będzie map reduce podchodźcie z niewielką pomocą z biblioteki zarządzania datami JS, takie jak momentjs

4-шаговое rozwiązanie

1. Umieść wszystkie rachunki w kolejności (najpierw najstarsze konto) w celu ułatwienia wyświetlania-zmniejsz później
2. Rachunki za wiadra na lata w wiadra, zwane "wiadrami na lata"
3. Rachunki za wiadro w każdym rocznym wiadra do wiadra, zwane "miesięcznym wiadrem".
4. Zmniejsz wszystkie rachunki w każdym comiesięcznym wiadrze do obiektu, następującego po BarChartDataModel interfejs. Kolekcja obiektów, takich za BarChartDataModel interfejs to data przechodzimy do naszego <BarChart/> składnik
5. Użyj tej kolekcji obiektów w naszym <BarChart/> składnik

Twój kod będzie :

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
}
 

Najpierw nagrałem na lata, a następnie przez miesiąc, zamiast bezpośrednio nagrywać przez miesiąc, bo nie chcemy połączyć raporty miesięczne, powiedzmy, "maj 1997 roku" i "Maja 1998 roku", tylko w "Maj" dla naszego grafika. Chcielibyśmy, aby były one odrębnymi