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
252 stars 84 forks source link

Issue with Node Colors in OrgChart #860

Closed NivekStarks closed 2 months ago

NivekStarks commented 2 months ago

I am encountering an issue where the colors assigned to nodes in OrgChart are not being applied correctly. Despite setting up the colors for each level, the nodes always appear in black.

I have created a column in my SQL database to store the level information. This column is correctly populated with values like 1, 2, etc., up to 6.

Relevant Code:

Here is the code used to set node colors:

const getColorByLevel = (level) => { const color = [ '#0d5a4d', '#3ea938', '#572a86', '#d3d800', '#003166', '#0071b9', '#ffffff', ][level]; console.log('color', color, level); return color; };

OrgChart.templates.ana.nodeBinding = { field_0: 'LIBELLE', field_1: 'SERVICE', color: 'COLOR', };

OrgChart.templates.ana.node = `

`;

const mytree = (domEl, x) => { const nodesWithColor = x.map((n) => { const color = getColorByLevel(n.LEVEL); console.log('Node:', n, 'Color:', color); // Debugging line return { ...n, COLOR: color }; });

const chart = new OrgChart(domEl, { template: 'ana', nodeBinding: { field_0: 'LIBELLE', field_1: 'SERVICE', color: 'COLOR', }, node: nodesWithColor, });

chart.load(nodesWithColor); };

ZornitsaPesheva commented 2 months ago

Please isolate the issue in a running Code example: https://code.balkan.app/org-chart-js/simple-example#JS

NivekStarks commented 2 months ago

https://code.balkan.app/issue-with-node-colors-in-orgchart#JS

ZornitsaPesheva commented 2 months ago

I don't understand what you are trying to do. Nodebinding has nothing to do with colors. You can use tags instead of LEVEL to set the colors: https://code.balkan.app/orgchart-js/issue860#JS

NivekStarks commented 2 months ago

No, not that. I created an SQL table with a column level where 1 = Level 1 (tree). I want the background color to be determined based on the level. For example, LEVEL 1 = green, LEVEL 2 = blue, etc.

ZornitsaPesheva commented 2 months ago

You can do this: https://code.balkan.app/orgchart-js/issue860-1#JS

NivekStarks commented 2 months ago

Thank you !

with your suggestion I changed it it works

for (let i = 0; i < nodes.value.length; i++) {
        let node = nodes.value[i];
        'node', node;
        switch (node.LEVEL) {
          case 0:
            node.tags = ['l0'];
            break;
          case 1:
            node.tags = ['l1'];
            break;