|  |  | 
 |  |  | 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" | 
 |  |  | 
 |  |  |                                 > | 
 |  |  |                                     <stop | 
 |  |  |                                         offset="5%" | 
 |  |  |                                         stopColor="#8884d8" | 
 |  |  |                                         stopColor="#5091abff" | 
 |  |  |                                         stopOpacity={0.8} | 
 |  |  |                                     /> | 
 |  |  |                                     <stop | 
 |  |  |                                         offset="95%" | 
 |  |  |                                         stopColor="#8884d8" | 
 |  |  |                                         stopColor="#5091abff" | 
 |  |  |                                         stopOpacity={0} | 
 |  |  |                                     /> | 
 |  |  |                                 </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" | 
 |  |  |                                 stroke="#8884d8" | 
 |  |  |                                 dataKey="inQty" | 
 |  |  |                                 stroke="#50911aff" | 
 |  |  |                                 strokeWidth={2} | 
 |  |  |                                 fill="url(#colorUv)" | 
 |  |  |                             /> | 
 |  |  |                             <Area | 
 |  |  |                                 type="monotone" | 
 |  |  |                                 dataKey="outQty" | 
 |  |  |                                 stroke="#5091abff" | 
 |  |  |                                 strokeWidth={2} | 
 |  |  |                                 fill="url(#colorUv)" | 
 |  |  |                             /> |