Fix custom date range display. Closes #923, #921

components/common/DateFilter.js

@@ -10,7 +10,7 @@ import { dateFormat } from 'lib/date';
 import Calendar from 'assets/calendar-alt.svg';
 import Icon from './Icon';
 
-const filterOptions = [
+export const filterOptions = [
   { label: <FormattedMessage id="label.today" defaultMessage="Today" />, value: '1day' },
   {
     label: (
@@ -59,7 +59,7 @@ const filterOptions = [
   },
 ];
 
-function DateFilter({ value, startDate, endDate, onChange, className }) {
+function DateFilter({ value, startDate, endDate, onChange, className, options }) {
   const [showPicker, setShowPicker] = useState(false);
   const displayValue =
     value === 'custom' ? (
@@ -86,7 +86,7 @@ function DateFilter({ value, startDate, endDate, onChange, className }) {
       <DropDown
         className={className}
         value={displayValue}
-        options={filterOptions}
+        options={options || filterOptions}
         onChange={handleChange}
       />
       {showPicker && (

components/metrics/WebsiteChart.js

@@ -65,7 +65,7 @@ export default function WebsiteChart({
       };
     }
     return { pageviews: [], sessions: [] };
-  }, [data]);
+  }, [data, startDate, endDate, unit]);
 
   function handleCloseFilter(param) {
     router.push(resolve({ [param]: undefined }));
@@ -77,8 +77,10 @@ export default function WebsiteChart({
       if (ok) {
         setDateRange({ value, ...getDateRangeValues(new Date(data.created_at), Date.now()) });
       }
-    } else {
+    } else if (typeof value === 'string') {
       setDateRange(getDateRange(value, locale));
+    } else {
+      setDateRange(value);
     }
   }
 

components/settings/DateRangeSetting.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import DateFilter from 'components/common/DateFilter';
+import DateFilter, { filterOptions } from 'components/common/DateFilter';
 import Button from 'components/common/Button';
 import useDateRange from 'hooks/useDateRange';
 import { DEFAULT_DATE_RANGE } from 'lib/constants';
@@ -12,6 +12,7 @@ export default function DateRangeSetting() {
   const { locale } = useLocale();
   const [dateRange, setDateRange] = useDateRange();
   const { startDate, endDate, value } = dateRange;
+  const options = filterOptions.filter(e => e.value !== 'all');
 
   function handleReset() {
     setDateRange(getDateRange(DEFAULT_DATE_RANGE, locale));
@@ -19,7 +20,13 @@ export default function DateRangeSetting() {
 
   return (
     <>
-      <DateFilter value={value} startDate={startDate} endDate={endDate} onChange={setDateRange} />
+      <DateFilter
+        options={options}
+        value={value}
+        startDate={startDate}
+        endDate={endDate}
+        onChange={setDateRange}
+      />
       <Button className={styles.button} size="small" onClick={handleReset}>
         <FormattedMessage id="label.reset" defaultMessage="Reset" />
       </Button>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "umami",
   "version": "1.25.0",
-  "description": "A simple, fast, website analytics alternative to Google Analytics. ",
+  "description": "A simple, fast, website analytics alternative to Google Analytics.",
   "author": "Mike Cao <mike@mikecao.com>",
   "license": "MIT",
   "homepage": "https://umami.is",