ambiser
/
umami
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added All TIme Filter

pull/818/head
Shubham Verma 2021-10-10 08:52:59 +05:30
parent 8b4690ad8d
commit 26f2447973
12 changed files with 102 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/common/DateFilter.js
View File

@ -1,14 +1,14 @@
import Calendar from 'assets/calendar-alt.svg'; import React, { useState } from 'react';
import DatePickerForm from 'components/forms/DatePickerForm';
import { endOfYear, isSameDay } from 'date-fns';
import useLocale from 'hooks/useLocale';
import { dateFormat, getDateRange } from 'lib/date';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useState } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import DropDown from './DropDown'; import { endOfYear, isSameDay } from 'date-fns';
import Icon from './Icon';
import Modal from './Modal'; 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 = [ const filterOptions = [
{ label: <FormattedMessage id="label.today" defaultMessage="Today" />, value: '1day' }, { label: <FormattedMessage id="label.today" defaultMessage="Today" />, value: '1day' },

16
components/common/RefreshButton.js
View File

@ -1,15 +1,15 @@
import Dots from 'assets/ellipsis-h.svg'; import React, { useState, useEffect } from 'react';
import Refresh from 'assets/redo.svg';
import useDateRange from 'hooks/useDateRange';
import useLocale from 'hooks/useLocale';
import { DEFAULT_DATE_RANGE } from 'lib/constants';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useEffect, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { FormattedMessage } from 'react-intl';
import { setDateRange } from 'redux/actions/websites'; import { setDateRange } from 'redux/actions/websites';
import { getDateRange } from '../../lib/date';
import Button from './Button'; 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 }) { function RefreshButton({ websiteId, createdAt }) {
const dispatch = useDispatch(); const dispatch = useDispatch();

6
components/metrics/EventsChart.js
View File

@ -7,10 +7,10 @@ import useDateRange from 'hooks/useDateRange';
import useTimezone from 'hooks/useTimezone'; import useTimezone from 'hooks/useTimezone';
import usePageQuery from 'hooks/usePageQuery'; import usePageQuery from 'hooks/usePageQuery';
import useShareToken from 'hooks/useShareToken'; 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 }) { export default function EventsChart({ websiteId, className, token, createdAt }) {
const [dateRange] = useDateRange(websiteId); const [dateRange] = useDateRange(websiteId, DEFAULT_DATE_RANGE, createdAt);
const { startDate, endDate, unit, modified } = dateRange; const { startDate, endDate, unit, modified } = dateRange;
const [timezone] = useTimezone(); const [timezone] = useTimezone();
const { query } = usePageQuery(); const { query } = usePageQuery();

10
components/metrics/MetricsBar.js
View File

@ -1,14 +1,14 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames'; import classNames from 'classnames';
import ErrorMessage from 'components/common/ErrorMessage';
import Loading from 'components/common/Loading'; import Loading from 'components/common/Loading';
import useDateRange from 'hooks/useDateRange'; import ErrorMessage from 'components/common/ErrorMessage';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
import usePageQuery from 'hooks/usePageQuery'; import usePageQuery from 'hooks/usePageQuery';
import useShareToken from 'hooks/useShareToken'; import useShareToken from 'hooks/useShareToken';
import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
import { DEFAULT_DATE_RANGE, TOKEN_HEADER } from 'lib/constants'; 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 MetricCard from './MetricCard';
import styles from './MetricsBar.module.css'; import styles from './MetricsBar.module.css';

5
components/metrics/MetricsTable.js
View File

@ -12,7 +12,7 @@ import usePageQuery from 'hooks/usePageQuery';
import useShareToken from 'hooks/useShareToken'; import useShareToken from 'hooks/useShareToken';
import ErrorMessage from 'components/common/ErrorMessage'; import ErrorMessage from 'components/common/ErrorMessage';
import DataTable from './DataTable'; 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'; import styles from './MetricsTable.module.css';
export default function MetricsTable({ export default function MetricsTable({
@ -23,10 +23,11 @@ export default function MetricsTable({
filterOptions, filterOptions,
limit, limit,
onDataLoad, onDataLoad,
createdAt,
...props ...props
}) { }) {
const shareToken = useShareToken(); const shareToken = useShareToken();
const [dateRange] = useDateRange(websiteId); const [dateRange] = useDateRange(websiteId, DEFAULT_DATE_RANGE, createdAt);
const { startDate, endDate, modified } = dateRange; const { startDate, endDate, modified } = dateRange;
const { const {
resolve, resolve,

3
components/metrics/PagesTable.js
View File

@ -11,7 +11,7 @@ import styles from './PagesTable.module.css';
export const FILTER_COMBINED = 0; export const FILTER_COMBINED = 0;
export const FILTER_RAW = 1; 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 [filter, setFilter] = useState(FILTER_COMBINED);
const { const {
resolve, resolve,
@ -52,6 +52,7 @@ export default function PagesTable({ websiteId, websiteDomain, showFilters, ...p
dataFilter={urlFilter} dataFilter={urlFilter}
filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }} filterOptions={{ domain: websiteDomain, raw: filter === FILTER_RAW }}
renderLabel={renderLink} renderLabel={renderLink}
createdAt={createdAt}
{...props} {...props}
/> />
</> </>

23
components/metrics/WebsiteChart.js
View File

@ -1,22 +1,21 @@
import Times from 'assets/times.svg'; import React, { useMemo } from 'react';
import classNames from 'classnames'; 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 DateFilter from 'components/common/DateFilter';
import StickyHeader from 'components/helpers/StickyHeader'; import StickyHeader from 'components/helpers/StickyHeader';
import useDateRange from 'hooks/useDateRange'; import Button from 'components/common/Button';
import useFetch from 'hooks/useFetch'; import useFetch from 'hooks/useFetch';
import usePageQuery from 'hooks/usePageQuery'; import useDateRange from 'hooks/useDateRange';
import useTimezone from 'hooks/useTimezone'; import useTimezone from 'hooks/useTimezone';
import { DEFAULT_DATE_RANGE } from 'lib/constants'; import usePageQuery from 'hooks/usePageQuery';
import { getDateArray, getDateLength } from 'lib/date'; import { getDateArray, getDateLength } from 'lib/date';
import { useMemo } from 'react'; import Times from 'assets/times.svg';
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 styles from './WebsiteChart.module.css'; 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({ export default function WebsiteChart({
websiteId, websiteId,

9
components/metrics/WebsiteHeader.js
View File

@ -1,11 +1,12 @@
import Arrow from 'assets/arrow-right.svg'; import React from 'react';
import Favicon from 'components/common/Favicon'; import { FormattedMessage } from 'react-intl';
import Link from 'components/common/Link'; import Link from 'components/common/Link';
import PageHeader from 'components/layout/PageHeader';
import RefreshButton from 'components/common/RefreshButton'; import RefreshButton from 'components/common/RefreshButton';
import ButtonLayout from 'components/layout/ButtonLayout'; import ButtonLayout from 'components/layout/ButtonLayout';
import PageHeader from 'components/layout/PageHeader'; import Favicon from 'components/common/Favicon';
import { FormattedMessage } from 'react-intl';
import ActiveUsers from './ActiveUsers'; import ActiveUsers from './ActiveUsers';
import Arrow from 'assets/arrow-right.svg';
import styles from './WebsiteHeader.module.css'; import styles from './WebsiteHeader.module.css';
export default function WebsiteHeader({ websiteId, title, domain, showLink = false, createdAt }) { export default function WebsiteHeader({ websiteId, title, domain, showLink = false, createdAt }) {

53
components/pages/WebsiteDetails.js
View File

@ -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 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 Link from 'components/common/Link';
import Loading from 'components/common/Loading'; import Loading from 'components/common/Loading';
import WorldMap from 'components/common/WorldMap'; import Arrow from 'assets/arrow-right.svg';
import GridLayout, { GridColumn, GridRow } from 'components/layout/GridLayout'; import styles from './WebsiteDetails.module.css';
import MenuLayout from 'components/layout/MenuLayout'; import PagesTable from '../metrics/PagesTable';
import Page from 'components/layout/Page'; import ReferrersTable from '../metrics/ReferrersTable';
import WebsiteChart from 'components/metrics/WebsiteChart'; 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 useFetch from 'hooks/useFetch';
import usePageQuery from 'hooks/usePageQuery'; import usePageQuery from 'hooks/usePageQuery';
import useShareToken from 'hooks/useShareToken'; import useShareToken from 'hooks/useShareToken';
import { DEFAULT_ANIMATION_DURATION, TOKEN_HEADER } from 'lib/constants'; 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 = { const views = {
url: PagesTable, url: PagesTable,
@ -88,12 +88,6 @@ export default function WebsiteDetails({ websiteId }) {
}, },
]; ];
const tableProps = {
websiteId,
websiteDomain: data?.domain,
limit: 10,
};
const DetailsComponent = views[view]; const DetailsComponent = views[view];
function handleDataLoad() { function handleDataLoad() {
@ -106,6 +100,13 @@ export default function WebsiteDetails({ websiteId }) {
return null; return null;
} }
const tableProps = {
websiteId,
websiteDomain: data?.domain,
limit: 10,
createdAt: data?.created_at,
};
return ( return (
<Page> <Page>
<div className="row"> <div className="row">
@ -156,7 +157,11 @@ export default function WebsiteDetails({ websiteId }) {
<EventsTable {...tableProps} onDataLoad={setEventsData} /> <EventsTable {...tableProps} onDataLoad={setEventsData} />
</GridColumn> </GridColumn>
<GridColumn xs={12} md={12} lg={8}> <GridColumn xs={12} md={12} lg={8}>
<EventsChart className={styles.eventschart} websiteId={websiteId} /> <EventsChart
className={styles.eventschart}
websiteId={websiteId}
createdAt={data.created_at}
/>
</GridColumn> </GridColumn>
</GridRow> </GridRow>
</GridLayout> </GridLayout>

17
components/pages/WebsiteList.js
View File

@ -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 Arrow from 'assets/arrow-right.svg';
import Chart from 'assets/chart-bar.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'; import styles from './WebsiteList.module.css';
export default function WebsiteList({ userId }) { export default function WebsiteList({ userId }) {
const { data } = useFetch('/api/websites', { params: { user_id: userId } }); const { data } = useFetch('/api/websites', { params: { user_id: userId } });
const [hideCharts, setHideCharts] = useState(false); const [hideCharts, setHideCharts] = useState(false);

4
hooks/useDateRange.js
View File

@ -1,9 +1,9 @@
import { useDispatch, useSelector } from 'react-redux';
import { parseISO } from 'date-fns'; import { parseISO } from 'date-fns';
import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';
import { getDateRange } from 'lib/date'; import { getDateRange } from 'lib/date';
import { getItem, setItem } from 'lib/web'; import { getItem, setItem } from 'lib/web';
import { useDispatch, useSelector } from 'react-redux';
import { setDateRange } from '../redux/actions/websites'; import { setDateRange } from '../redux/actions/websites';
import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';
import useForceUpdate from './useForceUpdate'; import useForceUpdate from './useForceUpdate';
import useLocale from './useLocale'; import useLocale from './useLocale';

36
lib/date.js
View File

@ -1,32 +1,32 @@
import moment from 'moment-timezone';
import { import {
addDays,
addHours,
addMinutes, addMinutes,
addHours,
addDays,
addMonths, addMonths,
addYears, addYears,
subHours,
subDays,
startOfMinute,
startOfHour,
startOfDay,
startOfWeek,
startOfMonth,
startOfYear,
endOfHour,
endOfDay,
endOfWeek,
endOfMonth,
endOfYear,
differenceInMinutes,
differenceInHours,
differenceInCalendarDays, differenceInCalendarDays,
differenceInCalendarMonths, differenceInCalendarMonths,
differenceInCalendarYears, differenceInCalendarYears,
differenceInHours,
differenceInMinutes,
endOfDay,
endOfHour,
endOfMonth,
endOfWeek,
endOfYear,
format, format,
startOfDay,
startOfHour,
startOfMinute,
startOfMonth,
startOfWeek,
startOfYear,
subDays,
subHours,
} from 'date-fns'; } from 'date-fns';
import { enUS } from 'date-fns/locale'; import { enUS } from 'date-fns/locale';
import { dateLocales } from 'lib/lang'; import { dateLocales } from 'lib/lang';
import moment from 'moment-timezone';
export function getTimezone() { export function getTimezone() {
return moment.tz.guess(); return moment.tz.guess();