import { useMemo } from 'react'; import { useIntl } from 'react-intl'; import { Button, Icon, Text, Row, Column, Loading } from 'react-basics'; import Link from 'next/link'; 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 useApi from 'hooks/useApi'; import useDateRange from 'hooks/useDateRange'; import useTimezone from 'hooks/useTimezone'; import usePageQuery from 'hooks/usePageQuery'; import { getDateArray, getDateLength, getDateRangeValues } from 'lib/date'; import Icons from 'components/icons'; import { labels } from 'components/messages'; import styles from './WebsiteChart.module.css'; export default function WebsiteChart({ websiteId, title, domain, stickyHeader = false, showChart = true, showDetailsButton = false, onDataLoad = () => {}, }) { const { formatMessage } = useIntl(); const [dateRange, setDateRange] = useDateRange(websiteId); const { startDate, endDate, unit, value, modified } = dateRange; const [timezone] = useTimezone(); const { router, resolve, query: { url, referrer, os, browser, device, country }, } = usePageQuery(); const { get, useQuery } = useApi(); const { data, isLoading, error } = useQuery( ['websites:pageviews', { websiteId, modified, url, referrer, os, browser, device, country }], () => get(`/websites/${websiteId}/pageviews`, { startAt: +startDate, endAt: +endDate, unit, timezone, url, referrer, os, browser, device, country, }), { onSuccess: onDataLoad }, ); const chartData = useMemo(() => { if (data) { return { pageviews: getDateArray(data.pageviews, startDate, endDate, unit), sessions: getDateArray(data.sessions, startDate, endDate, unit), }; } return { pageviews: [], sessions: [] }; }, [data, startDate, endDate, unit]); function handleCloseFilter(param) { router.push(resolve({ [param]: undefined })); } async function handleDateChange(value) { if (value === 'all') { const data = await get(`/websites/${websiteId}`); if (data) { setDateRange({ value, ...getDateRangeValues(new Date(data.createdAt), Date.now()) }); } } else { setDateRange(value); } } if (isLoading) { return ; } return ( <> {showDetailsButton && ( )} {error && } {showChart && ( )} ); }