fix min date chart bug when using all time

This commit is contained in:
Francis Cao 2024-11-27 10:38:45 -08:00
parent bf89dfdd49
commit c851f3bb3c
4 changed files with 19 additions and 7 deletions

View File

@ -11,7 +11,7 @@ export function WebsiteChart({
compareMode?: boolean; compareMode?: boolean;
}) { }) {
const { dateRange, dateCompare } = useDateRange(websiteId); 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 { data, isLoading } = useWebsitePageviews(websiteId, compareMode ? dateCompare : undefined);
const { pageviews, sessions, compare } = (data || {}) as any; const { pageviews, sessions, compare } = (data || {}) as any;
@ -49,6 +49,7 @@ export function WebsiteChart({
maxDate={endDate.toISOString()} maxDate={endDate.toISOString()}
unit={unit} unit={unit}
isLoading={isLoading} isLoading={isLoading}
isAllTime={value === 'all'}
/> />
); );
} }

View File

@ -14,6 +14,7 @@ export interface BarChartProps extends ChartProps {
YAxisType?: string; YAxisType?: string;
minDate?: number | string; minDate?: number | string;
maxDate?: number | string; maxDate?: number | string;
isAllTime?: boolean;
} }
export function BarChart(props: BarChartProps) { export function BarChart(props: BarChartProps) {
@ -29,6 +30,7 @@ export function BarChart(props: BarChartProps) {
minDate, minDate,
maxDate, maxDate,
currency, currency,
isAllTime,
} = props; } = props;
const options: any = useMemo(() => { const options: any = useMemo(() => {
@ -37,7 +39,7 @@ export function BarChart(props: BarChartProps) {
x: { x: {
type: XAxisType, type: XAxisType,
stacked: true, stacked: true,
min: minDate && new Date(minDate).getSeconds() === 0 ? minDate : '', min: isAllTime ? '' : minDate,
max: maxDate, max: maxDate,
time: { time: {
unit, unit,

View File

@ -1,9 +1,9 @@
import { useMemo } from 'react';
import { colord } from 'colord'; import { colord } from 'colord';
import BarChart from 'components/charts/BarChart'; import BarChart from 'components/charts/BarChart';
import { useLocale, useDateRange, useWebsiteEventsSeries } from 'components/hooks'; import { useDateRange, useLocale, useWebsiteEventsSeries } from 'components/hooks';
import { CHART_COLORS } from 'lib/constants';
import { renderDateLabels } from 'lib/charts'; import { renderDateLabels } from 'lib/charts';
import { CHART_COLORS } from 'lib/constants';
import { useMemo } from 'react';
export interface EventsChartProps { export interface EventsChartProps {
websiteId: string; websiteId: string;
@ -12,7 +12,7 @@ export interface EventsChartProps {
export function EventsChart({ websiteId, className }: EventsChartProps) { export function EventsChart({ websiteId, className }: EventsChartProps) {
const { const {
dateRange: { startDate, endDate, unit }, dateRange: { startDate, endDate, unit, value },
} = useDateRange(websiteId); } = useDateRange(websiteId);
const { locale } = useLocale(); const { locale } = useLocale();
const { data, isLoading } = useWebsiteEventsSeries(websiteId); const { data, isLoading } = useWebsiteEventsSeries(websiteId);
@ -55,6 +55,7 @@ export function EventsChart({ websiteId, className }: EventsChartProps) {
stacked={true} stacked={true}
renderXLabel={renderDateLabels(unit, locale)} renderXLabel={renderDateLabels(unit, locale)}
isLoading={isLoading} isLoading={isLoading}
isAllTime={value === 'all'}
/> />
); );
} }

View File

@ -14,9 +14,16 @@ export interface PagepageviewsChartProps extends BarChartProps {
}; };
unit: string; unit: string;
isLoading?: boolean; 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 { formatMessage, labels } = useMessages();
const { colors } = useTheme(); const { colors } = useTheme();
const { locale } = useLocale(); const { locale } = useLocale();
@ -74,6 +81,7 @@ export function PagepageviewsChart({ data, unit, isLoading, ...props }: Pagepage
data={chartData} data={chartData}
unit={unit} unit={unit}
isLoading={isLoading} isLoading={isLoading}
isAllTime={isAllTime}
renderXLabel={renderDateLabels(unit, locale)} renderXLabel={renderDateLabels(unit, locale)}
/> />
); );