Merge pull request #2283 from Maxime-J/custom-range-day

Fix chart with a single day custom range

src/components/input/MonthSelect.js

@@ -12,11 +12,10 @@ import { startOfMonth, endOfMonth } from 'date-fns';
 import Icons from 'components/icons';
 import { useLocale } from 'components/hooks';
 import { formatDate } from 'lib/date';
-import { getDateLocale } from 'lib/lang';
 import styles from './MonthSelect.module.css';
 
 export function MonthSelect({ date = new Date(), onChange }) {
-  const { locale } = useLocale();
+  const { locale, dateLocale } = useLocale();
   const month = formatDate(date, 'MMMM', locale);
   const year = date.getFullYear();
   const ref = useRef();
@@ -40,7 +39,7 @@ export function MonthSelect({ date = new Date(), onChange }) {
             {close => (
               <CalendarMonthSelect
                 date={date}
-                locale={getDateLocale(locale)}
+                locale={dateLocale}
                 onSelect={handleChange.bind(null, close)}
               />
             )}
@@ -57,7 +56,7 @@ export function MonthSelect({ date = new Date(), onChange }) {
             {close => (
               <CalendarYearSelect
                 date={date}
-                locale={getDateLocale(locale)}
+                locale={dateLocale}
                 onSelect={handleChange.bind(null, close)}
               />
             )}

src/components/metrics/DatePickerForm.js

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { Button, ButtonGroup, Calendar } from 'react-basics';
-import { isAfter, isBefore, isSameDay } from 'date-fns';
+import { isAfter, isBefore, isSameDay, startOfDay, endOfDay } from 'date-fns';
 import useLocale from 'components/hooks/useLocale';
-import { getDateLocale } from 'lib/lang';
 import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
 import useMessages from 'components/hooks/useMessages';
 import styles from './DatePickerForm.module.css';
@@ -21,7 +20,7 @@ export function DatePickerForm({
   const [singleDate, setSingleDate] = useState(defaultStartDate);
   const [startDate, setStartDate] = useState(defaultStartDate);
   const [endDate, setEndDate] = useState(defaultEndDate);
-  const { locale } = useLocale();
+  const { dateLocale } = useLocale();
   const { formatMessage, labels } = useMessages();
 
   const disabled =
@@ -31,9 +30,9 @@ export function DatePickerForm({
 
   const handleSave = () => {
     if (selected === FILTER_DAY) {
-      onChange(`range:${singleDate.getTime()}:${singleDate.getTime()}`);
+      onChange(`range:${startOfDay(singleDate).getTime()}:${endOfDay(singleDate).getTime()}`);
     } else {
-      onChange(`range:${startDate.getTime()}:${endDate.getTime()}`);
+      onChange(`range:${startOfDay(startDate).getTime()}:${endOfDay(endDate).getTime()}`);
     }
   };
 
@@ -51,6 +50,7 @@ export function DatePickerForm({
             date={singleDate}
             minDate={minDate}
             maxDate={maxDate}
+            locale={dateLocale}
             onChange={setSingleDate}
           />
         )}
@@ -60,14 +60,14 @@ export function DatePickerForm({
               date={startDate}
               minDate={minDate}
               maxDate={endDate}
-              locale={getDateLocale(locale)}
+              locale={dateLocale}
               onChange={setStartDate}
             />
             <Calendar
               date={endDate}
               minDate={startDate}
               maxDate={maxDate}
-              locale={getDateLocale(locale)}
+              locale={dateLocale}
               onChange={setEndDate}
             />
           </>

src/lib/date.ts

@@ -78,7 +78,9 @@ export function parseDateRange(value, locale = 'en-US') {
     const endDate = new Date(+endTime);
 
     return {
-      ...getDateRangeValues(startDate, endDate),
+      startDate,
+      endDate,
+      unit: getMinimumUnit(startDate, endDate),
       value,
     };
   }
@@ -255,14 +257,6 @@ export function getMinimumUnit(startDate, endDate) {
   return 'year';
 }
 
-export function getDateRangeValues(startDate, endDate) {
-  return {
-    startDate: startOfDay(startDate),
-    endDate: endOfDay(endDate),
-    unit: getMinimumUnit(startDate, endDate),
-  };
-}
-
 export function getDateFromString(str) {
   const [ymd, hms] = str.split(' ');
   const [year, month, day] = ymd.split('-');