Added timezone and default date range settings.

This commit is contained in:
Mike Cao 2020-09-19 10:35:05 -07:00
parent bcd765e9d3
commit 33ac026637
30 changed files with 186 additions and 63 deletions

View file

@ -1,9 +1,10 @@
import React, { useMemo } from 'react';
import tinycolor from 'tinycolor2';
import BarChart from './BarChart';
import { getTimezone, getDateArray, getDateLength } from 'lib/date';
import { getDateArray, getDateLength } from 'lib/date';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
import useTimezone from 'hooks/useTimezone';
const COLORS = [
'#2680eb',
@ -17,15 +18,17 @@ const COLORS = [
];
export default function EventsChart({ websiteId, token }) {
const dateRange = useDateRange(websiteId);
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, unit, modified } = dateRange;
const [timezone] = useTimezone();
const { data } = useFetch(
`/api/website/${websiteId}/events`,
{
start_at: +startDate,
end_at: +endDate,
unit,
tz: getTimezone(),
tz: timezone,
token,
},
{ update: [modified] },

View file

@ -9,7 +9,7 @@ import MetricCard from './MetricCard';
import styles from './MetricsBar.module.css';
export default function MetricsBar({ websiteId, token, className }) {
const dateRange = useDateRange(websiteId);
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange;
const { data } = useFetch(
`/api/website/${websiteId}/metrics`,

View file

@ -29,7 +29,7 @@ export default function MetricsTable({
onDataLoad = () => {},
onExpand = () => {},
}) {
const dateRange = useDateRange(websiteId);
const [dateRange] = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange;
const { data } = useFetch(
`/api/website/${websiteId}/rankings`,

View file

@ -1,5 +1,4 @@
import React, { useMemo } from 'react';
import { useDispatch } from 'react-redux';
import classNames from 'classnames';
import PageviewsChart from './PageviewsChart';
import MetricsBar from './MetricsBar';
@ -8,8 +7,8 @@ import DateFilter from 'components/common/DateFilter';
import StickyHeader from 'components/helpers/StickyHeader';
import useFetch from 'hooks/useFetch';
import useDateRange from 'hooks/useDateRange';
import { getDateArray, getDateLength, getTimezone } from 'lib/date';
import { setDateRange } from 'redux/actions/websites';
import useTimezone from 'hooks/useTimezone';
import { getDateArray, getDateLength } from 'lib/date';
import styles from './WebsiteChart.module.css';
export default function WebsiteChart({
@ -20,9 +19,9 @@ export default function WebsiteChart({
showLink = false,
onDataLoad = () => {},
}) {
const dispatch = useDispatch();
const dateRange = useDateRange(websiteId);
const [dateRange, setDateRange] = useDateRange(websiteId);
const { startDate, endDate, unit, value, modified } = dateRange;
const [timezone] = useTimezone();
const { data } = useFetch(
`/api/website/${websiteId}/pageviews`,
@ -30,7 +29,7 @@ export default function WebsiteChart({
start_at: +startDate,
end_at: +endDate,
unit,
tz: getTimezone(),
tz: timezone,
token,
},
{ onDataLoad, update: [modified] },
@ -46,10 +45,6 @@ export default function WebsiteChart({
return [[], []];
}, [data]);
function handleDateChange(values) {
dispatch(setDateRange(websiteId, values));
}
return (
<>
<WebsiteHeader websiteId={websiteId} token={token} title={title} showLink={showLink} />
@ -67,7 +62,7 @@ export default function WebsiteChart({
value={value}
startDate={startDate}
endDate={endDate}
onChange={handleDateChange}
onChange={setDateRange}
/>
</div>
</StickyHeader>