Updated Funnel report component.

src/app/(main)/reports/funnel/FunnelChart.module.css

@@ -1,3 +1,84 @@
-.loading {
-  height: 300px;
+.chart {
+  display: grid;
+}
+
+.num {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  width: 50px;
+  height: 50px;
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--base800);
+  background: var(--base100);
+  z-index: 1;
+}
+
+.step {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: 30px;
+  position: relative;
+  padding-bottom: 60px;
+}
+
+.step::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 25px;
+  bottom: 0;
+  width: 2px;
+  background-color: var(--base100);
+}
+
+.card {
+  display: grid;
+  gap: 20px;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  font-weight: 700;
+  gap: 20px;
+}
+
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  background: var(--base900);
+  height: 50px;
+  border-radius: 5px;
+  overflow: hidden;
+  position: relative;
+}
+
+.label {
+  color: var(--base700);
+}
+
+.value {
+  color: var(--base50);
+  margin-right: 20px;
+}
+
+.track {
+  background-color: var(--base100);
+  border-radius: 5px;
+}
+
+.info {
+  display: flex;
+  justify-content: space-between;
+  text-transform: lowercase;
+}
+
+.item {
+  padding: 6px 10px;
+  border-radius: 4px;
+  border: 1px solid var(--base300);
 }

src/app/(main)/reports/funnel/FunnelChart.tsx

@@ -1,83 +1,57 @@
-import { JSX, useCallback, useContext, useMemo } from 'react';
-import { Loading, StatusLight } from 'react-basics';
-import { useMessages, useTheme } from 'components/hooks';
-import BarChart from 'components/metrics/BarChart';
-import { formatLongNumber } from 'lib/format';
+import { useContext } from 'react';
+import classNames from 'classnames';
+import { useMessages } from 'components/hooks';
 import { ReportContext } from '../[reportId]/Report';
 import styles from './FunnelChart.module.css';
+import { formatLongNumber } from 'lib/format';
 
 export interface FunnelChartProps {
   className?: string;
   isLoading?: boolean;
 }
 
-export function FunnelChart({ className, isLoading }: FunnelChartProps) {
+export function FunnelChart({ className }: FunnelChartProps) {
   const { report } = useContext(ReportContext);
   const { formatMessage, labels } = useMessages();
-  const { colors } = useTheme();
 
-  const { parameters, data } = report || {};
-
-  const renderXLabel = useCallback(
-    (label: string, index: number) => {
-      return parameters.urls[index];
-    },
-    [parameters],
-  );
-
-  const renderTooltipPopup = useCallback(
-    (
-      setTooltipPopup: (arg0: JSX.Element) => void,
-      model: { tooltip: { opacity: any; labelColors: any; dataPoints: any } },
-    ) => {
-      const { opacity, labelColors, dataPoints } = model.tooltip;
-
-      if (!dataPoints?.length || !opacity) {
-        setTooltipPopup(null);
-        return;
-      }
-
-      setTooltipPopup(
-        <>
-          <div>
-            {formatLongNumber(dataPoints[0].raw.y)} {formatMessage(labels.visitors)}
-          </div>
-          <div>
-            <StatusLight color={labelColors?.[0]?.backgroundColor}>
-              {formatLongNumber(dataPoints[0].raw.z)}% {formatMessage(labels.dropoff)}
-            </StatusLight>
-          </div>
-        </>,
-      );
-    },
-    [],
-  );
-
-  const datasets = useMemo(() => {
-    return [
-      {
-        label: formatMessage(labels.uniqueVisitors),
-        data: data,
-        borderWidth: 1,
-        ...colors.chart.visitors,
-      },
-    ];
-  }, [data, colors, formatMessage, labels]);
-
-  if (isLoading) {
-    return <Loading icon="dots" className={styles.loading} />;
-  }
+  const { data } = report || {};
 
   return (
-    <BarChart
-      className={className}
-      datasets={datasets}
-      unit="day"
-      isLoading={isLoading}
-      renderXLabel={renderXLabel}
-      renderTooltipPopup={renderTooltipPopup}
-      XAxisType="category"
-    />
+    <div className={classNames(styles.chart, className)}>
+      {data?.map(({ url, visitors, dropped, dropoff, remaining }, index: number) => {
+        return (
+          <div key={url} className={styles.step}>
+            <div className={styles.num}>{index + 1}</div>
+            <div className={styles.card}>
+              <div className={styles.header}>
+                <span className={styles.label}>{formatMessage(labels.viewedPage)}:</span>
+                <span className={styles.item}>{url}</span>
+              </div>
+              <div className={styles.track}>
+                <div className={styles.bar} style={{ width: `${remaining * 100}%` }}>
+                  <span className={styles.value}>
+                    {remaining > 0.1 && `${(remaining * 100).toFixed(2)}%`}
+                  </span>
+                </div>
+              </div>
+              <div className={styles.info}>
+                <div>
+                  <b>{formatLongNumber(visitors)}</b>
+                  <span> {formatMessage(labels.visitors)}</span>
+                  <span> ({(remaining * 100).toFixed(2)}%)</span>
+                </div>
+                {dropoff > 0 && (
+                  <div>
+                    <b>{formatLongNumber(dropped)}</b> {formatMessage(labels.visitorsDroppedOff)} (
+                    {(dropoff * 100).toFixed(2)}%)
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
   );
 }
 

src/app/(main)/reports/funnel/FunnelReport.tsx

@@ -1,5 +1,4 @@
 import FunnelChart from './FunnelChart';
-import FunnelTable from './FunnelTable';
 import FunnelParameters from './FunnelParameters';
 import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
@@ -22,7 +21,6 @@ export default function FunnelReport({ reportId }: { reportId?: string }) {
       </ReportMenu>
       <ReportBody>
         <FunnelChart />
-        <FunnelTable />
       </ReportBody>
     </Report>
   );

src/app/(main)/reports/funnel/FunnelTable.tsx

@@ -1,19 +0,0 @@
-import { useContext } from 'react';
-import ListTable from 'components/metrics/ListTable';
-import { useMessages } from 'components/hooks';
-import { ReportContext } from '../[reportId]/Report';
-
-export function FunnelTable() {
-  const { report } = useContext(ReportContext);
-  const { formatMessage, labels } = useMessages();
-  return (
-    <ListTable
-      data={report?.data}
-      title={formatMessage(labels.url)}
-      metric={formatMessage(labels.visitors)}
-      showPercentage={true}
-    />
-  );
-}
-
-export default FunnelTable;