I want to using 'compact' and 'verticalLevel' option together.

[jejecrunch]

Version

4.0.0

Future Status

Description

I want to make sure that the images and layout remain intact when using the 'compact' and 'verticalLevel' options together.

Resolution

1. Changes the layout when both states exist.
2. In 'verticalLevel', instead of recognizing only numbers, they can be recognized by receiving a callback function.

Current Status

Description

I've seen that using the 'compact' and 'verticalLevel' options together breaks both the layout and images.

Image

Code

(function($) {
  $(function() {
  var datasource = {
      'name': 'Lao Lao',
      'title': 'general manager',
      'children': [
        { 'name': 'Bo Miao', 'title': 'department manager', 'compact': true,
          'children': [
            { 'name': 'Fei Xuan', 'title': 'engineer' },
            { 'name': 'Er Xuan', 'title': 'engineer' },
            { 'name': 'San Xuan', 'title': 'engineer' },
            { 'name': 'Si Xuan', 'title': 'engineer', 'compact': true,
              'children': [
                { 'name': 'Feng Shou', 'title': 'engineer' },
                { 'name': 'Er Shou', 'title': 'engineer' },
                { 'name': 'San Shou', 'title': 'engineer' },
                { 'name': 'Si Shou', 'title': 'engineer' }
              ]
            },
            { 'name': 'Wu Xuan', 'title': 'engineer' }
          ]
        },
        { 'name': 'Su Miao', 'title': 'department manager',
          'children': [
            { 'name': 'Tie Hua', 'title': 'senior engineer' },
            { 'name': 'Hei Hei', 'title': 'senior engineer',
              'children': [
                { 'name': 'Dan Dan', 'title': 'engineer' },
                { 'name': 'Er Dan', 'title': 'engineer' },
                { 'name': 'San Dan', 'title': 'engineer' },
                { 'name': 'Si Dan', 'title': 'engineer' },
                { 'name': 'Wu Dan', 'title': 'engineer' },
                { 'name': 'Liu Dan', 'title': 'engineer' },
                { 'name': 'Qi Dan', 'title': 'engineer' },
                { 'name': 'Ba Dan', 'title': 'engineer' },
                { 'name': 'Jiu Dan', 'title': 'engineer' },
                { 'name': 'Shi Dan', 'title': 'engineer' }
              ]
            },
            { 'name': 'Pang Pang', 'title': 'senior engineer' }
          ]
        },
        { 'name': 'Hong Miao', 'title': 'department manager' }
      ]
    };

    $('#chart-container').orgchart({
      'data' : datasource,
      'nodeContent': 'title',
      'verticalLevel': 3,
      'compact': function(data) {
        return data?.children?.length >=10;
      }
    });

  });
})(jQuery);