From 0245348a3fbd76995a79867ac9f34a32492b4d04 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Fri, 30 Oct 2020 17:01:29 +0100 Subject: [PATCH 1/2] [Demo] Fix chart gets empty at the end of the month --- examples/demo/src/dashboard/Dashboard.tsx | 4 ++-- examples/demo/src/dashboard/OrderChart.tsx | 21 ++++++++------------- 2 files changed, 10 insertions(+), 15 deletions(-) diff --git a/examples/demo/src/dashboard/Dashboard.tsx b/examples/demo/src/dashboard/Dashboard.tsx index 97f6d2ea010..a089fc8b50e 100644 --- a/examples/demo/src/dashboard/Dashboard.tsx +++ b/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( 'commands', { diff --git a/examples/demo/src/dashboard/OrderChart.tsx b/examples/demo/src/dashboard/OrderChart.tsx index c2352b7034e..9f162e5e91d 100644 --- a/examples/demo/src/dashboard/OrderChart.tsx +++ b/examples/demo/src/dashboard/OrderChart.tsx @@ -11,26 +11,22 @@ import { Tooltip, } from 'recharts'; import { useTranslate } from 'react-admin'; +import { format, subDays } 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, })); }; @@ -87,7 +83,6 @@ const OrderChart: FC<{ orders?: Order[] }> = ({ orders }) => { new Date().getTime(), ]} tickFormatter={dateFormatter} - reversed /> From a4c809d1fc26422b8e92293f6091e67631b53554 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Mon, 2 Nov 2020 06:39:47 +0100 Subject: [PATCH 2/2] Fix chart start and list of customers --- examples/demo/src/dashboard/NewCustomers.tsx | 16 +++++++--------- examples/demo/src/dashboard/OrderChart.tsx | 4 ++-- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/examples/demo/src/dashboard/NewCustomers.tsx b/examples/demo/src/dashboard/NewCustomers.tsx index 195c34c23a7..9a9834b6d47 100644 --- a/examples/demo/src/dashboard/NewCustomers.tsx +++ b/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', diff --git a/examples/demo/src/dashboard/OrderChart.tsx b/examples/demo/src/dashboard/OrderChart.tsx index 9f162e5e91d..94b4a309899 100644 --- a/examples/demo/src/dashboard/OrderChart.tsx +++ b/examples/demo/src/dashboard/OrderChart.tsx @@ -11,7 +11,7 @@ import { Tooltip, } from 'recharts'; import { useTranslate } from 'react-admin'; -import { format, subDays } from 'date-fns'; +import { format, subDays, addDays } from 'date-fns'; import { Order } from '../types'; @@ -79,7 +79,7 @@ const OrderChart: FC<{ orders?: Order[] }> = ({ orders }) => { type="number" scale="time" domain={[ - aMonthAgo.getTime(), + addDays(aMonthAgo, 1).getTime(), new Date().getTime(), ]} tickFormatter={dateFormatter}