Added All time date filter option.

This commit is contained in:
Mike Cao 2022-01-14 00:04:07 -08:00
parent 5f359b3cf1
commit a101d639d3
4 changed files with 34 additions and 14 deletions

View File

@ -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) {

View File

@ -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 ErrorMessage from 'components/common/ErrorMessage';
import FilterTags from 'components/metrics/FilterTags';
import useLocale from 'hooks/useLocale';
import { getDateArray, getDateLength, getDateRange, getDateRangeValues } from 'lib/date';
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}

View File

@ -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>

View File

@ -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();