From 26f2447973ac71727a4793896f1df5b52a687214 Mon Sep 17 00:00:00 2001 From: Shubham Verma <25576658+ShubhamVerma1811@users.noreply.github.com> Date: Sun, 10 Oct 2021 08:52:59 +0530 Subject: [PATCH] Added All TIme Filter --- components/common/DateFilter.js | 16 ++++----- components/common/RefreshButton.js | 16 ++++----- components/metrics/EventsChart.js | 6 ++-- components/metrics/MetricsBar.js | 10 +++--- components/metrics/MetricsTable.js | 5 +-- components/metrics/PagesTable.js | 3 +- components/metrics/WebsiteChart.js | 23 ++++++------- components/metrics/WebsiteHeader.js | 9 ++--- components/pages/WebsiteDetails.js | 53 ++++++++++++++++------------- components/pages/WebsiteList.js | 17 +++++---- hooks/useDateRange.js | 4 +-- lib/date.js | 36 ++++++++++---------- 12 files changed, 102 insertions(+), 96 deletions(-) diff --git a/components/common/DateFilter.js b/components/common/DateFilter.js index 63705e94..d3699560 100644 --- a/components/common/DateFilter.js +++ b/components/common/DateFilter.js @@ -1,14 +1,14 @@ -import Calendar from 'assets/calendar-alt.svg'; -import DatePickerForm from 'components/forms/DatePickerForm'; -import { endOfYear, isSameDay } from 'date-fns'; -import useLocale from 'hooks/useLocale'; -import { dateFormat, getDateRange } from 'lib/date'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; -import { useState } from 'react'; import { FormattedMessage } from 'react-intl'; -import DropDown from './DropDown'; -import Icon from './Icon'; +import { endOfYear, isSameDay } from 'date-fns'; 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 Calendar from 'assets/calendar-alt.svg'; +import Icon from './Icon'; const filterOptions = [ { label: , value: '1day' }, diff --git a/components/common/RefreshButton.js b/components/common/RefreshButton.js index 0a9dbb70..a1607867 100644 --- a/components/common/RefreshButton.js +++ b/components/common/RefreshButton.js @@ -1,15 +1,15 @@ -import Dots from 'assets/ellipsis-h.svg'; -import Refresh from 'assets/redo.svg'; -import useDateRange from 'hooks/useDateRange'; -import useLocale from 'hooks/useLocale'; -import { DEFAULT_DATE_RANGE } from 'lib/constants'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; -import { useEffect, useState } from 'react'; -import { FormattedMessage } from 'react-intl'; import { useDispatch, useSelector } from 'react-redux'; +import { FormattedMessage } from 'react-intl'; import { setDateRange } from 'redux/actions/websites'; -import { getDateRange } from '../../lib/date'; import Button from './Button'; +import Refresh from 'assets/redo.svg'; +import Dots from 'assets/ellipsis-h.svg'; +import useDateRange from 'hooks/useDateRange'; +import { getDateRange } from '../../lib/date'; +import useLocale from 'hooks/useLocale'; +import { DEFAULT_DATE_RANGE } from '../../lib/constants'; function RefreshButton({ websiteId, createdAt }) { const dispatch = useDispatch(); diff --git a/components/metrics/EventsChart.js b/components/metrics/EventsChart.js index 68556c96..746a2048 100644 --- a/components/metrics/EventsChart.js +++ b/components/metrics/EventsChart.js @@ -7,10 +7,10 @@ import useDateRange from 'hooks/useDateRange'; import useTimezone from 'hooks/useTimezone'; import usePageQuery from 'hooks/usePageQuery'; import useShareToken from 'hooks/useShareToken'; -import { EVENT_COLORS, TOKEN_HEADER } from 'lib/constants'; +import { EVENT_COLORS, TOKEN_HEADER, DEFAULT_DATE_RANGE } from 'lib/constants'; -export default function EventsChart({ websiteId, className, token }) { - const [dateRange] = useDateRange(websiteId); +export default function EventsChart({ websiteId, className, token, createdAt }) { + const [dateRange] = useDateRange(websiteId, DEFAULT_DATE_RANGE, createdAt); const { startDate, endDate, unit, modified } = dateRange; const [timezone] = useTimezone(); const { query } = usePageQuery(); diff --git a/components/metrics/MetricsBar.js b/components/metrics/MetricsBar.js index 06ed7646..91acfed8 100644 --- a/components/metrics/MetricsBar.js +++ b/components/metrics/MetricsBar.js @@ -1,14 +1,14 @@ +import React, { useState } from 'react'; +import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; -import ErrorMessage from 'components/common/ErrorMessage'; import Loading from 'components/common/Loading'; -import useDateRange from 'hooks/useDateRange'; +import ErrorMessage from 'components/common/ErrorMessage'; import useFetch from 'hooks/useFetch'; +import useDateRange from 'hooks/useDateRange'; import usePageQuery from 'hooks/usePageQuery'; import useShareToken from 'hooks/useShareToken'; +import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format'; import { DEFAULT_DATE_RANGE, TOKEN_HEADER } from 'lib/constants'; -import { formatLongNumber, formatNumber, formatShortTime } from 'lib/format'; -import { useState } from 'react'; -import { FormattedMessage } from 'react-intl'; import MetricCard from './MetricCard'; import styles from './MetricsBar.module.css'; diff --git a/components/metrics/MetricsTable.js b/components/metrics/MetricsTable.js index 95eb00c3..9f1884eb 100644 --- a/components/metrics/MetricsTable.js +++ b/components/metrics/MetricsTable.js @@ -12,7 +12,7 @@ import usePageQuery from 'hooks/usePageQuery'; import useShareToken from 'hooks/useShareToken'; import ErrorMessage from 'components/common/ErrorMessage'; import DataTable from './DataTable'; -import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER } from 'lib/constants'; +import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER, DEFAULT_DATE_RANGE } from 'lib/constants'; import styles from './MetricsTable.module.css'; export default function MetricsTable({ @@ -23,10 +23,11 @@ export default function MetricsTable({ filterOptions, limit, onDataLoad, + createdAt, ...props }) { const shareToken = useShareToken(); - const [dateRange] = useDateRange(websiteId); + const [dateRange] = useDateRange(websiteId, DEFAULT_DATE_RANGE, createdAt); const { startDate, endDate, modified } = dateRange; const { resolve, diff --git a/components/metrics/PagesTable.js b/components/metrics/PagesTable.js index c137589f..9f0b4473 100644 --- a/components/metrics/PagesTable.js +++ b/components/metrics/PagesTable.js @@ -11,7 +11,7 @@ import styles from './PagesTable.module.css'; export const FILTER_COMBINED = 0; export const FILTER_RAW = 1; -export default function PagesTable({ websiteId, websiteDomain, showFilters, ...props }) { +export default function PagesTable({ websiteId, websiteDomain, showFilters, createdAt, ...props }) { const [filter, setFilter] = useState(FILTER_COMBINED); const { resolve, @@ -52,6 +52,7 @@ export default function PagesTable({ websiteId, websiteDomain, showFilters, ...p dataFilter={urlFilter} filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }} renderLabel={renderLink} + createdAt={createdAt} {...props} /> diff --git a/components/metrics/WebsiteChart.js b/components/metrics/WebsiteChart.js index fab9627b..f4238db5 100644 --- a/components/metrics/WebsiteChart.js +++ b/components/metrics/WebsiteChart.js @@ -1,22 +1,21 @@ -import Times from 'assets/times.svg'; +import React, { useMemo } from 'react'; import classNames from 'classnames'; -import Button from 'components/common/Button'; +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 useDateRange from 'hooks/useDateRange'; +import Button from 'components/common/Button'; import useFetch from 'hooks/useFetch'; -import usePageQuery from 'hooks/usePageQuery'; +import useDateRange from 'hooks/useDateRange'; import useTimezone from 'hooks/useTimezone'; -import { DEFAULT_DATE_RANGE } from 'lib/constants'; +import usePageQuery from 'hooks/usePageQuery'; import { getDateArray, getDateLength } from 'lib/date'; -import { useMemo } from 'react'; -import useShareToken from '../../hooks/useShareToken'; -import { TOKEN_HEADER } from '../../lib/constants'; -import ErrorMessage from '../common/ErrorMessage'; -import MetricsBar from './MetricsBar'; -import PageviewsChart from './PageviewsChart'; +import Times from 'assets/times.svg'; import styles from './WebsiteChart.module.css'; -import WebsiteHeader from './WebsiteHeader'; +import ErrorMessage from '../common/ErrorMessage'; +import useShareToken from '../../hooks/useShareToken'; +import { TOKEN_HEADER, DEFAULT_DATE_RANGE } from '../../lib/constants'; export default function WebsiteChart({ websiteId, diff --git a/components/metrics/WebsiteHeader.js b/components/metrics/WebsiteHeader.js index af9cea11..c75f8b90 100644 --- a/components/metrics/WebsiteHeader.js +++ b/components/metrics/WebsiteHeader.js @@ -1,11 +1,12 @@ -import Arrow from 'assets/arrow-right.svg'; -import Favicon from 'components/common/Favicon'; +import React from 'react'; +import { FormattedMessage } from 'react-intl'; import Link from 'components/common/Link'; +import PageHeader from 'components/layout/PageHeader'; import RefreshButton from 'components/common/RefreshButton'; import ButtonLayout from 'components/layout/ButtonLayout'; -import PageHeader from 'components/layout/PageHeader'; -import { FormattedMessage } from 'react-intl'; +import Favicon from 'components/common/Favicon'; import ActiveUsers from './ActiveUsers'; +import Arrow from 'assets/arrow-right.svg'; import styles from './WebsiteHeader.module.css'; export default function WebsiteHeader({ websiteId, title, domain, showLink = false, createdAt }) { diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js index a1a4486b..a942653a 100644 --- a/components/pages/WebsiteDetails.js +++ b/components/pages/WebsiteDetails.js @@ -1,27 +1,27 @@ -import Arrow from 'assets/arrow-right.svg'; +import React, { useState } from 'react'; +import { FormattedMessage } from 'react-intl'; import classNames from 'classnames'; +import WebsiteChart from 'components/metrics/WebsiteChart'; +import WorldMap from 'components/common/WorldMap'; +import Page from 'components/layout/Page'; +import GridLayout, { GridRow, GridColumn } from 'components/layout/GridLayout'; +import MenuLayout from 'components/layout/MenuLayout'; import Link from 'components/common/Link'; import Loading from 'components/common/Loading'; -import WorldMap from 'components/common/WorldMap'; -import GridLayout, { GridColumn, GridRow } from 'components/layout/GridLayout'; -import MenuLayout from 'components/layout/MenuLayout'; -import Page from 'components/layout/Page'; -import WebsiteChart from 'components/metrics/WebsiteChart'; +import Arrow from 'assets/arrow-right.svg'; +import styles from './WebsiteDetails.module.css'; +import PagesTable from '../metrics/PagesTable'; +import ReferrersTable from '../metrics/ReferrersTable'; +import BrowsersTable from '../metrics/BrowsersTable'; +import OSTable from '../metrics/OSTable'; +import DevicesTable from '../metrics/DevicesTable'; +import CountriesTable from '../metrics/CountriesTable'; +import EventsTable from '../metrics/EventsTable'; +import EventsChart from '../metrics/EventsChart'; import useFetch from 'hooks/useFetch'; import usePageQuery from 'hooks/usePageQuery'; import useShareToken from 'hooks/useShareToken'; import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER } from 'lib/constants'; -import { useState } from 'react'; -import { FormattedMessage } from 'react-intl'; -import BrowsersTable from '../metrics/BrowsersTable'; -import CountriesTable from '../metrics/CountriesTable'; -import DevicesTable from '../metrics/DevicesTable'; -import EventsChart from '../metrics/EventsChart'; -import EventsTable from '../metrics/EventsTable'; -import OSTable from '../metrics/OSTable'; -import PagesTable from '../metrics/PagesTable'; -import ReferrersTable from '../metrics/ReferrersTable'; -import styles from './WebsiteDetails.module.css'; const views = { url: PagesTable, @@ -88,12 +88,6 @@ export default function WebsiteDetails({ websiteId }) { }, ]; - const tableProps = { - websiteId, - websiteDomain: data?.domain, - limit: 10, - }; - const DetailsComponent = views[view]; function handleDataLoad() { @@ -106,6 +100,13 @@ export default function WebsiteDetails({ websiteId }) { return null; } + const tableProps = { + websiteId, + websiteDomain: data?.domain, + limit: 10, + createdAt: data?.created_at, + }; + return (
@@ -156,7 +157,11 @@ export default function WebsiteDetails({ websiteId }) { - + diff --git a/components/pages/WebsiteList.js b/components/pages/WebsiteList.js index dd4cf172..44ae8ae1 100644 --- a/components/pages/WebsiteList.js +++ b/components/pages/WebsiteList.js @@ -1,15 +1,14 @@ +import React, { useState } from 'react'; +import { FormattedMessage } from 'react-intl'; +import Link from 'components/common/Link'; +import WebsiteChart from 'components/metrics/WebsiteChart'; +import Page from 'components/layout/Page'; +import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; +import Button from 'components/common/Button'; +import useFetch from 'hooks/useFetch'; import Arrow from 'assets/arrow-right.svg'; import Chart from 'assets/chart-bar.svg'; -import Button from 'components/common/Button'; -import EmptyPlaceholder from 'components/common/EmptyPlaceholder'; -import Link from 'components/common/Link'; -import Page from 'components/layout/Page'; -import WebsiteChart from 'components/metrics/WebsiteChart'; -import useFetch from 'hooks/useFetch'; -import { useState } from 'react'; -import { FormattedMessage } from 'react-intl'; 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); diff --git a/hooks/useDateRange.js b/hooks/useDateRange.js index 10e58793..de9c19b5 100644 --- a/hooks/useDateRange.js +++ b/hooks/useDateRange.js @@ -1,9 +1,9 @@ +import { useDispatch, useSelector } from 'react-redux'; import { parseISO } from 'date-fns'; -import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants'; import { getDateRange } from 'lib/date'; import { getItem, setItem } from 'lib/web'; -import { useDispatch, useSelector } from 'react-redux'; import { setDateRange } from '../redux/actions/websites'; +import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants'; import useForceUpdate from './useForceUpdate'; import useLocale from './useLocale'; diff --git a/lib/date.js b/lib/date.js index 6cf25972..31ee3f85 100644 --- a/lib/date.js +++ b/lib/date.js @@ -1,32 +1,32 @@ +import moment from 'moment-timezone'; import { - addDays, - addHours, addMinutes, + addHours, + addDays, addMonths, addYears, + subHours, + subDays, + startOfMinute, + startOfHour, + startOfDay, + startOfWeek, + startOfMonth, + startOfYear, + endOfHour, + endOfDay, + endOfWeek, + endOfMonth, + endOfYear, + differenceInMinutes, + differenceInHours, differenceInCalendarDays, differenceInCalendarMonths, differenceInCalendarYears, - differenceInHours, - differenceInMinutes, - endOfDay, - endOfHour, - endOfMonth, - endOfWeek, - endOfYear, format, - startOfDay, - startOfHour, - startOfMinute, - startOfMonth, - startOfWeek, - startOfYear, - subDays, - subHours, } from 'date-fns'; import { enUS } from 'date-fns/locale'; import { dateLocales } from 'lib/lang'; -import moment from 'moment-timezone'; export function getTimezone() { return moment.tz.guess();