Ejemplos de dashboards
Datos de ejemplo interactivos y demostraciones en el navegador. Todos los valores son ilustrativos.
Vistas de dashboard
Cuatro vistas del mismo conjunto de datos ficticio. El periodo y el escenario controlan todas las representaciones.
Completadas358
Porcentaje automatizado47%
Tramitación media38m
Retrasadas81
Datos de ejemplo ilustrativosReparto del trabajo
Comparación directa
Las barras permiten comparar directamente el trabajo automatizado y el manual.
Cambie el periodo o el escenario y compare las proporciones.
Evolución
Señal y excepciones
Una línea clara sigue el trabajo completado; la línea escalonada mantiene visibles los retrasos.
Pase el puntero por las líneas para consultar cada día.
Actividad acumulada
Volumen y presión
Las áreas apiladas muestran la carga total y cómo los retrasos aumentan la cola activa.
Compare las áreas; los valores diarios exactos están en «Ver datos».
Área apilada para 30 días en el escenario Semana normal: 358 completadas y 81 retrasadas. Los valores diarios exactos están disponibles en «Ver datos».
Grupos de tiempo de tramitación
Distribución
Un histograma punteado muestra en qué franjas de tiempo se concentran los días.
Cambie el periodo y observe cómo se desplaza la distribución.
Cada banda punteada agrupa los días según el tiempo medio de tramitación.
Cómo se crearon estas visualizaciones
El gráfico comparativo usa TanStack Charts. El área apilada usa Apache ECharts. La serie temporal adapta el componente Recharts con licencia MIT de NeonBlade UI. La distribución punteada es una implementación propia inspirada en Dither Kit; no incluye su código fuente.
Interacciones
Cinco experimentos interactivos y una imagen de código ilustrativa muestran distintas formas de respuesta, tipografía y estados.
Acción táctil
La profundidad y el movimiento dan a una acción importante una respuesta física clara.
Abra Contacto con el ratón, la pantalla táctil o el teclado.
El foco de teclado y la profundidad al pulsar forman parte del componente.
Patrón de señal
Un campo de puntos ajustable da carácter a los momentos de carga y de estado sin tapar el contenido.
Use el control deslizante para ajustar otra densidad de señal.
Revelado de texto
Un breve revelado aporta energía a un momento de producto y termina en un texto legible.
Cambie o copie el mensaje visible.
Comprobar el ancho del texto
La estimación usa el espacio realmente disponible para listas estables y herramientas con mucho contenido.
Cambie el ancho de la columna y compare la previsión con el ajuste real.
El trabajo complejo se vuelve más fácil cuando la interfaz explica qué importa, qué ha cambiado y qué hacer a continuación.
Explicar estados
La selección, la disponibilidad y el bloqueo siguen siendo claros sin depender del cursor.
Cambie entre los tonos disponibles y revise cada estado.
Imagen de código ilustrativa
Un fragmento breve muestra el enfoque, desde un problema concreto hasta una implementación útil.
Lea la imagen o use su descripción de texto completa.
Referencias de estos experimentos
La acción táctil se inspira en Evil Buttons; la señal ajustable, en Dot Matrix; el revelado, en la tipografía de Remocn; la medición de ancho usa Pretext, y el selector de estados sigue el enfoque primitivo de Shark UI. La implementación y las licencias figuran en THIRD_PARTY.md.