---
title: "Custom KPI Bar"
slug: "custom-kpi-bar"
category: "Widgets"
reactComponent: "ArcWidgetKpiBar"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "kpi_bar.tsx"
locale: "es"
hosts: "react"
---

# KpiBar en React

Muestra varias métricas con etiqueta y acción de clic opcional, unas junto a otras.

Referencia para `@arcrider/arcwidgets-react@0.1.0-alpha.5`. [Instalación](/docs/react/intro/setup-react) · [Todos los componentes](/docs/react/intro/react-components).

## Ejemplo completo

```tsx
import { ArcWidgetKpiBar } from '@arcrider/arcwidgets-react';
import { useState } from 'react';

const lang = document.documentElement.lang.startsWith('en')
  ? 'en'
  : document.documentElement.lang.startsWith('es')
    ? 'es'
    : 'de';
const requested = new URLSearchParams(location.search).get('data');
const pack = requested === 'empty' || requested === 'busy' ? requested : 'demo';
const t = (de: string, en: string, es: string) =>
  lang === 'en' ? en : lang === 'es' ? es : de;

const demoMetrics = [
  {
    title: t('Offene Aufträge', 'Open orders', 'Pedidos abiertos'),
    value: 12,
    color: '#d97706',
  },
  {
    title: t('In Arbeit', 'In progress', 'En curso'),
    value: 7,
    color: '#0f766e',
  },
  {
    title: t('Abgeschlossen', 'Completed', 'Completados'),
    value: 38,
    color: '#15803d',
  },
];

const busyMetrics = [
  ...demoMetrics,
  { title: t('Wartet', 'Waiting', 'En espera'), value: 4, color: '#be123c' },
  {
    title: t('Heute fällig', 'Due today', 'Vence hoy'),
    value: 3,
    color: '#7c3aed',
  },
];

const metrics =
  pack === 'empty' ? [] : pack === 'busy' ? busyMetrics : demoMetrics;

export default function Example() {
  const [selected, setSelected] = useState(t('Alle', 'All', 'Todos'));
  return (
    <>
      <ArcWidgetKpiBar
        data={{
          settings: { height: '150px' },
          cards: metrics.map((metric, index) => ({
            card: index + 1,
            title: metric.title,
            value: metric.value,
            clickable: true,
            settings: {
              colorValue: metric.color,
              borderColor: metric.color,
            },
          })),
        }}
        onClick={(_event, index) =>
          setSelected(metrics[index]?.title ?? selected)
        }
      />
      <p aria-live="polite">
        {t('Auswahl', 'Selection', 'Selección')}: {selected}
      </p>
    </>
  );
}
```

## Props del componente

### id

ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.

### data

Configuración de tipo `ArcWidgetKpiBarData`. Pasa los cambios como objetos nuevos; gestiona los datos de negocio y la selección en el estado de React.

### onAction

Fallback opcional `(type: string, ...args: unknown[]) => unknown`. El callback concreto tiene prioridad. Detalles: [Estado y eventos](/docs/react/patterns/react-state-events).

### onClick

Notifica el clic. Ten en cuenta los argumentos específicos del widget más abajo.

```typescript
onClick?: (event: unknown, cardIndex: number) => void;
```

## Configuración

Los siguientes campos pertenecen a `data`. Los tamaños se indican como strings, los números y valores de tiempo según su tipo respectivo.

### settings

Representación común de las entradas.

Tipo: `ArcWidgetKpiBarSettings`.

### cards

Tarjetas de métricas con etiqueta, valor y clicabilidad opcional.

Tipo: `ArcWidgetKpiBarCard[]`.

## Comportamiento y límites

- `cards` contiene valores y etiquetas, `settings` la representación común.

- Activa `clickable` por tarjeta. `onClick(event, cardIndex)` puede cambiar un filtro o navegar en tu aplicación.

Los campos `ArcWidgetSlot` admitidos permiten elementos JSX individuales, texto o descriptores de widget. Pasa texto externo como texto JSX; los strings HTML se interpretan como HTML. [Combinar contenidos](/docs/react/patterns/nested-widget-descriptors).

## Tipos de datos

Estos tipos relacionados con el widget se exportan desde el paquete. También están disponibles tipos comunes como `ArcWidgetSlot`, `ArcWidgetStyles` y `ArcReactWidgetProps`. Las firmas de índice permiten extensiones; no garantizan que el widget evalúe campos arbitrarios.

```typescript
export interface ArcWidgetKpiBarSettings {
	height?: string;
	colorLabel?: string;
	fontSizeLabel?: string;
	colorValue?: string;
	fontSizeValue?: string;
	backgroundColor?: string;
	borderColor?: string;
	[key: string]: unknown;
}

export interface ArcWidgetKpiBarCard {
	card: number;
	title?: ArcWidgetSlot;
	value?: ArcWidgetSlot;
	subtitle?: ArcWidgetSlot;
	settings?: ArcWidgetKpiBarSettings;
	clickable?: boolean;
}

export interface ArcWidgetKpiBarData extends Omit<ArcWidgetBaseData, 'actions'> {
	settings?: ArcWidgetKpiBarSettings;
	cards?: ArcWidgetKpiBarCard[];
}

export interface ArcWidgetKpiBarProps extends ArcReactWidgetProps<ArcWidgetKpiBarData> {
	onClick?: (event: unknown, cardIndex: number) => void;
}
```