feature(dashboard): improved funnels
This commit is contained in:
Carl-Gerhard Lindesvärd
committed by
GitHub
GitHub
parent
bb018d55ca
commit
1257381bf2
@@ -30,45 +30,42 @@ const OverviewTopBots = ({ projectId }: Props) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="-m-4">
|
||||
<WidgetTable
|
||||
className="max-w-full [&_td:first-child]:w-full [&_th]:text-sm [&_tr]:text-sm"
|
||||
data={data}
|
||||
keyExtractor={(item) => item.id}
|
||||
columns={[
|
||||
{
|
||||
name: 'Path',
|
||||
render(item) {
|
||||
return (
|
||||
<Tooltiper asChild content={item.path}>
|
||||
<span className="w-full">{getPath(item.path)}</span>
|
||||
<WidgetTable
|
||||
className="max-w-full [&_td:first-child]:w-full [&_th]:text-sm [&_tr]:text-sm"
|
||||
data={data}
|
||||
keyExtractor={(item) => item.id}
|
||||
columns={[
|
||||
{
|
||||
name: 'Path',
|
||||
render(item) {
|
||||
return (
|
||||
<Tooltiper asChild content={item.path}>
|
||||
<span className="w-full">{getPath(item.path)}</span>
|
||||
</Tooltiper>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Date',
|
||||
render(item) {
|
||||
return (
|
||||
<div className="flex gap-2 whitespace-nowrap">
|
||||
<Tooltiper asChild content={`${item.type}`}>
|
||||
<div>{item.name}</div>
|
||||
</Tooltiper>
|
||||
);
|
||||
},
|
||||
<Tooltiper
|
||||
asChild
|
||||
content={`${item.createdAt.toLocaleString()}`}
|
||||
>
|
||||
<div>{item.createdAt.toLocaleDateString()}</div>
|
||||
</Tooltiper>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
{
|
||||
name: 'Date',
|
||||
render(item) {
|
||||
return (
|
||||
<div className="flex gap-2 whitespace-nowrap">
|
||||
<Tooltiper asChild content={`${item.type}`}>
|
||||
<div>{item.name}</div>
|
||||
</Tooltiper>
|
||||
<Tooltiper
|
||||
asChild
|
||||
content={`${item.createdAt.toLocaleString()}`}
|
||||
>
|
||||
<div>{item.createdAt.toLocaleDateString()}</div>
|
||||
</Tooltiper>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<Pagination
|
||||
className="mt-4"
|
||||
cursor={cursor}
|
||||
setCursor={setCursor}
|
||||
count={count}
|
||||
|
||||
@@ -340,12 +340,11 @@ export default function OverviewTopDevices({
|
||||
))}
|
||||
</WidgetButtons>
|
||||
</WidgetHead>
|
||||
<WidgetBody>
|
||||
<WidgetBody className="p-0">
|
||||
{query.isLoading ? (
|
||||
<OverviewWidgetTableLoading className="-m-4" />
|
||||
<OverviewWidgetTableLoading />
|
||||
) : (
|
||||
<OverviewWidgetTableGeneric
|
||||
className="-m-4"
|
||||
data={query.data ?? []}
|
||||
column={{
|
||||
name: OVERVIEW_COLUMNS_NAME[widget.key],
|
||||
|
||||
@@ -79,12 +79,11 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
|
||||
))}
|
||||
</WidgetButtons>
|
||||
</WidgetHead>
|
||||
<WidgetBody>
|
||||
<WidgetBody className="p-0">
|
||||
{query.isLoading ? (
|
||||
<OverviewWidgetTableLoading className="-m-4" />
|
||||
<OverviewWidgetTableLoading />
|
||||
) : (
|
||||
<OverviewWidgetTableGeneric
|
||||
className="-m-4"
|
||||
data={query.data ?? []}
|
||||
column={{
|
||||
name: OVERVIEW_COLUMNS_NAME[widget.key],
|
||||
|
||||
@@ -95,14 +95,13 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
|
||||
))}
|
||||
</WidgetButtons>
|
||||
</WidgetHead>
|
||||
<WidgetBody>
|
||||
<WidgetBody className="p-0">
|
||||
{query.isLoading ? (
|
||||
<OverviewWidgetTableLoading className="-m-4" />
|
||||
<OverviewWidgetTableLoading />
|
||||
) : (
|
||||
<>
|
||||
{/*<OverviewWidgetTableBots className="-m-4" data={data ?? []} />*/}
|
||||
{/*<OverviewWidgetTableBots data={data ?? []} />*/}
|
||||
<OverviewWidgetTablePages
|
||||
className="-m-4"
|
||||
data={data ?? []}
|
||||
lastColumnName={widget.meta.columns.sessions}
|
||||
showDomain={!!domain}
|
||||
|
||||
@@ -90,12 +90,11 @@ export default function OverviewTopSources({
|
||||
))}
|
||||
</WidgetButtons>
|
||||
</WidgetHead>
|
||||
<WidgetBody>
|
||||
<WidgetBody className="p-0">
|
||||
{query.isLoading ? (
|
||||
<OverviewWidgetTableLoading className="-m-4" />
|
||||
<OverviewWidgetTableLoading />
|
||||
) : (
|
||||
<OverviewWidgetTableGeneric
|
||||
className="-m-4"
|
||||
data={query.data ?? []}
|
||||
column={{
|
||||
name: OVERVIEW_COLUMNS_NAME[widget.key],
|
||||
|
||||
@@ -25,7 +25,7 @@ export const OverviewWidgetTable = <T,>({
|
||||
data={data ?? []}
|
||||
keyExtractor={keyExtractor}
|
||||
className={'text-sm min-h-[358px] @container'}
|
||||
columnClassName="px-2 group/row items-center"
|
||||
columnClassName="group/row [&>*:first-child]:pl-4 [&>*:last-child]:pr-4 [&_th]:pt-3"
|
||||
eachRow={(item) => {
|
||||
return (
|
||||
<div className="absolute inset-0 !p-0">
|
||||
@@ -43,11 +43,11 @@ export const OverviewWidgetTable = <T,>({
|
||||
...column,
|
||||
className: cn(
|
||||
index === 0
|
||||
? 'w-full flex-1 font-medium min-w-0'
|
||||
: 'text-right justify-end row w-20 font-mono',
|
||||
? 'text-left w-full font-medium min-w-0'
|
||||
: 'text-right w-20 font-mono',
|
||||
index !== 0 &&
|
||||
index !== columns.length - 1 &&
|
||||
'hidden @[310px]:row',
|
||||
'hidden @[310px]:table-cell',
|
||||
column.className,
|
||||
),
|
||||
};
|
||||
|
||||
@@ -1,257 +1,390 @@
|
||||
'use client';
|
||||
|
||||
import { ColorSquare } from '@/components/color-square';
|
||||
import { TooltipComplete } from '@/components/tooltip-complete';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import type { RouterOutputs } from '@/trpc/client';
|
||||
import { cn } from '@/utils/cn';
|
||||
import { AlertCircleIcon } from 'lucide-react';
|
||||
import { last } from 'ramda';
|
||||
import { ChevronRightIcon, InfoIcon } from 'lucide-react';
|
||||
|
||||
import { getPreviousMetric, round } from '@openpanel/common';
|
||||
import { alphabetIds } from '@openpanel/constants';
|
||||
|
||||
import { createChartTooltip } from '@/components/charts/chart-tooltip';
|
||||
import { Tooltiper } from '@/components/ui/tooltip';
|
||||
import { WidgetTable } from '@/components/widget-table';
|
||||
import { useNumber } from '@/hooks/useNumerFormatter';
|
||||
import { PreviousDiffIndicator } from '../common/previous-diff-indicator';
|
||||
import { useReportChartContext } from '../context';
|
||||
import { MetricCardNumber } from '../metric/metric-card';
|
||||
|
||||
const findMostDropoffs = (
|
||||
steps: RouterOutputs['chart']['funnel']['current']['steps'],
|
||||
) => {
|
||||
return steps.reduce((acc, step) => {
|
||||
if (step.dropoffCount > acc.dropoffCount) {
|
||||
return step;
|
||||
}
|
||||
return acc;
|
||||
});
|
||||
};
|
||||
import { getChartColor } from '@/utils/theme';
|
||||
import { getPreviousMetric } from '@openpanel/common';
|
||||
import {
|
||||
CartesianGrid,
|
||||
Line,
|
||||
LineChart,
|
||||
ResponsiveContainer,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from 'recharts';
|
||||
import { useXAxisProps, useYAxisProps } from '../common/axis';
|
||||
import { PreviousDiffIndicatorPure } from '../common/previous-diff-indicator';
|
||||
|
||||
type Props = {
|
||||
data: RouterOutputs['chart']['funnel'];
|
||||
data: {
|
||||
current: RouterOutputs['chart']['funnel']['current'][number];
|
||||
previous: RouterOutputs['chart']['funnel']['current'][number] | null;
|
||||
};
|
||||
};
|
||||
|
||||
export function Chart({
|
||||
const Metric = ({
|
||||
label,
|
||||
value,
|
||||
enhancer,
|
||||
className,
|
||||
}: {
|
||||
label: string;
|
||||
value: React.ReactNode;
|
||||
enhancer?: React.ReactNode;
|
||||
className?: string;
|
||||
}) => (
|
||||
<div className={cn('gap-1 justify-between flex-1 col', className)}>
|
||||
<div className="text-sm text-muted-foreground">{label}</div>
|
||||
<div className="row items-center gap-2 justify-between">
|
||||
<div className="font-mono font-semibold">{value}</div>
|
||||
{enhancer && <div>{enhancer}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export function Summary({ data }: { data: RouterOutputs['chart']['funnel'] }) {
|
||||
const number = useNumber();
|
||||
const highestConversion = data.current
|
||||
.slice(0)
|
||||
.sort((a, b) => b.lastStep.percent - a.lastStep.percent)[0];
|
||||
const highestCount = data.current
|
||||
.slice(0)
|
||||
.sort((a, b) => b.lastStep.count - a.lastStep.count)[0];
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{highestConversion && (
|
||||
<div className="card row items-center p-4 py-3">
|
||||
<Metric
|
||||
label="Highest conversion rate"
|
||||
value={
|
||||
<ChartName breakdowns={highestConversion.breakdowns ?? []} />
|
||||
}
|
||||
/>
|
||||
<span className="text-xl font-semibold font-mono">
|
||||
{number.formatWithUnit(
|
||||
highestConversion.lastStep.percent / 100,
|
||||
'%',
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{highestCount && (
|
||||
<div className="card row items-center p-4 py-3">
|
||||
<Metric
|
||||
label="Most conversions"
|
||||
value={<ChartName breakdowns={highestCount.breakdowns ?? []} />}
|
||||
/>
|
||||
<span className="text-xl font-semibold font-mono">
|
||||
{number.format(highestCount.lastStep.count)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChartName({
|
||||
breakdowns,
|
||||
className,
|
||||
}: { breakdowns: string[]; className?: string }) {
|
||||
return (
|
||||
<div className={cn('flex items-center gap-2 font-medium', className)}>
|
||||
{breakdowns.map((name, index) => {
|
||||
return (
|
||||
<>
|
||||
{index !== 0 && <ChevronRightIcon className="size-3" />}
|
||||
<span key={name}>{name}</span>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Tables({
|
||||
data: {
|
||||
current: { steps, totalSessions },
|
||||
current: { steps, mostDropoffsStep, lastStep, breakdowns },
|
||||
previous,
|
||||
},
|
||||
}: Props) {
|
||||
const number = useNumber();
|
||||
const { isEditMode } = useReportChartContext();
|
||||
const mostDropoffs = findMostDropoffs(steps);
|
||||
const lastStep = last(steps)!;
|
||||
const prevLastStep = previous?.steps ? last(previous.steps) : null;
|
||||
|
||||
const hasHeader = breakdowns.length > 0;
|
||||
return (
|
||||
<div className={cn('col gap-4 @container', isEditMode ? 'card' : '-m-4')}>
|
||||
<div
|
||||
className={cn(
|
||||
'border-b border-border bg-def-100',
|
||||
isEditMode && 'rounded-t-md',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-8 p-4 px-8">
|
||||
<MetricCardNumber
|
||||
className="flex-1"
|
||||
label="Converted"
|
||||
value={lastStep.count}
|
||||
<div className={cn('col @container divide-y divide-border card')}>
|
||||
{hasHeader && <ChartName breakdowns={breakdowns} className="p-4 py-3" />}
|
||||
<div className={cn('bg-def-100', !hasHeader && 'rounded-t-md')}>
|
||||
<div className="col max-md:divide-y md:row md:items-center md:divide-x divide-border">
|
||||
<Metric
|
||||
className="p-4 py-3"
|
||||
label="Conversion"
|
||||
value={number.formatWithUnit(lastStep?.percent / 100, '%')}
|
||||
enhancer={
|
||||
<PreviousDiffIndicator
|
||||
size="md"
|
||||
{...getPreviousMetric(lastStep.count, prevLastStep?.count)}
|
||||
/>
|
||||
previous && (
|
||||
<PreviousDiffIndicatorPure
|
||||
{...getPreviousMetric(
|
||||
lastStep?.percent,
|
||||
previous.lastStep?.percent,
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
<MetricCardNumber
|
||||
className="flex-1"
|
||||
label="Percent"
|
||||
value={`${totalSessions ? round((lastStep.count / totalSessions) * 100, 2) : 0}%`}
|
||||
<Metric
|
||||
className="p-4 py-3"
|
||||
label="Completed"
|
||||
value={number.format(lastStep?.count)}
|
||||
enhancer={
|
||||
<PreviousDiffIndicator
|
||||
size="md"
|
||||
{...getPreviousMetric(lastStep.count, prevLastStep?.count)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<MetricCardNumber
|
||||
className="flex-1"
|
||||
label="Most dropoffs"
|
||||
value={mostDropoffs.event.displayName}
|
||||
enhancer={
|
||||
<PreviousDiffIndicator
|
||||
size="md"
|
||||
{...getPreviousMetric(lastStep.count, prevLastStep?.count)}
|
||||
/>
|
||||
previous && (
|
||||
<PreviousDiffIndicatorPure
|
||||
{...getPreviousMetric(
|
||||
lastStep?.count,
|
||||
previous.lastStep?.count,
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
/>
|
||||
{!!mostDropoffsStep && (
|
||||
<Metric
|
||||
className="p-4 py-3"
|
||||
label="Most dropoffs after"
|
||||
value={mostDropoffsStep?.event?.displayName}
|
||||
enhancer={
|
||||
<Tooltiper
|
||||
tooltipClassName="max-w-xs"
|
||||
content={
|
||||
<span>
|
||||
<span className="font-semibold">
|
||||
{mostDropoffsStep?.dropoffCount}
|
||||
</span>{' '}
|
||||
dropped after this event. Improve this step and your
|
||||
conversion rate will likely increase.
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<InfoIcon className="size-3" />
|
||||
</Tooltiper>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col divide-y divide-def-200">
|
||||
{steps.map((step, index) => {
|
||||
const percent = (step.count / totalSessions) * 100;
|
||||
const isMostDropoffs = mostDropoffs.event.id === step.event.id;
|
||||
return (
|
||||
<div
|
||||
key={step.event.id}
|
||||
className="col gap-12 px-4 py-4 @2xl:flex-row @2xl:px-8"
|
||||
>
|
||||
<div className="relative flex flex-1 flex-col gap-2 pl-8">
|
||||
<ColorSquare className="absolute left-0 top-0.5">
|
||||
{alphabetIds[index]}
|
||||
</ColorSquare>
|
||||
<div className="font-semibold mt-1">
|
||||
{step.event.displayName}
|
||||
</div>
|
||||
<div className="grid grid-cols-4 max-w-lg gap-8 text-sm">
|
||||
<TooltipComplete
|
||||
disabled={!previous?.steps?.[index]}
|
||||
content={
|
||||
<div className="flex items-center gap-2">
|
||||
<span>
|
||||
Last period:{' '}
|
||||
<span className="font-mono">
|
||||
{number.format(
|
||||
previous?.steps?.[index]?.previousCount,
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
<PreviousDiffIndicator
|
||||
{...getPreviousMetric(
|
||||
step.previousCount,
|
||||
previous?.steps?.[index]?.previousCount,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="col gap-2">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Total:
|
||||
</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-lg font-mono">
|
||||
{number.format(step.previousCount)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</TooltipComplete>
|
||||
<TooltipComplete
|
||||
disabled={!previous?.steps?.[index]}
|
||||
content={
|
||||
<div className="flex items-center gap-2">
|
||||
<span>
|
||||
Last period:{' '}
|
||||
<span className="font-mono">
|
||||
{number.format(
|
||||
previous?.steps?.[index]?.dropoffCount,
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
<PreviousDiffIndicator
|
||||
inverted
|
||||
{...getPreviousMetric(
|
||||
step.dropoffCount,
|
||||
previous?.steps?.[index]?.dropoffCount,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="col gap-2">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Dropoff:
|
||||
</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<span
|
||||
className={cn(
|
||||
'flex items-center gap-1 text-lg font-mono',
|
||||
isMostDropoffs && 'text-rose-500',
|
||||
)}
|
||||
>
|
||||
{isMostDropoffs && <AlertCircleIcon size={14} />}
|
||||
{number.format(step.dropoffCount)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</TooltipComplete>
|
||||
<TooltipComplete
|
||||
disabled={!previous?.steps?.[index]}
|
||||
content={
|
||||
<div className="flex items-center gap-2">
|
||||
<span>
|
||||
Last period:{' '}
|
||||
<span className="font-mono">
|
||||
{number.format(previous?.steps?.[index]?.count)}
|
||||
</span>
|
||||
</span>
|
||||
<PreviousDiffIndicator
|
||||
{...getPreviousMetric(
|
||||
step.count,
|
||||
previous?.steps?.[index]?.count,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="col gap-2">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Current:
|
||||
</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-lg font-mono">
|
||||
{number.format(step.count)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</TooltipComplete>
|
||||
<TooltipComplete
|
||||
disabled={!previous?.steps?.[index]}
|
||||
content={
|
||||
<div className="flex items-center gap-2">
|
||||
<span>
|
||||
Last period:{' '}
|
||||
<span className="font-mono">
|
||||
{number.format(previous?.steps?.[index]?.count)}
|
||||
</span>
|
||||
</span>
|
||||
<PreviousDiffIndicator
|
||||
{...getPreviousMetric(
|
||||
step.count,
|
||||
previous?.steps?.[index]?.count,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="col gap-2">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Percent:
|
||||
</span>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="text-lg font-mono">
|
||||
{Number.isNaN(percent) ? 0 : round(percent, 2)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</TooltipComplete>
|
||||
</div>
|
||||
<WidgetTable
|
||||
data={steps}
|
||||
keyExtractor={(item) => item.event.id!}
|
||||
className={'text-sm @container'}
|
||||
columnClassName="px-2 group/row items-center"
|
||||
eachRow={(item, index) => {
|
||||
return (
|
||||
<div className="absolute inset-px !p-0">
|
||||
<div
|
||||
className={cn(
|
||||
'h-full bg-def-300 group-hover/row:bg-blue-200 dark:group-hover/row:bg-blue-900 transition-colors relative',
|
||||
item.isHighestDropoff && [
|
||||
'bg-red-500/20',
|
||||
'group-hover/row:bg-red-500/70',
|
||||
],
|
||||
index === steps.length - 1 && 'rounded-bl-sm',
|
||||
)}
|
||||
style={{
|
||||
width: `${item.percent}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Progress
|
||||
size="lg"
|
||||
className={cn(
|
||||
'w-full @2xl:w-1/4 text-white bg-def-200 mt-0.5 dark:text-black',
|
||||
)}
|
||||
innerClassName={cn(
|
||||
'bg-primary',
|
||||
step.event.id === mostDropoffs.event.id && 'bg-rose-500',
|
||||
)}
|
||||
value={percent}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
);
|
||||
}}
|
||||
columns={[
|
||||
{
|
||||
name: 'Event',
|
||||
render: (item, index) => (
|
||||
<div className="row items-center gap-2 row min-w-0 relative">
|
||||
<ColorSquare>{alphabetIds[index]}</ColorSquare>
|
||||
<span className="truncate">{item.event.displayName}</span>
|
||||
</div>
|
||||
),
|
||||
className: 'text-left font-mono font-semibold',
|
||||
},
|
||||
{
|
||||
name: 'Completed',
|
||||
render: (item) => number.format(item.count),
|
||||
className: 'text-right font-mono',
|
||||
},
|
||||
{
|
||||
name: 'Dropped after',
|
||||
render: (item) =>
|
||||
item.dropoffCount !== null && item.dropoffPercent !== null
|
||||
? number.format(item.dropoffCount)
|
||||
: null,
|
||||
className: 'text-right font-mono',
|
||||
},
|
||||
{
|
||||
name: 'Conversion',
|
||||
render: (item) => number.formatWithUnit(item.percent / 100, '%'),
|
||||
className: 'text-right font-mono font-semibold',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type RechartData = {
|
||||
name: string;
|
||||
[key: `step:percent:${number}`]: number | null;
|
||||
[key: `step:data:${number}`]:
|
||||
| (RouterOutputs['chart']['funnel']['current'][number] & {
|
||||
step: RouterOutputs['chart']['funnel']['current'][number]['steps'][number];
|
||||
})
|
||||
| null;
|
||||
[key: `prev_step:percent:${number}`]: number | null;
|
||||
[key: `prev_step:data:${number}`]:
|
||||
| (RouterOutputs['chart']['funnel']['current'][number] & {
|
||||
step: RouterOutputs['chart']['funnel']['current'][number]['steps'][number];
|
||||
})
|
||||
| null;
|
||||
};
|
||||
|
||||
const useRechartData = ({
|
||||
current,
|
||||
previous,
|
||||
}: RouterOutputs['chart']['funnel']): RechartData[] => {
|
||||
const firstFunnel = current[0];
|
||||
return (
|
||||
firstFunnel?.steps.map((step, stepIndex) => {
|
||||
return {
|
||||
name: step?.event.displayName ?? '',
|
||||
...current.reduce((acc, item, index) => {
|
||||
const diff = previous?.[index];
|
||||
return {
|
||||
...acc,
|
||||
[`step:percent:${index}`]: item.steps[stepIndex]?.percent ?? null,
|
||||
[`step:data:${index}`]:
|
||||
{
|
||||
...item,
|
||||
step: item.steps[stepIndex],
|
||||
} ?? null,
|
||||
[`prev_step:percent:${index}`]:
|
||||
diff?.steps[stepIndex]?.percent ?? null,
|
||||
[`prev_step:data:${index}`]: diff
|
||||
? {
|
||||
...diff,
|
||||
step: diff?.steps?.[stepIndex],
|
||||
}
|
||||
: null,
|
||||
};
|
||||
}, {}),
|
||||
};
|
||||
}) ?? []
|
||||
);
|
||||
};
|
||||
|
||||
export function Chart({ data }: { data: RouterOutputs['chart']['funnel'] }) {
|
||||
const rechartData = useRechartData(data);
|
||||
const xAxisProps = useXAxisProps();
|
||||
const yAxisProps = useYAxisProps();
|
||||
|
||||
return (
|
||||
<TooltipProvider data={data.current}>
|
||||
<div className="aspect-video max-h-[100px] w-full p-4 card pb-1">
|
||||
<ResponsiveContainer>
|
||||
<LineChart data={rechartData}>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
horizontal={true}
|
||||
vertical={true}
|
||||
className="stroke-border"
|
||||
/>
|
||||
<XAxis
|
||||
{...xAxisProps}
|
||||
dataKey="name"
|
||||
allowDuplicatedCategory={false}
|
||||
type={'category'}
|
||||
scale="auto"
|
||||
domain={undefined}
|
||||
interval="preserveStartEnd"
|
||||
tickSize={0}
|
||||
tickMargin={4}
|
||||
/>
|
||||
<YAxis {...yAxisProps} />
|
||||
{data.current.map((item, index) => (
|
||||
<Line
|
||||
stroke={getChartColor(index)}
|
||||
key={`step:percent:${item.id}`}
|
||||
dataKey={`step:percent:${index}`}
|
||||
type="linear"
|
||||
strokeWidth={2}
|
||||
/>
|
||||
))}
|
||||
<Tooltip />
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const { Tooltip, TooltipProvider } = createChartTooltip<
|
||||
RechartData,
|
||||
Record<string, unknown>
|
||||
>(({ data }) => {
|
||||
const number = useNumber();
|
||||
const variants = Object.keys(data).filter((key) =>
|
||||
key.startsWith('step:data:'),
|
||||
) as `step:data:${number}`[];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-between gap-8 text-muted-foreground">
|
||||
<div>{data.name}</div>
|
||||
</div>
|
||||
{variants.map((key, index) => {
|
||||
const variant = data[key];
|
||||
const prevVariant = data[`prev_${key}`];
|
||||
if (!variant?.step) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div className="row gap-2" key={key}>
|
||||
<div
|
||||
className="w-[3px] rounded-full"
|
||||
style={{ background: getChartColor(index) }}
|
||||
/>
|
||||
<div className="col flex-1 gap-1">
|
||||
<div className="flex items-center gap-1">
|
||||
<ChartName breakdowns={variant.breakdowns ?? []} />
|
||||
</div>
|
||||
<div className="flex justify-between gap-8 font-mono font-medium">
|
||||
<div className="col gap-1">
|
||||
<span>
|
||||
{number.formatWithUnit(variant.step.percent / 100, '%')}
|
||||
</span>
|
||||
<span className="text-muted-foreground">
|
||||
({number.format(variant.step.count)})
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<PreviousDiffIndicatorPure
|
||||
{...getPreviousMetric(
|
||||
variant.step.percent,
|
||||
prevVariant?.step.percent,
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { api } from '@/trpc/client';
|
||||
import { type RouterOutputs, api } from '@/trpc/client';
|
||||
|
||||
import type { IChartInput } from '@openpanel/validation';
|
||||
|
||||
@@ -9,7 +9,7 @@ import { ReportChartEmpty } from '../common/empty';
|
||||
import { ReportChartError } from '../common/error';
|
||||
import { ReportChartLoading } from '../common/loading';
|
||||
import { useReportChartContext } from '../context';
|
||||
import { Chart } from './chart';
|
||||
import { Chart, Summary, Tables } from './chart';
|
||||
|
||||
export function ReportFunnelChart() {
|
||||
const {
|
||||
@@ -22,6 +22,7 @@ export function ReportFunnelChart() {
|
||||
startDate,
|
||||
endDate,
|
||||
previous,
|
||||
breakdowns,
|
||||
},
|
||||
isLazyLoading,
|
||||
} = useReportChartContext();
|
||||
@@ -32,7 +33,7 @@ export function ReportFunnelChart() {
|
||||
projectId,
|
||||
interval: 'day',
|
||||
chartType: 'funnel',
|
||||
breakdowns: [],
|
||||
breakdowns,
|
||||
funnelWindow,
|
||||
funnelGroup,
|
||||
previous,
|
||||
@@ -41,7 +42,6 @@ export function ReportFunnelChart() {
|
||||
endDate,
|
||||
};
|
||||
const res = api.chart.funnel.useQuery(input, {
|
||||
keepPreviousData: true,
|
||||
enabled: !isLazyLoading,
|
||||
});
|
||||
|
||||
@@ -53,11 +53,25 @@ export function ReportFunnelChart() {
|
||||
return <Error />;
|
||||
}
|
||||
|
||||
if (res.data.current.steps.length === 0) {
|
||||
if (res.data.current.length === 0) {
|
||||
return <Empty />;
|
||||
}
|
||||
|
||||
return <Chart data={res.data} />;
|
||||
return (
|
||||
<div className="col gap-4">
|
||||
{res.data.current.length > 1 && <Summary data={res.data} />}
|
||||
<Chart data={res.data} />
|
||||
{res.data.current.map((item, index) => (
|
||||
<Tables
|
||||
key={item.id}
|
||||
data={{
|
||||
current: item,
|
||||
previous: res.data.previous?.[index] ?? null,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Loading() {
|
||||
|
||||
@@ -10,14 +10,14 @@ import { ReportSettings } from './ReportSettings';
|
||||
export function ReportSidebar() {
|
||||
const { chartType } = useSelector((state) => state.report);
|
||||
const showFormula = chartType !== 'funnel' && chartType !== 'retention';
|
||||
const showBreakdown = chartType !== 'funnel' && chartType !== 'retention';
|
||||
const showBreakdown = chartType !== 'retention';
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-8">
|
||||
<ReportEvents />
|
||||
<ReportSettings />
|
||||
{showFormula && <ReportFormula />}
|
||||
{showBreakdown && <ReportBreakdowns />}
|
||||
{showFormula && <ReportFormula />}
|
||||
<ReportSettings />
|
||||
</div>
|
||||
<SheetFooter>
|
||||
<SheetClose asChild>
|
||||
|
||||
@@ -2,14 +2,14 @@ import { cn } from '@/utils/cn';
|
||||
|
||||
export interface Props<T> {
|
||||
columns: {
|
||||
name: string;
|
||||
render: (item: T) => React.ReactNode;
|
||||
name: React.ReactNode;
|
||||
render: (item: T, index: number) => React.ReactNode;
|
||||
className?: string;
|
||||
}[];
|
||||
keyExtractor: (item: T) => string;
|
||||
data: T[];
|
||||
className?: string;
|
||||
eachRow?: (item: T) => React.ReactNode;
|
||||
eachRow?: (item: T, index: number) => React.ReactNode;
|
||||
columnClassName?: string;
|
||||
}
|
||||
|
||||
@@ -43,62 +43,55 @@ export function WidgetTable<T>({
|
||||
return (
|
||||
<div className="w-full overflow-x-auto">
|
||||
<div className={cn('w-full', className)}>
|
||||
<div
|
||||
className={cn(
|
||||
'border-b border-border text-right last:border-0 [&_div:first-child]:text-left grid',
|
||||
'[&>div]:p-2',
|
||||
columnClassName,
|
||||
)}
|
||||
style={{
|
||||
gridTemplateColumns:
|
||||
columns.length > 1
|
||||
? `1fr ${columns
|
||||
.slice(1)
|
||||
.map((col) => 'auto')
|
||||
.join(' ')}`
|
||||
: '1fr',
|
||||
}}
|
||||
>
|
||||
{columns.map((column) => (
|
||||
<div
|
||||
key={column.name}
|
||||
className={cn(column.className, 'font-medium font-sans text-sm')}
|
||||
>
|
||||
{column.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="col">
|
||||
{data.map((item) => (
|
||||
<div
|
||||
key={keyExtractor(item)}
|
||||
<table className="w-full table-fixed">
|
||||
<thead>
|
||||
<tr
|
||||
className={cn(
|
||||
'border-b border-border text-right last:border-0 [&_div:first-child]:text-left grid relative',
|
||||
'[&>div]:p-2',
|
||||
'border-b border-border text-right last:border-0 [&_td:first-child]:text-left',
|
||||
'[&>td]:p-2',
|
||||
columnClassName,
|
||||
)}
|
||||
style={{
|
||||
gridTemplateColumns:
|
||||
columns.length > 1
|
||||
? `1fr ${columns
|
||||
.slice(1)
|
||||
.map((col) => 'auto')
|
||||
.join(' ')}`
|
||||
: '1fr',
|
||||
}}
|
||||
>
|
||||
{eachRow?.(item)}
|
||||
{columns.map((column) => (
|
||||
<div
|
||||
key={column.name}
|
||||
className={cn(column.className, 'relative h-8')}
|
||||
<th
|
||||
key={column.name?.toString()}
|
||||
className={cn(
|
||||
column.className,
|
||||
'font-medium font-sans text-sm p-2 whitespace-nowrap',
|
||||
)}
|
||||
>
|
||||
{column.render(item)}
|
||||
</div>
|
||||
{column.name}
|
||||
</th>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((item, index) => (
|
||||
<tr
|
||||
key={keyExtractor(item)}
|
||||
className={cn(
|
||||
'h-8 border-b border-border text-right last:border-0 [&_td:first-child]:text-left relative',
|
||||
'[&>td]:p-2',
|
||||
columnClassName,
|
||||
)}
|
||||
>
|
||||
{columns.map((column, columnIndex) => (
|
||||
<td
|
||||
key={column.name?.toString()}
|
||||
className={cn(
|
||||
'h-8',
|
||||
columnIndex !== 0 && 'relative z-5',
|
||||
column.className,
|
||||
)}
|
||||
>
|
||||
{columnIndex === 0 && eachRow?.(item, index)}
|
||||
{column.render(item, index)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user