From 577294191d6991e2f5a7de06e00f438940a56d38 Mon Sep 17 00:00:00 2001
From: Francis Cao <franciscao@gmail.com>
Date: Tue, 8 Aug 2023 12:03:03 -0700
Subject: [PATCH] remove retention chart

---
 .../pages/reports/retention/RetentionChart.js | 74 -------------------
 .../retention/RetentionChart.module.css       |  3 -
 .../reports/retention/RetentionReport.js      |  2 -
 3 files changed, 79 deletions(-)
 delete mode 100644 components/pages/reports/retention/RetentionChart.js
 delete mode 100644 components/pages/reports/retention/RetentionChart.module.css

diff --git a/components/pages/reports/retention/RetentionChart.js b/components/pages/reports/retention/RetentionChart.js
deleted file mode 100644
index 5f7361fd..00000000
--- a/components/pages/reports/retention/RetentionChart.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useCallback, useContext, useMemo } from 'react';
-import { Loading, StatusLight } from 'react-basics';
-import useMessages from 'hooks/useMessages';
-import useTheme from 'hooks/useTheme';
-import BarChart from 'components/metrics/BarChart';
-import { formatLongNumber } from 'lib/format';
-import styles from './RetentionChart.module.css';
-import { ReportContext } from '../Report';
-
-export function RetentionChart({ className, loading }) {
-  const { report } = useContext(ReportContext);
-  const { formatMessage, labels } = useMessages();
-  const { colors } = useTheme();
-
-  const { parameters, data } = report || {};
-
-  const renderXLabel = useCallback(
-    (label, index) => {
-      return parameters.urls[index];
-    },
-    [parameters],
-  );
-
-  const renderTooltipPopup = useCallback((setTooltipPopup, model) => {
-    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]);
-
-  if (loading) {
-    return <Loading icon="dots" className={styles.loading} />;
-  }
-
-  return (
-    <BarChart
-      className={className}
-      datasets={datasets}
-      unit="day"
-      loading={loading}
-      renderXLabel={renderXLabel}
-      renderTooltipPopup={renderTooltipPopup}
-      XAxisType="category"
-    />
-  );
-}
-
-export default RetentionChart;
diff --git a/components/pages/reports/retention/RetentionChart.module.css b/components/pages/reports/retention/RetentionChart.module.css
deleted file mode 100644
index 9e1690b3..00000000
--- a/components/pages/reports/retention/RetentionChart.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.loading {
-  height: 300px;
-}
diff --git a/components/pages/reports/retention/RetentionReport.js b/components/pages/reports/retention/RetentionReport.js
index cab3c16c..333496d8 100644
--- a/components/pages/reports/retention/RetentionReport.js
+++ b/components/pages/reports/retention/RetentionReport.js
@@ -1,4 +1,3 @@
-import RetentionChart from './RetentionChart';
 import RetentionTable from './RetentionTable';
 import RetentionParameters from './RetentionParameters';
 import Report from '../Report';
@@ -20,7 +19,6 @@ export default function RetentionReport({ reportId }) {
         <RetentionParameters />
       </ReportMenu>
       <ReportBody>
-        {/* <RetentionChart /> */}
         <RetentionTable />
       </ReportBody>
     </Report>