Merge pull request #5465 from marmelab/fix-demo-revenue-chart

[Demo] Fix chart gets empty at the end of the month

Author: Luwangel

examples/demo/src/dashboard/Dashboard.tsx

@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import { useVersion, useDataProvider } from 'react-admin';
 import { useMediaQuery, Theme } from '@material-ui/core';
+import { subDays } from 'date-fns';
 
 import Welcome from './Welcome';
 import MonthlyRevenue from './MonthlyRevenue';
@@ -62,8 +63,7 @@ const Dashboard: FC = () => {
     );
 
     const fetchOrders = useCallback(async () => {
-        const aMonthAgo = new Date();
-        aMonthAgo.setDate(aMonthAgo.getDate() - 30);
+        const aMonthAgo = subDays(new Date(), 30);
         const { data: recentOrders } = await dataProvider.getList<Order>(
             'commands',
             {

examples/demo/src/dashboard/NewCustomers.tsx

@@ -13,6 +13,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import CustomerIcon from '@material-ui/icons/PersonAdd';
 import { Link } from 'react-router-dom';
 import { useTranslate, useQueryWithStore } from 'react-admin';
+import { subDays } from 'date-fns';
 
 import CardWithIcon from './CardWithIcon';
 import { Customer } from '../types';
@@ -21,15 +22,12 @@ const NewCustomers = () => {
     const translate = useTranslate();
     const classes = useStyles();
 
-    const aMonthAgo = useMemo(() => {
-        const date = new Date();
-        date.setDate(date.getDate() - 30);
-        date.setHours(0);
-        date.setMinutes(0);
-        date.setSeconds(0);
-        date.setMilliseconds(0);
-        return date;
-    }, []);
+    const aMonthAgo = subDays(new Date(), 30);
+    aMonthAgo.setDate(aMonthAgo.getDate() - 30);
+    aMonthAgo.setHours(0);
+    aMonthAgo.setMinutes(0);
+    aMonthAgo.setSeconds(0);
+    aMonthAgo.setMilliseconds(0);
 
     const { loaded, data: visitors } = useQueryWithStore({
         type: 'getList',

examples/demo/src/dashboard/OrderChart.tsx

@@ -11,26 +11,22 @@ import {
     Tooltip,
 } from 'recharts';
 import { useTranslate } from 'react-admin';
+import { format, subDays, addDays } from 'date-fns';
 
 import { Order } from '../types';
 
-const lastDay = new Date(new Date().toDateString()).getTime();
-const oneDay = 24 * 60 * 60 * 1000;
-const lastMonthDays = Array.from(
-    { length: 30 },
-    (_, i) => lastDay - i * oneDay
-).reverse();
-const aMonthAgo = new Date();
-aMonthAgo.setDate(aMonthAgo.getDate() - 30);
+const lastDay = new Date();
+const lastMonthDays = Array.from({ length: 30 }, (_, i) => subDays(lastDay, i));
+const aMonthAgo = subDays(new Date(), 30);
 
 const dateFormatter = (date: number): string =>
     new Date(date).toLocaleDateString();
 
-const aggregateOrdersByDay = (orders: Order[]): { [key: number]: number } =>
+const aggregateOrdersByDay = (orders: Order[]): { [key: string]: number } =>
     orders
         .filter((order: Order) => order.status !== 'cancelled')
         .reduce((acc, curr) => {
-            const day = new Date(new Date(curr.date).toDateString()).getTime();
+            const day = format(curr.date, 'YYYY-MM-DD');
             if (!acc[day]) {
                 acc[day] = 0;
             }
@@ -41,8 +37,8 @@ const aggregateOrdersByDay = (orders: Order[]): { [key: number]: number } =>
 const getRevenuePerDay = (orders: Order[]): TotalByDay[] => {
     const daysWithRevenue = aggregateOrdersByDay(orders);
     return lastMonthDays.map(date => ({
-        date,
-        total: daysWithRevenue[date] || 0,
+        date: date.getTime(),
+        total: daysWithRevenue[format(date, 'YYYY-MM-DD')] || 0,
     }));
 };
 
@@ -83,11 +79,10 @@ const OrderChart: FC<{ orders?: Order[] }> = ({ orders }) => {
                                 type="number"
                                 scale="time"
                                 domain={[
-                                    aMonthAgo.getTime(),
+                                    addDays(aMonthAgo, 1).getTime(),
                                     new Date().getTime(),
                                 ]}
                                 tickFormatter={dateFormatter}
-                                reversed
                             />
                             <YAxis dataKey="total" name="Revenue" unit="€" />
                             <CartesianGrid strokeDasharray="3 3" />