apextree 1.4.3 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +69 -62
  2. package/apextree.es.min.js +1702 -6531
  3. package/apextree.min.js +1 -1
  4. package/lib/ApexTree.d.ts +4 -3
  5. package/lib/models/DagreGraph.d.ts +4 -3
  6. package/lib/models/Paper.d.ts +5 -1
  7. package/lib/models/PositionManager.d.ts +57 -0
  8. package/lib/settings/Options.d.ts +8 -0
  9. package/lib/utils/GraphUtils.d.ts +13 -2
  10. package/lib/utils/TooltipUtils.d.ts +32 -0
  11. package/lib/utils/index.d.ts +1 -0
  12. package/package.json +2 -2
package/README.md CHANGED
@@ -4,7 +4,6 @@ The Apextree is a javascript library built on SVG that helps to create organizat
4
4
 
5
5
  <img width="811" alt="Screenshot 2023-12-17 at 10 28 04 PM" src="https://github.com/apexcharts/tree/assets/17950663/e09212ec-6322-4c68-ac12-9afc524d2abd">
6
6
 
7
-
8
7
  ## Installation
9
8
 
10
9
  To add the Apextree to your project and its dependencies, install the package from npm.
@@ -16,7 +15,7 @@ npm install apextree
16
15
  ## Usage
17
16
 
18
17
  ```js
19
- import ApexTree from 'apextree'
18
+ import ApexTree from 'apextree';
20
19
  ```
21
20
 
22
21
  To create a basic tree with minimal configuration, write as follows:
@@ -47,43 +46,48 @@ To create a basic tree with minimal configuration, write as follows:
47
46
 
48
47
  The layout can be configured by either setting the properties in the table below by passing a second arg to Apextree with these properties set. The latter takes precedence.
49
48
 
50
- Options | Default | Description
51
- --- |------------------------------| ---
52
- width | 400 | The width of graph container
53
- height | 400 | The height of graph container
54
- direction | top | The direction of the tree to start rendering. Possible values: `top`, `bottom`, `left` and `right`
55
- contentKey | name | The key of content in passed data object
56
- siblingSpacing | 50 | The spacing between sibling nodes
57
- childrenSpacing | 50 | The spacing between children and parent
58
- highlightOnHover | true | Enable/disable highlight on hover
59
- containerClassName | root | The class name for the root container
60
- canvasStyle | None | The css styles for canvas root container
61
- enableToolbar | false | Enable/disable graph toolbar
62
- nodeWidth | 50 | The width of graph nodes
63
- nodeHeight | 30 | The height of graph nodes
64
- nodeTemplate | defaultNodeTemplate | The HTML template for nodes
65
- nodeBGColor | `#FFFFFF` | The background color of nodes
66
- nodeBGColorHover | `#FFFFFF` | The background color on hover of nodes
67
- borderWidth | 1 | The border width of the nodes in pixels
68
- borderStyle | solid | The border style of the nodes
69
- borderRadius | 5px | The border radius of the nodes in pixels
70
- borderColor | `#BCBCBC` | The border color of the nodes
71
- borderColorHover | `#5C6BC0` | The border color on hover of the nodes
72
- edgeWidth | `1` | The width for the edges
73
- edgeColor | `#BCBCBC` | The color for the edges
74
- edgeColorHover | `#BCBCBC` | The color for the edges when highlighted
75
- enableTooltip | false | Enable tooltip on hover of nodes
76
- groupLeafNodes | false | For stacking leaf nodes
77
- groupLeafNodesSpacing | 10 | Spacing between stacked leaf nodes
78
- tooltipId | `apextree-tooltip-container` | The tooltip HTML element id
79
- tooltipTemplate | defaultNodeTemplate | The HTML template for tooltip
80
- tooltipMaxWidth | 100 | The max width of the tooltip
81
- tooltipBorderColor | `#BCBCBC` | The border color of tooltip
82
- tooltipBGColor | `#FFFFFF` | The background color of tooltip
83
- fontSize | 14px | The size of font of nodes
84
- fontFamily | None | The font family of nodes
85
- fontWeight | 400 | The font weight of nodes
86
- fontColor | `#000000` | The font color of nodes
49
+ | Options | Default | Description |
50
+ | --- | --- | --- |
51
+ | width | 400 | The width of graph container |
52
+ | height | 400 | The height of graph container |
53
+ | direction | top | The direction of the tree to start rendering. Possible values: `top`, `bottom`, `left` and `right` |
54
+ | contentKey | name | The key of content in passed data object |
55
+ | siblingSpacing | 50 | The spacing between sibling nodes |
56
+ | childrenSpacing | 50 | The spacing between children and parent |
57
+ | highlightOnHover | true | Enable/disable highlight on hover |
58
+ | containerClassName | root | The class name for the root container |
59
+ | canvasStyle | None | The css styles for canvas root container |
60
+ | enableToolbar | false | Enable/disable graph toolbar |
61
+ | nodeWidth | 50 | The width of graph nodes |
62
+ | nodeHeight | 30 | The height of graph nodes |
63
+ | nodeTemplate | defaultNodeTemplate | The HTML template for nodes |
64
+ | nodeBGColor | `#FFFFFF` | The background color of nodes |
65
+ | nodeBGColorHover | `#FFFFFF` | The background color on hover of nodes |
66
+ | borderWidth | 1 | The border width of the nodes in pixels |
67
+ | borderStyle | solid | The border style of the nodes |
68
+ | borderRadius | 5px | The border radius of the nodes in pixels |
69
+ | borderColor | `#BCBCBC` | The border color of the nodes |
70
+ | borderColorHover | `#5C6BC0` | The border color on hover of the nodes |
71
+ | edgeWidth | `1` | The width for the edges |
72
+ | edgeColor | `#BCBCBC` | The color for the edges |
73
+ | edgeColorHover | `#5C6BC0` | The color for the edges when highlighted |
74
+ | enableTooltip | false | Enable tooltip on hover of nodes |
75
+ | groupLeafNodes | false | For stacking leaf nodes |
76
+ | groupLeafNodesSpacing | 10 | Spacing between stacked leaf nodes |
77
+ | tooltipId | `apextree-tooltip-container` | The tooltip HTML element id |
78
+ | tooltipTemplate | defaultNodeTemplate | The HTML template for tooltip |
79
+ | tooltipMaxWidth | 300 | The max width of the tooltip in pixels |
80
+ | tooltipMinWidth | 100 | The min width of the tooltip in pixels |
81
+ | tooltipBorderColor | `#BCBCBC` | The border color of tooltip |
82
+ | tooltipBGColor | `#FFFFFF` | The background color of tooltip |
83
+ | tooltipFontColor | `#000000` | The font color of tooltip text |
84
+ | tooltipFontSize | `12px` | The font size of tooltip text |
85
+ | tooltipPadding | 8 | The padding of tooltip in pixels (0 if custom tooltipTemplate is used) |
86
+ | tooltipOffset | 10 | The offset distance between tooltip and cursor in pixels |
87
+ | fontSize | 14px | The size of font of nodes |
88
+ | fontFamily | None | The font family of nodes |
89
+ | fontWeight | 400 | The font weight of nodes |
90
+ | fontColor | `#000000` | The font color of nodes |
87
91
 
