@fluentui/react-charting 5.13.4 → 5.13.6
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.
- package/CHANGELOG.json +43 -1
- package/CHANGELOG.md +22 -2
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/lib/components/TreeChart/TreeChart.base.js +62 -49
- package/lib/components/TreeChart/TreeChart.base.js.map +1 -1
- package/lib/components/TreeChart/TreeChart.styles.js +1 -0
- package/lib/components/TreeChart/TreeChart.styles.js.map +1 -1
- package/lib/components/TreeChart/TreeChart.types.d.ts +18 -6
- package/lib/components/TreeChart/TreeChart.types.js.map +1 -1
- package/lib/components/VerticalBarChart/VerticalBarChart.base.js +5 -4
- package/lib/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +3 -2
- package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
- package/lib/version.js +1 -1
- package/lib/version.js.map +1 -1
- package/lib-amd/components/TreeChart/TreeChart.base.js +62 -49
- package/lib-amd/components/TreeChart/TreeChart.base.js.map +1 -1
- package/lib-amd/components/TreeChart/TreeChart.styles.js +1 -0
- package/lib-amd/components/TreeChart/TreeChart.styles.js.map +1 -1
- package/lib-amd/components/TreeChart/TreeChart.types.d.ts +18 -6
- package/lib-amd/components/TreeChart/TreeChart.types.js.map +1 -1
- package/lib-amd/components/VerticalBarChart/VerticalBarChart.base.js +4 -3
- package/lib-amd/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
- package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +2 -1
- package/lib-amd/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
- package/lib-amd/version.js +1 -1
- package/lib-amd/version.js.map +1 -1
- package/lib-commonjs/components/TreeChart/TreeChart.base.js +62 -49
- package/lib-commonjs/components/TreeChart/TreeChart.base.js.map +1 -1
- package/lib-commonjs/components/TreeChart/TreeChart.styles.js +1 -0
- package/lib-commonjs/components/TreeChart/TreeChart.styles.js.map +1 -1
- package/lib-commonjs/components/TreeChart/TreeChart.types.d.ts +18 -6
- package/lib-commonjs/components/TreeChart/TreeChart.types.js.map +1 -1
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.base.js +4 -3
- package/lib-commonjs/components/VerticalBarChart/VerticalBarChart.base.js.map +1 -1
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js +2 -1
- package/lib-commonjs/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js.map +1 -1
- package/lib-commonjs/version.js +1 -1
- package/lib-commonjs/version.js.map +1 -1
- package/package.json +3 -3
- package/src/components/TreeChart/TreeChart.types.ts +18 -6
|
@@ -20,7 +20,7 @@ define(["require", "exports", "tslib", "react", "d3-hierarchy", "@fluentui/react
|
|
|
20
20
|
var words = text.split(/\s+/).reverse();
|
|
21
21
|
var word = '';
|
|
22
22
|
var tspan = d3_selection_1.select('.svgTree').append('text').attr('class', 'tempText').append('tspan').text(null);
|
|
23
|
-
if (styleClass
|
|
23
|
+
if (styleClass) {
|
|
24
24
|
tspan.attr('class', styleClass);
|
|
25
25
|
}
|
|
26
26
|
var line = [];
|
|
@@ -43,25 +43,33 @@ define(["require", "exports", "tslib", "react", "d3-hierarchy", "@fluentui/react
|
|
|
43
43
|
};
|
|
44
44
|
// Append node elements
|
|
45
45
|
// nodeId to create unique key
|
|
46
|
-
StandardTree.prototype.addNodeShapetoSVG = function (name, subname, metricName,
|
|
46
|
+
StandardTree.prototype.addNodeShapetoSVG = function (name, subname, bodytext, metricName, xCenterCoordinate, yCoordinate, fillColor, rectangleWidth, rectangleHeight, nodeId, parentInfo) {
|
|
47
47
|
var ariaLabel = "nodeId: " + nodeId + " \nnodeMainText: " + name + "\nsubText " + subname + " " + parentInfo;
|
|
48
|
-
|
|
49
|
-
if (
|
|
48
|
+
var xCoordinate = xCenterCoordinate - rectangleWidth / 2;
|
|
49
|
+
if (metricName || nodeId !== 0 || !bodytext) {
|
|
50
|
+
this._nodeElements.push(React.createElement("rect", { width: rectangleWidth, height: rectangleHeight, x: xCoordinate, y: yCoordinate, tabIndex: 0, role: 'text', "data-is-focusable": true, "aria-label": ariaLabel, className: this.styleClassNames.rectNode, stroke: fillColor, key: "" + nodeId + this.styleClassNames.rectNode }));
|
|
51
|
+
}
|
|
52
|
+
if (subname) {
|
|
50
53
|
subname = this.truncateText(subname, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectSubText);
|
|
51
54
|
}
|
|
52
|
-
if (
|
|
53
|
-
|
|
55
|
+
if (bodytext) {
|
|
56
|
+
bodytext = this.truncateText(bodytext, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectBodyText);
|
|
57
|
+
}
|
|
58
|
+
if (metricName) {
|
|
59
|
+
metricName = this.truncateText(metricName, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectMetricText);
|
|
54
60
|
}
|
|
55
61
|
name = this.truncateText(name, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectText);
|
|
56
62
|
// Text position y = y + rectHeight/2, 2 is ratio for depth
|
|
57
63
|
// Text position x = x + rectWidth/2, 2 is ratio for length
|
|
58
64
|
// Sub-text position x = x + rectWidth/2, 2 is ratio for length
|
|
59
|
-
var subValue = metricName
|
|
60
|
-
|
|
61
|
-
|
|
65
|
+
var subValue = metricName ? (React.createElement("tspan", { className: this.styleClassNames.rectMetricText, dy: "1.4em", x: xCoordinate + rectangleWidth / 2 }, metricName)) : bodytext ? (React.createElement(React.Fragment, null,
|
|
66
|
+
React.createElement("tspan", { className: this.styleClassNames.rectSubText, dy: "1.4em", x: xCoordinate + rectangleWidth / 2 }, subname),
|
|
67
|
+
React.createElement("tspan", { className: this.styleClassNames.rectBodyText, dy: "1.4em", x: xCoordinate + rectangleWidth / 2 }, bodytext))) : (React.createElement("tspan", { className: this.styleClassNames.rectSubText, dy: "1.4em", x: xCoordinate + rectangleWidth / 2 }, subname));
|
|
68
|
+
if (!subname && !metricName && !bodytext) {
|
|
69
|
+
this._nodeElements.push(React.createElement("text", { textAnchor: "middle", className: this.styleClassNames.rectMetricText, dy: yCoordinate + rectangleHeight / 1.6, x: xCoordinate + rectangleWidth / 2, key: "" + nodeId + this.styleClassNames.rectText }, name));
|
|
62
70
|
}
|
|
63
71
|
else {
|
|
64
|
-
this._nodeElements.push(React.createElement("text", { textAnchor: "middle", className: metricName
|
|
72
|
+
this._nodeElements.push(React.createElement("text", { textAnchor: "middle", className: metricName ? this.styleClassNames.rectSubText : this.styleClassNames.rectText, dy: metricName ? yCoordinate + rectangleHeight / 2.5 : yCoordinate + rectangleHeight / 2, x: xCoordinate + rectangleWidth / 2, key: "" + nodeId + this.styleClassNames.rectText },
|
|
65
73
|
name,
|
|
66
74
|
subValue));
|
|
67
75
|
}
|
|
@@ -69,8 +77,21 @@ define(["require", "exports", "tslib", "react", "d3-hierarchy", "@fluentui/react
|
|
|
69
77
|
// Create a rectangular path from parent to the child nodes
|
|
70
78
|
StandardTree.prototype.createPathLink = function (parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap, childXMax) {
|
|
71
79
|
// gap adds ratio for parent.y to child.y
|
|
72
|
-
|
|
73
|
-
|
|
80
|
+
/*Below code is used to draw lines(___|) to show the parent child relation i.e a vertical line
|
|
81
|
+
emerging from the parent and
|
|
82
|
+
then a horzontal line encompassing all the its children which are
|
|
83
|
+
shown below it .so it gives a visual representation of tree branches.
|
|
84
|
+
|
|
85
|
+
So for making this path firstly we are moving to the childX which is the mid point of the node and then
|
|
86
|
+
we are subtracting the half of rectwidth to move the complete width of the rectangle and
|
|
87
|
+
we are subtracting gap from y cordinate as we are making this line at a little gap from node.
|
|
88
|
+
Then we are building that line horizonatlly till childXmax, again adding half rectwidth to complete
|
|
89
|
+
the line till end as childXmax will be midpoint.
|
|
90
|
+
Then last part is for making line vertical for that we move to the parentx position and
|
|
91
|
+
then draw the vertical till parenty + rectHeight + gap/2
|
|
92
|
+
We have seperate path for leaf node as we are using different composition like compact, long etc.*/
|
|
93
|
+
var path = "M" + (childX - rectWidth / 2) + "," + (childY - gap) + " H" + (childXMax + rectWidth / 2) + " M" + parentX + "," + (childY - gap) + "\n V" + (parentY + rectHeight + gap / 2);
|
|
94
|
+
var leafpath = "M" + parentX + "," + (parentY + rectHeight + gap / 2) + " V" + (parentY + gap * 5) + "\n H" + (parentX - rectWidth / 2) + " H" + (parentX + rectWidth / 2);
|
|
74
95
|
// based on the type of node return leafpath or path element
|
|
75
96
|
return leaf ? leafpath : path;
|
|
76
97
|
};
|
|
@@ -93,15 +114,8 @@ define(["require", "exports", "tslib", "react", "d3-hierarchy", "@fluentui/react
|
|
|
93
114
|
return _this;
|
|
94
115
|
}
|
|
95
116
|
LayeredTree.prototype.createTree = function (givenLayoutWidth, screenWidth) {
|
|
96
|
-
var _a, _b, _c, _d, _e;
|
|
97
|
-
|
|
98
|
-
if (givenLayoutWidth < 65) {
|
|
99
|
-
givenLayoutWidth = 65;
|
|
100
|
-
}
|
|
101
|
-
if (givenLayoutWidth > 90) {
|
|
102
|
-
givenLayoutWidth = 90;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
117
|
+
var _a, _b, _c, _d, _e, _f;
|
|
118
|
+
givenLayoutWidth = givenLayoutWidth < 65 ? 65 : givenLayoutWidth > 90 ? 90 : givenLayoutWidth;
|
|
105
119
|
var layoutWidth = givenLayoutWidth || 75;
|
|
106
120
|
var root = d3_hierarchy_1.hierarchy(this.treeData, function (d) {
|
|
107
121
|
return d.children;
|
|
@@ -109,13 +123,13 @@ define(["require", "exports", "tslib", "react", "d3-hierarchy", "@fluentui/react
|
|
|
109
123
|
// Find tree Height
|
|
110
124
|
var treeHeight = (root === null || root === void 0 ? void 0 : root.height) + 1;
|
|
111
125
|
// Create tree layout, width: layoutWidth, height: layoutWidth/1.5 and add node separation
|
|
112
|
-
var
|
|
126
|
+
var treeChart = d3_hierarchy_1.tree()
|
|
113
127
|
.nodeSize([layoutWidth, layoutWidth / 1.5])
|
|
114
128
|
.separation(function (a, b) {
|
|
115
129
|
return a.parent === root && b.parent === root ? 3.5 : 1;
|
|
116
130
|
});
|
|
117
131
|
// Assigns the x and y position for the nodes
|
|
118
|
-
var treeData =
|
|
132
|
+
var treeData = treeChart(root);
|
|
119
133
|
// Compute the new tree layout.
|
|
120
134
|
var nodes = treeData.descendants();
|
|
121
135
|
// Normalize for fixed-depth and width
|
|
@@ -123,7 +137,7 @@ define(["require", "exports", "tslib", "react", "d3-hierarchy", "@fluentui/react
|
|
|
123
137
|
// Normalise x coordinate by start coordinate 0 with screenSize/3
|
|
124
138
|
nodes.forEach(function (d) {
|
|
125
139
|
d.y = d.depth === 0 ? 10 : d.depth * 130;
|
|
126
|
-
d.x += screenWidth /
|
|
140
|
+
d.x += screenWidth / 2;
|
|
127
141
|
});
|
|
128
142
|
// <------------------ Traversal section ------------------>
|
|
129
143
|
// Create tree data structure
|
|
@@ -138,6 +152,7 @@ define(["require", "exports", "tslib", "react", "d3-hierarchy", "@fluentui/react
|
|
|
138
152
|
children: d.children,
|
|
139
153
|
dataName: d.data.name,
|
|
140
154
|
subName: d.data.subname,
|
|
155
|
+
bodyText: d.data.bodytext,
|
|
141
156
|
metricName: (_a = d.data) === null || _a === void 0 ? void 0 : _a.metric,
|
|
142
157
|
fill: d.data.fill,
|
|
143
158
|
x: d.x,
|
|
@@ -164,56 +179,61 @@ define(["require", "exports", "tslib", "react", "d3-hierarchy", "@fluentui/react
|
|
|
164
179
|
: "Parent info parentId: " + d.parentID + "\n " + treeDataStructure[d.parentID].dataName + "\n " + treeDataStructure[d.parentID].subName;
|
|
165
180
|
// check for leaf nodes
|
|
166
181
|
if (!d.children && !parentSet.has(d.parentID) && treeHeight === 3) {
|
|
167
|
-
var
|
|
168
|
-
var
|
|
182
|
+
var compactNodeWidth = (rectWidth - gap) / 2;
|
|
183
|
+
var compactNodeHeight = rectHeight;
|
|
169
184
|
parentSet.add(d.parentID);
|
|
170
185
|
// <------------------ Links section ------------------>
|
|
171
186
|
this.addLinktoSVG(d.id, treeDataStructure[d.parentID].x, treeDataStructure[d.parentID].y, treeDataStructure[d.id].x, treeDataStructure[d.id].y, true, rectWidth, rectHeight, gap);
|
|
172
187
|
// <------------------ Nodes section ------------------>
|
|
173
188
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
174
189
|
var children = (_a = treeDataStructure[d.parentID]) === null || _a === void 0 ? void 0 : _a.children;
|
|
175
|
-
var
|
|
176
|
-
var
|
|
177
|
-
var
|
|
190
|
+
var compactNodeCenterX1 = ((_b = treeDataStructure[d.parentID]) === null || _b === void 0 ? void 0 : _b.x) - compactNodeWidth / 2 - gap / 2;
|
|
191
|
+
var compactNodeCenterX2 = ((_c = treeDataStructure[d.parentID]) === null || _c === void 0 ? void 0 : _c.x) + compactNodeWidth / 2 + gap / 2;
|
|
192
|
+
var longNodeCenterX = (_d = treeDataStructure[d.parentID]) === null || _d === void 0 ? void 0 : _d.x;
|
|
193
|
+
var dy = (_e = children[0]) === null || _e === void 0 ? void 0 : _e.y;
|
|
178
194
|
for (var itr = 0; itr < children.length; ++itr) {
|
|
179
195
|
var child = children[itr];
|
|
180
196
|
// Given Composition
|
|
181
197
|
if (this.composition !== undefined) {
|
|
182
198
|
// For compact compostion
|
|
183
199
|
if (this.composition === 0) {
|
|
184
|
-
this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.
|
|
200
|
+
this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.bodytext, child.data.metricName,
|
|
201
|
+
// If the leaf node count is 1 ,
|
|
202
|
+
//irrespective of provided composition we should always use long composition
|
|
203
|
+
itr % 2 === 0 ? (children.length === 1 ? longNodeCenterX : compactNodeCenterX1) : compactNodeCenterX2, dy, child.data.fill, children.length === 1 ? rectWidth : compactNodeWidth, rectHeight, child.id, parentInfo);
|
|
185
204
|
if (itr % 2 === 1) {
|
|
186
|
-
dy +=
|
|
205
|
+
dy += compactNodeHeight + gap;
|
|
187
206
|
}
|
|
188
207
|
}
|
|
189
208
|
// For long compostion
|
|
190
209
|
else {
|
|
191
|
-
this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.metricName,
|
|
192
|
-
dy +=
|
|
210
|
+
this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.bodytext, child.data.metricName, longNodeCenterX, dy, child.data.fill, rectWidth, rectHeight, child.id, parentInfo);
|
|
211
|
+
dy += compactNodeHeight + gap;
|
|
193
212
|
}
|
|
194
213
|
}
|
|
195
214
|
// Automatic Node Composition
|
|
196
215
|
else {
|
|
197
216
|
if (children.length > 2) {
|
|
198
|
-
this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.metricName, itr % 2 === 0 ?
|
|
217
|
+
this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.bodytext, child.data.metricName, itr % 2 === 0 ? compactNodeCenterX1 : compactNodeCenterX2, dy, child.data.fill, children.length === 1 ? rectWidth : compactNodeWidth, rectHeight, child.id, parentInfo);
|
|
199
218
|
if (itr % 2 === 1) {
|
|
200
|
-
dy +=
|
|
219
|
+
dy += compactNodeHeight + gap;
|
|
201
220
|
}
|
|
202
221
|
}
|
|
203
222
|
else {
|
|
204
|
-
this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.metricName,
|
|
205
|
-
dy +=
|
|
223
|
+
this.addNodeShapetoSVG(child.data.name, child.data.subname, child.data.bodytext, child.data.metricName, longNodeCenterX, dy, child.data.fill, rectWidth, rectHeight, child.id, parentInfo);
|
|
224
|
+
dy += compactNodeHeight + gap;
|
|
206
225
|
}
|
|
207
226
|
}
|
|
208
227
|
}
|
|
209
228
|
}
|
|
210
229
|
if (d.children || treeHeight <= 2) {
|
|
211
230
|
// <------------------ Nodes section ------------------>
|
|
212
|
-
|
|
231
|
+
// Since the height <=2 we will be using long compositon.
|
|
232
|
+
this.addNodeShapetoSVG(d.dataName, d.subName, d.bodyText, d.metricName, d.x, d.y, d.fill, rectWidth, rectHeight, d.id, parentInfo);
|
|
213
233
|
// <------------------ Links section ------------------>
|
|
214
234
|
if (d.id === 0 && d.children) {
|
|
215
235
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
216
|
-
var children = (
|
|
236
|
+
var children = (_f = treeDataStructure[d.id]) === null || _f === void 0 ? void 0 : _f.children;
|
|
217
237
|
var childXMin = d3_array_1.min(children, function (child) { return child.x; });
|
|
218
238
|
var childXMax = d3_array_1.max(children, function (child) { return child.x; });
|
|
219
239
|
this.addLinktoSVG(d.id, d.x, d.y, childXMin, d.children[0].y, false, rectWidth, rectHeight, gap, childXMax);
|
|
@@ -272,17 +292,10 @@ define(["require", "exports", "tslib", "react", "d3-hierarchy", "@fluentui/react
|
|
|
272
292
|
TreeChartBase.prototype.createTreeChart = function () {
|
|
273
293
|
var nodeElements = [];
|
|
274
294
|
var linkElements = [];
|
|
275
|
-
// Create styleClass object to access it in parent class
|
|
276
|
-
var styleClassNames = {
|
|
277
|
-
link: this._classNames.link,
|
|
278
|
-
rectNode: this._classNames.rectNode,
|
|
279
|
-
rectText: this._classNames.rectText,
|
|
280
|
-
rectSubText: this._classNames.rectSubText,
|
|
281
|
-
rectmetricText: this._classNames.rectMetricText,
|
|
282
|
-
};
|
|
283
295
|
// Instantiate inherited class and call createTree function for the object
|
|
284
|
-
var treeObject = new LayeredTree(this._treeData, this._composition,
|
|
285
|
-
|
|
296
|
+
var treeObject = new LayeredTree(this._treeData, this._composition, this._classNames, nodeElements, linkElements, this._treeTraversal);
|
|
297
|
+
var width = this.state._width - this._margin.left - this._margin.right;
|
|
298
|
+
treeObject.createTree(this.props.layoutWidth, width);
|
|
286
299
|
this._nodeElements = nodeElements;
|
|
287
300
|
this._linkElements = linkElements;
|
|
288
301
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeChart.base.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { hierarchy, tree } from 'd3-hierarchy';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { select, selectAll } from 'd3-selection';\nimport { FocusZone } from '@fluentui/react-focus';\nimport { max as d3Max, min as d3Min } from 'd3-array';\n\nimport {\n ITreeProps,\n ITreeState,\n ITreeDataStructure,\n ITreeChartDataPoint,\n ITreeStyleProps,\n ITreeStyles,\n} from '../../index';\n\nconst getClassNames = classNamesFunction<ITreeStyleProps, ITreeStyles>();\n\n// Create a parent class for common tree components\nclass StandardTree {\n public treeData: ITreeChartDataPoint;\n public styleClassNames: {\n rectmetricText: string | undefined;\n rectSubText: string | undefined;\n link: string;\n rectNode: string;\n rectText: string;\n };\n\n private _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n private _linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n constructor(\n treeData: ITreeChartDataPoint,\n styleClassNames: { link: string; rectNode: string; rectText: string; rectSubText: string; rectmetricText: string },\n _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [],\n _linkElements: Array<React.SVGProps<SVGPathElement>> = [],\n ) {\n this.treeData = treeData;\n this.styleClassNames = styleClassNames;\n this._nodeElements = _nodeElements;\n this._linkElements = _linkElements;\n }\n\n public truncateText(text: string, rectangleWidth: number, padding: number, styleClass: string | undefined) {\n let truncatedText = '';\n const words = text.split(/\\s+/).reverse();\n let word: string = '';\n const tspan = select('.svgTree').append('text').attr('class', 'tempText').append('tspan').text(null);\n\n if (styleClass !== undefined) {\n tspan.attr('class', styleClass);\n }\n\n const line: string[] = [];\n while ((word = words.pop()!)) {\n line.push(word);\n tspan.text(line.join(' ') + ' ');\n if (tspan.node() !== null) {\n const w = tspan.node()!.getComputedTextLength();\n if (w > rectangleWidth - padding) {\n line.pop();\n line.push('...');\n break;\n }\n }\n }\n\n truncatedText = line.join(' ') + ' ';\n tspan.text(null);\n selectAll('.tempText').remove();\n return truncatedText;\n }\n\n // Append node elements\n // nodeId to create unique key\n public addNodeShapetoSVG(\n name: string,\n subname: string | undefined,\n metricName: string | undefined,\n xCoordinate: number,\n yCoordinate: number,\n fillColor: string,\n rectangleWidth: number,\n rectangleHeight: number,\n nodeId: number,\n parentInfo: string,\n ) {\n const ariaLabel = `nodeId: ${nodeId} \\nnodeMainText: ${name}\\nsubText ${subname} ${parentInfo}`;\n this._nodeElements.push(\n <rect\n width={rectangleWidth}\n height={rectangleHeight}\n x={xCoordinate}\n y={yCoordinate}\n tabIndex={0}\n role={'text'}\n data-is-focusable={true}\n aria-label={ariaLabel}\n className={this.styleClassNames.rectNode}\n stroke={fillColor}\n key={`${nodeId}${this.styleClassNames.rectNode}`}\n />,\n );\n\n if (subname !== undefined) {\n subname = this.truncateText(subname, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectSubText);\n }\n if (metricName !== undefined) {\n metricName = this.truncateText(\n metricName,\n rectangleWidth,\n rectangleWidth / 4,\n this.styleClassNames.rectmetricText,\n );\n }\n name = this.truncateText(name, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectText);\n\n // Text position y = y + rectHeight/2, 2 is ratio for depth\n // Text position x = x + rectWidth/2, 2 is ratio for length\n // Sub-text position x = x + rectWidth/2, 2 is ratio for length\n\n const subValue =\n metricName !== undefined ? (\n <tspan className={this.styleClassNames.rectmetricText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n {metricName}\n </tspan>\n ) : (\n <tspan className={this.styleClassNames.rectSubText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n {subname}\n </tspan>\n );\n\n if (subname === undefined && metricName === undefined) {\n this._nodeElements.push(\n <text\n textAnchor=\"middle\"\n className={this.styleClassNames.rectmetricText}\n dy={yCoordinate + rectangleHeight / 1.6}\n x={xCoordinate + rectangleWidth / 2}\n key={`${nodeId}${this.styleClassNames.rectText}`}\n >\n {name}\n </text>,\n );\n } else {\n this._nodeElements.push(\n <text\n textAnchor=\"middle\"\n className={metricName !== undefined ? this.styleClassNames.rectSubText : this.styleClassNames.rectText}\n dy={metricName !== undefined ? yCoordinate + rectangleHeight / 2.5 : yCoordinate + rectangleHeight / 2}\n x={xCoordinate + rectangleWidth / 2}\n key={`${nodeId}${this.styleClassNames.rectText}`}\n >\n {name}\n {subValue}\n </text>,\n );\n }\n }\n // Create a rectangular path from parent to the child nodes\n public createPathLink(\n parentX: number,\n parentY: number,\n childX: number,\n childY: number,\n leaf: boolean,\n rectWidth: number,\n rectHeight: number,\n gap: number,\n childXMax: number,\n ): string {\n // gap adds ratio for parent.y to child.y\n\n const path = `M${childX},${childY - gap} H${childXMax + rectWidth} M${parentX + rectWidth / 2},${childY - gap}\n V${parentY + rectHeight + gap / 2}`;\n\n const leafpath = `M${parentX + rectWidth / 2},${parentY + rectHeight + gap / 2} V${\n parentY + gap * 5\n } H${parentX} H${parentX + rectWidth}`;\n\n // based on the type of node return leafpath or path element\n return leaf ? leafpath : path;\n }\n\n // Append path link element\n public addLinktoSVG(\n nodeId: number,\n parentX: number,\n parentY: number,\n childX: number,\n childY: number,\n leaf: boolean,\n rectWidth: number,\n rectHeight: number,\n gap: number,\n childXMax: number = 0,\n ) {\n this._linkElements.push(\n <path\n className={this.styleClassNames.link}\n d={this.createPathLink(parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap, childXMax)}\n key={`${nodeId}${this.styleClassNames.link}`}\n />,\n );\n }\n}\n\n// Create child class to Add Tree component based on treeHeight\nclass LayeredTree extends StandardTree {\n public composition: number | undefined;\n private _treeTraversal: number | undefined;\n constructor(\n treeData: ITreeChartDataPoint,\n composition: number | undefined,\n styleClassNames: { link: string; rectNode: string; rectText: string; rectSubText: string; rectmetricText: string },\n _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [],\n _linkElements: Array<React.SVGProps<SVGPathElement>> = [],\n _treeTraversal: number | undefined,\n ) {\n super(treeData, styleClassNames, _nodeElements, _linkElements);\n this.composition = composition;\n this._treeTraversal = _treeTraversal;\n }\n public createTree(givenLayoutWidth: number | undefined, screenWidth: number) {\n if (givenLayoutWidth !== undefined) {\n if (givenLayoutWidth < 65) {\n givenLayoutWidth = 65;\n }\n if (givenLayoutWidth > 90) {\n givenLayoutWidth = 90;\n }\n }\n const layoutWidth = givenLayoutWidth || 75;\n const root = hierarchy(this.treeData, d => {\n return d.children;\n });\n\n // Find tree Height\n const treeHeight = root?.height + 1;\n\n // Create tree layout, width: layoutWidth, height: layoutWidth/1.5 and add node separation\n const treemap = tree()\n .nodeSize([layoutWidth, layoutWidth / 1.5])\n .separation((a, b) => {\n return a.parent === root && b.parent === root ? 3.5 : 1;\n });\n\n // Assigns the x and y position for the nodes\n const treeData = treemap(root);\n\n // Compute the new tree layout.\n const nodes = treeData.descendants();\n\n // Normalize for fixed-depth and width\n // Normalise y coordinate by depth of each node by a factor of 130\n // Normalise x coordinate by start coordinate 0 with screenSize/3\n nodes.forEach(d => {\n d.y = d.depth === 0 ? 10 : d.depth * 130;\n d.x += screenWidth / 3;\n });\n\n // <------------------ Traversal section ------------------>\n\n // Create tree data structure\n const treeDataStructure: Array<ITreeDataStructure> = [];\n let TreeID: number = 0;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const createTreeDataStructure = (d: any) => {\n d.id = TreeID;\n treeDataStructure.push({\n id: TreeID,\n children: d.children,\n dataName: d.data.name,\n subName: d.data.subname,\n metricName: d.data?.metric,\n fill: d.data.fill,\n x: d.x,\n y: d.y,\n parentID: d.parent?.id,\n });\n TreeID++;\n };\n\n this._treeTraversal === 0\n ? root.each(d => {\n createTreeDataStructure(d);\n })\n : root.eachBefore(d => {\n createTreeDataStructure(d);\n });\n\n const rectWidth = layoutWidth * 3;\n const rectHeight = rectWidth / 3.45;\n const gap: number = 20;\n const parentSet = new Set();\n\n for (const d of treeDataStructure) {\n const parentInfo =\n d.id === 0\n ? 'Root Node'\n : `Parent info parentId: ${d.parentID}\n ${treeDataStructure[d.parentID].dataName}\n ${treeDataStructure[d.parentID].subName}`;\n\n // check for leaf nodes\n if (!d.children && !parentSet.has(d.parentID) && treeHeight === 3) {\n const newWidth = (rectWidth - gap) / 2;\n const newHeight = rectHeight;\n parentSet.add(d.parentID);\n\n // <------------------ Links section ------------------>\n this.addLinktoSVG(\n d.id,\n treeDataStructure[d.parentID].x,\n treeDataStructure[d.parentID].y,\n treeDataStructure[d.id].x,\n treeDataStructure[d.id].y,\n true,\n rectWidth,\n rectHeight,\n gap,\n );\n\n // <------------------ Nodes section ------------------>\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const children: any = treeDataStructure[d.parentID]?.children;\n\n const dx1: number = treeDataStructure[d.parentID]?.x;\n const dx2: number = treeDataStructure[d.parentID]?.x + newWidth + gap;\n let dy: number = children[0]?.y;\n\n for (let itr = 0; itr < children.length; ++itr) {\n const child = children[itr];\n\n // Given Composition\n if (this.composition !== undefined) {\n // For compact compostion\n if (this.composition === 0) {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.metricName,\n itr % 2 === 0 ? dx1 : dx2,\n dy,\n child.data.fill,\n children.length === 1 ? rectWidth : newWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n if (itr % 2 === 1) {\n dy += newHeight + gap;\n }\n }\n // For long compostion\n else {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.metricName,\n dx1,\n dy,\n child.data.fill,\n rectWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n dy += newHeight + gap;\n }\n }\n\n // Automatic Node Composition\n else {\n if (children.length > 2) {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.metricName,\n itr % 2 === 0 ? dx1 : dx2,\n dy,\n child.data.fill,\n children.length === 1 ? rectWidth : newWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n if (itr % 2 === 1) {\n dy += newHeight + gap;\n }\n } else {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.metricName,\n dx1,\n dy,\n child.data.fill,\n rectWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n dy += newHeight + gap;\n }\n }\n }\n }\n\n if (d.children || treeHeight <= 2) {\n // <------------------ Nodes section ------------------>\n this.addNodeShapetoSVG(\n d.dataName,\n d.subName,\n d.metricName,\n d.x,\n d.y,\n d.fill,\n rectWidth,\n rectHeight,\n d.id,\n parentInfo,\n );\n\n // <------------------ Links section ------------------>\n if (d.id === 0 && d.children) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const children: any = treeDataStructure[d.id]?.children;\n const childXMin = d3Min(children, (child: ITreeDataStructure) => child.x as number)!;\n const childXMax = d3Max(children, (child: ITreeDataStructure) => child.x as number)!;\n this.addLinktoSVG(d.id, d.x, d.y, childXMin, d.children[0].y, false, rectWidth, rectHeight, gap, childXMax);\n }\n }\n }\n }\n}\n\nexport class TreeChartBase extends React.Component<ITreeProps, ITreeState> {\n private _treeData: ITreeChartDataPoint;\n private _width: number;\n private _height: number;\n private _composition: number | undefined;\n private _classNames: IProcessedStyleSet<ITreeStyles>;\n private _margin: { left: number; right: number; top: number; bottom: number };\n private _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n private _linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n private _treeTraversal: number | undefined;\n\n constructor(props: ITreeProps) {\n super(props);\n this._margin = { top: 30, right: 20, bottom: 30, left: 50 };\n this._width = this.props.width || 1500;\n this._height = this.props.height || 700;\n this._treeData = this.props.treeData;\n this._composition = this.props?.composition;\n this._treeTraversal = this.props.treeTraversal;\n\n this.state = {\n _width: this._width,\n _height: this._height,\n };\n }\n\n public componentDidMount() {\n const { theme, className, styles } = this.props;\n\n // Get classNames to create component styling\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n\n // Call createTreeChart function in componentDidMount\n this.createTreeChart();\n\n this.setState({\n _width: this.props.width || 1500,\n _height: this.props.height || 700,\n });\n }\n\n public componentDidUpdate(prevProps: ITreeProps): void {\n if (prevProps.layoutWidth !== this.props.layoutWidth) {\n const svgText = selectAll('text');\n const svgRect = selectAll('rect');\n const svgLink = selectAll('path');\n\n if (this._nodeElements.length === 0 && this._linkElements.length === 0) {\n svgText.remove();\n svgRect.remove();\n svgLink.remove();\n }\n\n this.createTreeChart();\n }\n }\n public createTreeChart() {\n const nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];\n const linkElements: Array<React.SVGProps<SVGPathElement>> = [];\n\n // Create styleClass object to access it in parent class\n const styleClassNames = {\n link: this._classNames.link,\n rectNode: this._classNames.rectNode,\n rectText: this._classNames.rectText,\n rectSubText: this._classNames.rectSubText,\n rectmetricText: this._classNames.rectMetricText,\n };\n // Instantiate inherited class and call createTree function for the object\n const treeObject = new LayeredTree(\n this._treeData,\n this._composition,\n styleClassNames,\n nodeElements,\n linkElements,\n this._treeTraversal,\n );\n treeObject.createTree(this.props.layoutWidth, this._width);\n this._nodeElements = nodeElements;\n this._linkElements = linkElements;\n }\n\n public render(): JSX.Element {\n return (\n <FocusZone>\n <div className={this._classNames?.root}>\n <svg\n className=\"svgTree\"\n width={this.state._width - this._margin.left - this._margin.right}\n height={this.state._height - this._margin.top - this._margin.bottom}\n >\n <g className=\"svgNode\">{this._nodeElements.map(element => element)}</g>\n <g className=\"svgLink\">{this._linkElements.map(element => element)}</g>\n </svg>\n </div>\n </FocusZone>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"TreeChart.base.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { hierarchy, tree } from 'd3-hierarchy';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { select, selectAll } from 'd3-selection';\nimport { FocusZone } from '@fluentui/react-focus';\nimport { max as d3Max, min as d3Min } from 'd3-array';\n\nimport {\n ITreeProps,\n ITreeState,\n ITreeDataStructure,\n ITreeChartDataPoint,\n ITreeStyleProps,\n ITreeStyles,\n} from '../../index';\n\nconst getClassNames = classNamesFunction<ITreeStyleProps, ITreeStyles>();\n\n// Create a parent class for common tree components\nclass StandardTree {\n public treeData: ITreeChartDataPoint;\n public styleClassNames: IProcessedStyleSet<ITreeStyles>;\n\n private _nodeElements: JSX.Element[] = [];\n private _linkElements: JSX.Element[] = [];\n\n constructor(\n treeData: ITreeChartDataPoint,\n styleClassNames: IProcessedStyleSet<ITreeStyles>,\n _nodeElements: JSX.Element[] = [],\n _linkElements: JSX.Element[] = [],\n ) {\n this.treeData = treeData;\n this.styleClassNames = styleClassNames;\n this._nodeElements = _nodeElements;\n this._linkElements = _linkElements;\n }\n\n public truncateText(text: string, rectangleWidth: number, padding: number, styleClass: string | undefined) {\n let truncatedText = '';\n const words = text.split(/\\s+/).reverse();\n let word: string = '';\n const tspan = select('.svgTree').append('text').attr('class', 'tempText').append('tspan').text(null);\n\n if (styleClass) {\n tspan.attr('class', styleClass);\n }\n\n const line: string[] = [];\n while ((word = words.pop()!)) {\n line.push(word);\n tspan.text(line.join(' ') + ' ');\n if (tspan.node() !== null) {\n const w = tspan.node()!.getComputedTextLength();\n if (w > rectangleWidth - padding) {\n line.pop();\n line.push('...');\n break;\n }\n }\n }\n\n truncatedText = line.join(' ') + ' ';\n tspan.text(null);\n selectAll('.tempText').remove();\n return truncatedText;\n }\n\n // Append node elements\n // nodeId to create unique key\n public addNodeShapetoSVG(\n name: string,\n subname: string | undefined,\n bodytext: string | undefined,\n metricName: string | undefined,\n xCenterCoordinate: number,\n yCoordinate: number,\n fillColor: string,\n rectangleWidth: number,\n rectangleHeight: number,\n nodeId: number,\n parentInfo: string,\n ) {\n const ariaLabel = `nodeId: ${nodeId} \\nnodeMainText: ${name}\\nsubText ${subname} ${parentInfo}`;\n const xCoordinate = xCenterCoordinate - rectangleWidth / 2;\n if (metricName || nodeId !== 0 || !bodytext) {\n this._nodeElements.push(\n <rect\n width={rectangleWidth}\n height={rectangleHeight}\n x={xCoordinate}\n y={yCoordinate}\n tabIndex={0}\n role={'text'}\n data-is-focusable={true}\n aria-label={ariaLabel}\n className={this.styleClassNames.rectNode}\n stroke={fillColor}\n key={`${nodeId}${this.styleClassNames.rectNode}`}\n />,\n );\n }\n\n if (subname) {\n subname = this.truncateText(subname, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectSubText);\n }\n if (bodytext) {\n bodytext = this.truncateText(bodytext, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectBodyText);\n }\n if (metricName) {\n metricName = this.truncateText(\n metricName,\n rectangleWidth,\n rectangleWidth / 4,\n this.styleClassNames.rectMetricText,\n );\n }\n name = this.truncateText(name, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectText);\n\n // Text position y = y + rectHeight/2, 2 is ratio for depth\n // Text position x = x + rectWidth/2, 2 is ratio for length\n // Sub-text position x = x + rectWidth/2, 2 is ratio for length\n\n const subValue = metricName ? (\n <tspan className={this.styleClassNames.rectMetricText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n {metricName}\n </tspan>\n ) : bodytext ? (\n <>\n <tspan className={this.styleClassNames.rectSubText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n {subname}\n </tspan>\n <tspan className={this.styleClassNames.rectBodyText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n {bodytext}\n </tspan>\n </>\n ) : (\n <tspan className={this.styleClassNames.rectSubText} dy=\"1.4em\" x={xCoordinate + rectangleWidth / 2}>\n {subname}\n </tspan>\n );\n\n if (!subname && !metricName && !bodytext) {\n this._nodeElements.push(\n <text\n textAnchor=\"middle\"\n className={this.styleClassNames.rectMetricText}\n dy={yCoordinate + rectangleHeight / 1.6}\n x={xCoordinate + rectangleWidth / 2}\n key={`${nodeId}${this.styleClassNames.rectText}`}\n >\n {name}\n </text>,\n );\n } else {\n this._nodeElements.push(\n <text\n textAnchor=\"middle\"\n className={metricName ? this.styleClassNames.rectSubText : this.styleClassNames.rectText}\n dy={metricName ? yCoordinate + rectangleHeight / 2.5 : yCoordinate + rectangleHeight / 2}\n x={xCoordinate + rectangleWidth / 2}\n key={`${nodeId}${this.styleClassNames.rectText}`}\n >\n {name}\n {subValue}\n </text>,\n );\n }\n }\n // Create a rectangular path from parent to the child nodes\n public createPathLink(\n parentX: number,\n parentY: number,\n childX: number,\n childY: number,\n leaf: boolean,\n rectWidth: number,\n rectHeight: number,\n gap: number,\n childXMax: number,\n ): string {\n // gap adds ratio for parent.y to child.y\n\n /*Below code is used to draw lines(___|) to show the parent child relation i.e a vertical line\n emerging from the parent and\n then a horzontal line encompassing all the its children which are\n shown below it .so it gives a visual representation of tree branches.\n\n So for making this path firstly we are moving to the childX which is the mid point of the node and then\n we are subtracting the half of rectwidth to move the complete width of the rectangle and\n we are subtracting gap from y cordinate as we are making this line at a little gap from node.\n Then we are building that line horizonatlly till childXmax, again adding half rectwidth to complete\n the line till end as childXmax will be midpoint.\n Then last part is for making line vertical for that we move to the parentx position and\n then draw the vertical till parenty + rectHeight + gap/2\n We have seperate path for leaf node as we are using different composition like compact, long etc.*/\n\n const path = `M${childX - rectWidth / 2},${childY - gap} H${childXMax + rectWidth / 2} M${parentX},${childY - gap}\n V${parentY + rectHeight + gap / 2}`;\n\n const leafpath = `M${parentX},${parentY + rectHeight + gap / 2} V${parentY + gap * 5}\n H${parentX - rectWidth / 2} H${parentX + rectWidth / 2}`;\n\n // based on the type of node return leafpath or path element\n return leaf ? leafpath : path;\n }\n\n // Append path link element\n public addLinktoSVG(\n nodeId: number,\n parentX: number,\n parentY: number,\n childX: number,\n childY: number,\n leaf: boolean,\n rectWidth: number,\n rectHeight: number,\n gap: number,\n childXMax: number = 0,\n ) {\n this._linkElements.push(\n <path\n className={this.styleClassNames.link}\n d={this.createPathLink(parentX, parentY, childX, childY, leaf, rectWidth, rectHeight, gap, childXMax)}\n key={`${nodeId}${this.styleClassNames.link}`}\n />,\n );\n }\n}\n\n// Create child class to Add Tree component based on treeHeight\nclass LayeredTree extends StandardTree {\n public composition: number | undefined;\n private _treeTraversal: number | undefined;\n constructor(\n treeData: ITreeChartDataPoint,\n composition: number | undefined,\n styleClassNames: IProcessedStyleSet<ITreeStyles>,\n _nodeElements: JSX.Element[] = [],\n _linkElements: JSX.Element[] = [],\n _treeTraversal: number | undefined,\n ) {\n super(treeData, styleClassNames, _nodeElements, _linkElements);\n this.composition = composition;\n this._treeTraversal = _treeTraversal;\n }\n public createTree(givenLayoutWidth: number | undefined, screenWidth: number) {\n givenLayoutWidth = givenLayoutWidth! < 65 ? 65 : givenLayoutWidth! > 90 ? 90 : givenLayoutWidth;\n const layoutWidth = givenLayoutWidth || 75;\n const root = hierarchy(this.treeData, d => {\n return d.children;\n });\n\n // Find tree Height\n const treeHeight = root?.height + 1;\n\n // Create tree layout, width: layoutWidth, height: layoutWidth/1.5 and add node separation\n const treeChart = tree()\n .nodeSize([layoutWidth, layoutWidth / 1.5])\n .separation((a, b) => {\n return a.parent === root && b.parent === root ? 3.5 : 1;\n });\n\n // Assigns the x and y position for the nodes\n const treeData = treeChart(root);\n\n // Compute the new tree layout.\n const nodes = treeData.descendants();\n\n // Normalize for fixed-depth and width\n // Normalise y coordinate by depth of each node by a factor of 130\n // Normalise x coordinate by start coordinate 0 with screenSize/3\n nodes.forEach(d => {\n d.y = d.depth === 0 ? 10 : d.depth * 130;\n d.x += screenWidth / 2;\n });\n\n // <------------------ Traversal section ------------------>\n\n // Create tree data structure\n const treeDataStructure: Array<ITreeDataStructure> = [];\n let TreeID: number = 0;\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const createTreeDataStructure = (d: any) => {\n d.id = TreeID;\n treeDataStructure.push({\n id: TreeID,\n children: d.children,\n dataName: d.data.name,\n subName: d.data.subname,\n bodyText: d.data.bodytext,\n metricName: d.data?.metric,\n fill: d.data.fill,\n x: d.x,\n y: d.y,\n parentID: d.parent?.id,\n });\n TreeID++;\n };\n\n this._treeTraversal === 0\n ? root.each(d => {\n createTreeDataStructure(d);\n })\n : root.eachBefore(d => {\n createTreeDataStructure(d);\n });\n\n const rectWidth = layoutWidth * 3;\n const rectHeight = rectWidth / 3.45;\n const gap: number = 20;\n const parentSet = new Set();\n\n for (const d of treeDataStructure) {\n const parentInfo =\n d.id === 0\n ? 'Root Node'\n : `Parent info parentId: ${d.parentID}\n ${treeDataStructure[d.parentID].dataName}\n ${treeDataStructure[d.parentID].subName}`;\n\n // check for leaf nodes\n if (!d.children && !parentSet.has(d.parentID) && treeHeight === 3) {\n const compactNodeWidth = (rectWidth - gap) / 2;\n const compactNodeHeight = rectHeight;\n parentSet.add(d.parentID);\n\n // <------------------ Links section ------------------>\n this.addLinktoSVG(\n d.id,\n treeDataStructure[d.parentID].x,\n treeDataStructure[d.parentID].y,\n treeDataStructure[d.id].x,\n treeDataStructure[d.id].y,\n true,\n rectWidth,\n rectHeight,\n gap,\n );\n\n // <------------------ Nodes section ------------------>\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const children: any = treeDataStructure[d.parentID]?.children;\n\n const compactNodeCenterX1: number = treeDataStructure[d.parentID]?.x - compactNodeWidth / 2 - gap / 2;\n const compactNodeCenterX2: number = treeDataStructure[d.parentID]?.x + compactNodeWidth / 2 + gap / 2;\n const longNodeCenterX: number = treeDataStructure[d.parentID]?.x;\n let dy: number = children[0]?.y;\n\n for (let itr = 0; itr < children.length; ++itr) {\n const child = children[itr];\n\n // Given Composition\n if (this.composition !== undefined) {\n // For compact compostion\n if (this.composition === 0) {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.bodytext,\n child.data.metricName,\n // If the leaf node count is 1 ,\n //irrespective of provided composition we should always use long composition\n itr % 2 === 0 ? (children.length === 1 ? longNodeCenterX : compactNodeCenterX1) : compactNodeCenterX2,\n dy,\n child.data.fill,\n children.length === 1 ? rectWidth : compactNodeWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n if (itr % 2 === 1) {\n dy += compactNodeHeight + gap;\n }\n }\n // For long compostion\n else {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.bodytext,\n child.data.metricName,\n longNodeCenterX,\n dy,\n child.data.fill,\n rectWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n dy += compactNodeHeight + gap;\n }\n }\n\n // Automatic Node Composition\n else {\n if (children.length > 2) {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.bodytext,\n child.data.metricName,\n itr % 2 === 0 ? compactNodeCenterX1 : compactNodeCenterX2,\n dy,\n child.data.fill,\n children.length === 1 ? rectWidth : compactNodeWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n if (itr % 2 === 1) {\n dy += compactNodeHeight + gap;\n }\n } else {\n this.addNodeShapetoSVG(\n child.data.name,\n child.data.subname,\n child.data.bodytext,\n child.data.metricName,\n longNodeCenterX,\n dy,\n child.data.fill,\n rectWidth,\n rectHeight,\n child.id,\n parentInfo,\n );\n dy += compactNodeHeight + gap;\n }\n }\n }\n }\n\n if (d.children || treeHeight <= 2) {\n // <------------------ Nodes section ------------------>\n // Since the height <=2 we will be using long compositon.\n this.addNodeShapetoSVG(\n d.dataName,\n d.subName,\n d.bodyText,\n d.metricName,\n d.x,\n d.y,\n d.fill,\n rectWidth,\n rectHeight,\n d.id,\n parentInfo,\n );\n\n // <------------------ Links section ------------------>\n if (d.id === 0 && d.children) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const children: any = treeDataStructure[d.id]?.children;\n const childXMin = d3Min(children, (child: ITreeDataStructure) => child.x as number)!;\n const childXMax = d3Max(children, (child: ITreeDataStructure) => child.x as number)!;\n this.addLinktoSVG(d.id, d.x, d.y, childXMin, d.children[0].y, false, rectWidth, rectHeight, gap, childXMax);\n }\n }\n }\n }\n}\n\nexport class TreeChartBase extends React.Component<ITreeProps, ITreeState> {\n private _treeData: ITreeChartDataPoint;\n private _width: number;\n private _height: number;\n private _composition: number | undefined;\n private _classNames: IProcessedStyleSet<ITreeStyles>;\n private _margin: { left: number; right: number; top: number; bottom: number };\n private _nodeElements: JSX.Element[] = [];\n private _linkElements: JSX.Element[] = [];\n private _treeTraversal: number | undefined;\n\n constructor(props: ITreeProps) {\n super(props);\n this._margin = { top: 30, right: 20, bottom: 30, left: 50 };\n this._width = this.props.width || 1500;\n this._height = this.props.height || 700;\n this._treeData = this.props.treeData;\n this._composition = this.props?.composition;\n this._treeTraversal = this.props.treeTraversal;\n\n this.state = {\n _width: this._width,\n _height: this._height,\n };\n }\n\n public componentDidMount() {\n const { theme, className, styles } = this.props;\n\n // Get classNames to create component styling\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n\n // Call createTreeChart function in componentDidMount\n this.createTreeChart();\n\n this.setState({\n _width: this.props.width || 1500,\n _height: this.props.height || 700,\n });\n }\n\n public componentDidUpdate(prevProps: ITreeProps): void {\n if (prevProps.layoutWidth !== this.props.layoutWidth) {\n const svgText = selectAll('text');\n const svgRect = selectAll('rect');\n const svgLink = selectAll('path');\n\n if (this._nodeElements.length === 0 && this._linkElements.length === 0) {\n svgText.remove();\n svgRect.remove();\n svgLink.remove();\n }\n\n this.createTreeChart();\n }\n }\n public createTreeChart() {\n const nodeElements: JSX.Element[] = [];\n const linkElements: JSX.Element[] = [];\n\n // Instantiate inherited class and call createTree function for the object\n const treeObject = new LayeredTree(\n this._treeData,\n this._composition,\n this._classNames,\n nodeElements,\n linkElements,\n this._treeTraversal,\n );\n const width = this.state._width - this._margin.left - this._margin.right;\n treeObject.createTree(this.props.layoutWidth, width);\n this._nodeElements = nodeElements;\n this._linkElements = linkElements;\n }\n\n public render(): JSX.Element {\n return (\n <FocusZone>\n <div className={this._classNames?.root}>\n <svg\n className=\"svgTree\"\n width={this.state._width - this._margin.left - this._margin.right}\n height={this.state._height - this._margin.top - this._margin.bottom}\n >\n <g className=\"svgNode\">{this._nodeElements.map(element => element)}</g>\n <g className=\"svgLink\">{this._linkElements.map(element => element)}</g>\n </svg>\n </div>\n </FocusZone>\n );\n }\n}\n"]}
|
|
@@ -25,6 +25,7 @@ define(["require", "exports", "tslib"], function (require, exports, tslib_1) {
|
|
|
25
25
|
},
|
|
26
26
|
rectText: tslib_1.__assign({ fill: 'black' }, props.theme.fonts.large),
|
|
27
27
|
rectSubText: tslib_1.__assign({ fill: '#484644' }, props.theme.fonts.medium),
|
|
28
|
+
rectBodyText: tslib_1.__assign({ fill: '#808080' }, props.theme.fonts.xSmall),
|
|
28
29
|
rectMetricText: tslib_1.__assign({ fill: '#000000' }, props.theme.fonts.xLarge),
|
|
29
30
|
};
|
|
30
31
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeChart.styles.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAAsB;QAC9C,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,OAAO;gBACnB,cAAc;gBACd,KAAK,CAAC,SAAS;gBACf;oBACE,QAAQ,EAAE,QAAQ;iBACnB;aACF;YACD,IAAI,EAAE;gBACJ,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,SAAS;gBACjB,WAAW,EAAE,KAAK;aACnB;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE,KAAK;gBAClB,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,MAAM;gBACf,EAAE,EAAE,KAAK;aACV;YACD,QAAQ,qBACN,IAAI,EAAE,OAAO,IACV,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,KAAK,CAC5B;YACD,WAAW,qBACT,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;YACD,cAAc,qBACZ,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;SACF,CAAC;IACJ,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"TreeChart.styles.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAAsB;QAC9C,OAAO;YACL,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,OAAO;gBACnB,cAAc;gBACd,KAAK,CAAC,SAAS;gBACf;oBACE,QAAQ,EAAE,QAAQ;iBACnB;aACF;YACD,IAAI,EAAE;gBACJ,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,SAAS;gBACjB,WAAW,EAAE,KAAK;aACnB;YACD,QAAQ,EAAE;gBACR,WAAW,EAAE,KAAK;gBAClB,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,MAAM;gBACf,EAAE,EAAE,KAAK;aACV;YACD,QAAQ,qBACN,IAAI,EAAE,OAAO,IACV,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,KAAK,CAC5B;YACD,WAAW,qBACT,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;YACD,YAAY,qBACV,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;YACD,cAAc,qBACZ,IAAI,EAAE,SAAS,IACZ,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,CAC7B;SACF,CAAC;IACJ,CAAC,CAAC;IAtCW,QAAA,SAAS,aAsCpB","sourcesContent":["import { ITreeStyleProps, ITreeStyles } from './TreeChart.types';\n\nexport const getStyles = (props: ITreeStyleProps): ITreeStyles => {\n return {\n root: [\n props.theme.spacing,\n 'ms-TreeChart',\n props.className,\n {\n overflow: 'scroll',\n },\n ],\n link: {\n fill: 'none',\n stroke: '#A1A1A1',\n strokeWidth: '2px',\n },\n rectNode: {\n strokeWidth: '2px',\n fill: 'white',\n padding: '10px',\n rx: '2px',\n },\n rectText: {\n fill: 'black',\n ...props.theme!.fonts.large,\n },\n rectSubText: {\n fill: '#484644',\n ...props.theme!.fonts.medium,\n },\n rectBodyText: {\n fill: '#808080',\n ...props.theme!.fonts.xSmall,\n },\n rectMetricText: {\n fill: '#000000',\n ...props.theme!.fonts.xLarge,\n },\n };\n};\n"]}
|
|
@@ -8,11 +8,15 @@ export interface ITreeChartDataPoint {
|
|
|
8
8
|
/**
|
|
9
9
|
* Subtext value (optional)
|
|
10
10
|
*/
|
|
11
|
-
subname?: string
|
|
11
|
+
subname?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Bodytext value (optional)
|
|
14
|
+
*/
|
|
15
|
+
bodytext?: string;
|
|
12
16
|
/**
|
|
13
17
|
* Metric text value (optional)
|
|
14
18
|
*/
|
|
15
|
-
metric?: string
|
|
19
|
+
metric?: string;
|
|
16
20
|
/**
|
|
17
21
|
* Color of the rectangular box
|
|
18
22
|
*/
|
|
@@ -50,12 +54,12 @@ export interface ITreeProps {
|
|
|
50
54
|
/**
|
|
51
55
|
* compostion for three layer chart, long: composition = 1; compact: composition = 0
|
|
52
56
|
*/
|
|
53
|
-
composition?: NodesComposition.long | NodesComposition.compact
|
|
57
|
+
composition?: NodesComposition.long | NodesComposition.compact;
|
|
54
58
|
/**
|
|
55
59
|
* Node Width Size for the Tree Layout
|
|
56
60
|
* * @default 75
|
|
57
61
|
*/
|
|
58
|
-
layoutWidth?: number
|
|
62
|
+
layoutWidth?: number;
|
|
59
63
|
/**
|
|
60
64
|
* traversal order for tree chart, preOrder = 1, levelOrder = 0
|
|
61
65
|
*/
|
|
@@ -125,11 +129,15 @@ export interface ITreeDataStructure {
|
|
|
125
129
|
/**
|
|
126
130
|
* Subtext value (optional)
|
|
127
131
|
*/
|
|
128
|
-
subName?: string
|
|
132
|
+
subName?: string;
|
|
133
|
+
/**
|
|
134
|
+
* Bodytext value (optional)
|
|
135
|
+
*/
|
|
136
|
+
bodyText?: string;
|
|
129
137
|
/**
|
|
130
138
|
* Metric text value (optional)
|
|
131
139
|
*/
|
|
132
|
-
metricName?: string
|
|
140
|
+
metricName?: string;
|
|
133
141
|
/**
|
|
134
142
|
* Color of the rectangular box
|
|
135
143
|
*/
|
|
@@ -178,6 +186,10 @@ export interface ITreeStyles {
|
|
|
178
186
|
* Style for the node sub Text
|
|
179
187
|
*/
|
|
180
188
|
rectSubText: IStyle;
|
|
189
|
+
/**
|
|
190
|
+
* Style for the node body Text
|
|
191
|
+
*/
|
|
192
|
+
rectBodyText: IStyle;
|
|
181
193
|
/**
|
|
182
194
|
* Style for the node metric value Text
|
|
183
195
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TreeChart.types.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.types.ts"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"TreeChart.types.js","sourceRoot":"../src/","sources":["components/TreeChart/TreeChart.types.ts"],"names":[],"mappings":";;;;IA8BA,IAAY,gBASX;IATD,WAAY,gBAAgB;QAC1B;;WAEG;QACH,uDAAQ,CAAA;QACR;;WAEG;QACH,6DAAW,CAAA;IACb,CAAC,EATW,gBAAgB,GAAhB,wBAAgB,KAAhB,wBAAgB,QAS3B;IAED,IAAY,YASX;IATD,WAAY,YAAY;QACtB;;WAEG;QACH,uDAAY,CAAA;QACZ;;WAEG;QACH,2DAAc,CAAA;IAChB,CAAC,EATW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QASvB","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\n\nexport interface ITreeChartDataPoint {\n /**\n * Node main text\n */\n name: string;\n /**\n * Subtext value (optional)\n */\n subname?: string;\n /**\n * Bodytext value (optional)\n */\n bodytext?: string;\n /**\n * Metric text value (optional)\n */\n metric?: string;\n /**\n * Color of the rectangular box\n */\n fill: string;\n /**\n * Recursive datastructure for child node object\n */\n children?: Array<ITreeChartDataPoint>;\n}\n\nexport enum NodesComposition {\n /**\n * NodeComposition enum val for long: number = 1\n */\n long = 1,\n /**\n * NodeComposition enum val for compact: number = 0\n */\n compact = 0,\n}\n\nexport enum TreeTraverse {\n /**\n * TreeTraverse enum val for preOrder: number = 1\n */\n preOrder = 1,\n /**\n * TreeTraverse enum val for levelOrder: number = 0\n */\n levelOrder = 0,\n}\n\nexport interface ITreeProps {\n /**\n * An object of chart data points for the Tree chart\n */\n treeData: ITreeChartDataPoint;\n /**\n * compostion for three layer chart, long: composition = 1; compact: composition = 0\n */\n composition?: NodesComposition.long | NodesComposition.compact;\n /**\n * Node Width Size for the Tree Layout\n * * @default 75\n */\n layoutWidth?: number;\n /**\n * traversal order for tree chart, preOrder = 1, levelOrder = 0\n */\n treeTraversal?: TreeTraverse.preOrder | TreeTraverse.levelOrder;\n /**\n * Width of SVG tree chart\n * * @default 1500\n */\n width?: number;\n /**\n * Height of SVG tree chart\n * * @default 700\n */\n height?: number;\n /**\n * Margin for the SVG tree chart\n */\n marign?: { left: number; right: number; top: number; bottom: number };\n /**\n * Call to provide customized styling that will layer on top of the variant rules.\n */\n styles?: IStyleFunctionOrObject<ITreeStyleProps, ITreeStyles>;\n /**\n * Additional CSS class(es) to apply to the TreeChart.\n */\n className?: string;\n /**\n * Theme (provided through customization.)\n */\n theme?: ITheme;\n}\nexport interface ITreeState {\n /**\n * Width of SVG tree chart\n * * @default 1500\n */\n _width: number;\n /**\n * Height of SVG tree chart\n * * @default 700\n */\n _height: number;\n /**\n * Layout Width of SVG tree chart\n * * @default 75\n */\n _layoutWidth?: number;\n}\n\nexport interface ITreeDataStructure {\n /**\n * Node id of each node\n */\n id: number;\n /**\n * Children node object\n */\n children: Array<ITreeDataStructure>;\n /**\n * Node main text\n */\n dataName: string;\n /**\n * Subtext value (optional)\n */\n subName?: string;\n /**\n * Bodytext value (optional)\n */\n bodyText?: string;\n /**\n * Metric text value (optional)\n */\n metricName?: string;\n /**\n * Color of the rectangular box\n */\n fill: string;\n /**\n * X-coordindate of node\n */\n x: number;\n /**\n * Y-coordindate of node\n */\n y: number;\n /**\n * Node id of each node's parent\n */\n parentID: number;\n}\n\nexport interface ITreeStyleProps {\n /**\n * Theme (provided through customization.)\n */\n theme: ITheme;\n /**\n * Additional CSS class(es) to apply to the TreeChart.\n */\n className?: string;\n}\nexport interface ITreeStyles {\n /**\n * Style for the root element.\n */\n root: IStyle;\n /**\n * Style for the Link/Path element.\n */\n link: IStyle;\n /**\n * Style for rectangular Node\n */\n rectNode: IStyle;\n /**\n * Style for the node main Text\n */\n rectText: IStyle;\n /**\n * Style for the node sub Text\n */\n rectSubText: IStyle;\n /**\n * Style for the node body Text\n */\n rectBodyText: IStyle;\n /**\n * Style for the node metric value Text\n */\n rectMetricText: IStyle;\n}\n"]}
|
|
@@ -37,7 +37,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
|
|
|
37
37
|
});
|
|
38
38
|
var linePath = d3_shape_1.line()
|
|
39
39
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
40
|
-
.x(function (d) { return (!isNumericAxis ? xBarScale(d.
|
|
40
|
+
.x(function (d) { return (!isNumericAxis ? xBarScale(d.x) + 0.5 * xBarScale.bandwidth() : xScale(d.x)); })
|
|
41
41
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
42
42
|
.y(function (d) { return yScale(d.y); });
|
|
43
43
|
var shouldHighlight = true;
|
|
@@ -53,7 +53,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
|
|
|
53
53
|
line.push(React.createElement("path", { opacity: shouldHighlight ? 1 : 0.1, d: linePath(lineData), fill: "transparent", strokeLinecap: "square", strokeWidth: 3, stroke: lineLegendColor }));
|
|
54
54
|
var dots = lineData.map(function (item, index) {
|
|
55
55
|
var _a;
|
|
56
|
-
return (React.createElement("circle", { key: index, cx: !isNumericAxis ? xBarScale(item.
|
|
56
|
+
return (React.createElement("circle", { key: index, cx: !isNumericAxis ? xBarScale(item.x) + 0.5 * xBarScale.bandwidth() : xScale(item.x), cy: yScale(item.y), onMouseOver: _this._onBarHover.bind(_this, item.point, colorScale(item.y)), onMouseOut: _this._onBarLeave, r: 8, stroke: lineLegendColor, fill: _this.props.theme.palette.white, strokeWidth: 3, visibility: _this.state.activeXdataPoint === item.x ? CircleVisbility.show : CircleVisbility.hide, onClick: (_a = item.point.lineData) === null || _a === void 0 ? void 0 : _a.onClick }));
|
|
57
57
|
});
|
|
58
58
|
return (React.createElement(React.Fragment, null,
|
|
59
59
|
line,
|
|
@@ -169,8 +169,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-sele
|
|
|
169
169
|
_this._getScales = function (containerHeight, containerWidth, isNumericScale) {
|
|
170
170
|
if (isNumericScale) {
|
|
171
171
|
var xMax = d3_array_1.max(_this._points, function (point) { return point.x; });
|
|
172
|
+
var xMin = d3_array_1.min(_this._points, function (point) { return point.x; });
|
|
172
173
|
var xBarScale = d3_scale_1.scaleLinear()
|
|
173
|
-
.domain(_this._isRtl ? [xMax,
|
|
174
|
+
.domain(_this._isRtl ? [xMax, xMin] : [xMin, xMax])
|
|
174
175
|
.nice()
|
|
175
176
|
.range([
|
|
176
177
|
_this.margins.left + _this._barWidth / 2,
|