@talend/react-components/lib-esm/QualityBar/QualityBar.component.js

Set of react components.

import { useTranslation } from 'react-i18next';
import { QualityBar as QualityBarDS } from '@talend/design-system';
import I18N_DOMAIN_COMPONENTS from '../constants';
import { jsx as _jsx } from "react/jsx-runtime";
export const QualityBar = ({
  valid,
  invalid,
  empty,
  na,
  placeholder,
  digits = 1,
  ...rest
}) => {
  const {
    t
  } = useTranslation(I18N_DOMAIN_COMPONENTS);
  const percentages = QualityBarDS.getQualityPercentagesRounded(digits, invalid, empty, valid, na, placeholder);
  return /*#__PURE__*/_jsx(QualityBarDS, {
    valid: valid,
    invalid: invalid,
    empty: empty,
    na: na,
    placeholder: placeholder,
    tooltipLabels: {
      empty: t('EMPTY_VALUES', {
        defaultValue: '{{value}} empty value ({{percentage}}%)',
        defaultValue_other: '{{value}} empty values ({{percentage}}%)',
        count: empty,
        percentage: percentages.empty,
        value: QualityBarDS.formatNumber(empty)
      }),
      invalid: t('INVALID_VALUES', {
        defaultValue: '{{value}} invalid value ({{percentage}}%)',
        defaultValue_other: '{{value}} invalid values ({{percentage}}%)',
        count: invalid,
        percentage: percentages.invalid,
        value: QualityBarDS.formatNumber(invalid)
      }),
      na: t('NOT_APPLICABLE_VALUES', {
        defaultValue: '{{value}} not applicable value ({{percentage}}%)',
        defaultValue_other: '{{value}} not applicable values ({{percentage}}%)',
        count: na,
        percentages: percentages.na,
        value: QualityBarDS.formatNumber(na)
      }),
      valid: t('VALID_VALUES', {
        defaultValue: '{{value}} valid value ({{percentage}}%)',
        defaultValue_other: '{{value}} valid values ({{percentage}}%)',
        count: valid,
        percentage: percentages.valid,
        value: QualityBarDS.formatNumber(valid)
      })
    },
    ...rest
  });
};
//# sourceMappingURL=QualityBar.component.js.map