import styled from '@emotion/styled'; import {t, tct} from 'sentry/locale'; import space from 'sentry/styles/space'; import {WebVital} from 'sentry/utils/fields'; import {formatPercentage} from 'sentry/utils/formatters'; import {VitalState, vitalStateIcons, webVitalMeh, webVitalPoor} from './utils'; type Percent = { percent: number; vitalState: VitalState; }; type Props = { percents: Percent[]; vital: WebVital | WebVital[]; hideTooltips?: boolean; showVitalPercentNames?: boolean; showVitalThresholds?: boolean; }; function getVitalStateText(vital: WebVital | WebVital[], vitalState) { const unit = !Array.isArray(vital) && vital !== WebVital.CLS ? 'ms' : ''; switch (vitalState) { case VitalState.POOR: return Array.isArray(vital) ? t('Poor') : tct('(>[threshold][unit])', {threshold: webVitalPoor[vital], unit}); case VitalState.MEH: return Array.isArray(vital) ? t('Meh') : tct('(>[threshold][unit])', {threshold: webVitalMeh[vital], unit}); case VitalState.GOOD: return Array.isArray(vital) ? t('Good') : tct('(<=[threshold][unit])', {threshold: webVitalMeh[vital], unit}); default: return null; } } export default function VitalPercents(props: Props) { return ( {props.percents.map(pct => ( {vitalStateIcons[pct.vitalState]} {props.showVitalPercentNames && pct.vitalState}{' '} {formatPercentage(pct.percent, 0)} {props.showVitalThresholds && getVitalStateText(props.vital, pct.vitalState)} ))} ); } const VitalSet = styled('div')` display: inline-grid; grid-auto-flow: column; gap: ${space(2)}; `; const VitalStatus = styled('div')` display: flex; align-items: center; gap: ${space(0.5)}; font-size: ${p => p.theme.fontSizeMedium}; `;