Tree Chart component - react-charting - Reflow #23895
Tree Chart component - react-charting - Reflow #23895AtishayMsft merged 70 commits intomicrosoft:masterfrom
Conversation
Usr/apurva tech/tree chart
…-tech/fluentui into usr/Apurva-tech/TreeChart
… usr/Apurva-tech/TreeChart
Usr/apurva tech/tree chart
add: yarn change file
fix: d3-hierarchy version
…json only 1 change file needed
…h/fluentui into usr/Apurva-tech/Fixes
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 4a00d7c:
|
📊 Bundle size report🤖 This report was generated against 11a9b0c53578d9898926845678f13eeeb2441713 |
Asset size changesSize Auditor did not detect a change in bundle size for any component! Baseline commit: 11a9b0c53578d9898926845678f13eeeb2441713 (build) |
| this._linkElements = _linkElements; | ||
| } | ||
|
|
||
| public createEllipsisText(text: string, rectangleWidth: number, padding: number, styleClass: string | undefined) { |
There was a problem hiding this comment.
rename to truncateText
| <text | ||
| textAnchor="middle" | ||
| className={metricName !== undefined ? this.styleClassNames.rectSubText : this.styleClassNames.rectText} | ||
| id={`${nodeId}`} |
There was a problem hiding this comment.
is the id value unique
There was a problem hiding this comment.
Yes it is unique for each node, but since we are not using selector anymore, this isn't needed
Fixed
| * Node Width Size for the Tree Layout | ||
| * * @default 75 | ||
| */ | ||
| layoutWidth?: NodesComposition.long | NodesComposition.compact | undefined; |
There was a problem hiding this comment.
why using NodesComposition enum here
There was a problem hiding this comment.
sorry, I was trying to take layoutWidth different for different composition earlier, then I changed the logic to make it common for both long/compact. Now we don't need it.
Fixed now
| type="range" | ||
| value={this.state?._layoutWidth} | ||
| min={65} | ||
| max={90} |
There was a problem hiding this comment.
have you defined the min value inside tree chart code as well. If less than 65 causes the tree to distort, then define this minimum value in the main code.
| } | ||
| public createTree(givenLayoutWidth: number | undefined, screenWidth: number) { | ||
| if (givenLayoutWidth !== undefined && (givenLayoutWidth < 65 || givenLayoutWidth > 90)) { | ||
| givenLayoutWidth = 65; |
There was a problem hiding this comment.
if < 65 then set as 65. If more than 90 set as 90
Verified that:
masterbranchyarn changelocallyCurrent Behavior
No reflow and node adjustment
New Behavior