Fixing Tree chart issues

[ankityadav4]

Current Behavior

1. Parent node can only consist only of 2 lines of text.
2. Chart appears asymmetric in layout i.e space from left and right side is unequal.

New Behavior

1. For adding the third optional text line in parent node. that is added as a optional body text. When the body text is given then the rectangle is removed. 2.Secondly changes for alignment of the tree chart. a. So for this earlier the root node of the tree was made at screenwidth/3 which was creating the problem unequal padding from left and right. I have fixed it by making the root node to be made at screenwidth/2. b. Second thing was earlier the rectangles were not symmetric in nature, as the rectangles were made using the x y coordinate, instead the x and y coordinates must be taken as centre coordinates, so that when layout width (rectangle width) changes the chart always remain symmetric.

Related Issue(s)

Fixes #

[codesandbox-ci[bot]]

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 3c0d44ae6d6cdf9fa02f20781939eab116661aac:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against af37ad65b2943761d035c10d14c87912b71f73ce}

[size-auditor[bot]]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: af37ad65b2943761d035c10d14c87912b71f73ce (build)