Gráficas en NexFlow

Qué es

Gráficas es la extensión que convierte datos de una base de datos externa — una tienda, un sistema de punto de venta, cualquier MySQL/MariaDB que no sea la propia de NexFlow — en una gráfica visual (barras, líneas, pastel o dona) lista para colocarse en cualquier página del sitio.

Es de las extensiones más completas del sistema: en vez de un formulario sencillo, trae su propio asistente de 6 pasos que va desde elegir a qué base de datos conectarse hasta decidir qué hacer con cada columna, sin necesidad de escribir una sola línea de código.

Antes de crear una Gráfica: registra el conector

Gráficas nunca guarda usuario y contraseña de una base de datos por su cuenta. Esas credenciales se registran una sola vez en Settings > Conectores > Bases de Datos Externas, con un nombre amigable que se le pone en ese momento (por ejemplo "Prueba de Ventas" o "Taquería"). De ahí en adelante, Gráficas —y cualquier otra extensión que necesite datos externos— solo pide ese nombre amigable, nunca el usuario o la contraseña reales otra vez.

Conecta bases de datos externas (MySQL/MariaDB) para que otras extensiones (ej. graficas) las usen eligiendo solo el nombre amigable, sin volver a pedir credenciales.

Por seguridad, el acceso a Settings está cerrado por default. Si la cuenta con la que se entra a NexFlow no tiene ese acceso habilitado, hay que solicitarlo antes de poder registrar un conector — sin un conector ya registrado, el asistente de Gráficas no va a tener ninguna base de datos externa entre la cual elegir en su primer paso, y no se puede avanzar. La solicitud de acceso se hace en:

https://nextlabs.mx/helpdesk/

Al registrar un conector nuevo se piden estos datos:

• Nombre amigable — cómo se le va a llamar de ahí en adelante (ej. "Ventas Sucursal Norte"). Este es el único dato que las extensiones van a pedir después.
• Servidor y Puerto — la dirección del servidor externo (ej. 127.0.0.1, puerto 3306).
• Tipo de conector — MySQL, MariaDB o MySQLi.

• Nombre de la base de datos, Usuario y Contraseña — las credenciales reales. Se escriben una sola vez aquí.

La lista de instancias

A diferencia de extensiones más simples, la lista de Gráficas trae tres columnas: Nombre, Conector (a qué base de datos se conecta esa gráfica) y Tipo (el tipo de gráfica: barras, líneas, pie, dona). El botón para dar de alta una nueva dice "+ Nueva Gráfica".

El asistente de 6 pasos

Al picarle a Editar (o a "+ Nueva Gráfica"), se abre un asistente que avanza con los botones "Siguiente >" y "< Atrás", sin perder lo que ya se llenó en pasos anteriores.

Paso 1 — Conector

Un selector con los conectores ya registrados en Settings (ver arriba). Si la lista sale vacía, hay que ir primero a registrar uno — este paso no deja avanzar sin elegir alguno.

Paso 2 — Tipo de Gráfica

Cuatro opciones visuales para elegir cómo se va a ver el resultado:

• Barras — buena para comparar cantidades entre varias categorías (ej. ventas por mes).
• Líneas — buena para mostrar una tendencia a lo largo del tiempo.
• Pastel — buena para mostrar qué proporción representa cada categoría del total.
• Dona — lo mismo que Pastel, con el centro vacío.

Debajo se elige la Paleta de colores (ej. Bootstrap 5) y el Estilo visual (ej. Sombra/relieve), se escribe el Título de la gráfica que va a ver el visitante, y dos casillas: Mostrar leyenda (el recuadro que explica qué representa cada color) y Mostrar etiquetas de datos (el número exacto sobre cada barra o rebanada).

Paso 3 — Seleccionar Tablas

Una tabla, en una base de datos, es donde vive un tipo de información — por ejemplo, una tabla "productos" con el catálogo, y otra tabla "ventas" con cada venta registrada. Este paso muestra un selector de doble lista: las tablas disponibles del servidor externo a la izquierda, las elegidas a la derecha, con botones ">" / "<" o doble clic para moverlas de un lado a otro. Esta lista se lee en vivo del servidor conectado — no hay que saberse los nombres de las tablas de memoria, NexFlow los muestra solos.

Paso 4 — Definir JOINs

