<drayman-ngx-graph />

Graph powered by ngx-charts library.

export const component: DraymanComponent = async ({ forceUpdate }) => {

    const links = [{
        id: 'a',
        source: 'first',
        target: 'second',
        label: 'is parent of'
    }, {
        id: 'b',
        source: 'first',
        target: 'third',
        label: 'custom label'
    }];

    return () => (
        <div style={{ height: '300px', width: '300px' }}>
            <button
                onClick={async () => {
                    links.push({
                        id: `new-link-${links.length}`,
                        source: 'first',
                        target: 'third',
                        label: 'new link'
                    })
                    await forceUpdate();
                }}
            >Add link</button>
            <drayman-ngx-graph
                showMiniMap
                links={links}
                nodes={[{
                    id: 'first',
                    label: 'A'
                }, {
                    id: 'second',
                    label: 'B'
                }, {
                    id: 'third',
                    label: 'C',
                    data: {
                        customColor: 'orange'
                    }
                }]}
            />
        </div>
    );
}