search

BasicPrimitives / react

Basic Primitives Diagrams for React. Data visualization components library that implements organizational chart and multi-parent dependency diagrams.
https://basicprimitives.github.io/react/
Other
22 stars 5 forks source link

Showing users as Dots #34

Closed devhe4d closed 3 years ago

devhe4d commented 3 years ago

Hi, In the Large Hierarchy demo that is available on the website, the users beyond 3 level are showing as dots ( this is one the best features I've ever seen ), But for me it doesn't show that way. As I saw the config file in ItemTemplate, the pageFitMode is set to PageFitMode.AutoSize, but in the demo on the website, it's set to PageFitMode.FitToPage. when I change pageFitMode in the config file to PageFitMode.FitToPage, the chart breaks and nothing get rendered.

I don't know where I'm doing wrong

654646

BasicPrimitives commented 3 years ago

You are suing mode when the diagram auto sizes its placeholder. In this mode, all nodes are visible and full size. If you want to use auto fit, you have to define the diagram's placeholder size, so the component can layout itself inside. Look at the following samples: https://www.basicprimitives.com/reactusecases/diagramsizing As the first step, create placeholder heaving fixed width and height style properties

devhe4d commented 3 years ago

Thank you for your time. I used this two configuration together: 

    pageFitMode: PageFitMode.AutoSize,
    autoSizeMaximum: new Size(1920, 1080),

but the nodes still are showing in full size when I change pageFitMode to PageFitMode.FitToPage, the chart disappears.

BasicPrimitives commented 3 years ago

Set the fixed size for the placeholder:

      <div style={{width: "400px", height: "400px", borderWidth: "2px", borderColor: "black", borderStyle: "solid"}}>
        <OrgDiagram centerOnCursor={true} onHighlightChanged={this.onHighlightChanged} config={config} />
      </div>
devhe4d commented 3 years ago

Thank you, Its now working perfectly 😊