78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { Suspense, useEffect, useState } from 'react';
|
|
|
|
import type { IChartProps } from '@openpanel/validation';
|
|
|
|
import { Funnel } from '../funnel';
|
|
import { Chart } from './Chart';
|
|
import { ChartLoading } from './ChartLoading';
|
|
import type { IChartContextType } from './ChartProvider';
|
|
import { ChartProvider } from './ChartProvider';
|
|
import { MetricCardLoading } from './MetricCard';
|
|
|
|
export type IChartRoot = IChartContextType;
|
|
|
|
export function ChartRoot(props: IChartContextType) {
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) {
|
|
return props.chartType === 'metric' ? (
|
|
<MetricCardLoading />
|
|
) : (
|
|
<ChartLoading />
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Suspense
|
|
fallback={
|
|
props.chartType === 'metric' ? <MetricCardLoading /> : <ChartLoading />
|
|
}
|
|
>
|
|
<ChartProvider {...props}>
|
|
{props.chartType === 'funnel' ? <Funnel /> : <Chart />}
|
|
</ChartProvider>
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
interface ChartRootShortcutProps {
|
|
projectId: IChartProps['projectId'];
|
|
range?: IChartProps['range'];
|
|
previous?: IChartProps['previous'];
|
|
chartType?: IChartProps['chartType'];
|
|
interval?: IChartProps['interval'];
|
|
events: IChartProps['events'];
|
|
breakdowns?: IChartProps['breakdowns'];
|
|
}
|
|
|
|
export const ChartRootShortcut = ({
|
|
projectId,
|
|
range = '7d',
|
|
previous = false,
|
|
chartType = 'linear',
|
|
interval = 'day',
|
|
events,
|
|
breakdowns,
|
|
}: ChartRootShortcutProps) => {
|
|
return (
|
|
<ChartRoot
|
|
projectId={projectId}
|
|
range={range}
|
|
breakdowns={breakdowns ?? []}
|
|
previous={previous}
|
|
chartType={chartType}
|
|
interval={interval}
|
|
name="Random"
|
|
lineType="bump"
|
|
metric="sum"
|
|
events={events}
|
|
/>
|
|
);
|
|
};
|