88
92
  Default node template
89
93
 
@@ -92,43 +96,46 @@ const defaultNodeTemplate = (content: string) => {
92
96
  return `<div style='display: flex;justify-content: center;align-items: center; text-align: center; height: 100%;'>${content}</div>`;
93
97
  };
94
98
  ```
99
+
95
100
  ### Expected data format
96
101
 
97
102
  ```json
98
103
  {
99
- "id": "1",
104
+ "id": "1",
100
105
  "name": "A",
101
106
  "children": []
102
107
  }
103
108
  ```
109
+
104
110
  Passed data object should contain id, name and children.
105
111
 
106
- For *id* key, value of id can be unique otherwise edge highlight won't work as expected.
112
+ For _id_ key, value of id can be unique otherwise edge highlight won't work as expected.
107
113
 
108
- For *name* key, if using other than *name* then specify key name in contentKey option
114
+ For _name_ key, if using other than _name_ then specify key name in contentKey option
109
115
 
110
- For *children* key, it contains list of child objects
116
+ For _children_ key, it contains list of child objects
111
117
 
112
118
  **Example**
119
+
113
120
  ```js
114
121
  const data = {
115
- "id": "1",
116
- "name": "A",
117
- "children": [
118
- {
119
- "id": "2",
120
- "name": "B",
121
- "children": [
122
- {
123
- "id": "3",
124
- "name": "C"
125
- },
126
- {
127
- "id": "4",
128
- "name": "D"
129
- }
130
- ]
131
- }
132
- ]
133
- }
122
+ id: '1',
123
+ name: 'A',
124
+ children: [
125
+ {
126
+ id: '2',
127
+ name: 'B',
128
+ children: [
129
+ {
130
+ id: '3',
131
+ name: 'C',
132
+ },
133
+ {
134
+ id: '4',
135
+ name: 'D',
136
+ },
137
+ ],
138
+ },
139
+ ],
140
+ };
134
141
  ```