> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Строка метрик

> Выравнивает метку метрики и отформатированное значение с необязательным индикатором прогресса.

## Обзор

`MetricRow` выравнивает метку, необязательный значок и предварительно отформатированное значение. Необязательный [ProgressRing](https://docs.twenty.com/ru/ui/primitives/feedback/progress-ring.md) использует видимую метку в качестве доступного имени.

**Light**

[Пример строки метрики (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-metricrow--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Пример строки метрики (dark)](https://storybook.twenty.com/iframe.html?id=ui-data-display-metricrow--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-data-display-metricrow--display)

## Использование

```tsx theme={null}
import { MetricRow } from 'twenty-ui/components/data-display';
import { IconFiles } from 'twenty-ui/icon';

export const ImportMetric = () => (
  <MetricRow
    startIcon={<IconFiles size={14} />}
    value="75 of 100"
    progress={75}
  >
    Imported files
  </MetricRow>
);
```

Передайте непустую текстовую метку как обязательное дочернее содержимое, а отформатированное значение — через `value`. Добавьте `progress`, если у метрики известен процент.

Приложение отвечает за вычисления, единицы измерения, форматирование чисел и значение метрики. `progressColor` принимает CSS-цвет для заполненной дуги.

## Значения без прогресса

Не указывайте `progress`, чтобы показать простое значение. Числовой ноль отображается как `0`; содержимое никогда не заменяется заполнителем. Предоставьте собственный заполнитель, если данные недоступны.

```tsx theme={null}
import { MetricRow } from 'twenty-ui/components/data-display';

export const CompletedMetric = () => (
  <MetricRow value={0}>Completed imports</MetricRow>
);
```

## Композиция и доступность

Содержимое метки принимает узлы. Его доступный текст именует индикатор выполнения через `aria-labelledby`, включая вложенный текст. Укажите содержательную видимую метку. Непустое строковое значение также предоставляется как текст доступного значения. Для содержимого с отформатированным значением укажите `progressValueText`, если процент не полностью описывает метрику. Этот текст переопределяет резервное строковое значение. Без него другое содержимое сохраняет текст процентного значения кольца. Пустое `progressValueText` также использует процентное значение, в том числе когда `value` является строкой. Необязательный узел `startIcon` является декоративным. Вызывающая сторона управляет его размерами и толщиной линии.

```tsx theme={null}
import { MetricRow } from 'twenty-ui/components/data-display';
import { Text } from 'twenty-ui/primitives/typography';

export const FormattedStorageMetric = () => (
  <MetricRow
    value={<Text render={<bdi />}>12 / 20 GB</Text>}
    progress={60}
    progressValueText="12 of 20 gigabytes used"
  >
    <Text render={<strong />}>Storage</Text>
  </MetricRow>
);
```

Замените `startIcon={IconDatabase}` на `startIcon={<IconDatabase size={14} />}`. Значения остаются предварительно отформатированными приложением.

Нативные атрибуты, `className`, `style` и `ref` применяются к внешней строке. `render` может заменить этот элемент. Прогресс остаётся управляемым и ограниченным диапазоном от 0 до 100, с тем же поведением при уменьшении движения, что и `ProgressRing`.

## Свойства

**children** `ReactNode` *required*

Label content whose accessible text also names the optional progress ring.

**className** `string`

CSS class applied to the row root.

**progress** `number`

Optional controlled progress from 0 to 100. Omitting it displays the value without a ring.

**progressColor** `string`

CSS color of the filled arc when progress is provided.

**progressValueText** `string`

Accessible value text for the progress ring. Nonempty text overrides the string value fallback; an empty string uses the ring percentage. Supply it when formatted content needs more context than a percentage.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Replaces the row root element while preserving its contents.

**startIcon** `ReactNode`

Decorative node content before the label. The caller controls icon geometry.

**style** `CSSProperties`

Inline styles applied to the row root.

**value** `ReactNode` *required*

Preformatted value displayed at the end of the row. Nonempty string values also supply the progress ring accessible value text.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.