SupplyChainProvider

The SupplyChainProvider component is a context provider, granting external access to the supply chain chart beyond the SupplyChain component itself.

This functionality proves particularly valuable when there’s a toolbar or sidebar housing elements that require interaction with the supply chain chart. Examples would include buttons for zooming in and out or fitting the graph into the viewport.

The snippet below illustrates how to leverage the SupplyChainProvider, enabling a component featuring both a SupplyChain and a sidebar to utilize the useSupplyChainContext hook.

function SupplyChainWrapper() {
  const { fitContent, zoomTo } = useSupplyChainContext()

  return (
    <>
      <SupplyChain data={data} contextMenuItems={item => {
          if (item) {
            return [{ title: 'Zoom to Item', action: () => zoomTo([item]) }]
          }
          return []
        }}>
      </SupplyChain>
      <div style={{position: 'absolute', top: '20px', left: '20px'}}>
        <button onClick={() => fitContent()}>Fit Content</button>
      </div>
    </>
  )
}

function SupplyChainComponent () {
  return (
    <SupplyChainProvider>
      <SupplyChainWrapper></SupplyChainWrapper>
    </SupplyChainProvider>
  )
}