|
| 1 | +# yFiles React Supply Chain Component |
| 2 | + |
| 3 | + |
| 4 | + |
| 5 | +Traditionally associated with manufacturing processes, supply chain management is equally important for the provision |
| 6 | +of any good or service, whether physical, face-to-face, or purely digital. Managing a supply chain requires visualizing |
| 7 | +and analyzing all of the components, resources and process in a network. Comprehensively diagramming a supply network |
| 8 | +enables teams to identify inefficiencies and optimize the overall supply chain. |
| 9 | + |
| 10 | +Our powerful and versatile React component based on the [yFiles](https://www.yworks.com/yfiles-overview) library, allows |
| 11 | +you to seamlessly incorporate dynamic and interactive supply chain diagrams into your applications. This enhances the |
| 12 | +user experience and facilitates an intuitive exploration of complex manufacturing processes. |
| 13 | + |
| 14 | +## Getting Started |
| 15 | + |
| 16 | +1. **Installation:** |
| 17 | + Install the component via npm by running the following command in your project directory: |
| 18 | + ```bash |
| 19 | + npm install @yworks/react-yfiles-supply-chain |
| 20 | + ``` |
| 21 | + |
| 22 | + The supply chain module has certain peer dependencies that must be installed within your project. Since it is a React |
| 23 | + module, `react` and `react-dom` dependencies are needed. |
| 24 | + |
| 25 | + Additionally, the component relies on the [yFiles](https://www.yworks.com/yfiles-overview) library which is not |
| 26 | + available on the public npm registry. Instructions on how to work with the yFiles npm module in |
| 27 | + our [Developer's Guide](https://docs.yworks.com/yfileshtml/#/dguide/yfiles_npm_module). |
| 28 | + |
| 29 | + Ensure that the dependencies in the `package.json` file resemble the following: |
| 30 | + ```json |
| 31 | + { |
| 32 | + ... |
| 33 | + "dependencies": { |
| 34 | + "@yworks/react-yfiles-supply-chain": "^1.0.0", |
| 35 | + "react": "^18.2.0", |
| 36 | + "react-dom": "^18.2.0", |
| 37 | + "yfiles": "<yFiles package path>/lib/yfiles-26.0.0.tgz", |
| 38 | + ... |
| 39 | + } |
| 40 | + } |
| 41 | + ``` |
| 42 | + |
| 43 | +2. **License:** |
| 44 | + Before using the component, a valid [yFiles for HTML](https://www.yworks.com/products/yfiles-for-html) version is |
| 45 | + required. You can evaluate yFiles for 60 days free of charge |
| 46 | + on [my.yworks.com](https://my.yworks.com/signup?product=YFILES_HTML_EVAL). |
| 47 | + Be sure to invoke the `registerLicense` function to furnish the license file before utilizing the supply chain |
| 48 | + component. |
| 49 | + |
| 50 | +3. **Usage:** |
| 51 | + Utilize the component in your application. |
| 52 | + Make sure to import the CSS stylesheet 'index.css' as the component requires it for correct functionality. |
| 53 | + |
| 54 | + ```tsx |
| 55 | + import { |
| 56 | + registerLicense, |
| 57 | + SupplyChain, |
| 58 | + SupplyChainData, |
| 59 | + UserSupplyChainItem, |
| 60 | + UserSupplyChainConnection |
| 61 | + } from '@yworks/react-yfiles-supply-chain' |
| 62 | + import '@yworks/react-yfiles-supply-chain/dist/index.css' |
| 63 | + import yFilesLicense from './license.json' |
| 64 | + |
| 65 | + function App() { |
| 66 | + registerLicense(yFilesLicense) |
| 67 | + |
| 68 | + const data = { |
| 69 | + items: [ |
| 70 | + { name: 'Copper-Ore', id: 1, parentId: 3 }, |
| 71 | + { name: 'Copper-Plate', id: 2, parentId: 4 }, |
| 72 | + { name: 'Resource', id: 3 }, |
| 73 | + { name: 'Material', id: 4 } |
| 74 | + ], |
| 75 | + connections: [{ sourceId: 1, targetId: 2 }] |
| 76 | + } satisfies SupplyChainData<UserSupplyChainItem, UserSupplyChainConnection> |
| 77 | + |
| 78 | + return <SupplyChain data={data}></SupplyChain> |
| 79 | + } |
| 80 | + |
| 81 | + export default App |
| 82 | + ``` |
| 83 | + |
| 84 | + > **Note:** By default, the `SupplyChain` component adjusts its size to match the size of its parent element. |
| 85 | + Therefore, it is necessary to set the dimensions of the containing element or apply styling directly to |
| 86 | + the `SupplyChain` component. This can be achieved by defining a CSS class or applying inline styles. |
| 87 | + |
| 88 | +## Documentation |
| 89 | + |
| 90 | +Find the full documentation, API and many code examples in our [documentation](https://docs.yworks.com/react-yfiles-supply-chain). |
| 91 | + |
| 92 | +## Live Playground |
| 93 | + |
| 94 | +[](https://docs.yworks.com/react-yfiles-supply-chain/introduction/welcome) |
| 95 | + |
| 96 | +Try the yFiles React Supply Chain component directly in your browser with our [playground](https://docs.yworks.com/react-yfiles-supply-chain/introduction/welcome) |
| 97 | + |
| 98 | +## Features |
| 99 | + |
| 100 | +The supply chain component provides versatile features that can be adjusted to specific use cases or used with the |
| 101 | +provided default features. |
| 102 | + |
| 103 | +### Custom node visualization |
| 104 | + |
| 105 | + |
| 106 | + |
| 107 | +The `renderItem` and `renderGroup` property allow providing custom React components for the node visualization. Try the |
| 108 | +API in the [playground](https://docs.yworks.com/react-yfiles-supply-chain/features/custom-items). |
| 109 | + |
| 110 | +### Custom connection visualization |
| 111 | + |
| 112 | + |
| 113 | + |
| 114 | +With the `connectionStyleProvider`, the connection visualization may be adjusted to the use-case. Additionally, the |
| 115 | +`connectionLabelProvider` may be used to display related information directly on the connection. Try the API in |
| 116 | +the [playground](https://docs.yworks.com/react-yfiles-supply-chain/features/custom-connections). |
| 117 | + |
| 118 | +### Grouping and folding |
| 119 | + |
| 120 | + |
| 121 | + |
| 122 | +The component automatically creates nested nodes if the item contains a `parentId` property. The nested nodes can be |
| 123 | +collapsed/expanded interactively. Try the API in |
| 124 | +the [playground](https://docs.yworks.com/react-yfiles-supply-chain/features/hook-supplychainprovider). |
| 125 | + |
| 126 | +### Heat mapping |
| 127 | + |
| 128 | + |
| 129 | + |
| 130 | +The `heatMapping` function allows to provide a "heat" value for items and connections that visualizes an additional |
| 131 | +information layer in the component. |
| 132 | + |
| 133 | +### Graph search |
| 134 | + |
| 135 | + |
| 136 | + |
| 137 | +The versatile graph search helps to find items in larger supply chains. Try it in |
| 138 | +the [playground](https://docs.yworks.com/react-yfiles-supply-chain/features/search). |
| 139 | + |
| 140 | +### Custom tooltips |
| 141 | + |
| 142 | + |
| 143 | + |
| 144 | +The `renderTooltip` property can be used to provide use-case specific React components as tooltips. Try the API in |
| 145 | +the [playground](https://docs.yworks.com/react-yfiles-supply-chain/features/tooltips). |
| 146 | + |
| 147 | +### Graph overview |
| 148 | + |
| 149 | + |
| 150 | + |
| 151 | +The graph overview provides a quick and easy way to navigate larger graph structures. Try it in |
| 152 | +the [playground](https://docs.yworks.com/react-yfiles-supply-chain/features/built-in-components). |
| 153 | + |
| 154 | +### Context menu |
| 155 | + |
| 156 | + |
| 157 | + |
| 158 | +The context menu can be populated with custom components and actions. Try it in |
| 159 | +the [playground](https://docs.yworks.com/react-yfiles-supply-chain/features/context-menu). |
| 160 | + |
| 161 | +## Learn More |
| 162 | + |
| 163 | +Explore the possibilities of visualizing supply chains and other diagrams with yFiles - the powerful and versatile |
| 164 | +diagramming SDK. For |
| 165 | +further information about [yFiles for HTML](https://www.yworks.com/yfiles-overview) and our company, please |
| 166 | +visit [yWorks.com](https://www.yworks.com). |
| 167 | + |
| 168 | +For support or feedback, please reach out to [our support team](https://www.yworks.com/contact) or open |
| 169 | +an [issue on GitHub](https://github.com/yWorks/react-yfiles-supply-chain/issues). Happy diagramming! |
0 commit comments