#Capítulo 9: Tablero de tareas y gráficos

¡Por fin entramos en el capítulo de visualización tan esperado! Aquí veremos cómo, entre tanta información, podemos centrarnos rápidamente en lo que realmente nos importa. Como gestores no podemos perdernos entre tareas complejas. Vamos a resolver con facilidad las estadísticas y la presentación de información.

#9.1 Centrarse en la información clave

Queremos consultar de un vistazo la situación de las tareas del equipo, encontrar las que nos competen o nos interesan y no perdernos entre datos farragosos.

Empecemos creando un gráfico con estadísticas de las tareas del equipo.

#9.1.1 Crear un bloque de datos de gráfico

Cree una página nueva (por ejemplo, "Panel personal"):

1. Cree un bloque de datos de gráfico. (Dentro de este gran bloque podemos montar muchos gráficos).
2. En el bloque de gráfico, seleccione el objetivo: la tabla de tareas. Entremos en la configuración del gráfico.

#9.1.2 Configurar las estadísticas de estado

Para contar el número de tareas por estado, primero hay que preparar los datos:

• Métrica: seleccione un campo único, por ejemplo, "ID", para contar.
• Dimensión: agrupar por estado.

A continuación, configure el gráfico:

1. Elija un gráfico de columnas o de barras.

2. En el eje X, seleccione "Estado"; en el eje Y, "ID". No olvide elegir el campo de categoría "Estado" (de lo contrario los colores no diferenciarán bien las series).

   

#9.1.3 Estadísticas multidimensión: tareas por persona

Si queremos saber cuántas tareas tiene cada persona en cada estado, añadiremos una dimensión adicional. Por ejemplo, "Responsable/Apodo".

1. Haga clic en "Ejecutar consulta" en la parte superior izquierda.

2. Quizá el gráfico no se vea como esperaba. No pasa nada: seleccione "Agrupar" para desplegar la comparativa por responsables.

3. Si quiere mostrar también el total apilando los valores, seleccione "Apilar". Así verá la proporción de tareas por persona y el total.

#9.2 Filtrado de datos y visualización dinámica

#9.2.1 Configuración de filtrado

Podemos quitar los datos de "Cancelada" y "Archivada" eliminándolos de las condiciones de filtrado de la izquierda. Estoy seguro de que ya domina este tipo de condiciones.

Tras el filtrado, confirme y salga de la configuración: el primer gráfico de la página ya está listo.

#9.2.2 Copiar gráfico

¿Y si quiere mostrar a la vez el modo "Agrupar" y "Apilar" sin volver a configurarlo?

• En la esquina superior derecha del primer bloque de gráfico, haga clic en copiar.
• Desplácese hacia abajo: el segundo gráfico ya aparece. Arrástrelo a la derecha, quite el "Apilar" y cámbielo a "Agrupar".

#9.2.3 Filtrado dinámico

¿Se puede filtrar dinámicamente las tareas según diferentes condiciones?

¡Por supuesto! Active "Filtrado" en la parte inferior del bloque de datos de gráfico. Aparecerá una caja de filtrado en la parte superior; muestre los campos deseados y configure las condiciones (por ejemplo, cambie el campo de fecha a "Entre").

#9.2.4 Crear campos de filtrado personalizados

¿Y si en algunos casos queremos incluir "Cancelada" y "Archivada" en los datos, con filtrado dinámico y valores por defecto?

¡Vamos a crear un campo de filtrado personalizado!

Campo de filtrado personalizado: puede elegir campos relacionados de tablas o crear campos personalizados (solo disponible en gráficos).

Soporta editar título, descripción y operador de filtrado, así como definir valores por defecto (por ejemplo, usuario o fecha actuales) para que el filtrado se ajuste a sus necesidades reales.

1. Título: "Estado".
2. Campo origen: dejar en blanco.
3. Componente: "Casillas de verificación".
4. Las opciones siguen los valores de los estados de la base de datos (atención: aquí el orden de los atributos es etiqueta de opción - valor de opción).

Una vez creado, haga clic en "Definir valor por defecto" y elija las opciones que necesita.

Tras configurar el valor por defecto, vuelva a la configuración del gráfico y cambie la condición de filtrado a "Estado - contiene cualquiera - Filtro actual/Estado", y confirme. (Hay que cambiarlo en ambos gráficos).

