zim-graphviz

Short Description

React component for generalized generation of graphs (e.g. directed or not). Tries to harmonize types according to all zim components via Typescript at compile time.

Files from src/lib are compiled to lib folder on root lvl (which is then published to npm)

Uses create-react-app setup for display demo application

Demos and Examples

Network Graph - KONDE Weißbuch konde-graph on zimlab

take a look at src/demo/index.tsx: via npm run start you may start the dev setup from create-react-app (but there need to be two changes made to the tsconfig.json) react-scripts will print necessary adaptions to console. (change baseUrl + noEmit to true)

Acknowledgement(s)

• using wonderful react-d3-graph library (https://www.npmjs.com/package/react-d3-graph)
• d3.js

Quickstart

• minimal configuration

// example return in React Functional Component
return (
  <ZIMGraphViz.Comp 
    id="demo-id01" 
    // provide data here
    data={{
    nodes: [
      {id: "1", label: "Peter", value: "https://wikipedia.org"},
      {id: "2", label: "Max", value: "https://google.com"},
      {id: "3", label: "Frida", value: "https://google.com"},
      {id: "4", label: "Thomas", value: "https://google.com"}
    ],
    links: [
      {source:"1",target:"2"},    
      {source:"1",target:"3"},    
      {source:"1",target:"4"},    
      {source:"2",target:"4"},    
      {source:"3",target:"1"},
    ]
  }}
    
    // **optional from here **
    // allows to get analysis data like calculated coordinates
    // false by default
    curatorMode={true}   
    // graphConfiguration see advanced section
  />
  )

Advanced

• provide custom graph configuration according to this official api doc

  <ZIMGraphViz.Comp
    id="demo-id02" 
    data={demoData.small}
    // pro
    graphConfiguration={{
      // example for maybe most important configuration params
      directed:false,
      height: 300,
      width: 300,
      staticGraph: false,    // will stop after first render (needs x and y variables on node lvl)
      initialZoom: .5,
      // ... 
      // Global node config
      nodeHighlightBehavior: true,
      node: {
        color: "blue",
        highlightColor: "lightgreen",
        size: 500,
        // decides which prop of node should be used for rendering the label
        labelProperty: "value",
        fontSize: 12,
        highlightFontSize: 12
      },
      // Global link config
      // linkHighlightBehavior: true,
      link: {
        color: "lightblue",
        labelProperty: "target",
        strokeWidth: 4
      },
      // d3 property to manipualte graph rendering
      d3: {
        gravity: -100,  // force between nodes
        linkLength: 100 // fore between links
        // ...
      }
    }}
  />

Extract calculated data to static graph

• useful to pre-calculate performance intense operations (like link strenth etc.) and then to statically create the graph.
• using the curatorMode prop.
  1. if set to true: allows to extract the original data with additional calculation information from the graph
  2. statically save the data and apply to your component via the graphConfiguration prop. (node / link)

Contribute

Useful Resources

• https://medium.com/@jchiam/publishing-a-typescript-react-component-to-npm-d3cc15b8d0a2
• https://itnext.io/step-by-step-building-and-publishing-an-npm-typescript-package-44fe7164964c

Create react app and useful stuff

• https://github.com/wmonk/create-react-app-typescript/blob/master/template/README.md#publishing-components-to-npm

Important Scripts

# locally build publishable lib folder
# this folder will be published by npm publish later on
npm run npm:build

# login to npm before
npm login

# apply new version
npm version x.y.z

# then publish to npmjs 
npm publish