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

# Riga metrica

> Allinea un'etichetta della metrica e un valore formattato con un indicatore di avanzamento facoltativo.

## Panoramica

`MetricRow` allinea un'etichetta, un'icona facoltativa e un valore preformattato. Un elemento facoltativo [ProgressRing](https://docs.twenty.com/it/ui/primitives/feedback/progress-ring.md) utilizza l'etichetta visibile come nome accessibile.

**Light**

[Esempio di riga della metrica (light)](https://storybook.twenty.com/iframe.html?id=ui-data-display-metricrow--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Esempio di riga della metrica (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)

## Utilizzo

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

Passa un'etichetta di testo non vuota come elementi figlio obbligatori e il valore formattato tramite `value`. Aggiungi `progress` quando la metrica ha una percentuale nota.

L'applicazione gestisce i calcoli, le unità, la formattazione dei numeri e il significato della metrica. `progressColor` accetta un colore CSS per l'arco riempito.

## Valori senza avanzamento

Ometti `progress` per mostrare un valore semplice. Lo zero numerico viene visualizzato come `0`; il contenuto non viene mai sostituito con un segnaposto. Fornisci un segnaposto personalizzato quando i dati non sono disponibili.

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

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

## Composizione e accessibilità

Il contenuto dell'etichetta accetta nodi. Il relativo testo accessibile assegna un nome all'anello di avanzamento tramite `aria-labelledby`, incluso il testo annidato. Fornisci un'etichetta visibile significativa. Un valore stringa non vuoto viene inoltre esposto come testo del valore accessibile. Per il contenuto del valore formattato, fornisci `progressValueText` quando una percentuale non descrive completamente la metrica. Questo testo sostituisce il valore di fallback della stringa. Senza di esso, gli altri contenuti mantengono il testo del valore percentuale dell'anello. Un `progressValueText` vuoto utilizza anch'esso la percentuale, anche quando `value` è una stringa. Il nodo `startIcon` facoltativo è decorativo. Il chiamante ne controlla le dimensioni e il tratto.

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

Sostituisci `startIcon={IconDatabase}` con `startIcon={<IconDatabase size={14} />}`. I valori rimangono preformattati dall'applicazione.

Gli attributi nativi, `className`, `style` e `ref` si applicano alla riga esterna. `render` può sostituire quell'elemento. L'avanzamento rimane controllato e limitato da 0 a 100, con lo stesso comportamento per la riduzione del movimento di `ProgressRing`.

## Props

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