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

chore: added all time range

pull/816/head
Shubham Verma 2021-10-09 19:22:32 +05:30
parent c4307db1b8
commit 9fbcb286fe
7 changed files with 104 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/common/DateFilter.js
View File

@ -1,14 +1,14 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
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 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 { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import DropDown from './DropDown';
import Icon from './Icon';
import Modal from './Modal';
const filterOptions = [
{ label: <FormattedMessage id="label.today" defaultMessage="Today" />, value: '1day' },
@ -52,9 +52,14 @@ const filterOptions = [
value: 'custom',
divider: true,
},
{
label: <FormattedMessage id="label.all-time" defaultMessage="All Time" />,
value: '0all',
divider: true,
},
];
function DateFilter({ value, startDate, endDate, onChange, className }) {
function DateFilter({ value, startDate, endDate, onChange, className, createdAt }) {
const { locale } = useLocale();
const [showPicker, setShowPicker] = useState(false);
const displayValue =
@ -69,7 +74,7 @@ function DateFilter({ value, startDate, endDate, onChange, className }) {
setShowPicker(true);
return;
}
onChange(getDateRange(value, locale));
onChange(getDateRange(value, locale, createdAt));
}
function handlePickerChange(value) {

16
components/metrics/MetricsBar.js
View File

@ -1,20 +1,20 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import Loading from 'components/common/Loading';
import ErrorMessage from 'components/common/ErrorMessage';
import useFetch from 'hooks/useFetch';
import Loading from 'components/common/Loading';
import useDateRange from 'hooks/useDateRange';
import useFetch from 'hooks/useFetch';
import usePageQuery from 'hooks/usePageQuery';
import useShareToken from 'hooks/useShareToken';
import { formatShortTime, formatNumber, formatLongNumber } from 'lib/format';
import { 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 styles from './MetricsBar.module.css';
export default function MetricsBar({ websiteId, className }) {
export default function MetricsBar({ websiteId, className, createdAt }) {
const shareToken = useShareToken();
const [dateRange] = useDateRange(websiteId);
const [dateRange] = useDateRange(websiteId, DEFAULT_DATE_RANGE, createdAt);
const { startDate, endDate, modified } = dateRange;
const [format, setFormat] = useState(true);
const {

27
components/metrics/WebsiteChart.js
View File

@ -1,21 +1,22 @@
import React, { useMemo } from 'react';
import Times from 'assets/times.svg';
import classNames from 'classnames';
import PageviewsChart from './PageviewsChart';
import MetricsBar from './MetricsBar';
import WebsiteHeader from './WebsiteHeader';
import Button from 'components/common/Button';
import DateFilter from 'components/common/DateFilter';
import StickyHeader from 'components/helpers/StickyHeader';
import Button from 'components/common/Button';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
import useTimezone from 'hooks/useTimezone';
import useFetch from 'hooks/useFetch';
import usePageQuery from 'hooks/usePageQuery';
import useTimezone from 'hooks/useTimezone';
import { DEFAULT_DATE_RANGE } from 'lib/constants';
import { getDateArray, getDateLength } from 'lib/date';
import Times from 'assets/times.svg';
import styles from './WebsiteChart.module.css';
import ErrorMessage from '../common/ErrorMessage';
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 styles from './WebsiteChart.module.css';
import WebsiteHeader from './WebsiteHeader';
export default function WebsiteChart({
websiteId,
@ -24,10 +25,11 @@ export default function WebsiteChart({
stickyHeader = false,
showLink = false,
hideChart = false,
createdAt,
onDataLoad = () => {},
}) {
const shareToken = useShareToken();
const [dateRange, setDateRange] = useDateRange(websiteId);
const [dateRange, setDateRange] = useDateRange(websiteId, DEFAULT_DATE_RANGE, createdAt);
const { startDate, endDate, unit, value, modified } = dateRange;
const [timezone] = useTimezone();
const {
@ -77,7 +79,7 @@ export default function WebsiteChart({
>
{url && <PageFilter url={url} onClick={handleCloseFilter} />}
<div className="col-12 col-lg-9">
<MetricsBar websiteId={websiteId} />
<MetricsBar websiteId={websiteId} createdAt={createdAt} />
</div>
<div className={classNames(styles.filter, 'col-12 col-lg-3')}>
<DateFilter
@ -85,6 +87,7 @@ export default function WebsiteChart({
startDate={startDate}
endDate={endDate}
onChange={setDateRange}
createdAt={createdAt}
/>
</div>
</StickyHeader>

35
components/pages/WebsiteDetails.js
View File

@ -1,27 +1,27 @@
import React, { useState } from 'react';
import { FormattedMessage } from 'react-intl';
import Arrow from 'assets/arrow-right.svg';
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 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 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 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,
@ -114,6 +114,7 @@ export default function WebsiteDetails({ websiteId }) {
websiteId={websiteId}
title={data.name}
domain={data.domain}
createdAt={data.created_at}
onDataLoad={handleDataLoad}
showLink={false}
stickyHeader

19
components/pages/WebsiteList.js
View File

@ -1,13 +1,13 @@
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 }) {
@ -42,13 +42,14 @@ export default function WebsiteList({ userId }) {
<div className={styles.menubar}>
<Button icon={<Chart />} onClick={() => setHideCharts(!hideCharts)} />
</div>
{data.map(({ website_id, name, domain }) => (
{data?.map(({ website_id, name, domain, created_at }) => (
<div key={website_id} className={styles.website}>
<WebsiteChart
websiteId={website_id}
title={name}
domain={domain}
hideChart={hideCharts}
createdAt={created_at}
showLink
/>
</div>

13
hooks/useDateRange.js
View File

@ -1,13 +1,13 @@
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';
export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_RANGE) {
export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_RANGE, createdAt) {
const dispatch = useDispatch();
const { locale } = useLocale();
const dateRange = useSelector(state => state.websites[websiteId]?.dateRange);
@ -18,7 +18,7 @@ export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_
if (globalDefault) {
if (typeof globalDefault === 'string') {
globalDateRange = getDateRange(globalDefault, locale);
globalDateRange = getDateRange(globalDefault, locale, createdAt);
} else if (typeof globalDefault === 'object') {
globalDateRange = {
...globalDefault,
@ -39,5 +39,8 @@ export default function useDateRange(websiteId, defaultDateRange = DEFAULT_DATE_
}
}
return [dateRange || globalDateRange || getDateRange(defaultDateRange, locale), saveDateRange];
return [
dateRange || globalDateRange || getDateRange(defaultDateRange, locale, createdAt),
saveDateRange,
];
}

49
lib/date.js
View File

@ -1,32 +1,32 @@
import moment from 'moment-timezone';
import {
addMinutes,
addHours,
addDays,
addHours,
addMinutes,
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();
@ -36,11 +36,20 @@ export function getLocalTime(t) {
return addMinutes(new Date(t), new Date().getTimezoneOffset());
}
export function getDateRange(value, locale = 'en-US') {
export function getDateRange(value, locale = 'en-US', createdAt) {
const now = new Date();
const localeOptions = dateLocales[locale];
const { num, unit } = value.match(/^(?<num>[0-9]+)(?<unit>hour|day|week|month|year)$/).groups;
const { num, unit } = value.match(/^(?<num>[0-9]+)(?<unit>hour|day|week|month|year|all)$/).groups;
if (unit === 'all') {
return {
startDate: startOfMonth(new Date(createdAt)),
endDate: endOfYear(now),
unit: 'month',
value,
};
}
if (+num === 1) {
switch (unit) {