feature(dashboard): add new retention chart type

2024-10-15 20:40:24 +02:00
parent e2065da16e
commit f977c5454a
53 changed files with 1463 additions and 364 deletions
--- a/apps/dashboard/src/components/report-chart/retention/table.tsx
+++ b/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;