Code Visualization with ZingChart

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background: #f9f9f9;
    }

    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 950px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body class="zc-body">
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // DEFINE ALL CLASSES
    // Level 1
    class User {
      constructor(username, email) {
        this.username = username;
        this.email = email;
      }
      login() {
        console.log(`${this.username} logged in.`);
      }
    }
    // Level 2
    class Admin extends User {
      constructor(username, email) {
        super(username, email);
      }
      manageUsers() {
        console.log(`${this.username} is managing users.`);
      }
    }
    class Member extends User {
      constructor(username, email) {
        super(username, email);
      }
      accessContent() {
        console.log(`${this.username} is accessing content.`);
      }
    }
    // Level 3
    class SuperAdmin extends Admin {
      constructor(username, email) {
        super(username, email);
      }
      manageSystem() {
        console.log(`${this.username} is managing the entire system.`);
      }
    }
    class Moderator extends Admin {
      constructor(username, email) {
        super(username, email);
      }
      moderateContent() {
        console.log(`${this.username} is moderating content.`);
      }
    }
    class RegularMember extends Member {
      constructor(username, email) {
        super(username, email);
      }
      comment() {
        console.log(`${this.username} is commenting on content.`);
      }
    }
    class PremiumMember extends Member {
      constructor(username, email) {
        super(username, email);
      }
      accessPremiumContent() {
        console.log(`${this.username} is accessing premium content.`);
      }
    }
    // Level 4
    class GlobalSuperAdmin extends SuperAdmin {
      constructor(username, email) {
        super(username, email);
      }
      manageGlobalSystem() {
        console.log(`${this.username} is managing the global system.`);
      }
    }
    class ContentModerator extends Moderator {
      constructor(username, email) {
        super(username, email);
      }
      reviewReports() {
        console.log(`${this.username} is reviewing reports.`);
      }
    }
    class BasicMember extends RegularMember {
      constructor(username, email) {
        super(username, email);
      }
      viewContent() {
        console.log(`${this.username} is viewing content.`);
      }
    }
    class VIPMember extends PremiumMember {
      constructor(username, email) {
        super(username, email);
      }
      accessExclusiveContent() {
        console.log(`${this.username} is accessing exclusive content.`);
      }
    }
    // Get a list of all of the classes
    const classList = new Set();
    classList.add(User);
    classList.add(Admin);
    classList.add(Member);
    classList.add(SuperAdmin);
    classList.add(Moderator);
    classList.add(RegularMember);
    classList.add(PremiumMember);
    classList.add(GlobalSuperAdmin);
    classList.add(ContentModerator);
    classList.add(BasicMember);
    classList.add(VIPMember);
    // Loop over the classes and define their parent relationships
    const chartData = Array.from(classList).map((className) => {
      return {
        type: 'node',
        id: className.name,
        name: className.name,
        parent: Object.getPrototypeOf(className).name
      };
    });
    let chartConfig = {
      type: 'tree',
      backgroundColor: '#f9f9f9',
      options: {
        aspect: 'tree-down',
        orgChart: true,
        packingFactor: 2,
        node: {
          height: '80px',
          width: '150px',
          borderColor: '#333333',
          borderWidth: '1px',
          shadow: true,
          shadowAlpha: 0.5,
          shadowDistance: '2px',
          label: {
            color: 'black',
            fontSize: '14px',
          },
          hoverState: {
            visible: false,
          },
          tooltip: {
            text: '<b>%text</b><br>%data-title',
          },
        },
      },
      plotarea: {
        margin: '30px 40x 20x 40px',
      },
      series: chartData,
    };
    zingchart.render({
      id: 'myChart',
      data: chartConfig,
      height: '100%',
      width: '100%',
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body class="zc-body">
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
</body>

</html>

.zc-body {
  background: #f9f9f9;
}

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 950px;
}

.zc-ref {
  display: none;
}

// DEFINE ALL CLASSES
// Level 1
class User {
  constructor(username, email) {
    this.username = username;
    this.email = email;
  }
  login() {
    console.log(`${this.username} logged in.`);
  }
}
// Level 2
class Admin extends User {
  constructor(username, email) {
    super(username, email);
  }
  manageUsers() {
    console.log(`${this.username} is managing users.`);
  }
}
class Member extends User {
  constructor(username, email) {
    super(username, email);
  }
  accessContent() {
    console.log(`${this.username} is accessing content.`);
  }
}
// Level 3
class SuperAdmin extends Admin {
  constructor(username, email) {
    super(username, email);
  }
  manageSystem() {
    console.log(`${this.username} is managing the entire system.`);
  }
}
class Moderator extends Admin {
  constructor(username, email) {
    super(username, email);
  }
  moderateContent() {
    console.log(`${this.username} is moderating content.`);
  }
}
class RegularMember extends Member {
  constructor(username, email) {
    super(username, email);
  }
  comment() {
    console.log(`${this.username} is commenting on content.`);
  }
}
class PremiumMember extends Member {
  constructor(username, email) {
    super(username, email);
  }
  accessPremiumContent() {
    console.log(`${this.username} is accessing premium content.`);
  }
}
// Level 4
class GlobalSuperAdmin extends SuperAdmin {
  constructor(username, email) {
    super(username, email);
  }
  manageGlobalSystem() {
    console.log(`${this.username} is managing the global system.`);
  }
}
class ContentModerator extends Moderator {
  constructor(username, email) {
    super(username, email);
  }
  reviewReports() {
    console.log(`${this.username} is reviewing reports.`);
  }
}
class BasicMember extends RegularMember {
  constructor(username, email) {
    super(username, email);
  }
  viewContent() {
    console.log(`${this.username} is viewing content.`);
  }
}
class VIPMember extends PremiumMember {
  constructor(username, email) {
    super(username, email);
  }
  accessExclusiveContent() {
    console.log(`${this.username} is accessing exclusive content.`);
  }
}
// Get a list of all of the classes
const classList = new Set();
classList.add(User);
classList.add(Admin);
classList.add(Member);
classList.add(SuperAdmin);
classList.add(Moderator);
classList.add(RegularMember);
classList.add(PremiumMember);
classList.add(GlobalSuperAdmin);
classList.add(ContentModerator);
classList.add(BasicMember);
classList.add(VIPMember);
// Loop over the classes and define their parent relationships
const chartData = Array.from(classList).map((className) => {
  return {
    type: 'node',
    id: className.name,
    name: className.name,
    parent: Object.getPrototypeOf(className).name
  };
});
let chartConfig = {
  type: 'tree',
  backgroundColor: '#f9f9f9',
  options: {
    aspect: 'tree-down',
    orgChart: true,
    packingFactor: 2,
    node: {
      height: '80px',
      width: '150px',
      borderColor: '#333333',
      borderWidth: '1px',
      shadow: true,
      shadowAlpha: 0.5,
      shadowDistance: '2px',
      label: {
        color: 'black',
        fontSize: '14px',
      },
      hoverState: {
        visible: false,
      },
      tooltip: {
        text: '<b>%text</b><br>%data-title',
      },
    },
  },
  plotarea: {
    margin: '30px 40x 20x 40px',
  },
  series: chartData,
};
zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%',
});