Si se eligió más de una tabla, hace falta decirle a NexFlow cómo se conectan entre sí — esto se llama un JOIN. Por ejemplo, para saber el nombre de qué producto corresponde a cada venta, hay que decirle que la columna "producto_id" de la tabla "ventas" corresponde a esa misma columna en la tabla "productos".

El botón "Auto-detectar JOINs" intenta armar esa relación solo, buscando una columna con el mismo nombre presente en ambas tablas. También se puede agregar uno a mano con "+ Agregar JOIN", eligiendo el tipo de relación, la tabla y el campo de cada lado.

Paso 5 — Seleccionar Campos

Una lista con una casilla por cada columna de las tablas elegidas, agrupadas por la tabla a la que pertenecen. Los atajos "✓ Todos" y "✕ Ninguno" marcan o desmarcan de un jalón, para no tener que ir columna por columna cuando se quieren todas o ninguna.

Paso 6 — Etiqueta, Valor y Guardar

El paso donde se decide qué hace la gráfica con cada columna marcada, eligiendo un Rol para cada una:

• Agrupar — esta columna define las categorías de la gráfica (por ejemplo, agrupar por "nombre" del producto crea una barra o rebanada por cada producto distinto).
• Sumar (SUM) — suma todos los valores de esta columna dentro de cada grupo (ej. sumar "monto" da el total vendido por producto).
• Contar (COUNT) — cuenta cuántos registros hay en cada grupo, sin sumar ningún valor (ej. cuántas ventas tuvo cada producto).
• -- No usar -- — la columna se ignora para esta gráfica en particular, aunque se haya marcado en el paso anterior.

Justo debajo aparece una frase que traduce la configuración elegida a lenguaje llano, en tiempo real, para confirmar que se entendió bien lo que se armó:

Se agrupará por "nombre" -- por cada valor distinto ahí, se sumarán los valores de "monto"; y se contarán los registros de "cantidad".

Más abajo hay un campo opcional de Filtro, para limitar qué registros entran a la gráfica (por ejemplo, mostrar solo las ventas de un año en particular) sin tener que ir a modificar la base de datos externa. Y por último, el Nombre de esta gráfica, con el que va a aparecer en la lista de instancias — no es lo mismo que el Título del Paso 2, que es lo que ve el visitante; este nombre es solo para identificarla en el panel. Al final, el botón "✓ Guardar Gráfica".

Cómo colocarla en una página

Igual que el resto de las extensiones: dentro de Crear Contenido, la pantalla se divide en tres columnas — Columna Izquierda, Contenido y Columna Derecha — y cada una comparte el mismo selector "-- Elige que agregar --". Es el usuario quien decide en qué columna colocar cada elemento; ahí, dentro del grupo Extensiones, aparecería la gráfica ya creada por su nombre (el que se le puso en el Paso 6).

Una diferencia a tener en cuenta según dónde se coloque: Columna Izquierda y Columna Derecha son de ancho fijo, mientras que Contenido se estira solo, según cuáles columnas estén presentes en esa página en particular. Una gráfica de barras o líneas con varias categorías suele leerse mejor en Contenido, donde tiene más ancho disponible; una de Pastel o Dona, más compacta, se adapta bien a cualquiera de las tres.

Cómo usarlo en el día a día

Si el asistente no deja avanzar del Paso 1 porque no aparece ningún conector, el problema no está en Gráficas — hay que ir primero a Settings > Conectores > Bases de Datos Externas a registrar uno, y si Settings está bloqueado, solicitar el acceso en https://nextlabs.mx/helpdesk/ antes que nada.

Usa "Auto-detectar JOINs" primero, y ajusta a mano solo si la relación detectada no es la correcta — ahorra tener que saberse de memoria cómo se conectan todas las tablas.

El Filtro del Paso 6 es la forma de tener varias gráficas parecidas pero con recortes distintos de los mismos datos (por ejemplo, una por año, o una por sucursal) sin tener que duplicar conectores ni volver a elegir tablas — nomás el filtro cambia entre una instancia y otra.

Recuerda la diferencia entre el Título (Paso 2, lo que ve el visitante del sitio) y el Nombre de esta gráfica (Paso 6, solo para identificarla en la lista de instancias) — pueden ser distintos, y no pasa nada si lo son.

Luego de seguir los pasos de la forma correcta tu resultado será el siguiente o parecido dependiendo el tipo de gráfica que escogiste: