search

BALKANGraph / OrgChartJS

OrgChart JS is a simple, flexible and highly customizable organization chart plugin for presenting the structure of your organization and the relationships in an elegant way.
https://balkan.app/orgchartjs
251 stars 84 forks source link

Anyway to do this, using OrgChartJS #819

Closed naveganth closed 9 months ago

naveganth commented 9 months ago

Canva: image

The best I managed to do was something like this;

image

My code so far;

OrgChart.mixed,
OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.ula);

OrgChart.templates.myTemplate.field_0 = "<text " + OrgChart.attr.width + '="145" style="font-family: Montserrat; sans-serif; font-weight: 700; font-size: 16px; text-anchor: left;" fill="#ffffff" x="90" y="45">{val}</text>';
OrgChart.templates.myTemplate.field_1 = "<text " + OrgChart.attr.width + '="145" ' + OrgChart.attr.text_overflow + '="multiline" style="font-family: Montserrat; sans-serif; font-weight: 400; font-size: 12px;" fill="#ffffff" x="90" y="60">{val}</text>';
OrgChart.templates.myTemplate.field_2 = "<text " + OrgChart.attr.width + '="145" ' + OrgChart.attr.text_overflow + '="multiline" style="font-family: Montserrat; sans-serif; font-weight: 400; font-size: 12px;" fill="#ffffff" x="90" y="75">{val}</text>';

OrgChart.templates.myTemplate.node = '<rect x="0" y="0" height="{h}" width="{w}" fill="#002580" stroke-width="1" stroke="#aeaeae"></rect><line x1="0" y1="0" x2="250" y2="0" stroke-width="5" stroke="#00994c"></line>';
OrgChart.templates.myTemplate.img_0 = '<clipPath id="{randId}"><rect width="90" height="119.5"></rect></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="0.5" y="1" width="80" height="120"></image>';
OrgChart.templates.myTemplate.menu = '<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,12)" ' + OrgChart.attr.control_node_menu_id + '="{id}"><rect x="-4" y="-10" fill="#ffffff" width="22" height="22"></rect><circle cx="0" cy="0" r="2" fill="#039BE5"></circle><circle cx="7" cy="0" r="2" fill="#039BE5"></circle><circle cx="14" cy="0" r="2" fill="#039BE5"></circle></g>';
OrgChart.templates.myTemplate.nodeMenuButton = '<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,105)" ' + OrgChart.attr.control_node_menu_id + '="{id}"><rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect><circle cx="0" cy="0" r="2" fill="#AEAEAE"></circle><circle cx="7" cy="0" r="2" fill="#AEAEAE"></circle><circle cx="14" cy="0" r="2" fill="#AEAEAE"></circle></g>';
OrgChart.templates.group.min = Object.assign({}, OrgChart.templates.group);
OrgChart.templates.group.min.name = '<text data-width="230" data-text-overflow="multiline" style="font-size: 24px;" fill="#aeaeae" x="125" y="65" text-anchor="middle">{val}</text>';

OrgChart.LINK_ROUNDED_CORNERS = 20;

var chart = new OrgChart(document.getElementById("tree"), {
    template: "myTemplate",
    enableSearch: true,
    enableDragDrop: true,  
    nodeMouseClick: OrgChart.action.true,
    keyNavigation: true,

    //collapse: {
        level: 1,
        allChildren: false,
        visibleLevel: 1,
   // },//

    expand: {
        nodes: [0.1, 0.2]
      },

    menu: {
        pdf: { text: "Export PDF" },
        png: { text: "Export PNG" },
        svg: { text: "Export SVG" },
        csv: { text: "Export CSV" },
        json: { text: "Export JSON" }
    },

    nodeMenu: {
        pdf: { text: "Export PDF" },
        png: { text: "Export PNG" },
        svg: { text: "Export SVG" },
        details: { text: "Details" },
        edit: { text: "Edit" },
        add: { text: "Add" },
        remove: { text: "Remove" }

    },

    nodeBinding: {
        field_0: "Nome",
     // field_1: "Cargo",
     //img_0: "Imagem",
     //field_2:"Matricula"
     partners: {
        left: "left-partner",
        right: "right-partner"
      }
    },

    tags: {
        assistant: {
            subTreeConfig: {
                subtreeSeparation: 40, // Adjust subtree separation as needed
                layout: OrgChart.layout.normal // Use the layout algorithm you prefer
                // You can add more subtree-related configurations here as needed
            }
        },
        "assistant": {
            template: "ula"},

        "node-with-subtrees": {
            template: "group",
        },
        "sub level 0": {
            subLevels: 0,
        },  
        "sub level 1": {
            subLevels: 1
        },
        "sub level 2": {
            subLevels: 2
        },
        "sub level 3": {
            subLevels: 3
        },

        g: {
            template: "group"
        }
    },
});

