sentry/static/app/views/explore/charts/confidenceFooter.tsx

import styled from '@emotion/styled';

import Count from 'sentry/components/count';
import {Tooltip} from 'sentry/components/tooltip';
import {t, tct} from 'sentry/locale';
import type {Confidence} from 'sentry/types/organization';
import {defined} from 'sentry/utils';

type Props = {
  confidence?: Confidence;
  sampleCount?: number;
};

export function ConfidenceFooter({sampleCount, confidence}: Props) {
  return (
    <Container>
      {!defined(sampleCount)
        ? t('* Extrapolated from \u2026')
        : confidence === 'low'
          ? tct('* Extrapolated from [sampleCount] samples ([insufficientSamples])', {
              sampleCount: <Count value={sampleCount} />,
              insufficientSamples: (
                <Tooltip
                  title={t(
                    'Shortening the date range, increasing the time interval or removing extra filters may improve accuracy.'
                  )}
                >
                  <InsufficientSamples>
                    {t('insufficient for accuracy')}
                  </InsufficientSamples>
                </Tooltip>
              ),
            })
          : tct('* Extrapolated from [sampleCount] samples', {
              sampleCount: <Count value={sampleCount} />,
            })}
    </Container>
  );
}

const InsufficientSamples = styled('span')`
  text-decoration: underline dotted ${p => p.theme.gray300};
`;

const Container = styled('span')`
  color: ${p => p.theme.gray300};
  font-size: ${p => p.theme.fontSizeSmall};
`;