🚚 merge treeviz-react

Author: PierreCapo

.gitignore

@@ -1,4 +1,5 @@
-node_modules
-dist/index.html
+**/node_modules/**
+**/dist/**
+**/storybook-static/**
 yarn-error.log
-.DS_Store
+.DS_Store

.npmignore

@@ -1,3 +1,4 @@
 src
 demo
 public
+treeviz-react

README.md

@@ -25,7 +25,7 @@ Also, but not recommended, you can use : `<script src="https://rawgit.com/Pierre
 
 #### React
 
-Check the treeviz wrapper for react: [treeviz-react](https://github.com/PierreCapo/treeviz-react)
+Check the treeviz wrapper for react: [treeviz-react](./treeviz-react)
 
 #### Vanilla JavaScript
 
@@ -74,7 +74,10 @@ The tree will be clever enough to updates only the part of the trees that have b
 var hierarchical_data_example = {
   name: "Mom",
   qty: 10,
-  children: [{ name: "Son A", qty: 3 }, { name: "Son B", qty: 7 }],
+  children: [
+    { name: "Son A", qty: 3 },
+    { name: "Son B", qty: 7 },
+  ],
 };
 
 var myTree = Treeviz.create({

treeviz-react/.npmignore

@@ -0,0 +1,5 @@
+src
+storybook-static
+stories
+public
+.storybook

treeviz-react/.storybook/addons.js

@@ -0,0 +1,2 @@
+import "@storybook/addon-links/register";
+import "@storybook/addon-knobs/register";

treeviz-react/.storybook/config.ts

@@ -0,0 +1,9 @@
+import { configure } from "@storybook/react";
+// automatically import all files ending in *.stories.tsx
+const req = require.context("../stories", true, /\.stories\.tsx$/);
+
+function loadStories() {
+  req.keys().forEach(req);
+}
+
+configure(loadStories, module);

treeviz-react/.storybook/webpack.config.js

@@ -0,0 +1,11 @@
+module.exports = ({ config, mode }) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve("babel-loader"),
+    options: {
+      presets: [["react-app", { flow: false, typescript: true }]]
+    }
+  });
+  config.resolve.extensions.push(".ts", ".tsx");
+  return config;
+};

treeviz-react/README.md

@@ -0,0 +1,88 @@
+# Treeviz-react
+
+[![Known Vulnerabilities](https://snyk.io/test/github/dwyl/hapi-auth-jwt2/badge.svg?targetFile=package.json)](https://snyk.io/test/github/dwyl/hapi-auth-jwt2?targetFile=package.json)
+![David](https://img.shields.io/david/PierreCapo/treeviz-react)
+[![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)
+
+[Treeviz](https://github.com/PierreCapo/treeviz) implementation for React
+
+![](https://i.imgur.com/zFKuIgC.gif)
+
+<p align="center">
+💅 <a href="https://pierrecapo.github.io/treeviz-react">Come play with the Treeviz storybook!</a> 💅
+</p>
+
+### Usage
+
+```
+npm install treeviz-react
+
+// or
+
+yarn add treeviz-react
+```
+
+```js
+import React from "react";
+import { TreevizReact } from "treeviz-react";
+
+const data = [
+  { id: 1, text_1: "Chaos", text_2: "Void", father: null, color: "#FF5722" },
+  { id: 2, text_1: "Tartarus", text_2: "Abyss", father: 1, color: "#FFC107" },
+  { id: 3, text_1: "Gaia", text_2: "Earth", father: 1, color: "#8BC34A" },
+  { id: 4, text_1: "Eros", text_2: "Desire", father: 1, color: "#00BCD4" }
+];
+
+const Foo = () => {
+  return (
+    <TreevizReact
+      data={data}
+      idKey={"id"}
+      relationnalField={"father"}
+      nodeWidth={200}
+      nodeHeight={100}
+      mainAxisNodeSpacing={2}
+      secondaryAxisNodeSpacing={1.3}
+      renderNode={node =>
+        `<div style="height:${
+          node.settings.nodeHeight
+        }px;display:flex;align-items:center;margin-left:12px">Node name: ${
+          node.data.text_1
+        }</div>`
+      }
+      onNodeClick={node => console.log("you clicked on node " + node.id)}
+      duration={500}
+      linkWidth={node => 3}
+    />
+  );
+};
+```
+
+The tree will automatically update whenever one of those props change. Note that is not recommended to update the relationnalField and the idKey prop once the component has been mounted.
+
+### API
+
+| Prop                       | Type                                          | Default             | Definition                                                                                                                                                                         |
+| -------------------------- | --------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `idKey`                    | string                                        | "id"                | The unique identifier field in the dataset representing the node                                                                                                                   |
+| `relationnalField`         | string                                        | "father"            | In case of flat dataset, usually the relationnal field between each node is the field representing the father of the node, linking it to the id of the field. (See example below). |
+| `hasFlatData`              | boolean                                       | true                | Specify whether the data passed to the tree is flat or already hierarchical                                                                                                        |
+| `hasPanAndZoom`            | boolean                                       | true                | Toggle the ability to pan and zoom the tree                                                                                                                                        |
+| `nodeWidth`                | number                                        | 160                 | Width of a node in px                                                                                                                                                              |
+| `nodeHeight`               | number                                        | 100                 | Height of a node in px                                                                                                                                                             |
+| `linkColor`                | function                                      | (node) => "#ffcc80" | Color of the link                                                                                                                                                                  |
+| `linkWidth`                | function                                      | (node) => 10        | Width of the link                                                                                                                                                                  |
+| `linkShape`                | "quadraticBeziers" \| "orthogonal" \| "curve" | "quadraticBeziers"  | Shape of the link                                                                                                                                                                  |
+| `renderNode`               | function                                      | (node) => null      | HTML template for every node                                                                                                                                                       |
+| `isHorizontal`             | boolean                                       | true                | Direction of the tree. If true, the tree expands from left to right. If false, it goes from top to bottom                                                                          |
+| `onNodeClick`              | function                                      | (node) => null      | Function handling the event when someone click on it                                                                                                                               |
+| `onNodeMouseEnter`         | function                                      | (node) => null      | Function handling the event when someone hover a node                                                                                                                              |
+| `onNodeMouseLeave`         | function                                      | (node) => null      | Function handling the event when the mouse pointer leaves a node                                                                                                                   |
+| `mainAxisNodeSpacing`      | number or "auto"                              | 1.3                 | Set the distance in pixels between two depths in the tree. If the value is `auto` it will automatically display the tree to fit the size of the container.                         |
+| `secondaryAxisNodeSpacing` | number                                        | 1.25                | Set the distance between nodes in the same level as a coefficient of node dimensions. Recommended to have the value superior to 1                                                  |
+| `marginTop`                | number                                        | 1.25                | Set the margin between the SVG element and the tree                                                                                                                                |
+| `marginBottom`             | number                                        | 1.25                | Set the margin between the SVG element and the tree                                                                                                                                |
+| `marginLeft`               | number                                        | 1.25                | Set the margin between the SVG element and the tree                                                                                                                                |
+| `marginRight`              | number                                        | 1.25                | Set the margin between the SVG element and the tree                                                                                                                                |
+| `areaHeight`               | number                                        | 800                 | The height of the area that displays the tree                                                                                                                                      |
+| `areaWidth`                | number                                        | 500                 | the width of the area that displays the tree                                                                                                                                       |

treeviz-react/build/asset-manifest.json

@@ -0,0 +1,13 @@
+{
+  "files": {
+    "main.js": "/static/js/main.c01ce7dc.chunk.js",
+    "main.js.map": "/static/js/main.c01ce7dc.chunk.js.map",
+    "runtime~main.js": "/static/js/runtime~main.a8a9905a.js",
+    "runtime~main.js.map": "/static/js/runtime~main.a8a9905a.js.map",
+    "static/js/2.0cecaac4.chunk.js": "/static/js/2.0cecaac4.chunk.js",
+    "static/js/2.0cecaac4.chunk.js.map": "/static/js/2.0cecaac4.chunk.js.map",
+    "index.html": "/index.html",
+    "precache-manifest.1e75288e59b8859f9d2633d7a719179b.js": "/precache-manifest.1e75288e59b8859f9d2633d7a719179b.js",
+    "service-worker.js": "/service-worker.js"
+  }
+}

treeviz-react/build/favicon.ico

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>React App</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={1:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.0cecaac4.chunk.js"></script><script src="/static/js/main.c01ce7dc.chunk.js"></script></body></html>

treeviz-react/build/index.html

@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

treeviz-react/build/manifest.json

@@ -0,0 +1,18 @@
+self.__precacheManifest = (self.__precacheManifest || []).concat([
+  {
+    "revision": "ad935d05b2fce185b244b2bebd26efe9",
+    "url": "/index.html"
+  },
+  {
+    "revision": "305128248157a3330939",
+    "url": "/static/js/2.0cecaac4.chunk.js"
+  },
+  {
+    "revision": "93db34ffc52e57655e9a",
+    "url": "/static/js/main.c01ce7dc.chunk.js"
+  },
+  {
+    "revision": "42ac5946195a7306e2a5",
+    "url": "/static/js/runtime~main.a8a9905a.js"
+  }
+]);

treeviz-react/build/precache-manifest.1e75288e59b8859f9d2633d7a719179b.js

@@ -0,0 +1,39 @@
+/**
+ * Welcome to your Workbox-powered service worker!
+ *
+ * You'll need to register this file in your web app and you should
+ * disable HTTP caching for this file too.
+ * See https://goo.gl/nhQhGp
+ *
+ * The rest of the code is auto-generated. Please don't update this file
+ * directly; instead, make changes to your Workbox build configuration
+ * and re-run your build process.
+ * See https://goo.gl/2aRDsh
+ */
+
+importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
+
+importScripts(
+  "/precache-manifest.1e75288e59b8859f9d2633d7a719179b.js"
+);
+
+self.addEventListener('message', (event) => {
+  if (event.data && event.data.type === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+workbox.core.clientsClaim();
+
+/**
+ * The workboxSW.precacheAndRoute() method efficiently caches and responds to
+ * requests for URLs in the manifest.
+ * See https://goo.gl/S9QRab
+ */
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+
+workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {
+  
+  blacklist: [/^\/_/,/\/[^/]+\.[^/]+$/],
+});