SupplyChain<TSupplyChainItem extends SupplyChainItem, TSupplyChainConnection extends SupplyChainConnection, TNeedle>

The SupplyChain component visualizes the given data as a supply chain chart. All data items have to be included in the data.

function SupplyChainChart() {
  return (
    <SupplyChain data={data}> </SupplyChain>
  )
}

Props

SupplyChainProps

NameDescriptionType
className?
Specifies the CSS class used for the SupplyChain component.
string
connectionLabelProvider?
Provides a label description for connections.
ConnectionLabelProvider<TSupplyChainConnection>
connectionStyleProvider?
A function that provides a style configuration for the given connection.
ConnectionStyleProvider<
  TSupplyChainItem,
  TSupplyChainConnection
>
contextMenuItems?
An optional function specifying the context menu items for a data item.
ContextMenuItemProvider<
  | TSupplyChainItem
  | TSupplyChainConnection
  | FoldingConnection<TSupplyChainConnection>
>
data
The data items visualized by the supply chain.
SupplyChainData<
  TSupplyChainItem,
  TSupplyChainConnection
>
gridPositioning?
Provides a grid position for supply chain items. The grid layout feature is automatically used when a grid positioning function is provided.
GridPositioningFunction<TSupplyChainItem>
heatMapping?
Maps a supply chain item to a numerical heat value used in the heatmap visualization. The heatmap feature is automatically used when a heat map function is provided.
HeatFunction<
  TSupplyChainItem,
  TSupplyChainConnection
>
itemSize?
Specifies the default item size used when no explicit width and height are provided.
{
  width: number
  height: number
}
layoutOptions?
Options for configuring the layout style and behavior.
SupplyChainLayoutOptions
layoutWorker?
Optional Web Worker to run the layout calculation. This requires the initialization of a Web Worker, see initializeWebWorker.
Worker
onItemFocus?
An optional callback that’s called when an item is focused. Note that the focused item is not changed if the empty canvas is clicked.
ItemFocusedListener<
  | TSupplyChainItem
  | TSupplyChainConnection
>
onItemHover?
An optional callback that’s called when the hovered item has changed.
ItemHoveredListener<
  | TSupplyChainItem
  | TSupplyChainConnection
>
onItemSelect?
An optional callback that’s called when an item is selected or deselected.
ItemSelectedListener<
  | TSupplyChainItem
  | TSupplyChainConnection
>
onSearch?
An optional callback that returns whether the given item matches the search needle. The default search implementation only supports string needles and searches all properties of the data item. Provide this callback to implement custom search logic.
SearchFunction<
  | TSupplyChainItem
  | TSupplyChainConnection,
  TNeedle
>
renderContextMenu?
An optional component that renders a custom context menu.
ComponentType<
  RenderContextMenuProps<TSupplyChainItem>
>
renderGroup?
A custom render component used for rendering groups of the given data item.
ComponentType<
  RenderGroupProps<TSupplyChainItem>
>
renderItem?
A custom render component used for rendering the given data item.
ComponentType<
  RenderItemProps<TSupplyChainItem>
>
renderTooltip?
An optional component that can be used for rendering a custom tooltip.
ComponentType<
  RenderTooltipProps<
    | TSupplyChainItem
    | TSupplyChainConnection
  >
>
searchNeedle?
A string or a complex object to search for. The default search implementation can only handle strings and searches on the properties of the data item. For more complex search logic, provide an SupplyChain.onSearch callback.
TNeedle
setLayoutRunning?
State setter used to indicate whether the layout is running.
React.Dispatch<
  React.SetStateAction<boolean>
>
showLevel?
The grouping level which should be shown. Level 1 are the top level nodes.
number
style?
Specifies the CSS style used for the SupplyChain component.
CSSProperties