Getting Started
Prerequisites
To use the Supply Chain component, yFiles for HTML is required. You can evaluate yFiles for 60 days free of charge on my.yworks.com. See Licensing for more information on this topic.
You can learn how to work with the yFiles npm module in our Developer’s Guide. A convenient way of getting access to yFiles is to use the yFiles Dev Suite.
Project Setup
-
Installation
In addition to yFiles, the Supply Chain component requires React to be installed in your project. If you want to start your project from scratch, we recommend using vite:
npm create vite@latest my-supply-chain-app -- --template react-ts
Add the yFiles dependency:
npm install <yFiles package path>/lib-dev/yfiles-26.0.0+dev.tgz
Sample
The resulting package.json dependencies should resemble the following:package.json
dependencies"dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "yfiles": "./lib-dev/yfiles-26.0.0.tgz" }
Now, the component itself can be installed:
npm install @yworks/react-yfiles-supply-chain
-
License
Be sure to invoke
registerLicense
before using the Supply Chain React component. When evaluating yFiles, the license JSON file is found in thelib/
folder of the yFiles for HTML evaluation package. For licensed users, the license data is provided separately.License registration
Import or paste your license data and register the license, e.g. in
App.tsx
:import yFilesLicense from './license.json' registerLicense(yFilesLicense)
-
Stylesheet
Make sure to import the CSS stylesheet as well:
import '@yworks/react-yfiles-supply-chain/dist/index.css'
-
Usage
You are now all set to utilize the Supply Chain component with your data! See a basic example
App.tsx
below:import { registerLicense, SupplyChain, } from '@yworks/react-yfiles-supply-chain' import '@yworks/react-yfiles-supply-chain/dist/index.css' import yFilesLicense from './license.json' registerLicense(yFilesLicense) const data = { items: [ { name: 'Copper-Ore', id: 1, parentId: 3 }, { name: 'Copper-Plate', id: 2, parentId: 4 }, { name: 'Resource', id: 3 }, { name: 'Material', id: 4 } ], connections: [{ sourceId: 1, targetId: 2 }] } function App() { return <SupplyChain data={data}></SupplyChain> } export default App
Note: By default, the
SupplyChain
component adjusts its size to match the size of its parent element. Therefore, it is necessary to set the dimensions of the containing element or apply styling directly to theSupplyChain
component. This can be achieved by defining a CSS class or applying inline styles.
Learn More
Explore the possibilities of visualizing supply chain diagrams with the yFiles Supply Chain Component. For further information about yFiles for HTML and our company, please visit yWorks.com.
If you are exploring a different use case and require another React component, please take a look at the available React components powered by yFiles!
For support or feedback, please reach out to our support team or open an issue on GitHub. Happy diagramming!