สร้างข้อมูลลงไปใน recharts สร้างแผนภูมิ k ใช้รายชื่อของ DTO

ทำงานที่แผนที่ตร BillingSummaryDTO[และ converts นมันเป็นข้อมูลรุ่น(เป็นที่มองเห็นในตัวแปร data)ที่คุณต้องกำหนดสำหรับ consumption ย <BarChart/> คือที่ใช้งานได้ใกล้เข้ามาแล้ว

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

const data : BarChartDataModel []

นี้ข้อมูลจะถูกใช้อยู่ <BarChart/> เป็

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

เช่นฟังก์ชันจะตาม map reduce เข้าใกล้กับความช่วยเหลือเล็กน้อยจาก JS วันที่การจัดการห้องสมุดชอบ momentjs

4 ขั้นตอทางออก

1. จัดการให้ทั้งค่า chronologically(เก่าแก่บิลแรก)สำหรับแผนที่ง่ายกว่า-ลดทีหลัง
2. ถัค่าโดยปีในเก่ากันทุกคนเรียก'yearwise-เก่ากันทุก'
3. ถังที่มีค่าอยู่ในแต่ละ yearwise-ถังเข้าเก่ากันทุกคนเรียก'monthwise-ถั'
4. ลงทุนเงินในแต่ละ monthwise-ถังที่จะเป็นวัตถุต่อไปนี้ที่ BarChartDataModel ส่วนเชื่อมต่อ. คลังภาพของวัตถุต่อไปนี้ที่ BarChartDataModel ส่วนติดต่อเป็น data เราผ่านของเรา <BarChart/> ส่วนประกอบ
5. กินนี้สิ่งแรมคลังภาพของเรา <BarChart/> ส่วนประกอบ

ขอรหัสสำหรับเดียวกันจะเป็น:

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
}
 

ฉัน bucketed ยนปีแรกและจากนั้น bucketed โดยเดือนแทนโดยตรง bucketing โดยเดือนเพราะเราไม่อยากรวมรายเดือรายงานขอพูดว่า"อาจจะของ 1997"และ"ของขอ 1998"ไปแค่"อาจจะ"สำหรับของเราเป็นลายลักษณ์อักษร เราคงต้องการให้พวกเขาจะแยกออก