feature(dashboard): add conversion rate graph

2025-03-28 09:21:10 +01:00
parent be358ea886
commit 8a21fadc0d
23 changed files with 807 additions and 29 deletions
--- a/apps/dashboard/src/components/report-chart/conversion/chart.tsx
+++ b/apps/dashboard/src/components/report-chart/conversion/chart.tsx
@@ -0,0 +1,183 @@
+'use client';
+
+import type { RouterOutputs } from '@/trpc/client';
+import { api } from '@/trpc/client';
+import { cn } from '@/utils/cn';
+import { getChartColor } from '@/utils/theme';
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ReferenceLine,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+import { createChartTooltip } from '@/components/charts/chart-tooltip';
+import { useFormatDateInterval } from '@/hooks/useFormatDateInterval';
+import { useNumber } from '@/hooks/useNumerFormatter';
+import { getPreviousMetric } from '@openpanel/common';
+import type { IInterval } from '@openpanel/validation';
+import { Fragment } from 'react';
+import { useXAxisProps, useYAxisProps } from '../common/axis';
+import { PreviousDiffIndicatorPure } from '../common/previous-diff-indicator';
+import { useReportChartContext } from '../context';
+
+interface Props {
+  data: RouterOutputs['chart']['conversion'];
+}
+
+export function Chart({ data }: Props) {
+  const {
+    report: {
+      previous,
+      interval,
+      projectId,
+      startDate,
+      endDate,
+      range,
+      lineType,
+      events,
+    },
+    isEditMode,
+    options: { hideXAxis, hideYAxis, maxDomain },
+  } = useReportChartContext();
+  const dataLength = data.current.length || 0;
+  const references = api.reference.getChartReferences.useQuery(
+    {
+      projectId,
+      startDate,
+      endDate,
+      range,
+    },
+    {
+      staleTime: 1000 * 60 * 10,
+    },
+  );
+
+  const xAxisProps = useXAxisProps({ interval, hide: hideXAxis });
+  const yAxisProps = useYAxisProps({
+    hide: hideYAxis,
+  });
+
+  return (
+    <TooltipProvider conversion={data} interval={interval}>
+      <div className={cn('h-full w-full', isEditMode && 'card p-4')}>
+        <ResponsiveContainer>
+          <LineChart>
+            <CartesianGrid
+              strokeDasharray="3 3"
+              horizontal={true}
+              vertical={false}
+              className="stroke-border"
+            />
+            {references.data?.map((ref) => (
+              <ReferenceLine
+                key={ref.id}
+                x={ref.date.getTime()}
+                stroke={'#94a3b8'}
+                strokeDasharray={'3 3'}
+                label={{
+                  value: ref.title,
+                  position: 'centerTop',
+                  fill: '#334155',
+                  fontSize: 12,
+                }}
+                fontSize={10}
+              />
+            ))}
+            <YAxis {...yAxisProps} domain={[0, 100]} />
+            <XAxis {...xAxisProps} allowDuplicatedCategory={false} />
+            <Tooltip />
+            {data.current.map((serie, index) => {
+              const color = getChartColor(index);
+              return (
+                <Fragment key={serie.id}>
+                  <Line
+                    data={serie.data}
+                    dot={false}
+                    name={`rate_${index}`}
+                    dataKey="rate"
+                    stroke={color}
+                    type={lineType}
+                    isAnimationActive={false}
+                    strokeWidth={2}
+                  />
+                  <Line
+                    data={serie.data}
+                    dot={false}
+                    name={`prev_rate_${index}`}
+                    dataKey="previousRate"
+                    stroke={color}
+                    type={lineType}
+                    isAnimationActive={false}
+                    strokeWidth={1}
+                    strokeOpacity={0.5}
+                  />
+                </Fragment>
+              );
+            })}
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    </TooltipProvider>
+  );
+}
+
+const { Tooltip, TooltipProvider } = createChartTooltip<
+  NonNullable<
+    RouterOutputs['chart']['conversion']['current'][number]
+  >['data'][number],
+  {
+    conversion: RouterOutputs['chart']['conversion'];
+    interval: IInterval;
+  }
+>(({ data, context }) => {
+  const { date } = data[0]!;
+  const formatDate = useFormatDateInterval(context.interval);
+  const number = useNumber();
+  return (
+    <>
+      <div className="flex justify-between gap-8 text-muted-foreground">
+        <div>{formatDate(date)}</div>
+      </div>
+      {context.conversion.current.map((serie, index) => {
+        const item = data[index];
+        if (!item) {
+          return null;
+        }
+        const prevItem =
+          context.conversion?.previous?.[item.serieIndex]?.data[item.index];
+
+        const title =
+          serie.breakdowns.length > 0
+            ? (serie.breakdowns.join(',') ?? 'Not set')
+            : 'Conversion';
+        return (
+          <div className="row gap-2" key={serie.id}>
+            <div
+              className="w-[3px] rounded-full"
+              style={{ background: getChartColor(index) }}
+            />
+            <div className="col flex-1 gap-1">
+              <div className="flex items-center gap-1">{title}</div>
+              <div className="flex justify-between gap-8 font-mono font-medium">
+                <div className="col gap-1">
+                  <span>{number.formatWithUnit(item.rate / 100, '%')}</span>
+                  <span className="text-muted-foreground">
+                    ({number.format(item.total)})
+                  </span>
+                </div>
+
+                <PreviousDiffIndicatorPure
+                  {...getPreviousMetric(item.rate, prevItem?.rate)}
+                />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+});