Relation Graph

Functional Overview

This example demonstrates dynamic graph container size adjustment. By changing the container’s width and height, the graph automatically adapts to the new dimensions. When the size changes, the onViewResize event is triggered, allowing recalculation of layout or view adjustments for optimal display.

Implementation of Key Features

Dynamic Size Control

Use state to manage container dimensions:

const [currentSize, setCurrentSize] = useState(400);

<SimpleUISelect
    data={[
        { value: 400, text: '400' },
        { value: 600, text: '600' },
        { value: 800, text: '800' },
        { value: 1000, text: '1000' }
    ]}
    currentValue={currentSize}
    onChange={(newValue: number) => {
        setCurrentSize(newValue);
    }}
/>

Provide preset size options for quick switching between different container sizes.

Responsive Container Styles

Apply dynamic styles to the container:

<div
    className="border-2 border-red-600 shadow-xl"
    style={{
        width: currentSize + 'px',
        height: currentSize + 'px',
        position: 'relative'
    }}
>
    <RelationGraph options={graphOptions} onViewResize={onViewResize} />
</div>

The container’s width and height directly use state values, with a red border clearly showing container boundaries.

Size Change Handling

Implement the onViewResize callback to handle size changes:

const onViewResize = () => {
    console.log('onViewResize');
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

<RelationGraph options={graphOptions} onViewResize={onViewResize} />

When container size changes, automatically move the graph to center and adjust zoom to fit the new size.

Relative Positioning Container

Use position: relative to ensure correct graph container positioning:

<div style={{height: '100vh'}}>
    <div className="p-5">...</div>
    <div style={{position: 'relative'}}>
        <RelationGraph />
    </div>
</div>

The outer container provides vertical layout, while the inner container uses relative positioning to support absolutely positioned child elements.

Overflow Handling

The outer container allows overflow scrolling:

<div className="my-graph overflow-auto" style={{height: '100vh'}}>

When the graph container is larger than the viewport, users can scroll to see all content.

Creative Use Cases

Responsive Layout Design

Create responsive graph layouts that adapt to different screen sizes:

const [containerSize, setContainerSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
});

useEffect(() => {
    const handleResize = () => {
        setContainerSize({
            width: window.innerWidth,
            height: window.innerHeight
        });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
}, []);

Print and Export Preview

Preview graph display at different page sizes before printing. Users can select standard paper sizes like A4, A3 for preview.

Split-Screen Comparison

Create split-screen views displaying the same or different graphs in containers of different sizes for easy comparison and analysis.

Mobile Device Adaptation

Optimize graph display for mobile devices by automatically adjusting container size and zoom level on smaller screens.

Embedded Widgets

Embed graphs into larger application interfaces as information panels or data visualization components.

Adaptive Card Layout

In card-style layouts, each card contains a graph, with card sizes automatically adjusting based on available space.

Animated Size Transitions

Add smooth size transition animations:

<div
    style={{
        width: currentSize + 'px',
        height: currentSize + 'px',
        transition: 'width 0.3s ease, height 0.3s ease'
    }}
>
    <RelationGraph />
</div>

Min/Max Size Limits

Set minimum and maximum container size limits:

const clampedSize = Math.max(300, Math.min(currentSize, 1200));

Ensures the graph container isn’t too small to be readable or too large to affect page layout.

Graph Resize Event

Dynamic Container Size Adjustment with Auto-Reflow