feature(dashboard): add new retention chart type

apps/dashboard/src/components/report-chart/common/axis.tsx

@@ -25,9 +25,11 @@ export function getYAxisWidth(value: string | undefined | null) {
 export const useYAxisProps = ({
   data,
   hide,
+  tickFormatter,
 }: {
   data: number[];
   hide?: boolean;
+  tickFormatter?: (value: number) => string;
 }) => {
   const [width, setWidth] = useState(24);
   const setWidthDebounced = useDebounceFn(setWidth, 100);
@@ -41,7 +43,7 @@ export const useYAxisProps = ({
     tickLine: false,
     allowDecimals: false,
     tickFormatter: (value: number) => {
-      const tick = number.short(value);
+      const tick = tickFormatter ? tickFormatter(value) : number.short(value);
       const newWidth = getYAxisWidth(tick);
       ref.current.push(newWidth);
       setWidthDebounced(Math.max(...ref.current));

apps/dashboard/src/components/report-chart/common/empty.tsx

@@ -1,13 +1,62 @@
-import { BirdIcon } from 'lucide-react';
+import { cn } from '@/utils/cn';
+import {
+  ArrowUpLeftIcon,
+  BirdIcon,
+  CornerLeftUpIcon,
+  Forklift,
+  ForkliftIcon,
+} from 'lucide-react';
+import { useReportChartContext } from '../context';
+
+export function ReportChartEmpty({
+  title = 'No data',
+  children,
+}: {
+  title?: string;
+  children?: React.ReactNode;
+}) {
+  const {
+    isEditMode,
+    report: { events },
+  } = useReportChartContext();
+
+  if (events.length === 0) {
+    return (
+      <div className="card p-4 center-center h-full w-full flex-col relative">
+        <div className="row gap-2 items-end absolute top-4 left-4">
+          <CornerLeftUpIcon
+            strokeWidth={1.2}
+            className="size-8 animate-pulse text-muted-foreground"
+          />
+          <div className="text-muted-foreground">Start here</div>
+        </div>
+        <ForkliftIcon
+          strokeWidth={1.2}
+          className="mb-4 size-1/3 animate-pulse text-muted-foreground"
+        />
+        <div className="font-medium text-muted-foreground">
+          Ready when you're
+        </div>
+        <div className="text-muted-foreground mt-2">
+          Pick atleast one event to start visualize
+        </div>
+      </div>
+    );
+  }
 
-export function ReportChartEmpty() {
   return (
-    <div className="center-center h-full w-full flex-col">
+    <div
+      className={cn(
+        'center-center h-full w-full flex-col',
+        isEditMode && 'card p-4',
+      )}
+    >
       <BirdIcon
         strokeWidth={1.2}
-        className="mb-4 size-10 animate-pulse text-muted-foreground"
+        className="mb-4 size-1/3 animate-pulse text-muted-foreground"
       />
-      <div className="text-sm font-medium text-muted-foreground">No data</div>
+      <div className="font-medium text-muted-foreground">{title}</div>
+      <div className="text-muted-foreground mt-2">{children}</div>
     </div>
   );
 }

apps/dashboard/src/components/report-chart/common/error.tsx

@@ -1,8 +1,16 @@
+import { cn } from '@/utils/cn';
 import { ServerCrashIcon } from 'lucide-react';
+import { useReportChartContext } from '../context';
 
 export function ReportChartError() {
+  const { isEditMode } = useReportChartContext();
   return (
-    <div className="center-center h-full w-full flex-col">
+    <div
+      className={cn(
+        'center-center h-full w-full flex-col',
+        isEditMode && 'card p-4',
+      )}
+    >
       <ServerCrashIcon
         strokeWidth={1.2}
         className="mb-4 size-10 animate-pulse text-muted-foreground"

apps/dashboard/src/components/report-chart/common/loading.tsx

@@ -1,3 +1,88 @@
-export function ReportChartLoading() {
-  return <div className="h-full w-full animate-pulse rounded bg-def-100" />;
+import { cn } from '@/utils/cn';
+import { AnimatePresence, motion } from 'framer-motion';
+import {
+  ActivityIcon,
+  AlarmClockIcon,
+  BarChart2Icon,
+  BarChartIcon,
+  ChartLineIcon,
+  ChartPieIcon,
+  LineChartIcon,
+  MessagesSquareIcon,
+  PieChartIcon,
+  TrendingUpIcon,
+} from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { useReportChartContext } from '../context';
+
+const icons = [
+  { Icon: ActivityIcon, color: 'text-chart-6' },
+  { Icon: BarChart2Icon, color: 'text-chart-9' },
+  { Icon: ChartLineIcon, color: 'text-chart-0' },
+  { Icon: AlarmClockIcon, color: 'text-chart-1' },
+  { Icon: ChartPieIcon, color: 'text-chart-2' },
+  { Icon: MessagesSquareIcon, color: 'text-chart-3' },
+  { Icon: BarChartIcon, color: 'text-chart-4' },
+  { Icon: TrendingUpIcon, color: 'text-chart-5' },
+  { Icon: PieChartIcon, color: 'text-chart-7' },
+  { Icon: LineChartIcon, color: 'text-chart-8' },
+];
+
+export function ReportChartLoading({ things }: { things?: boolean }) {
+  const { isEditMode } = useReportChartContext();
+  const [currentIconIndex, setCurrentIconIndex] = React.useState(0);
+  const [isSlow, setSlow] = useState(false);
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIconIndex((prevIndex) => (prevIndex + 1) % icons.length);
+    }, 1500);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    if (currentIconIndex >= 3) {
+      setSlow(true);
+    }
+  }, [currentIconIndex]);
+
+  const { Icon, color } = icons[currentIconIndex]!;
+
+  return (
+    <div className={cn('h-full w-full', isEditMode && 'card p-4')}>
+      <div
+        className={
+          'relative h-full w-full rounded bg-def-100 overflow-hidden center-center flex'
+        }
+      >
+        <AnimatePresence initial={false} mode="wait">
+          <motion.div
+            key={currentIconIndex}
+            initial={{ x: '100%', opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            exit={{ x: '-100%', opacity: 0 }}
+            transition={{
+              type: 'spring',
+              stiffness: 500,
+              damping: 30,
+              duration: 0.5,
+            }}
+            className={cn('absolute size-1/3', color)}
+          >
+            <Icon className="w-full h-full" />
+          </motion.div>
+        </AnimatePresence>
+
+        <div
+          className={cn(
+            'absolute top-3/4 opacity-0 transition-opacity text-muted-foreground',
+            isSlow && 'opacity-100',
+          )}
+        >
+          Stay calm, its coming 🙄
+        </div>
+      </div>
+    </div>
+  );
 }

apps/dashboard/src/components/report-chart/common/report-table.tsx

@@ -19,6 +19,7 @@ import type { IChartData } from '@/trpc/client';
 import { getChartColor } from '@/utils/theme';
 import type * as React from 'react';
 
+import { logDependencies } from 'mathjs';
 import { PreviousDiffIndicator } from './previous-diff-indicator';
 import { SerieName } from './serie-name';
 
@@ -80,7 +81,7 @@ export function ReportTable({
               );
 
               return (
-                <TableRow key={serie.id}>
+                <TableRow key={`${serie.id}-1`}>
                   {serie.names.map((name, nameIndex) => {
                     return (
                       <TableCell className="h-10" key={name}>
@@ -140,7 +141,7 @@ export function ReportTable({
             <TableBody>
               {paginate(data.series).map((serie) => {
                 return (
-                  <TableRow key={serie.id}>
+                  <TableRow key={`${serie.id}-2`}>
                     <TableCell className="h-10">
                       <div className="flex items-center gap-2 font-medium">
                         {number.format(serie.metrics.sum)}

apps/dashboard/src/components/report-chart/funnel/chart.tsx

@@ -3,10 +3,8 @@
 import { ColorSquare } from '@/components/color-square';
 import { TooltipComplete } from '@/components/tooltip-complete';
 import { Progress } from '@/components/ui/progress';
-import { Widget, WidgetBody } from '@/components/widget';
 import type { RouterOutputs } from '@/trpc/client';
 import { cn } from '@/utils/cn';
-import { getChartColor } from '@/utils/theme';
 import { AlertCircleIcon } from 'lucide-react';
 import { last } from 'ramda';
 
@@ -70,7 +68,7 @@ export function Chart({
             />
             <MetricCardNumber
               label="Percent"
-              value={`${round((lastStep.count / totalSessions) * 100, 1)}%`}
+              value={`${totalSessions ? round((lastStep.count / totalSessions) * 100, 1) : 0}%`}
               enhancer={
                 <PreviousDiffIndicator
                   size="lg"

apps/dashboard/src/components/report-chart/index.tsx

@@ -14,6 +14,7 @@ import { ReportLineChart } from './line';
 import { ReportMapChart } from './map';
 import { ReportMetricChart } from './metric';
 import { ReportPieChart } from './pie';
+import { ReportRetentionChart } from './retention';
 
 export function ReportChart(props: ReportChartProps) {
   const ref = useRef<HTMLDivElement>(null);
@@ -48,6 +49,8 @@ export function ReportChart(props: ReportChartProps) {
         return <ReportMetricChart />;
       case 'funnel':
         return <ReportFunnelChart />;
+      case 'retention':
+        return <ReportRetentionChart />;
       default:
         return null;
     }

apps/dashboard/src/components/report-chart/line/index.tsx

@@ -1,5 +1,6 @@
 import { api } from '@/trpc/client';
 
+import { cn } from '@/utils/cn';
 import { AspectContainer } from '../aspect-container';
 import { ReportChartEmpty } from '../common/empty';
 import { ReportChartError } from '../common/error';

apps/dashboard/src/components/report-chart/retention/chart.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import type { RouterOutputs } from '@/trpc/client';
+import { cn } from '@/utils/cn';
+import { getChartColor } from '@/utils/theme';
+import {
+  Area,
+  CartesianGrid,
+  ComposedChart,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+import { average, round } from '@openpanel/common';
+import { fix } from 'mathjs';
+import { useXAxisProps, useYAxisProps } from '../common/axis';
+import { useReportChartContext } from '../context';
+import { RetentionTooltip } from './tooltip';
+
+interface Props {
+  data: RouterOutputs['chart']['cohort'];
+}
+
+export function Chart({ data }: Props) {
+  const {
+    report: { interval },
+    isEditMode,
+    options: { hideXAxis, hideYAxis },
+  } = useReportChartContext();
+
+  const xAxisProps = useXAxisProps({ interval, hide: hideXAxis });
+  const yAxisProps = useYAxisProps({
+    data: [100],
+    hide: hideYAxis,
+    tickFormatter: (value) => `${value}%`,
+  });
+  const averageRow = data[0];
+  const averageRetentionRate = average(averageRow?.percentages || [], true);
+  const rechartData = averageRow?.percentages.map((item, index, list) => ({
+    days: index,
+    percentage: item,
+    value: averageRow.values[index],
+    sum: averageRow.sum,
+  }));
+
+  return (
+    <>
+      <div className={cn('h-full w-full', isEditMode && 'card p-4')}>
+        <ResponsiveContainer>
+          <ComposedChart data={rechartData}>
+            <CartesianGrid
+              strokeDasharray="3 3"
+              horizontal={true}
+              vertical={true}
+              className="stroke-border"
+            />
+            <YAxis {...yAxisProps} dataKey="retentionRate" domain={[0, 100]} />
+            <XAxis
+              {...xAxisProps}
+              dataKey="days"
+              allowDuplicatedCategory
+              scale="linear"
+              tickFormatter={(value) => value.toString()}
+              tickCount={31}
+              interval={0}
+            />
+            <Tooltip content={<RetentionTooltip />} />
+            <defs>
+              <linearGradient id={'color'} x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="0%"
+                  stopColor={getChartColor(0)}
+                  stopOpacity={0.8}
+                />
+                <stop
+                  offset="100%"
+                  stopColor={getChartColor(0)}
+                  stopOpacity={0.1}
+                />
+              </linearGradient>
+            </defs>
+            <ReferenceLine
+              y={averageRetentionRate}
+              stroke={getChartColor(1)}
+              strokeWidth={2}
+              strokeDasharray="3 3"
+              strokeOpacity={0.5}
+              strokeLinecap="round"
+              label={{
+                value: `Average (${round(averageRetentionRate, 2)} %)`,
+                fill: getChartColor(1),
+                position: 'insideBottomRight',
+                fontSize: 12,
+              }}
+            />
+            <Area
+              dataKey="percentage"
+              fill={'url(#color)'}
+              type={'monotone'}
+              isAnimationActive={false}
+              strokeWidth={2}
+              stroke={getChartColor(0)}
+              fillOpacity={0.1}
+            />
+          </ComposedChart>
+        </ResponsiveContainer>
+      </div>
+    </>
+  );
+}

apps/dashboard/src/components/report-chart/retention/index.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { api } from '@/trpc/client';
+
+import { AspectContainer } from '../aspect-container';
+import { ReportChartEmpty } from '../common/empty';
+import { ReportChartError } from '../common/error';
+import { ReportChartLoading } from '../common/loading';
+import { useReportChartContext } from '../context';
+import { Chart } from './chart';
+import CohortTable from './table';
+
+export function ReportRetentionChart() {
+  const {
+    report: {
+      events,
+      range,
+      projectId,
+      startDate,
+      endDate,
+      criteria,
+      interval,
+    },
+    isLazyLoading,
+  } = useReportChartContext();
+  const firstEvent = (events[0]?.filters[0]?.value ?? []).map(String);
+  const secondEvent = (events[1]?.filters[0]?.value ?? []).map(String);
+  const isEnabled = firstEvent.length > 0 && secondEvent.length > 0;
+  const res = api.chart.cohort.useQuery(
+    {
+      firstEvent,
+      secondEvent,
+      projectId,
+      range,
+      startDate,
+      endDate,
+      criteria,
+      interval,
+    },
+    {
+      enabled: isEnabled,
+    },
+  );
+
+  if (!isEnabled) {
+    return <Disabled />;
+  }
+
+  if (isLazyLoading || res.isLoading) {
+    return <Loading />;
+  }
+
+  if (res.isError) {
+    return <Error />;
+  }
+
+  if (res.data.length === 0) {
+    return <Empty />;
+  }
+
+  return (
+    <div className="col gap-4">
+      <AspectContainer>
+        <Chart data={res.data} />
+      </AspectContainer>
+      <CohortTable data={res.data} />
+    </div>
+  );
+}
+
+function Loading() {
+  return (
+    <AspectContainer>
+      <ReportChartLoading />
+    </AspectContainer>
+  );
+}
+
+function Error() {
+  return (
+    <AspectContainer>
+      <ReportChartError />
+    </AspectContainer>
+  );
+}
+
+function Empty() {
+  return (
+    <AspectContainer>
+      <ReportChartEmpty />
+    </AspectContainer>
+  );
+}
+
+function Disabled() {
+  return (
+    <AspectContainer>
+      <ReportChartEmpty title="Select 2 events">
+        We need two events to determine the retention rate.
+      </ReportChartEmpty>
+    </AspectContainer>
+  );
+}

apps/dashboard/src/components/report-chart/retention/table.tsx

@@ -0,0 +1,136 @@
+import { ProjectLink } from '@/components/links';
+import { Tooltiper } from '@/components/ui/tooltip';
+import { useNumber } from '@/hooks/useNumerFormatter';
+import type { RouterOutputs } from '@/trpc/client';
+import { cn } from '@/utils/cn';
+import { max, min, sum } from '@openpanel/common';
+import { intervals } from '@openpanel/constants';
+import type React from 'react';
+import { useReportChartContext } from '../context';
+
+type CohortData = RouterOutputs['chart']['cohort'];
+
+type CohortTableProps = {
+  data: CohortData;
+};
+
+const CohortTable: React.FC<CohortTableProps> = ({ data }) => {
+  const {
+    report: { unit, interval },
+  } = useReportChartContext();
+  const isPercentage = unit === '%';
+  const number = useNumber();
+  const highestValue = max(data.map((row) => max(row.values)));
+  const lowestValue = min(data.map((row) => min(row.values)));
+  const rowWithHigestSum = data.find(
+    (row) => row.sum === max(data.map((row) => row.sum)),
+  );
+
+  const getBackground = (value: number | undefined) => {
+    if (!value)
+      return {
+        backgroundClassName: '',
+        opacity: 0,
+      };
+
+    const percentage = isPercentage
+      ? value / 100
+      : (value - lowestValue) / (highestValue - lowestValue);
+    const opacity = Math.max(0.05, percentage);
+
+    return {
+      backgroundClassName: 'bg-highlight dark:bg-emerald-700',
+      opacity,
+    };
+  };
+
+  const thClassName =
+    'h-10 align-top pt-3 whitespace-nowrap font-semibold text-muted-foreground';
+
+  return (
+    <div className="relative card overflow-hidden">
+      <div
+        className={'h-10 absolute left-0 right-0 top-px bg-def-100 border-b'}
+      />
+      <div className="w-full overflow-x-auto hide-scrollbar">
+        <div className="min-w-full relative">
+          <table className="w-full table-auto whitespace-nowrap">
+            <thead>
+              <tr>
+                <th className={cn(thClassName, 'sticky left-0 z-10')}>
+                  <div className="bg-def-100">
+                    <div className="h-10 center-center -mt-3">Date</div>
+                  </div>
+                </th>
+                <th className={cn(thClassName, 'pr-1')}>Total profiles</th>
+                {data[0]?.values.map((column, index) => (
+                  <th
+                    key={index.toString()}
+                    className={cn(thClassName, 'capitalize')}
+                  >
+                    {index === 0 ? `< ${interval} 1` : `${interval} ${index}`}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {data.map((row) => {
+                const values = isPercentage ? row.percentages : row.values;
+                return (
+                  <tr key={row.cohort_interval}>
+                    <td className="sticky left-0 bg-card z-10 w-36 p-0">
+                      <div className="h-10 center-center font-medium text-muted-foreground px-4">
+                        {row.cohort_interval}
+                      </div>
+                    </td>
+                    <td className="p-0 min-w-12">
+                      <div className={cn('font-mono rounded px-3 font-medium')}>
+                        {number.format(row?.sum)}
+                        {row.cohort_interval ===
+                          rowWithHigestSum?.cohort_interval && ' 🚀'}
+                      </div>
+                    </td>
+                    {values.map((value, index) => {
+                      const { opacity, backgroundClassName } =
+                        getBackground(value);
+                      return (
+                        <td
+                          key={row.cohort_interval + index.toString()}
+                          className="p-0 min-w-24"
+                        >
+                          <div
+                            className={cn(
+                              'h-10 center-center font-mono hover:shadow-[inset_0_0_0_2px_rgb(255,255,255)] relative',
+                              opacity > 0.7 &&
+                                'text-white [text-shadow:_0_0_3px_rgb(0_0_0_/_20%)]',
+                            )}
+                          >
+                            <div
+                              className={cn(
+                                backgroundClassName,
+                                'w-full h-full inset-0 absolute',
+                              )}
+                              style={{
+                                opacity,
+                              }}
+                            />
+                            <div className="relative">
+                              {number.formatWithUnit(value, unit)}
+                              {value === highestValue && ' 🚀'}
+                            </div>
+                          </div>
+                        </td>
+                      );
+                    })}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CohortTable;

apps/dashboard/src/components/report-chart/retention/tooltip.tsx

@@ -0,0 +1,47 @@
+import { useNumber } from '@/hooks/useNumerFormatter';
+import type { RouterOutputs } from '@/trpc/client';
+import { useReportChartContext } from '../context';
+
+type Props = {
+  active?: boolean;
+  payload?: Array<{
+    payload: any;
+  }>;
+};
+export function RetentionTooltip({ active, payload }: Props) {
+  const {
+    report: { interval },
+  } = useReportChartContext();
+  const number = useNumber();
+  if (!active) {
+    return null;
+  }
+
+  if (!payload?.[0]) {
+    return null;
+  }
+
+  const { days, percentage, value, sum } = payload[0].payload;
+
+  return (
+    <div className="flex min-w-[200px] flex-col gap-2 rounded-xl border bg-card p-3 shadow-xl">
+      <h3 className="font-semibold capitalize">
+        {interval} {days}
+      </h3>
+      <div className="flex justify-between">
+        <span className="text-muted-foreground">Retention Rate:</span>
+        <span className="font-medium">
+          {number.formatWithUnit(percentage, '%')}
+        </span>
+      </div>
+      <div className="flex justify-between">
+        <span className="text-muted-foreground">Retained Users:</span>
+        <span className="font-medium">{number.format(value)}</span>
+      </div>
+      <div className="flex justify-between">
+        <span className="text-muted-foreground">Total Users:</span>
+        <span className="font-medium">{number.format(sum)}</span>
+      </div>
+    </div>
+  );
+}