| | |
| | | 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)" |
| | | /> |