|  |  |  | 
|---|
|  |  |  | const dateFormatter = (date) => | 
|---|
|  |  |  | new Date(date).toLocaleDateString(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const aggregateOrdersByDay = (orders) => | 
|---|
|  |  |  | orders | 
|---|
|  |  |  | .filter((order) => order.status !== 'cancelled') | 
|---|
|  |  |  | .reduce( | 
|---|
|  |  |  | (acc, curr) => { | 
|---|
|  |  |  | const day = format(curr.date, 'yyyy-MM-dd'); | 
|---|
|  |  |  | if (!acc[day]) { | 
|---|
|  |  |  | acc[day] = 0; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | acc[day] += curr.total; | 
|---|
|  |  |  | return acc; | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | {} | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | // const aggregateOrdersByDay = (orders) => | 
|---|
|  |  |  | //     orders | 
|---|
|  |  |  | //         .filter((order) => order.status !== 'cancelled') | 
|---|
|  |  |  | //         .reduce( | 
|---|
|  |  |  | //             (acc, curr) => { | 
|---|
|  |  |  | //                 const day = format(curr.date, 'yyyy-MM-dd'); | 
|---|
|  |  |  | //                 if (!acc[day]) { | 
|---|
|  |  |  | //                     acc[day] = 0; | 
|---|
|  |  |  | //                 } | 
|---|
|  |  |  | //                 acc[day] += curr.total; | 
|---|
|  |  |  | //                 return acc; | 
|---|
|  |  |  | //             }, | 
|---|
|  |  |  | //             {} | 
|---|
|  |  |  | //         ); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const getRevenuePerDay = (orders) => { | 
|---|
|  |  |  | const daysWithRevenue = aggregateOrdersByDay(orders); | 
|---|
|  |  |  | return lastMonthDays.map(date => ({ | 
|---|
|  |  |  | date: date.getTime(), | 
|---|
|  |  |  | total: daysWithRevenue[format(date, 'yyyy-MM-dd')] || 0, | 
|---|
|  |  |  | })); | 
|---|
|  |  |  | }; | 
|---|
|  |  |  | // const getRevenuePerDay = (orders) => { | 
|---|
|  |  |  | //     const daysWithRevenue = aggregateOrdersByDay(orders); | 
|---|
|  |  |  | //     return lastMonthDays.map(date => ({ | 
|---|
|  |  |  | //         date: date.getTime(), | 
|---|
|  |  |  | //         total: daysWithRevenue[format(date, 'yyyy-MM-dd')] || 0, | 
|---|
|  |  |  | //     })); | 
|---|
|  |  |  | // }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const NbChart = (props) => { | 
|---|
|  |  |  | const { orders } = props; | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return ( | 
|---|
|  |  |  | <Card> | 
|---|
|  |  |  | <CardHeader title={translate('pos.dashboard.month_history')} /> | 
|---|
|  |  |  | <CardHeader title={translate('page.dashboard.chart.histories')} /> | 
|---|
|  |  |  | <CardContent> | 
|---|
|  |  |  | <div style={{ width: '100%', height: 300 }}> | 
|---|
|  |  |  | <ResponsiveContainer> | 
|---|
|  |  |  | <AreaChart data={getRevenuePerDay(orders)}> | 
|---|
|  |  |  | <AreaChart data={orders?.trandItem | 
|---|
|  |  |  | }> | 
|---|
|  |  |  | <defs> | 
|---|
|  |  |  | <linearGradient | 
|---|
|  |  |  | id="colorUv" | 
|---|
|  |  |  | 
|---|
|  |  |  | </linearGradient> | 
|---|
|  |  |  | </defs> | 
|---|
|  |  |  | <XAxis | 
|---|
|  |  |  | dataKey="date" | 
|---|
|  |  |  | name="Date" | 
|---|
|  |  |  | type="number" | 
|---|
|  |  |  | scale="time" | 
|---|
|  |  |  | dataKey="orderTime" | 
|---|
|  |  |  |  | 
|---|
|  |  |  | domain={[ | 
|---|
|  |  |  | addDays(aMonthAgo, 1).getTime(), | 
|---|
|  |  |  | new Date().getTime(), | 
|---|
|  |  |  | ]} | 
|---|
|  |  |  | tickFormatter={dateFormatter} | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <YAxis dataKey="total" name="Revenue" unit="€" /> | 
|---|
|  |  |  | <YAxis dataKey="inQty" name="Revenue" unit="" /> | 
|---|
|  |  |  | <CartesianGrid strokeDasharray="3 3" /> | 
|---|
|  |  |  | <Tooltip | 
|---|
|  |  |  | cursor={{ strokeDasharray: '3 3' }} | 
|---|
|  |  |  | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <Area | 
|---|
|  |  |  | type="monotone" | 
|---|
|  |  |  | dataKey="total" | 
|---|
|  |  |  | dataKey="inQty" | 
|---|
|  |  |  | stroke="#50911aff" | 
|---|
|  |  |  | strokeWidth={2} | 
|---|
|  |  |  | fill="url(#colorUv)" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <Area | 
|---|
|  |  |  | type="monotone" | 
|---|
|  |  |  | dataKey="outQty" | 
|---|
|  |  |  | stroke="#5091abff" | 
|---|
|  |  |  | strokeWidth={2} | 
|---|
|  |  |  | fill="url(#colorUv)" | 
|---|