Skip to main content
Loading...

More JavaScript Posts

class TreeNode {
  constructor(data, depth) {
    this.data = data;
    this.children = [];
    this.depth = depth;
  }
}

function buildNaryTree(hosts) {
  const nodeMap = {};

  // Step 1: Create a map of nodes using fqdn as the key
  hosts.forEach((host) => {
    nodeMap[host.fqdn] = new TreeNode(host, 0); // Initialize depth to 0
  });

  // Step 2: Iterate through the array and add each node to its parent's list of children
  hosts.forEach((host) => {
    if (host.displayParent) {
      if (nodeMap[host.displayParent]) {
        const parent = nodeMap[host.displayParent];
        const node = nodeMap[host.fqdn];
        node.depth = parent.depth + 1; // Update the depth
        parent.children.push(node);
      } else {
        console.error(`Parent with fqdn ${host.displayParent} not found for ${host.fqdn}`);
      }
    }
  });

  // Find the root nodes (nodes with no parent)
  const rootNodes = hosts.filter((host) => !host.displayParent).map((host) => nodeMap[host.fqdn]);

  return rootNodes;
}

function treeToObjects(node) {
  const result = [];

  function inOrder(node) {
    if (!node) {
      return;
    }

    
    // Visit the current node and add it to the result
    result.push(node.data);

    // Visit children nodes first
    node.children.forEach((child) => {
      inOrder(child);
    });
  }

  inOrder(node);
  return result;
}

// Usage example
const hosts = [
  {
    fqdn: 'fqdn_1',
    display_name: 'Host 1',
  },
  {
    fqdn: 'fqdn_2',
    display_name: 'Host 2',
    displayParent: 'fqdn_1',
  },
  {
    fqdn: 'fqdn_3',
    display_name: 'Host 3'
  },
  {
    fqdn: 'fqdn_4',
    display_name: 'Host 4',
    displayParent: 'fqdn_3',
  },
  {
    fqdn: 'fqdn_5',
    display_name: 'Host 5',
    displayParent: 'fqdn_1',
  },
];

const tree = buildNaryTree(hosts);

// Function to convert the tree to an array of objects
function convertTreeToArray(nodes) {
  const result = [];
  nodes.forEach((node) => {
    result.push(...treeToObjects(node));
  });
  return result;
}

// Convert the tree back to an array of objects
const arrayFromTree = convertTreeToArray(tree);

console.log(arrayFromTree);
const rectSize = 15; // Size of the color box
        const spacing = 5; // Space between legend items
        let legend = canvas.append('g').attr('class','chart-legend')
        .attr('transform', `translate(${0}, ${height + 3})`);

        // Sample data for the legend
        const legendData = [
            { label: 'low', color: '#1f77b4' },
            { label: 'medium', color: '#ff7f0e' },
            { label: 'high', color: '#2ca02c' },
            { label: 'very high', color: '#2ca02c' }
        ];


        legend.selectAll('g')
            .data(legendData)
            .join('g')
            .attr('class', 'legend-item')
            
            .each(function (d, i) {
                const legendItem = d3.select(this);
                console.log(d.label)
                console.log(d.label?.length)
                let labelWidth = (d.label.length * 5) + 7 + 15
                

                var bbox = legendItem.node().getBBox()
                var width = bbox.width
                console.log(width)
                
                // Add rectangle for color
                legendItem.append('rect')
                    .attr('width', rectSize)
                    .attr('height', rectSize)
                    .attr('fill', d.color);
                    
                    // Add label
                    legendItem.append('text')
                    .attr('x', rectSize + spacing) // Position text to the right of the rectangle
                    .attr('y', rectSize / 2) // Align text vertically with the rectangle
                    .attr('dy', '.35em') // Adjust vertical alignment
                    .attr('text-anchor', 'start') // Align text to the start
                    .text(d.label)
                    .attr('fill', 'black'); // Optional: Text color
                // legendItem.attr('transform', `translate(${i * (rectSize + spacing + labelWidth)}, 0)`) // Position each item horizontally
            });

            const legendItems_spacing = 12
            var legendLength = 0
            legend.selectAll('.legend-item').each(function(d,i) {
              d3.select(this).attr('transform',function() {
                var bbox = d3.select(this).node().getBBox()
                var width = bbox.width
                // if (width == 0) width = (d.text.length * 5) +15  // not in dom yet
                let startingPosition = 0 
                if (i > 0) {
                    startingPosition = legendLength
                }
                legendLength += width + legendItems_spacing
                
                // return `translate(${xx - (width + 30)},0$)`
                return `translate(${startingPosition},0)`
            })
            })