Widgets
Supply Chain Viewer
Interactive supply chain visualization component.
The Supply Chain Viewer renders an interactive, hierarchical view of a product’s supply chain from Tier 1 to Tier N.
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Interactive supply chain visualization component.
<script src="https://cdn.heychocolate.com/widgets/v1/supply-chain-viewer.js"></script>
<hc-supply-chain-viewer
product-id="prod_abc123"
api-key="sk_live_your_key"
></hc-supply-chain-viewer>
| Attribute | Type | Required | Description |
|---|---|---|---|
product-id | String | Yes | Product identifier |
api-key | String | Yes | API key |
max-tier | Number | No | Maximum tier depth to display (default: all) |
theme | String | No | light, dark, auto |
layout | String | No | tree, graph, map (default: tree) |
show-impact | Boolean | No | Show CO2 contribution per node (default: true) |
show-transport | Boolean | No | Show transport methods on edges (default: true) |
interactive | Boolean | No | Enable click/hover interactions (default: true) |
height | String | No | Component height (default: 500px) |
<hc-supply-chain-viewer product-id="prod_abc123" layout="tree"></hc-supply-chain-viewer>
<hc-supply-chain-viewer product-id="prod_abc123" layout="graph"></hc-supply-chain-viewer>
<hc-supply-chain-viewer product-id="prod_abc123" layout="map"></hc-supply-chain-viewer>
const viewer = document.querySelector('hc-supply-chain-viewer');
viewer.addEventListener('hc:supplier-selected', (e) => {
console.log('Supplier:', e.detail.supplier.name);
console.log('CO2 contribution:', e.detail.supplier.co2Contribution);
});
viewer.addEventListener('hc:tier-expanded', (e) => {
console.log('Expanded tier:', e.detail.tier);
});
hc-supply-chain-viewer {
--hc-sc-bg: #ffffff;
--hc-sc-node-bg: #f5f5f5;
--hc-sc-node-border: #e0e0e0;
--hc-sc-edge-color: #bdbdbd;
--hc-sc-highlight: #F83B00;
--hc-sc-font: inherit;
}