# mv-organization-charts

> Machine Vision organization chart component based vuejs

Latest version **0.1.12** (published 2022-04-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install mv-organization-charts
pnpm add mv-organization-charts
yarn add mv-organization-charts
bun add mv-organization-charts
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.12 |
| Published | 2022-04-09 |
| First published | 2022-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Machine Vision |
| Maintainers | savano20 |
| Keywords | vuejs, organization, chart, mv-organization-charts, tree, tree-like, tree-view |

## Links

- npm: https://www.npmjs.com/package/mv-organization-charts
- npm.io page: https://npm.io/package/mv-organization-charts

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.5.17
- [jquery](https://npm.io/package/jquery.md) ^3.3.1
- [vue-perfect-scrollbar](https://npm.io/package/vue-perfect-scrollbar.md) ^0.2.1

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.1.12 (latest) — 2022-04-09
- 0.1.10 — 2022-03-29

## README

# MV Organization Chart
Preview
<p style="text-align: center;">
<img src="preview.png" alt="preview" />
</p>

# Installation

```
yarn add mv-organization-charts
```

# Usage

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

<script>
import MvOrganizationChart from "mv-organization-charts";
import "mv-organization-charts/dist/mv-organization-charts.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](#config)
 - [title](#title)
 - [datasource](#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

```js
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`

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

---
_Source: https://npm.io/package/mv-organization-charts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._