Star

Vue organogram

Vue organogram working example on codesandbox.


Component installation

npm i @jsuites/organogram

Organogram component

<template>
  <div ref="organogram"></div>
</template>
  
<script>
import organogram from "@jsuites/organogram";
import "@jsuites/organogram/organogram.css";

export default {
  name: "Organogram",
  props: {
    properties: Object,
  },
  mounted: function () {
    organogram(this.$refs.organogram, this.$props.properties);
  },
};
</script>

Component usage

<template>
  <div id="app">
    <h3>Vue organogram example</h3>
    <Organogram
      v-bind:properties="{
        width: 460,
        height: 420,
        onclick: handleOrganogramClick,
        data: [
          {
            id: 1,
            name: 'Jorge',
            role: 'CEO',
            parent: 0,
            status: '#90EE90',
            img:
              'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg',
          },
          {
            id: 2,
            name: 'Antonio',
            role: 'Vice president',
            parent: 1,
            status: '#90EE90',
            img:
              'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg',
          },
          {
            id: 3,
            name: 'Manoel',
            role: 'Production manager',
            parent: 1,
            status: '#D3D3D3',
            img:
              'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg',
          },
          {
            id: 4,
            name: 'Pedro',
            role: 'Intern',
            parent: 3,
            status: '#90EE90',
            img:
              'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg',
          },
          {
            id: 5,
            name: 'Carlos',
            role: 'Intern',
            parent: 3,
            status: '#90EE90',
            img:
              'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg',
          },
          {
            id: 6,
            name: 'Marcos',
            role: 'Marketing manager',
            parent: 2,
            status: '#D3D3D3',
            img:
              'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg',
          },
          {
            id: 7,
            name: 'Ana',
            role: 'Sales manager',
            parent: 2,
            status: '#90EE90',
            img:
              'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg',
          },
          {
            id: 8,
            name: 'Nicolly',
            role: 'Operations manager',
            parent: 2,
            status: '#D3D3D3',
            img:
              'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg',
          },
          {
            id: 9,
            name: 'Paulo',
            role: 'Sales assistant',
            parent: 7,
            status: '#90EE90',
            img:
              'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg',
          },
          {
            id: 10,
            name: 'Iris',
            role: 'Sales assistant',
            parent: 7,
            status: '#90EE90',
            img:
              'https://icon-library.com/images/no-user-image-icon/no-user-image-icon-23.jpg',
          },
        ],
        vertical: false,
      }"
    />
  </div>
</template>
  
<script>
import Organogram from "./components/Organogram";

export default {
  name: "App",
  components: {
    Organogram,
  },
  methods: {
    handleOrganogramClick: function (el, obj, event) {
      console.log(event.target);
    },
  },
};
</script>