mirror of
https://github.com/kremalicious/umami.git
synced 2025-02-01 20:39:44 +01:00
remove retention chart
This commit is contained in:
parent
bf507037c7
commit
577294191d
@ -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;
|
|
@ -1,3 +0,0 @@
|
|||||||
.loading {
|
|
||||||
height: 300px;
|
|
||||||
}
|
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user