Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
mv-organization-chart
Advanced tools
Readme
Preview
yarn add mv-organization-chart
<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>
Accept object value to set some component value
change color
and background-color
of name and title card
change color
of tree line
const config = {
info: {
background: 'DodgerBlue',
color: 'white',
},
line: 'LightGrey'
}
Change the title text above the component
Accept object value that complement tree structure data with specific property as shown below:
id
unique identifier for each nodename
node's nametitle
node's titlecolor
node's border colorphoto
node's photo of valid images URLchildren
node's children array of object that consist the same property as the parenttype
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: []
}
FAQs
Machine Vision organization chart component based vuejs
The npm package mv-organization-chart receives a total of 1 weekly downloads. As such, mv-organization-chart popularity was classified as not popular.
We found that mv-organization-chart demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.