Organograma: uma coluna de pai vira uma árvore navegável.
Serve para qualquer tabela em que cada registro aponta para um pai, como setor e setor pai, categoria e categoria pai, conta e conta pai. Sem biblioteca de gráfico e sem escrever JavaScript.
Os setores da empresa, em três níveis
A Diretoria fica no topo, com Tecnologia e Comercial logo abaixo. Na base estão Desenvolvimento, Infraestrutura e Vendas Sul. Cada nó traz a sigla e um rótulo, e cada ligação mostra quantos setores estão logo abaixo.
A tabela, o campo do pai e o que mostrar
Você informa a tabela, o campo que aponta para o pai e o que aparece em cada nó. O desenho da árvore, as ligações, o arrastar e o zoom já vêm prontos.
<mad-org-chartmodel="Setor"parent-field="parent_id"title="nome"subtitle="sigla"metric="equipe" />Quando usar o organograma
Use quando a pergunta é "quem fica embaixo de quem". O organograma mostra a hierarquia inteira de uma vez, sem você adivinhar os níveis numa lista.
- Estrutura da empresa. Setores e subsetores, como na tela acima, com o tamanho de cada equipe no card.
- Pessoas e gestores (RH). Cada funcionário aponta para o seu gestor, e o card traz foto, nome e cargo.
- Plano de contas (financeiro). A busca leva você direto à conta que procura, em qualquer nível.
- Categorias de produto (estoque). Mudar uma subcategoria de lugar é arrastar o card para outra categoria.
Para filtrar, somar e exportar registros, use a listagem. Se a ordem que importa é a do tempo, use a timeline. E se a tabela ainda não tem a coluna do pai, você a cria no diagrama de dados.
O que você configura
Além da tabela e do campo do pai, estes ajustes mudam o que o usuário vê.
- Título e subtítulo
titlesubtitle - Os campos que aparecem em cada card, como o nome do setor e a sigla.
- Foto
avatar-field - O campo com a foto de cada nó. Sem ele, o card mostra as iniciais do título.
- Número no card
metricmetric-label - Um campo numérico em destaque no card, com um rótulo que diz o que ele conta.
- Arrastar para trocar o pai
draggable - Libera o arrastar. Vem desligado, então ninguém reorganiza a árvore sem você querer.
- Clique no card
click-target - O método que abre quando alguém clica num card, como o cadastro daquele setor.
O que vai para o projeto Laravel
A árvore é uma classe em app/Control com a view <mad-org-chart>. As regras de negócio entram em métodos dela:
- Um filtro que vale em todo acesso. Numa classe sua que estende a do organograma, o método
query()limita o que cada usuário vê: raízes, filhos, contagens, busca e troca de pai. - Regra para trocar de pai. O método
canReparent()decide se a troca pode acontecer, eafterReparent()roda logo depois dela, por exemplo para registrar quem mudou o quê. - Card do seu jeito. Se o card padrão não basta, a tag
<mad-org-chart-card>recebe o Blade que você quiser para cada nó.
Como toda tela do MadBuilder, esses arquivos abrem no seu editor, vão para o seu Git e aceitam código à mão em blocos protegidos, que continuam lá quando a tela é gerada de novo. Veja como o código é gerado.
Perguntas sobre o organograma
O organograma funciona com qualquer tabela?
Com toda tabela em que cada registro aponta para um pai da mesma tabela. Os registros sem pai, com o campo vazio ou zero, viram as raízes da árvore.
Dá pra trocar um setor de lugar arrastando?
Dá, se o arrastar estiver ligado. O servidor confere a mudança antes de gravar e recusa mover um nó para baixo de um dos seus próprios descendentes.
E se a árvore tiver milhares de nós?
Carregue só os primeiros níveis. O resto abre sob demanda, e cada nó mostra quantos filhos tem. Por padrão, cada carga traz até 1.000 nós e avisa quando passou disso.
E mais
Veja também a Timeline ou os tipos de página.
Crie a conta, monte uma tela, baixe o projeto.
Sem demo agendada e sem call de descoberta. Se o Laravel que sair não passar na revisão do seu time, você perdeu uma tarde.
- Crie a contaBeta aberto, sem cartão.
- Monte uma telaNo visual, no código ou pedindo à IA.
- Baixe o .zipUm projeto Laravel que roda onde você quiser.