var nodes = [
    {id: 0, tags: ["node-with-subtrees"],  Nome: "0",  },
    {id: 0.1, stpid: 0,  Nome: "0.1", },
    {id: 0.2, pid: 0.1,  Nome: "0.2", },
    {id: 2,   pid: 0, name: "2", tags:["assistant"]},
    {id: 3,   pid: 0, Nome: "3",},
    {id: 4,   pid: 0, Nome: "4"},
    {id: 5,   pid: 0, Nome: "5"},
    {id: 6,   pid: 0, Nome: "6"},
    {id: 7,   pid: 0, Nome: "7"},
];

chart.load(nodes);
ZornitsaPesheva commented 9 months ago

Changing your code, I was able to do this: https://code.balkan.app/org-chart-js/issue819#JS The templates also could be the same as in your screenshot with the green gradient for example. With more customization, we could try better, if you tell us what is most important. The main thing here maybe is this constant: OrgChart.VERTICAL_CHILDREN_ASSISTANT = true;

naveganth commented 9 months ago

Changing your code, I was able to do this: https://code.balkan.app/org-chart-js/issue819#JS The templates also could be the same as in your screenshot with the green gradient for example. With more customization, we could try better, if you tell us what is most important. The main thing here maybe is this constant: OrgChart.VERTICAL_CHILDREN_ASSISTANT = true;

Thank you so much for your help, today my main focus is try to figure out a way to make the font bigger in the subtree "g" or group. I'll hit you up if need any more help

naveganth commented 9 months ago

So after your help, I got the assistance node how I wanted, them faced two new issues;

1. Expand and Collapse loading: Nodes take too long to load when expanding and collapsing, also causes visual glitches.

Normally(no expanding or collapsing): image

After Clicking on node to expand or collapse: image

2. Is it possible to make it so opening the page all nodes are collapsed into 0, which has a different color and layout when all collapsed, then clicking the node 0, makes all the node appear and changes 0 to the normal layout which 0 has two nodes inside him, behave like a button.

How i want it to act to act: image

JS Code:

OrgChart.VERTICAL_CHILDREN_ASSISTANT = true;
OrgChart.templates.myTemplate = Object.assign({}, OrgChart.templates.ula);

OrgChart.templates.myTemplate.field_0 = "<text " + OrgChart.attr.width + '="145" style="font-family: Montserrat; sans-serif; font-weight: 700; font-size: 16px; text-anchor: left;" fill="#ffffff" x="90" y="45">{val}</text>';
OrgChart.templates.myTemplate.field_1 = "<text " + OrgChart.attr.width + '="145" ' + OrgChart.attr.text_overflow + '="multiline" style="font-family: Montserrat; sans-serif; font-weight: 400; font-size: 12px;" fill="#ffffff" x="90" y="60">{val}</text>';
OrgChart.templates.myTemplate.field_2 = "<text " + OrgChart.attr.width + '="145" ' + OrgChart.attr.text_overflow + '="multiline" style="font-family: Montserrat; sans-serif; font-weight: 400; font-size: 12px;" fill="#ffffff" x="90" y="75">{val}</text>';

