diff --git a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx index fa5ab69423..ddeba789d1 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx @@ -11,7 +11,7 @@ export function WebsiteChart({ compareMode?: boolean; }) { const { dateRange, dateCompare } = useDateRange(websiteId); - const { startDate, endDate, unit } = dateRange; + const { startDate, endDate, unit, value } = dateRange; const { data, isLoading } = useWebsitePageviews(websiteId, compareMode ? dateCompare : undefined); const { pageviews, sessions, compare } = (data || {}) as any; @@ -49,6 +49,7 @@ export function WebsiteChart({ maxDate={endDate.toISOString()} unit={unit} isLoading={isLoading} + isAllTime={value === 'all'} /> ); } diff --git a/src/components/charts/BarChart.tsx b/src/components/charts/BarChart.tsx index eadc4af738..7c16730e7b 100644 --- a/src/components/charts/BarChart.tsx +++ b/src/components/charts/BarChart.tsx @@ -14,6 +14,7 @@ export interface BarChartProps extends ChartProps { YAxisType?: string; minDate?: number | string; maxDate?: number | string; + isAllTime?: boolean; } export function BarChart(props: BarChartProps) { @@ -29,6 +30,7 @@ export function BarChart(props: BarChartProps) { minDate, maxDate, currency, + isAllTime, } = props; const options: any = useMemo(() => { @@ -37,7 +39,7 @@ export function BarChart(props: BarChartProps) { x: { type: XAxisType, stacked: true, - min: minDate && new Date(minDate).getSeconds() === 0 ? minDate : '', + min: isAllTime ? '' : minDate, max: maxDate, time: { unit, diff --git a/src/components/metrics/EventsChart.tsx b/src/components/metrics/EventsChart.tsx index f5b283449b..2ba2caeecc 100644 --- a/src/components/metrics/EventsChart.tsx +++ b/src/components/metrics/EventsChart.tsx @@ -1,9 +1,9 @@ -import { useMemo } from 'react'; import { colord } from 'colord'; import BarChart from 'components/charts/BarChart'; -import { useLocale, useDateRange, useWebsiteEventsSeries } from 'components/hooks'; -import { CHART_COLORS } from 'lib/constants'; +import { useDateRange, useLocale, useWebsiteEventsSeries } from 'components/hooks'; import { renderDateLabels } from 'lib/charts'; +import { CHART_COLORS } from 'lib/constants'; +import { useMemo } from 'react'; export interface EventsChartProps { websiteId: string; @@ -12,7 +12,7 @@ export interface EventsChartProps { export function EventsChart({ websiteId, className }: EventsChartProps) { const { - dateRange: { startDate, endDate, unit }, + dateRange: { startDate, endDate, unit, value }, } = useDateRange(websiteId); const { locale } = useLocale(); const { data, isLoading } = useWebsiteEventsSeries(websiteId); @@ -55,6 +55,7 @@ export function EventsChart({ websiteId, className }: EventsChartProps) { stacked={true} renderXLabel={renderDateLabels(unit, locale)} isLoading={isLoading} + isAllTime={value === 'all'} /> ); } diff --git a/src/components/metrics/PageviewsChart.tsx b/src/components/metrics/PageviewsChart.tsx index 6ca0309494..6274defc09 100644 --- a/src/components/metrics/PageviewsChart.tsx +++ b/src/components/metrics/PageviewsChart.tsx @@ -14,9 +14,16 @@ export interface PagepageviewsChartProps extends BarChartProps { }; unit: string; isLoading?: boolean; + isAllTime?: boolean; } -export function PagepageviewsChart({ data, unit, isLoading, ...props }: PagepageviewsChartProps) { +export function PagepageviewsChart({ + data, + unit, + isLoading, + isAllTime, + ...props +}: PagepageviewsChartProps) { const { formatMessage, labels } = useMessages(); const { colors } = useTheme(); const { locale } = useLocale(); @@ -74,6 +81,7 @@ export function PagepageviewsChart({ data, unit, isLoading, ...props }: Pagepage data={chartData} unit={unit} isLoading={isLoading} + isAllTime={isAllTime} renderXLabel={renderDateLabels(unit, locale)} /> );