Asset-diagram-bactrya NPM

Asset Diagram

Made with create-react-library

Install

npm install --save asset-diagram

Data

const initialTree = {
  nodes: [
    {
      id: "node-1",
      content: {
        id: "A-454",
        security: "secure",
        title: "Personaldaten",
        risks: 5,
        measures: 6,
      },
      coordinates: [0, 0],
    },
    {
      id: "node-2",
      content: {
        id: "A-454",
        security: "secure",
        title: "Server",
        risks: 5,
        measures: 6,
      },
      coordinates: [0, 0],
    },
    {
      id: "node-3",
      content: {
        id: "A-454",
        security: "secure",
        title: "HR-Mitarbeiter",
        risks: 5,
        measures: 6,
      },
      coordinates: [0, 0],
    },
    {
      id: "node-4",
      content: {
        id: "A-454",
        security: "secure",
        title: "Netzwerk",
        risks: 5,
        measures: 6,
      },
      coordinates: [0, 0],
    },
    {
      id: "node-5",
      content: {
        id: "A-454",
        security: "secure",
        title: "Raum 302",
        risks: 5,
        measures: 6,
      },
      coordinates: [0, 0],
    },
    {
      id: "node-6",
      content: {
        id: "A-454",
        security: "secure",
        title: "Aktenschrank",
        risks: 5,
        measures: 6,
      },
      coordinates: [0, 0],
    },
    {
      id: "node-8",
      content: {
        id: "A-454",
        security: "secure",
        title: "Datenbank",
        risks: 5,
        measures: 6,
      },
      coordinates: [0, 0],
    },
    {
      id: "node-9",
      content: {
        id: "A-454",
        security: "secure",
        title: "Office",
        risks: 5,
        measures: 6,
      },
      coordinates: [0, 0],
    },
  ],
  links: [
    { id: 1, input: "node-1", output: "node-9", readonly: false },
    { id: 2, input: "node-9", output: "node-2", readonly: false },
    { id: 3, input: "node-1", output: "node-6", readonly: false },
    { id: 4, input: "node-1", output: "node-3", readonly: false },
    { id: 5, input: "node-2", output: "node-4", readonly: false },
    { id: 6, input: "node-6", output: "node-5", readonly: false },
    { id: 7, input: "node-9", output: "node-8", readonly: false },
    { id: 8, input: "node-8", output: "node-4", readonly: false },
  ],
}

Props

View

React component that will be shown as a node in the asset diagram. Make sure that its data is compatible with the content object from the Tree Data.

onChange

function that triggers everytime when the component is about to change. Returns the new tree data as an javascript object.

const [tree, setTree] = useState(initialTree);

  const handleChange = (data) => {
    setTree(data);
  };

  return (
    <AssetManager
      onClick={val => console.log(val)}
      view={CustomNode}
      tree={tree}
      View={CustomNode}
      onChange={handleChange}
    />
  );

Tree

Data that is shown as a diagram. Make sure that all nodes are connected to their links.

Usage

Create a custom node component

function CustomComponent({content}){
  return (
    <Card className={classes.root} elevation={0}>
      <CardContent>
        <Grid container>
          <Grid xs={6} item>
            <Button
              className={classes.button}
              startIcon={<CheckBoxOutlineBlankIcon />}
            >
              {content.id}
            </Button>
          </Grid>
          <Grid xs={6} item>
            <Grid container justify="flex-end">
              <Label color={color}>
              {content.security}
              </Label>
            </Grid>
          </Grid>
        </Grid>
        <Typography variant="body1" component="h2">
          {content.title}
        </Typography>

        <Typography variant="body2" component="p">
          Risks: {content.risks}
          <br />
          Measures: {content.measures}
        </Typography>
      </CardContent>
    </Card>
  )
};

Import the Asset diagramm

import { AssetManager } from 'asset-diagram-bactrya'


const Test = () => {
  const [tree, setTree] = useState(initialTree)

  const handleChange = (val) => {
    setTree(val)
  }

  return (
      <Container maxWidth={false}>
        <Box mt={3}>
          <ExampleComponent
            onClick={val => console.log(val)}
            tree={tree}
            View={CustomNode}
            onChange={val => handleChange(val)}
          />
        </Box>
      </Container>
  );
};