Skip to content
This repository was archived by the owner on Mar 9, 2020. It is now read-only.

⬆️ Bump eslint-utils from 1.4.0 to 1.4.3 #2

Open
dependabot wants to merge 2 commits into
base: master
Choose a base branch
from
Open

⬆️ Bump eslint-utils from 1.4.0 to 1.4.3 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c0de60
Archive repository
Mar 8, 2020
9b36fc0
:arrow_up: Bump eslint-utils from 1.4.0 to 1.4.3
dependabot[bot] Mar 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 1 addition & 86 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,88 +1,3 @@
# 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 |
MOVED TO https://github.com/treeviz/treeviz-react
16 changes: 8 additions & 8 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4811,16 +4811,16 @@ eslint-scope@^4.0.0, eslint-scope@^4.0.3:
estraverse "^4.1.1"

eslint-utils@^1.3.1:
version "1.4.0"
resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.0.tgz#e2c3c8dba768425f897cf0f9e51fe2e241485d4c"
integrity sha512-7ehnzPaP5IIEh1r1tkjuIrxqhNkzUJa9z3R92tLJdZIVdWaczEhr3EbhGtsMrVxi1KeR8qA7Off6SWc5WNQqyQ==
version "1.4.3"
resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
integrity sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==
dependencies:
eslint-visitor-keys "^1.0.0"
eslint-visitor-keys "^1.1.0"

eslint-visitor-keys@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==
eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
integrity sha512-8y9YjtM1JBJU/A9Kc+SbaOV4y29sSWckBwMHa+FGtVj5gN/sbnKDf6xJUl+8g7FAij9LVaP8C24DUiH/f/2Z9A==

eslint@^5.16.0:
version "5.16.0"
Expand Down