> ## 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

> Aliniază o etichetă de metrică și o valoare formatată cu progres opțional.

## Prezentare generală

`MetricRow` aliniază o etichetă, o pictogramă opțională și o valoare preformatată. Un [ProgressRing](https://docs.twenty.com/ro/ui/primitives/feedback/progress-ring.md) opțional folosește eticheta vizibilă drept nume accesibil.

**Light**

[Exemplu de rând de metrică (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-metricrow--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Exemplu de rând de metrică (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)

## Utilizare

```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>
);
```

Transmiteți o etichetă de text nevidă ca elemente copil obligatorii și valoarea formatată prin `value`. Adăugați `progress` atunci când metrica are un procent cunoscut.

Aplicația gestionează calculele, unitățile, formatarea numerelor și semnificația metricii. `progressColor` acceptă o culoare CSS pentru arcul umplut.

## Valori fără progres

Omiteți `progress` pentru a afișa o valoare simplă. Zero numeric este afișat ca `0`; conținutul nu este niciodată înlocuit cu un substituent. Furnizați propriul substituent atunci când datele nu sunt disponibile.

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

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

## Compoziție și accesibilitate

Conținutul etichetei acceptă noduri. Textul său accesibil denumește inelul de progres prin `aria-labelledby`, inclusiv textul imbricat. Furnizați o etichetă vizibilă semnificativă. O valoare șir nevidă este, de asemenea, expusă ca text al valorii accesibile. Pentru conținutul valorii formatate, furnizați `progressValueText` atunci când un procentaj nu descrie complet metrica. Acest text înlocuiește valoarea de rezervă a șirului. Fără acesta, alt conținut păstrează textul valorii procentuale a inelului. Un `progressValueText` gol utilizează, de asemenea, procentajul, inclusiv atunci când `value` este un șir. Nodul opțional `startIcon` este decorativ. Apelantul îi controlează dimensiunile și conturul.

```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>
);
```

Înlocuiți `startIcon={IconDatabase}` cu `startIcon={<IconDatabase size={14} />}`. Valorile rămân preformatate de aplicație.

Atributele native, `className`, `style` și `ref` vizează rândul exterior. `render` poate înlocui acel element. Progresul rămâne controlat și limitat între 0 și 100, cu același comportament pentru mișcare redusă ca `ProgressRing`.

## Proprietăți

**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.