¡Hecho! Ahora pruebe el filtrado y los datos se mostrarán perfectamente.

#9.3 Enlaces dinámicos y filtrado de tareas

A continuación implementaremos algo muy práctico: pulsar sobre un número estadístico para saltar al filtrado de las tareas correspondientes. Para ello, añadimos primero gráficos con la cantidad de tareas en cada estado y los situamos arriba.

#9.3.1 Tomemos como ejemplo "No iniciada" para crear un gráfico de estadística

1. Configure la métrica: contar por ID.
2. Configure la condición de filtrado: Estado igual a "No iniciada".
3. Nombre del contenedor: "No iniciada"; tipo: "Estadística"; deje el nombre del gráfico vacío.

La estadística "No iniciada" ya está. Copie cinco veces más siguiendo los estados y arrastre todas a la parte superior.

#9.3.2 Configurar el enlace de filtrado

1. Vuelva a la página donde está el bloque de tabla de gestión de tareas y observe el formato de la URL en el navegador (algo como http://xxxxxxxxx/admin/0z9e0um1vcn).

   Aquí xxxxxxxxx es el dominio y /admin/0z9e0um1vcn la ruta. (Buscamos la última /admin).

2. Copie una parte del enlace.

   • Vamos a hacer un salto de enlace, así que necesitamos extraer una parte de la URL.
   • Copie desde después de admin/ (sin incluir admin/) hasta el final. En este ejemplo: 0z9e0um1vcn.

Pase el ratón sobre "No iniciada" y verá que se convierte en un cursor de mano; haga clic y se realizará el salto.

3. Configure el enlace del gráfico Añadamos un parámetro de filtrado al enlace. ¿Recuerda el identificador del campo Estado en la base de datos? Hay que añadirlo al final del enlace para filtrar las tareas.
   • Añada al final ?task_status=Not started, de modo que su enlace quede: 0z9e0um1vcn?task_status=Not started.

Formato de paso de parámetros por URL: Al añadir parámetros a un enlace hay reglas de formato:

• Signo de interrogación (?): marca el inicio de los parámetros.
• Nombre y valor: en formato nombre=valor.
• Múltiples parámetros: si hay varios, se concatenan con &. Por ejemplo: http://xxxxxxxxx/admin/hliu6s5tp9x?status=todo&user=123 Aquí user es otro parámetro y 123 su valor.

4. Vuelva a la página, haga clic en el enlace y compruebe que la URL ya incluye los parámetros que necesitamos.

#9.3.3 Asociar la condición de filtrado a la URL

¿Por qué la tabla aún no cambia? Falta un último paso.

• Vuelva a la configuración del bloque de tabla y haga clic en "Configurar rango de datos".
• Elija "Estado" igual a "Parámetro de URL/status".

Confirme: ¡filtrado realizado con éxito!

#9.4 Visualización de datos: gráficos espectaculares

Visualización de datos: ECharts (plugin comercial, de pago). ECharts ofrece más opciones de configuración: gráfico de líneas (multidimensión), gráfico de radar, nube de palabras...

Si quiere más posibilidades, active el bloque "Visualización de datos: ECharts".

#9.4.1 Configurar rápidamente un gráfico de radar espectacular

Si los datos se solapan, ajuste el tamaño o el radio para que toda la información se vea con claridad.

Tras configurarlo, ajuste la disposición arrastrando el bloque. ¡Listo!

#9.4.2 Más contenedores de gráficos

Hay muchos más gráficos por descubrir.

#Nube de palabras

#Gráfico de embudo

#Múltiples métricas (gráfico de doble eje, gráfico de líneas ECharts)

En el gráfico de doble eje puede añadir más métricas.

#Gráfico de barras divergentes

#9.5 Pequeño reto

Antes de cerrar este capítulo, un pequeño reto:

1. Añada los parámetros de URL para los estados restantes (En progreso, Pendiente de revisión, Completada, Cancelada, Archivada) para que los enlaces salten correctamente al filtro.
2. Configure el campo multiselección "Responsable" como hicimos con "Estado", con valor por defecto el apodo del usuario actual.

En el siguiente capítulo seguiremos desarrollando el tablero. ¡Hasta pronto!

---

Siga explorando y dé rienda suelta a su creatividad. Si tiene dudas, recuerde que siempre puede consultar la documentación oficial de NocoBase o unirse al foro de la comunidad NocoBase.