How to create org-chart with export feature using Mod.

[Sandip Lokhande 2]

We are looking for develop the org-chart using mod can anyone help to create org-chart with incorporating to export functionality. Note, we need to export the org-chart based on expansion of each hierarchy of the chart.

[Olof Bjerke 3]

In order to achieve what you're looking for you need to think of what information needs to be persisted in order to render the visualization in the state you want, from scratch.

A visualization mod is rendered into a sandboxed iframe and when you do an export it is rendered again inside of a separate background browser. In order for that browser to know how to render the visualization, some form of UI state needs to be kept regarding the expanded nodes. 

In a normal browser you might store that information into local storage and there it will be persisted during a page refresh. In a mod you need to use a mod property to store the information that you want to persist. In this case it would be a mapping between node ids and their expanded states.

I've done an experiment with the d3 org chart library and managed to store the expanded state inside a mod property. The main challenge is to use the chart's API. There was even a bug in the chart library where it failed to expand nodes correctly on the initial render. The mod API is only used to pass down and store the data and expansion states. I think the provided prototype is a starting point for further work.

You can see a demo of it here on Spotfire cloud.

 

[Sandip Lokhande 2]

Hi Olof Bjerke,

Thanks for your help and sharing code with us,

When we are trying to add "search by name" function in code it is not working , we have added input filed in main js file like below

var mi = document.createElement("input");

    mi.setAttribute('type', 'text');

    mi.setAttribute('value', '');

    mi.placeholder='search by name';

    mi.style.marginLeft="8px"

    mi.addEventListener("input", filterChart);

    buttons.appendChild(mi);

    document.body.appendChild(buttons);

chart;

     

        function filterChart(e) {

          // Get input value

          const value = e.srcElement.value;

     

          // Clear previous higlighting

          chart.clearHighlighting();

     

          // Get chart nodes

          const data = chart.data();

          console.log("test",data)

     

          // Mark all previously expanded nodes for collapse

          data.forEach((d) => (d._expanded = false));

     

          // Loop over data and check if input value matches any name

          data.forEach((d) => {

            if (value != '' && d.name.toLowerCase().includes(value.toLowerCase())) {

              // If matches, mark node as highlighted

              d._highlighted = true;

              d._expanded = true;

            }

          });

     

          // Update data and rerender graph

          chart.data(data).render().fit();

     

          console.log('filtering chart', e.srcElement.value);

        }