Skip to content

Commit 5c15852

Browse files
PierreCapoPierreCapo
authored
🚧 Prepare v2 (#19)
* 🚧 Prepare v2 * 🎨 Fix tslint * 📦 2.0.0 version
1 parent 3400d69 commit 5c15852

25 files changed

+2547
-188
lines changed

‎README.md

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Treeviz
22

3+
[![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)
4+
![David](https://img.shields.io/david/PierreCapo/treeviz)
5+
[![license](https://badgen.now.sh/badge/license/BSD)](./LICENSE)
6+
37
This javascript module aims at providing an easy interface in order to represent tree diagrams on screen with the ability to handle dynamic data flows. The data format must be JSON.
48

59
![](https://i.imgur.com/vyB2Erg.gif)
@@ -71,16 +75,15 @@ The table below lists all the avalaible key that the config object can have
7175
| `htmlID` | string (Required) | | The HTML id tag on the page where the tree should be drawn. It must have a width and an height specified |
7276
| `nodeField` | string | "id" | The unique identifier field in the dataset representing the node |
7377
| `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). |
74-
| `flatData` | boolean | true | Specify whether the data passed to the tree is flat or already hierarchical |
75-
| `zoomBehavior` | boolean | true | Toggle the ability to pan and zoom the tree |
78+
| `hasFlatData` | boolean | true | Specify whether the data passed to the tree is flat or already hierarchical |
79+
| `hasPanAndZoom` | boolean | true | Toggle the ability to pan and zoom the tree |
7680
| `nodeWidth` | number | 160 | Width of a node in px |
7781
| `nodeHeight` | number | 100 | Height of a node in px |
78-
| `nodeColor` | function | (nodeData) => "#2196f3" | Color of the node |
7982
| `linkColor` | function | (nodeData) => "#ffcc80" | Color of the link |
8083
| `linkWidth` | function | (nodeData) => 10 | Width of the link |
8184
| `linkShape` | "quadraticBeziers" \| "orthogonal" | "quadraticBeziers" | Shape of the link |
82-
| `nodeTemplate` | function | (nodeData) => null | HTML template for every node |
83-
| `horizontalLayout` | boolean | true | Direction of the tree. If true, the tree expands from left to right. If false, it goes from top to bottom |
85+
| `renderNode` | function | (nodeData) => null | HTML template for every node |
86+
| `isHorizontal` | boolean | true | Direction of the tree. If true, the tree expands from left to right. If false, it goes from top to bottom |
8487
| `onNodeClick` | function | (nodeData) => null | Function handling the event when someone click on it |
8588
| `onNodeMouseEnter` | function | (nodeData) => null | Function handling the event when someone hover a node |
8689
| `onNodeMouseLeave` | function | (nodeData) => null | Function handling the event when the mouse pointer leaves a node |
@@ -93,7 +96,7 @@ The table below lists all the avalaible key that the config object can have
9396

9497
## Example
9598

96-
Assuming that you already have an HTML element on the pagh with the tag `id="a_tree"`
99+
Assuming that you already have an HTML element on the page with the tag `id="a_tree"`
97100

98101
#### Flat data case :
99102

‎demo/demo.html

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@
1818
{ id: 1, text_1: "Chaos", text_2: "Void", father: null, color:"#FF5722" },
1919
{ id: 2, text_1: "Tartarus", text_2: "Abyss", father: 1, color:"#FFC107" },
2020
{ id: 3, text_1: "Gaia", text_2: "Earth", father: 1, color:"#8BC34A" },
21-
{ id: 4, text_1: "Eros", text_2: "Desire", father: 1, color:"#00BCD4" }
22-
];
21+
{ id: 4, text_1: "Eros", text_2: "Desire", father: 1, color:"#00BCD4" }];
2322

2423
var data_2 = [
2524
{ id: 1, text_1: "Chaos", text_2: " Void", father: null, color:"#2196F3" },
@@ -37,21 +36,30 @@
3736
{ id: 5, text_1: "Uranus", text_2: "Sky", father: 3,color:"#4CAF50" },
3837
{ id: 6, text_1: "Ourea", text_2: "Mountains", father: 3,color:"#FF9800" },
3938
{ id: 7, text_1: "Hermes", text_2: " Sky", father: 4,color:"#2196F3" },
40-
{ id: 8, text_1: "Aphrodite", text_2: "Love", father: 4,color:"#8BC34A" }
39+
{ id: 8, text_1: "Aphrodite", text_2: "Love", father: 4,color:"#8BC34A" },
40+
{ id: 3.3, text_1: "Love", text_2: "Peace", father: 8,color:"#c72e99" },
41+
{ id: 4.1, text_1: "Hope", text_2: "Life", father: 8,color:"#2eecc7" }
4142
];
4243

4344
var myTree = Treeviz.create({
44-
htmlID: "tree",
45-
nodeField: "id",
46-
flatData: true,
45+
htmlId: "tree",
46+
idKey: "id",
47+
hasFlatData: true,
4748
relationnalField: "father",
48-
zoomBehavior: true,
49-
nodeWidth:160,
50-
nodeHeight:100,
51-
nodeColor: (nodeData) => nodeData.color ,
52-
depthDistance:300,
53-
horizontalLayout:true,
54-
nodeTemplate: (nodeData) => "<div style='height:100px; width:160px;display:flex;flex-direction:column;justify-content:center;align-items:center;'><div><strong>"+nodeData.text_1+"</strong></div><div>is</div><div><i>"+nodeData.text_2+"</i></div></div>",
49+
hasPanAndZoom: true,
50+
nodeWidth:120,
51+
nodeHeight:80,
52+
mainAxisNodeSpacing:2,
53+
isHorizontal:true,
54+
renderNode: function(node) {
55+
return result = "<div class='box' style='cursor:pointer;height:"+node.settings.nodeHeight+"px; width:"+node.settings.nodeWidth+"px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:"
56+
+node.data.color+
57+
";border-radius:5px;'><div><strong>"
58+
+node.data.text_1+
59+
"</strong></div><div>is</div><div><i>"
60+
+node.data.text_2+
61+
"</i></div></div>";
62+
},
5563
linkWidth : (nodeData)=> nodeData.id*5,
5664
linkColor : (nodeData) => "#B0BEC5" ,
5765
onNodeClick : (nodeData) => console.log(nodeData)

‎dist/index.js

Lines changed: 2272 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/typescript/index.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ITreeConfig } from "./typings";
22
export declare function create(userSettings: Partial<ITreeConfig>): {
3-
refresh: (data: any) => void;
3+
refresh: (data: any, newSettings?: Partial<ITreeConfig> | undefined) => void;
44
clean: (keepConfig: boolean) => void;
55
};

‎dist/typescript/links/link-enter.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import { HierarchyPointNode } from "d3-hierarchy";
22
import { BaseType, Selection } from "d3-selection";
3-
import { ITreeConfig } from "../typings";
4-
export declare const drawLinkEnter: (link: Selection<BaseType, HierarchyPointNode<{}>, SVGGElement, {}>, computedTree: HierarchyPointNode<{}>, settings: ITreeConfig) => Selection<SVGPathElement, HierarchyPointNode<{}>, SVGGElement, {}>;
3+
import { ITreeConfig, ExtendedHierarchyPointNode } from "../typings";
4+
export declare const drawLinkEnter: (link: Selection<BaseType, HierarchyPointNode<{}>, SVGGElement, {}>, settings: ITreeConfig, nodes: ExtendedHierarchyPointNode[], oldNodes: ExtendedHierarchyPointNode[]) => Selection<SVGPathElement, HierarchyPointNode<{}>, SVGGElement, {}>;

‎dist/typescript/links/link-exit.d.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
import { HierarchyPointNode } from "d3-hierarchy";
22
import { BaseType, Selection } from "d3-selection";
3-
import { ITreeConfig } from "../typings";
4-
export declare const drawLinkExit: (link: Selection<BaseType, HierarchyPointNode<{}>, SVGGElement, {}>, settings: ITreeConfig) => void;
3+
import { ITreeConfig, ExtendedHierarchyPointNode } from "../typings";
4+
export declare const drawLinkExit: (link: Selection<BaseType, HierarchyPointNode<{}>, SVGGElement, {}>, settings: ITreeConfig, nodes: ExtendedHierarchyPointNode[], oldNodes: ExtendedHierarchyPointNode[]) => void;

‎dist/typescript/nodes/node-enter.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import { BaseType, Selection } from "d3-selection";
22
import { ExtendedHierarchyPointNode, ITreeConfig } from "../typings";
3-
export declare const drawNodeEnter: (node: Selection<BaseType, ExtendedHierarchyPointNode, SVGGElement, {}>, settings: ITreeConfig) => Selection<SVGGElement, ExtendedHierarchyPointNode, SVGGElement, {}>;
3+
export declare const drawNodeEnter: (node: Selection<BaseType, ExtendedHierarchyPointNode, SVGGElement, {}>, settings: ITreeConfig, nodes: ExtendedHierarchyPointNode[], oldNodes: ExtendedHierarchyPointNode[]) => Selection<SVGGElement, ExtendedHierarchyPointNode, SVGGElement, {}>;

‎dist/typescript/nodes/node-exit.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import { BaseType, Selection } from "d3-selection";
22
import { ExtendedHierarchyPointNode, ITreeConfig } from "../typings";
3-
export declare const drawNodeExit: (node: Selection<BaseType, ExtendedHierarchyPointNode, SVGGElement, {}>, settings: ITreeConfig) => void;
3+
export declare const drawNodeExit: (node: Selection<BaseType, ExtendedHierarchyPointNode, SVGGElement, {}>, settings: ITreeConfig, nodes: ExtendedHierarchyPointNode[], oldNodes: ExtendedHierarchyPointNode[]) => void;

‎dist/typescript/typings.d.ts

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,25 @@ export interface ITreeConfig {
33
htmlID: string;
44
nodeField: string;
55
relationnalField: string;
6-
flatData: boolean;
6+
hasFlatData: boolean;
77
nodeWidth: number;
88
nodeHeight: number;
9-
nodeDepthDistance: number | "auto";
10-
nodeTemplate: (node: any) => string | null;
11-
nodeColor: (node: any) => string | null | number | boolean;
9+
mainAxisNodeSpacing: number | "auto";
10+
renderNode: (node: any) => string | null;
1211
linkShape: string;
13-
linkColor: (node: any) => string | null | boolean;
14-
linkWidth: (node: any) => string | number | null | boolean;
12+
linkColor: (node: any) => string;
13+
linkWidth: (node: any) => number;
1514
onNodeClick: (node: any) => void;
1615
onNodeMouseEnter: (node: any) => void;
1716
onNodeMouseLeave: (node: any) => void;
18-
horizontalLayout: boolean;
19-
zoomBehavior: boolean;
17+
isHorizontal: boolean;
18+
hasPanAndZoom: boolean;
2019
duration: number;
2120
marginTop: number;
2221
marginBottom: number;
2322
marginLeft: number;
2423
marginRight: number;
25-
nodeSpacerPercentage: number;
24+
secondaryAxisNodeSpacing: number;
2625
}
2726
export interface ExtendedHierarchyPointNode extends HierarchyPointNode<{}> {
2827
x0?: number;

‎dist/typescript/utils.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
1+
import { ExtendedHierarchyPointNode, ITreeConfig } from "./typings";
12
export declare const getAreaSize: (htmlID: string) => {
23
areaWidth: number;
34
areaHeight: number;
45
};
6+
declare type Result = ExtendedHierarchyPointNode & {
7+
x0: number;
8+
y0: number;
9+
};
10+
export declare const getFirstDisplayedAncestor: (ghostNodes: ExtendedHierarchyPointNode[], viewableNodes: ExtendedHierarchyPointNode[], id: string) => Result;
11+
export declare const setNodeLocation: (xPosition: number, yPosition: number, settings: ITreeConfig) => string;
12+
export {};

0 commit comments

Comments
 (0)