OrgChart.templates.myTemplate.node = '<rect x="0" y="0" height="{h}" width="{w}" fill="#002580" stroke-width="1" stroke="#aeaeae"></rect><line x1="0" y1="0" x2="250" y2="0" stroke-width="5" stroke="#00994c"></line>';
OrgChart.templates.myTemplate.img_0 = '<clipPath id="{randId}"><rect width="90" height="119.5"></rect></clipPath><image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="0.5" y="1" width="80" height="120"></image>';
OrgChart.templates.myTemplate.menu = '<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,12)" ' + OrgChart.attr.control_node_menu_id + '="{id}"><rect x="-4" y="-10" fill="#ffffff" width="22" height="22"></rect><circle cx="0" cy="0" r="2" fill="#039BE5"></circle><circle cx="7" cy="0" r="2" fill="#039BE5"></circle><circle cx="14" cy="0" r="2" fill="#039BE5"></circle></g>';
OrgChart.templates.myTemplate.nodeMenuButton = '<g style="cursor:pointer;" transform="matrix(1,0,0,1,225,105)" ' + OrgChart.attr.control_node_menu_id + '="{id}"><rect x="-4" y="-10" fill="#000000" fill-opacity="0" width="22" height="22"></rect><circle cx="0" cy="0" r="2" fill="#AEAEAE"></circle><circle cx="7" cy="0" r="2" fill="#AEAEAE"></circle><circle cx="14" cy="0" r="2" fill="#AEAEAE"></circle></g>';
OrgChart.templates.group.min = Object.assign({}, OrgChart.templates.group);
OrgChart.templates.group.min.name = '<text data-width="230" data-text-overflow="multiline" style="font-size: 24px;" fill="#aeaeae" x="125" y="65" text-anchor="middle">{val}</text>';

//Alterar Tamanho da bolinha do assistencia
OrgChart.templates.split.node='<circle cx="5" cy="5" r="5" fill="none" stroke-width="1" stroke="#aeaeae"></circle>',

//Alterar a largura e cor da linha
OrgChart.templates.myTemplate.link='<path stroke-linejoin="round" stroke="#aeaeae" stroke-width="1px" fill="none" d="{rounded}" />',

//Node preto 
OrgChart.templates.darkGrey = Object.assign({}, OrgChart.templates.ana);
OrgChart.templates.darkGrey.size = [250, 50];
OrgChart.templates.darkGrey.node ='<rect x="0" y="0" height="50" width="{w}" fill="#aeaeae"  rx="7" ry="7"></rect>';
OrgChart.templates.darkGrey.field_0 = "<text " + OrgChart.attr.width + '="145" style="font-family: Montserrat; sans-serif; font-weight: 700; font-size: 16px; text-anchor: middle;" fill="#ffffff" x="125" y="25">{val}</text>';
//OrgChart.templates.myTemplate.link =
//'<path stroke="#aeaeae" stroke-width="1px" fill="none" data-l-id="[{id}][{child-id}]" d="M{xa},{ya} C{xb},{yb} {xc},{yc} {xd},{yd}" />';

//Alterar Cantos redondos
OrgChart.LINK_ROUNDED_CORNERS = 20;

var chart = new OrgChart(document.getElementById("tree"), {
    template: "myTemplate",
    enableSearch: true,
    assistantSeparation: 500,
    lazyLoading: false,
//     //collapse: {
//         level: 1,
//         allChildren: false,
//         visibleLevel: 1,
//    // },

//     expand: {
//         nodes: [0.1, 0.2]
//       },

    menu: {
        pdf: { text: "Export PDF" },
        png: { text: "Export PNG" },
        svg: { text: "Export SVG" },
        csv: { text: "Export CSV" },
        json: { text: "Export JSON" }
    },

    nodeMenu: {
        pdf: { text: "Export PDF" },
        png: { text: "Export PNG" },
        svg: { text: "Export SVG" },
        details: { text: "Details" },
        edit: { text: "Edit" },
        add: { text: "Add" },
        remove: { text: "Remove" }

    },

    nodeBinding: {
        field_0: "Nome",
     //field_1: "Cargo",
     //img_0: "Imagem",
     //field_2:"Matricula"
     partners: {
        left: "left-partner",
        right: "right-partner"
      }
    },

    tags: {
        assistant: {subTreeConfig: {subtreeSeparation: 40,  layout: OrgChart.layout.normal  }
        },
        "assistant": {
            template: "ula"
        },
        "g": {
            template: "group",
        },
        "sl0": {subLevels: 0,},"sl1": {subLevels: 1},"sl2": {subLevels: 2 }, "sl3": {  subLevels: 3
        },
        "darkGrey": {
            template: "darkGrey"
        },
    },
});

