Fixed realtime chart for relational. Removed getDateArray. Added chart min/max dates.

This commit is contained in:
Mike Cao 2024-08-22 12:02:36 -07:00
parent 9311f0a183
commit 647dcb5f25
7 changed files with 46 additions and 46 deletions

View file

@ -12,6 +12,8 @@ export interface BarChartProps extends ChartProps {
renderYLabel?: (label: string, index: number, values: any[]) => string;
XAxisType?: string;
YAxisType?: string;
minDate?: number | string;
maxDate?: number | string;
}
export function BarChart(props: BarChartProps) {
@ -24,6 +26,8 @@ export function BarChart(props: BarChartProps) {
XAxisType = 'time',
YAxisType = 'linear',
stacked = false,
minDate,
maxDate,
} = props;
const options: any = useMemo(() => {
@ -32,6 +36,8 @@ export function BarChart(props: BarChartProps) {
x: {
type: XAxisType,
stacked: true,
min: minDate,
max: maxDate,
time: {
unit,
},

View file

@ -1,7 +1,6 @@
import { useMemo } from 'react';
import { colord } from 'colord';
import BarChart from 'components/charts/BarChart';
import { getDateArray } from 'lib/date';
import { useLocale, useDateRange, useWebsiteEventsSeries } from 'components/hooks';
import { CHART_COLORS } from 'lib/constants';
import { renderDateLabels } from 'lib/charts';
@ -31,10 +30,6 @@ export function EventsChart({ websiteId, className }: EventsChartProps) {
return obj;
}, {});
Object.keys(map).forEach(key => {
map[key] = getDateArray(map[key], startDate, endDate, unit);
});
return {
datasets: Object.keys(map).map((key, index) => {
const color = colord(CHART_COLORS[index % CHART_COLORS.length]);

View file

@ -1,7 +1,6 @@
import { useMemo, useRef } from 'react';
import { startOfMinute, subMinutes, isBefore } from 'date-fns';
import PageviewsChart from './PageviewsChart';
import { getDateArray } from 'lib/date';
import { DEFAULT_ANIMATION_DURATION, REALTIME_RANGE } from 'lib/constants';
import { RealtimeData } from 'lib/types';
@ -22,8 +21,8 @@ export function RealtimeChart({ data, unit, ...props }: RealtimeChartProps) {
}
return {
pageviews: getDateArray(data.series.views, startDate, endDate, unit),
sessions: getDateArray(data.series.visitors, startDate, endDate, unit),
pageviews: data.series.views,
sessions: data.series.visitors,
};
}, [data, startDate, endDate, unit]);
@ -37,7 +36,14 @@ export function RealtimeChart({ data, unit, ...props }: RealtimeChartProps) {
}, [endDate]);
return (
<PageviewsChart {...props} unit={unit} data={chartData} animationDuration={animationDuration} />
<PageviewsChart
{...props}
minDate={startDate.toISOString()}
maxDate={endDate.toISOString()}
unit={unit}
data={chartData}
animationDuration={animationDuration}
/>
);
}