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.