Customizing Items
Default visualizations
This component comes with styling and options suitable for general company ownership graphs.
The items in the data
array must satisfy the Entity
type:
type EntityId = string | number
type EntityType =
| 'Asset'
| 'Bank'
| 'Branch'
| 'CTB'
| 'Corporation'
| 'Disregarded'
| 'Dual Resident'
| 'Individual'
| 'Multiple'
| 'Octagon'
| 'PE_Risk'
| 'Partnership'
| 'RCTB'
| 'Third Party'
| 'Trapezoid'
| 'Trust'
| 'Unknown'
export interface Entity {
id: EntityId
type?: EntityType
width?: number
height?: number
name?: string
className?: string
style?: CSSProperties
}
The optional width
and height
define the render size of the item. If no values are given, the size is determined automatically.
There are two node visualizations available out-of-the-box: The “standard” nodes with coloring and shapes for each entity type
and a rectangular tabular React node style. The default is the “standard” node style.
To use the tabular node style, you need to set the RenderEntity
on the renderEntity
component property:
import {
CompanyOwnership,
CompanyOwnershipData,
RenderEntity
} from '@yworks/react-yfiles-company-ownership'
import data from '../../data/company-data.json'
export default () => (
<CompanyOwnership
data={data as CompanyOwnershipData}
renderEntity={RenderEntity}
></CompanyOwnership>
)
Custom items
The visualization of items is highly customizable. You can specify custom React components to render the items according to your specific requirements. Note that to optimize performance and depending on the implementation, it might be necessary to use memoization for custom visualization components.