Mini Widgets
Custom KPI Bar
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. <a href="/docs/react/intro/setup-react">Instalación</a> · <a href="/docs/react/intro/react-components">Todos los componentes</a>.
Ejemplo completo
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> </> ); }</code></pre>
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: <a href="/docs/react/patterns/react-state-events">Estado y eventos</a>.
onClick
Notifica el clic. Ten en cuenta los argumentos específicos del widget más abajo.
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. <a href="/docs/react/patterns/nested-widget-descriptors">Combinar contenidos</a>.
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.
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; }</code></pre>