import Chart from 'chart.js/auto'; import classNames from 'classnames'; import { colord } from 'colord'; import HoverTooltip from 'components/common/HoverTooltip'; import Legend from 'components/metrics/Legend'; import useLocale from 'hooks/useLocale'; import useMessages from 'hooks/useMessages'; import useTheme from 'hooks/useTheme'; import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants'; import { dateFormat } from 'lib/date'; import { formatLongNumber } from 'lib/format'; import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { Loading, StatusLight } from 'react-basics'; import styles from './FunnelChart.module.css'; export function FunnelChart({ data, animationDuration = DEFAULT_ANIMATION_DURATION, stacked = false, loading = false, onCreate = () => {}, onUpdate = () => {}, className, }) { const { formatMessage, labels } = useMessages(); const canvas = useRef(); const chart = useRef(null); const [tooltip, setTooltip] = useState(null); const { locale } = useLocale(); const [theme] = useTheme(); const datasets = useMemo(() => { const primaryColor = colord(THEME_COLORS[theme].primary); return [ { label: formatMessage(labels.uniqueVisitors), data: data, borderWidth: 1, hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(), backgroundColor: primaryColor.alpha(0.6).toRgbString(), borderColor: primaryColor.alpha(0.9).toRgbString(), hoverBorderColor: primaryColor.toRgbString(), }, ]; }, [data]); const colors = useMemo( () => ({ text: THEME_COLORS[theme].gray700, line: THEME_COLORS[theme].gray200, }), [theme], ); const renderYLabel = label => { return +label > 1000 ? formatLongNumber(label) : label; }; const renderTooltip = useCallback(model => { const { opacity, labelColors, dataPoints } = model.tooltip; if (!dataPoints?.length || !opacity) { setTooltip(null); return; } setTooltip(