使用DTO列表将数据生成为重新绘制条形图

Question

我使用Typescript:从Rest API生成此DTO对象

export interface BillingSummaryDTO {
paid?: number,
outstanding?: number,
pastDue?: number,
cancelled?: number,
createdAt?: Moment | null,
}
export async function getBillingSummary(): Promise<AxiosResponse<BillingSummaryDTO[]>> {
return await axios.get<BillingSummaryDTO[]>(
`${baseUrl}/management/billing/summary`
);
}

示例图表：

import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
} from "recharts";
import {Box} from "@material-ui/core";
const data = [
{
name: "Jan",
Chargebacks: 4000,
Transactions: 2400,
USD: 2400,
},
{
name: "Feb",
Chargebacks: 3000,
Transactions: 1398,
USD: 2210,
},
{
name: "Mar",
Chargebacks: 2000,
Transactions: 9800,
USD: 2290,
},
{
name: "Apr",
Chargebacks: 2780,
Transactions: 3908,
USD: 2000,
},
{
name: "May",
Chargebacks: 1890,
Transactions: 4800,
USD: 2181,
},
{
name: "Jun",
Chargebacks: 2390,
Transactions: 3800,
USD: 2500,
},
{
name: "Jul",
Chargebacks: 3490,
Transactions: 4300,
USD: 2100,
},
{
name: "Aug",
Chargebacks: 3490,
Transactions: 4300,
USD: 2100,
},
{
name: "Sep",
Chargebacks: 3490,
Transactions: 4300,
USD: 2100,
},
];
const useStyles = makeStyles((theme) =>
createStyles({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: "center",
color: theme.palette.text.secondary,
},
})
);
const usePaperStyles = makeStyles((theme) =>
createStyles({
root: {
display: "flex",
flexWrap: "wrap",
"& > *": {
margin: theme.spacing(1),
width: theme.spacing(16),
height: theme.spacing(16),
},
},
})
);
const useTimelineStyles = makeStyles((theme) => ({
paper: {
padding: "6px 16px",
},
secondaryTail: {
backgroundColor: theme.palette.secondary.main,
},
}));
export default function Billing() {
const [click, setClick] = useState(false);
const closeMobileMenu = () => setClick(false);
const classes = useStyles();
const classesPaper = usePaperStyles();
const classesTimeline = useTimelineStyles();
return (
<>
<Grid container justifyContent="center" alignItems="center">
<Grid item xs={11}>
{/*Padding on the top*/}
<Box m="5rem" />
</Grid>
<Grid item xs={12} >
<h4 className="chart-label">Invoices Summary</h4>
<BarChart
width={1000}
height={300}
data={data}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
barSize={30}
>
<XAxis
dataKey="name"
scale="point"
padding={{ left: 10, right: 10 }}
/>
<YAxis />
<Tooltip />
<Legend />
<CartesianGrid strokeDasharray="3 3" />
<Bar
dataKey="Transactions"
fill="#8884d8"
background={{ fill: "#eee" }}
/>
</BarChart>
</Grid>
</Grid>
</>
);
}

如何使用BillingSummaryDTO[]中的数据生成图表？

Answer 1

制作一个映射到BillingSummaryDTO[]并将其转换为您指定供<BarChart/>使用的数据模型(在变量data中可见(的函数是一种有效的方法。

export interface BarChartDataModel {
name: string,
Chargebacks: number,
Transactions: number,
USD: number,
}
const data : BarChartDataModel []

该数据将在<BarChart/>中用作

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

这样的函数将遵循mapreduce方法，并在momentjs 等JS日期管理库的帮助下实现

4步溶液

1. 按时间顺序排列所有账单(最旧的账单优先(，以便以后更容易进行地图缩减
2. 将账单逐年放入称为"按年桶"的桶中
3. 将每年一桶的账单分成一桶，称为"每月一桶">
4. 将每个月存储桶中的所有账单减少到BarChartDataModel接口后面的对象。BarChartDataModel接口后面的对象集合是我们传递给<BarChart/>组件的data
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
}

我先按年份逐月逐月，而不是直接按月逐月，因为我们不想合并例如"；1997年5月"；以及"；1998年5月"；变成"刚好"；五月"；我们的图表。我们希望它们是独立的