Customizing Items

Default visualization

This component comes with styling and options suitable for general supply chain graphs. The items in the data array must satisfy the SupplyChain type:

type SupplyChainItemId = string | number

type SupplyChainItem = {
  id: SupplyChainItemId
  parentId?: SupplyChainItemId
  width?: number
  height?: number
}

• The optional parentId defines whether the item is contained in another “grouping” item.
• The optional width and height define the render size of the item. If no values are given, the size is determined automatically.

The default visualization expects data items of type UserSupplyChainItem which is defined like this:

export type UserSupplyChainItem<TCustomProps = Record<string, unknown>> = TCustomProps & SupplyChainItem

The default visualization colorizes all items inside groups according to a predefined color palette. The CSS classes used for colorization are called:

• yfiles-react-color__background1 to yfiles-react-color__background16 for more opaque colors
• yfiles-react-color__background1--transparent to yfiles-react-color__background16--transparent for more transparent colors
• yfiles-react-color__white and yfiles-react-color__white--transparent for items without colors.

They can be overwritten in the application’s own stylesheets.

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.