chart.load([
    {id: 0, tags: ["g"],  Nome: "0",  },
    {id: 0.1, stpid: 0,  Nome: "0.1", },
    {id: 0.2, pid: 0.1,  Nome: "0.2", },

    { id: 2, pid: 0, Nome: "2", tags: ["g" ,'assistant'] },
    { id: 2.1, stpid: 2, Nome: "2.1" },
    { id: 2.11, pid: 2.1, Nome: "2.11" },
    { id: 2.12, pid: 2.1, Nome: "2.12" },
    { id: 2.13, pid: 2.1, Nome: "2.13" },

    { id: 2.2, pid: 2, tags:['g'], Nome: "2.2"  },
    { id: 2.21, stpid: 2.2, tags:["darkGrey"], Nome: "2.21",},
    { id: 2.211, pid: 2.21, Nome: "2.211",},
    { id: 2.22, stpid: 2.2, tags:["darkGrey"], Nome: "2.22",},
    { id: 2.221, pid: 2.22, Nome: "2.221",},
    { id: 2.23, stpid: 2.2, tags:["darkGrey"], Nome: "2.23", },
    { id: 2.231, pid: 2.23, Nome: "2.231",},

    {id: 3,   pid: 0, tags:["sl0"], Nome: "3"},
    {id: 4,   pid: 0, tags:["sl0"],  Nome: "4"},
    {id: 5,   pid: 0, tags:["sl0"],  Nome: "5"},
    {id: 6,   pid: 0, tags:["sl0"],  Nome: "6"},
    {id: 7,   pid: 0, tags:["sl0"],  Nome: "7"},
    {id: 8,   pid: 0, tags:["sl0"],  Nome: "8"},
    {id: 9,   pid: 0, tags:["sl0"],  Nome: "9"},
    {id: 10,  pid: 0, tags:["sl0"],  Nome: "10"},

]);

HTML code: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Organograma DO TJAP</title>

    <link rel="stylesheet" href="D:\45385\Desktop\organogram\orgchart.css">
    <link rel="stylesheet" href="D:\45385\Desktop\organogram\org.css">
</head>

<body>
    <div id="tree"></div>
    <script src="D:\45385\Desktop\organogram\orgchart.js"></script>
    <script src="D:\45385\Desktop\organogram\org.js"></script>

</body>
</html>

Also, is it possible to show only the first two names of a person in _field0 and not show ellipsis.

naveganth commented 9 months ago

So I managed to do the "button" thing, i just need help adjusting the max font and size

image

As group.max doesn't seem to be working as group.min is.

OrgChart.templates.group.max = Object.assign({}, OrgChart.templates.group);
OrgChart.templates.group.max.field_0 = '<text data-width="230" data-text-overflow="multiline" style="font-family: Montserrat; sans-serif; font-weight: 700; font-size: 24px;" fill="#aeaeae" x="125" y="70" text-anchor="middle">{val}</text>';

Also how to make change the size of the group node when minimized

Nevermind, edited inside the orgchart.js library and managed to make it the font i want

image

naveganth commented 9 months ago

Realized that also you need to click multiple times to minimize and maximize., which is not supposed to happen.

Video showcasing issue 1**** https://github.com/BALKANGraph/OrgChartJS/assets/159157666/76895a5a-650e-4cbf-9c4c-1fe48430ffb0

ZornitsaPesheva commented 9 months ago
  1. The issue is that you have some partners in nodebinding that is wrong and I don't know what is it and why it is there, 
    nodeBinding: {
    field_0: "Nome",
 // field_1: "Cargo",
 //img_0: "Imagem",
 //field_2:"Matricula"
 partners: {
    left: "left-partner",
    right: "right-partner"
  }
},

You can have only objects like this: node_field_name: "data_field_name"

  1. Changed the code example for you: https://code.balkan.app/org-chart-js/issue819#JS
naveganth commented 9 months ago

Thanks for the help again