Organigrama: una columna de padre se vuelve un árbol navegable.
Sirve para cualquier tabla en la que cada registro apunta a un padre, como área y área padre, categoría y categoría padre, cuenta y cuenta padre. Sin librería de gráficos y sin escribir JavaScript.
Las áreas de la empresa, en tres niveles
La Dirección está arriba, con Tecnología y Comercial justo debajo. En la base están Desarrollo, Infraestructura y Ventas Sur. Cada nodo trae la sigla y una etiqueta, y cada conexión muestra cuántas áreas hay justo debajo.
La tabla, el campo del padre y qué mostrar
Indicas la tabla, el campo que apunta al padre y qué aparece en cada nodo. El dibujo del árbol, las conexiones, el arrastre y el zoom ya vienen listos.
<mad-org-chartmodel="Setor"parent-field="parent_id"title="nome"subtitle="sigla"metric="equipe" />Cuándo usar el organigrama
Úsalo cuando la pregunta es "quién queda debajo de quién". El organigrama muestra toda la jerarquía de una vez, sin que tengas que adivinar los niveles en una lista.
- Estructura de la empresa. Áreas y subáreas, como en la pantalla de arriba, con el tamaño de cada equipo en la tarjeta.
- Personas y gerentes (RR. HH.). Cada empleado apunta a su gerente, y la tarjeta trae foto, nombre y cargo.
- Plan de cuentas (finanzas). La búsqueda te lleva directo a la cuenta que buscas, en cualquier nivel.
- Categorías de producto (inventario). Cambiar una subcategoría de lugar es arrastrar la tarjeta a otra categoría.
Para filtrar, sumar y exportar registros, usa el listado. Si el orden que importa es el del tiempo, usa la timeline. Y si la tabla aún no tiene la columna del padre, la creas en el diagrama de datos.
Lo que configuras
Además de la tabla y el campo del padre, estos ajustes cambian lo que ve el usuario.
- Título y subtítulo
titlesubtitle - Los campos que aparecen en cada tarjeta, como el nombre del área y la sigla.
- Foto
avatar-field - El campo con la foto de cada nodo. Sin él, la tarjeta muestra las iniciales del título.
- Número en la tarjeta
metricmetric-label - Un campo numérico destacado en la tarjeta, con una etiqueta que dice qué cuenta.
- Arrastrar para cambiar el padre
draggable - Habilita el arrastre. Viene desactivado, así nadie reorganiza el árbol sin que tú quieras.
- Clic en la tarjeta
click-target - El método que se abre cuando alguien hace clic en una tarjeta, como el registro de esa área.
Lo que va al proyecto Laravel
El árbol es una clase en app/Control con la vista <mad-org-chart>. Las reglas de negocio entran en métodos de ella:
- Un filtro que vale en todo acceso. En una clase tuya que extiende la del organigrama, el método
query()limita lo que ve cada usuario: raíces, hijos, conteos, búsqueda y cambio de padre. - Regla para cambiar de padre. El método
canReparent()decide si el cambio puede ocurrir, yafterReparent()corre justo después, por ejemplo para registrar quién cambió qué. - Tarjeta a tu manera. Si la tarjeta predeterminada no basta, la etiqueta
<mad-org-chart-card>recibe el Blade que quieras para cada nodo.
Como toda pantalla de MadBuilder, esos archivos se abren en tu editor, van a tu Git y aceptan código a mano en bloques protegidos, que siguen ahí cuando la pantalla se genera de nuevo. Mira cómo se genera el código.
Preguntas sobre el organigrama
¿El organigrama funciona con cualquier tabla?
Con toda tabla en la que cada registro apunta a un padre de la misma tabla. Los registros sin padre, con el campo vacío o en cero, se vuelven las raíces del árbol.
¿Se puede cambiar un área de lugar arrastrando?
Sí, si el arrastre está activado. El servidor verifica el cambio antes de guardar y rechaza mover un nodo debajo de uno de sus propios descendientes.
¿Y si el árbol tiene miles de nodos?
Carga solo los primeros niveles. El resto se abre bajo demanda, y cada nodo muestra cuántos hijos tiene. Por defecto, cada carga trae hasta 1.000 nodos y avisa cuando se pasó de ese número.
Y más
Mira también la Timeline o los tipos de página.
Crea la cuenta, arma una pantalla, descarga el proyecto.
Sin demo agendada ni llamada de descubrimiento. Si el Laravel que sale no pasa la revisión de tu equipo, perdiste una tarde.
- Crea la cuentaBeta abierta, sin tarjeta.
- Arma una pantallaEn el editor visual, en código o pidiéndoselo a la IA.
- Descarga el .zipUn proyecto Laravel que corre donde quieras.
