Generare i dati in recharts grafico a barre con l'Elenco dei DTO

Fare una funzione che associa oltre BillingSummaryDTO[] e la converte in dati del modello (come visibile nella variabile data) che è stato specificato per il consumo da parte della <BarChart/> è un approccio valido.

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

const data : BarChartDataModel []

Tali dati saranno utilizzati in <BarChart/> come

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

Tale funzione seguirà la map reduce approccio con un piccolo aiuto da un JS data management library come momentjs

4 passo la soluzione

1. Organizzare tutte le fatture in ordine cronologico (dal più vecchio bill primo) per una più facile ridurre la mappa successiva
2. Secchio bollette dal anno in segmenti chiamati 'yearwise-secchi'
3. Secchio bollette in ogni yearwise-secchio in segmenti chiamati 'monthwise-secchio'
4. Ridurre tutte le bollette in ogni monthwise-secchio per un oggetto a seguito della BarChartDataModel l'interfaccia. Una collezione di oggetti seguendo le BarChartDataModel l'interfaccia è la data passiamo al nostro <BarChart/> componente
5. Consumare questa collezione di oggetti inn nostro <BarChart/> componente

Il codice per la stessa sarebbe :

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
}
 

Io inseriti in bucket dal anno prima e poi inseriti in bucket dal mese anziché direttamente bucket per mese, perché non vogliamo combinare i rapporti mensili di dire "Maggio dei 1997", e "Maggio dei 1998" in proprio "Maggio" per il nostro grafico. Ci vorrebbe loro di essere separato