123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- 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 (
- <VitalSet>
- {props.percents.map(pct => (
- <VitalStatus data-test-id="vital-status" key={pct.vitalState}>
- {vitalStateIcons[pct.vitalState]}
- {props.showVitalPercentNames && t(`${pct.vitalState}`)}{' '}
- {formatPercentage(pct.percent, 0)}
- {props.showVitalThresholds && getVitalStateText(props.vital, pct.vitalState)}
- </VitalStatus>
- ))}
- </VitalSet>
- );
- }
- 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};
- `;
|