remove retention chart

This commit is contained in:
Francis Cao 2023-08-08 12:03:03 -07:00
parent bf507037c7
commit 577294191d
3 changed files with 0 additions and 79 deletions

View File

@ -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;

View File

@ -1,3 +0,0 @@
.loading {
height: 300px;
}

View File

@ -1,4 +1,3 @@
import RetentionChart from './RetentionChart';
import RetentionTable from './RetentionTable'; import RetentionTable from './RetentionTable';
import RetentionParameters from './RetentionParameters'; import RetentionParameters from './RetentionParameters';
import Report from '../Report'; import Report from '../Report';
@ -20,7 +19,6 @@ export default function RetentionReport({ reportId }) {
<RetentionParameters /> <RetentionParameters />
</ReportMenu> </ReportMenu>
<ReportBody> <ReportBody>
{/* <RetentionChart /> */}
<RetentionTable /> <RetentionTable />
</ReportBody> </ReportBody>
</Report> </Report>