Added All time date filter option.

components/common/DateFilter.js

@@ -6,7 +6,7 @@ import Modal from './Modal';
 import DropDown from './DropDown';
 import DatePickerForm from 'components/forms/DatePickerForm';
 import useLocale from 'hooks/useLocale';
-import { getDateRange, dateFormat } from 'lib/date';
+import { dateFormat } from 'lib/date';
 import Calendar from 'assets/calendar-alt.svg';
 import Icon from './Icon';
 
@@ -47,6 +47,11 @@ const filterOptions = [
     value: '90day',
   },
   { label: <FormattedMessage id="label.this-year" defaultMessage="This year" />, value: '1year' },
+  {
+    label: <FormattedMessage id="label.all-time" defaultMessage="All time" />,
+    value: 'all',
+    divider: true,
+  },
   {
     label: <FormattedMessage id="label.custom-range" defaultMessage="Custom range" />,
     value: 'custom',
@@ -55,7 +60,6 @@ const filterOptions = [
 ];
 
 function DateFilter({ value, startDate, endDate, onChange, className }) {
-  const { locale } = useLocale();
   const [showPicker, setShowPicker] = useState(false);
   const displayValue =
     value === 'custom' ? (
@@ -64,12 +68,12 @@ function DateFilter({ value, startDate, endDate, onChange, className }) {
       value
     );
 
-  function handleChange(value) {
+  async function handleChange(value) {
     if (value === 'custom') {
       setShowPicker(true);
       return;
     }
-    onChange(getDateRange(value, locale));
+    onChange(value);
   }
 
   function handlePickerChange(value) {

components/metrics/WebsiteChart.js

@@ -1,19 +1,22 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
+import { useRouter } from 'next/router';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
 import WebsiteHeader from './WebsiteHeader';
 import DateFilter from 'components/common/DateFilter';
 import StickyHeader from 'components/helpers/StickyHeader';
+import ErrorMessage from 'components/common/ErrorMessage';
+import FilterTags from 'components/metrics/FilterTags';
 import useFetch from 'hooks/useFetch';
 import useDateRange from 'hooks/useDateRange';
 import useTimezone from 'hooks/useTimezone';
 import usePageQuery from 'hooks/usePageQuery';
-import { getDateArray, getDateLength } from 'lib/date';
+import useLocale from 'hooks/useLocale';
-import ErrorMessage from 'components/common/ErrorMessage';
+import { getDateArray, getDateLength, getDateRange, getDateRangeValues } from 'lib/date';
-import FilterTags from 'components/metrics/FilterTags';
 import useShareToken from 'hooks/useShareToken';
 import { TOKEN_HEADER } from 'lib/constants';
+import { get } from 'lib/web';
 import styles from './WebsiteChart.module.css';
 
 export default function WebsiteChart({
@@ -22,13 +25,15 @@ export default function WebsiteChart({
   domain,
   stickyHeader = false,
   showLink = false,
-  hideChart = false,
+  showChart = true,
   onDataLoad = () => {},
 }) {
   const shareToken = useShareToken();
   const [dateRange, setDateRange] = useDateRange(websiteId);
   const { startDate, endDate, unit, value, modified } = dateRange;
+  const { locale } = useLocale();
   const [timezone] = useTimezone();
+  const { basePath } = useRouter();
   const {
     router,
     resolve,
@@ -66,6 +71,17 @@ export default function WebsiteChart({
     router.push(resolve({ [param]: undefined }));
   }
 
+  async function handleDateChange(value) {
+    if (value === 'all') {
+      const { data, ok } = await get(`${basePath}/api/website/${websiteId}`);
+      if (ok) {
+        setDateRange({ value, ...getDateRangeValues(new Date(data.created_at), Date.now()) });
+      }
+    } else {
+      setDateRange(getDateRange(value, locale));
+    }
+  }
+
   return (
     <div className={styles.container}>
       <WebsiteHeader websiteId={websiteId} title={title} domain={domain} showLink={showLink} />
@@ -84,7 +100,7 @@ export default function WebsiteChart({
               value={value}
               startDate={startDate}
               endDate={endDate}
-              onChange={setDateRange}
+              onChange={handleDateChange}
             />
           </div>
         </StickyHeader>
@@ -92,7 +108,7 @@ export default function WebsiteChart({
       <div className="row">
         <div className={classNames(styles.chart, 'col')}>
           {error && <ErrorMessage />}
-          {!hideChart && (
+          {showChart && (
             <PageviewsChart
               websiteId={websiteId}
               data={chartData}

components/pages/WebsiteList.js

@@ -12,7 +12,7 @@ import styles from './WebsiteList.module.css';
 
 export default function WebsiteList({ userId }) {
   const { data } = useFetch('/api/websites', { params: { user_id: userId } });
-  const [hideCharts, setHideCharts] = useState(false);
+  const [showCharts, setShowCharts] = useState(true);
 
   if (!data) {
     return null;
@@ -43,7 +43,7 @@ export default function WebsiteList({ userId }) {
         <Button
           tooltip={<FormattedMessage id="message.toggle-charts" defaultMessage="Toggle charts" />}
           icon={<Chart />}
-          onClick={() => setHideCharts(!hideCharts)}
+          onClick={() => setShowCharts(!showCharts)}
         />
       </div>
       {data.map(({ website_id, name, domain }) => (
@@ -52,7 +52,7 @@ export default function WebsiteList({ userId }) {
             websiteId={website_id}
             title={name}
             domain={domain}
-            hideChart={hideCharts}
+            showChart={showCharts}
             showLink
           />
         </div>

hooks/useFetch.js

@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 import { useDispatch } from 'react-redux';
+import { useRouter } from 'next/router';
 import { get } from 'lib/web';
 import { updateQuery } from 'redux/actions/queries';
-import { useRouter } from 'next/router';
 
 export default function useFetch(url, options = {}, update = []) {
   const dispatch = useDispatch();