First Look - Demos | BALKAN OrgChartJS

Enabled Org Chart JS features - Drag&drop, Sub trees, Mixed orientations, Edit, Search, Assistant and meny more. author(s): BALKAN Software Plamen Peshev

HTML

<script src="https://balkan.app/js/OrgChart.js"></script>

<div id="tree"></div>

CSS

html, body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    font-family: Helvetica;
    overflow: hidden;
}

#tree {
    width: 100%;
    height: 100%;
}

/*partial*/
[lcn='hr-team']>rect {
    fill: #FFCA28;
}

[lcn='sales-team']>rect {
    fill: #F57C00;
}

[lcn='top-management']>rect {
    fill: #f2f2f2;
}

[lcn='top-management']>text,
.assistant>text {
    fill: #aeaeae;
}

[lcn='top-management'] circle,
[lcn='assistant'] {
    fill: #aeaeae;
}

.assistant>rect {
    fill: #ffffff;
}

.assistant [data-ctrl-n-menu-id]>circle {
    fill: #aeaeae;
}

.it-team>rect {
    fill: #b4ffff;
}

.it-team>text {
    fill: #039BE5;
}

.it-team>[data-ctrl-n-menu-id] line {
    stroke: #039BE5;
}

.it-team>g>.ripple {
    fill: #00efef;
}

.hr-team>rect {
    fill: #fff5d8;
}

.hr-team>text {
    fill: #ecaf00;
}

.hr-team>[data-ctrl-n-menu-id] line {
    stroke: #ecaf00;
}

.hr-team>g>.ripple {
    fill: #ecaf00;
}

.sales-team>rect {
    fill: #ffeedd;
}

.sales-team>text {
    fill: #F57C00;
}

.sales-team>[data-ctrl-n-menu-id] line {
    stroke: #F57C00;
}

.sales-team>g>.ripple {
    fill: #F57C00;
}

JavaScript

window.onload = function () {
    OrgChart.templates.ana.plus = '<circle cx="15" cy="15" r="15" fill="#ffffff" stroke="#aeaeae" stroke-width="1"></circle>'
        + '<text text-anchor="middle" style="font-size: 18px;cursor:pointer;" fill="#757575" x="15" y="22">{collapsed-children-count}</text>';

    OrgChart.templates.itTemplate = Object.assign({}, OrgChart.templates.ana);
    OrgChart.templates.itTemplate.nodeMenuButton = "";
    OrgChart.templates.itTemplate.nodeCircleMenuButton = {
                radius: 18,
                x: 250,
                y: 60,
                color: '#fff',
                stroke: '#aeaeae'
            };

    OrgChart.templates.invisibleGroup.padding = [20, 0, 0, 0];

    var chart = new OrgChart(document.getElementById("tree"), {
        template: "ana",
        enableDragDrop: true,
        assistantSeparation: 170,
        nodeCircleMenu: {
            details: {
              icon: OrgChart.icon.details(24, 24, '#aeaeae'),
              text: "Details",
              color: "white"
            },
            edit: {
              icon: OrgChart.icon.edit(24, 24, '#aeaeae'),
              text: "Edit node",
              color: "white"
            },
            add: {
              icon: OrgChart.icon.add(24, 24, '#aeaeae'),
              text: "Add node",
              color: "white"
            },
            remove: {
              icon: OrgChart.icon.remove(24, 24, '#aeaeae'), 
              text: "Remove node",
              color: '#fff',
            },
            addLink: {
              icon: OrgChart.icon.link(24, 24, '#aeaeae'), 
              text: "Add C link(drag and drop)",
              color: '#fff',
              draggable: true
            }
          },
        menu: {
            pdfPreview: {
                text: "Export to PDF",
                icon: OrgChart.icon.pdf(24, 24, '#7A7A7A'),
                onClick: preview
            },
            csv: { text: "Save as CSV" }
        },
       ...