MV Organization Chart

Preview

Installation

yarn add mv-organization-chart

Usage

<template>
  <div>
    <mv-organization-chart
      :datasource="organizationData"
      title="Machine Vision"
      :config="config"
    ></mv-organization-chart>
  </div>
</template>

<script>
import MvOrganizationChart from "mv-organization-chart";
import "mv-organization-chart/dist/mv-organization-chart.css";

export default {
  components: {
    MvOrganizationChart,
  },
  data() {
    return {
      config: {
        info: {
          background: 'DodgerBlue',
          color: 'white',
        },
        line: 'LightGrey'
      },
      organizationData: {
        id: "1",
        name: "Lao Lao",
        title: "general manager",
        color: "DeepSkyBlue",
        type: "circle",
        photo:
          "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
        children: [
          {
            id: "2",
            name: "Bo Miao",
            title: "department manager",
            color: "red",
            type: "square",
            photo:
              "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
          },
          {
            id: "3",
            name: "Su Miao",
            title: "department manager",
            color: "grey",
            type: "square",
            photo:
              "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",

            children: [
              {
                id: "4",
                name: "Tie Hua",
                title: "senior engineer",
                color: "DarkOrange",
                type: "circle",
                photo:
                  "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
              },
              {
                id: "5",
                name: "Hei Hei",
                title: "senior engineer",
                color: "DeepSkyBlue",
                type: "circle",
                photo:
                  "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",

                children: [
                  {
                    id: "6",
                    name: "Pang Pang",
                    title: "engineer",
                    color: "DeepSkyBlue",
                    type: "circle",
                    photo:
                      "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
                  },
                  {
                    id: "7",
                    name: "Xiang Xiang",
                    title: "UE engineer",
                    color: "DeepSkyBlue",
                    type: "square",
                    photo:
                      "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
                  },
                ],
              },
            ],
          },
          {
            id: "8",
            name: "Hong Miao",
            title: "department manager",
            color: "DeepSkyBlue",
            type: "square",
            photo:
              "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
          },
          {
            id: "9",
            name: "Chun Miao",
            title: "department manager",
            color: "DeepSkyBlue",
            type: "square",
            photo:
              "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
          },
        ],
      },
    };
  },
};
</script>

Props

• config
• title
• datasource

Config

Accept object value to set some component value

info

change color and background-color of name and title card

line

change color of tree line

const config = {
  info: {
    background: 'DodgerBlue',
    color: 'white',
  },
  line: 'LightGrey'
}

Title

Change the title text above the component

Datasource

Accept object value that complement tree structure data with specific property as shown below:

• id unique identifier for each node
• name node's name
• title node's title
• color node's border color
• photo node's photo of valid images URL
• children node's children array of object that consist the same property as the parent
• type node's border type that accept square or circle with default value circle

cosnt datasource = {
  id: "1",
  name: "Lao Lao",
  title: "general manager",
  color: "DeepSkyBlue",
  type: "square",
  photo:
    "https://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50",
  children: []
}