Supply Chain Viz

An interactive supply chain visualization component built with React and TypeScript. Render complex supplier networks with smooth animations, risk indicators, and fully customizable themes.

Features

• 🎨 Customizable Themes — 3 built-in presets (teal, sunset, ocean) + create your own
• 🎬 Smooth Animations — Scroll-driven stage progression with Framer Motion
• ⚠️ Risk Indicators — Visual overlays for supply chain risks
• 📱 Responsive — Adapts to any screen size
• 🎯 Easy Integration — Drop-in React component with TypeScript support

Installation

npm install supply-chain-viz

Basic Usage

import React from 'react';
import { SupplyChainDiscovery, APP_THEME } from 'supply-chain-viz';

export function App() {
  return (
    <SupplyChainDiscovery 
      theme={APP_THEME.pluginTheme}
      stage={1}
    />
  );
}

Customization

Using Built-in Themes

Switch between presets by changing one line in theme-config.ts:

export const ACTIVE_THEME = 'teal'; // 'teal' | 'sunset' | 'ocean'

Then import and use:

import { APP_THEME } from 'supply-chain-viz';

<SupplyChainDiscovery theme={APP_THEME.pluginTheme} />

Custom Theme

Pass a custom theme object:

import { SupplyChainDiscovery, SCDTheme } from 'supply-chain-viz';

const customTheme: SCDTheme = {
  canvasBackground: '#111111',
  accent: '#00D9FF',
  companyFill: '#1a1a2e',
  risk: '#FF3B5A',
  riskLight: '#FF3B5A40',
  textPrimary: '#FFFFFF',
  textMuted: '#999999',
  starColor: '180, 230, 255',
  tierColors: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A'],
};

<SupplyChainDiscovery theme={customTheme} />

Theme Configuration

All colors are tokenized in the SCDTheme interface:

| Token | Purpose | |-------|---------| | canvasBackground | Canvas/viewport background | | accent | Primary brand color (links, highlights) | | companyFill | Node/company background color | | risk | Alert/risk indicator color | | riskLight | Light variant of risk color (backgrounds) | | textPrimary | Primary text color | | textMuted | Secondary/muted text | | starColor | Particle/star RGB color (space-separated: "R G B") | | tierColors | Array of 4 colors for supplier tiers 1–4 |

Component Props

interface SupplyChainDiscoveryProps {
  theme?: Partial<SCDTheme>;  // Optional custom theme
  stage?: number;              // Current animation stage (0-3)
  onStageChange?: (stage: number) => void; // Stage change callback
}

Building from Source

To build the library:

npm run build:lib

Output: dist/supply-chain-viz.es.js and dist/supply-chain-viz.umd.js

To run locally:

npm run dev

Examples

Scroll-Driven Animation

The component automatically animates based on scroll position. Use the stage prop to manually control animation:

const [stage, setStage] = useState(0);

return (
  <>
    <SupplyChainDiscovery 
      theme={APP_THEME.pluginTheme}
      stage={stage}
      onStageChange={setStage}
    />
    <button onClick={() => setStage(stage + 1)}>Next Stage</button>
  </>
);

Dark Theme

import { SupplyChainDiscovery } from 'supply-chain-viz';

<SupplyChainDiscovery 
  theme={{
    canvasBackground: '#0a0e27',
    accent: '#00D9FF',
    companyFill: '#1a1a2e',
    risk: '#FF3B5A',
    riskLight: '#FF3B5A40',
    textPrimary: '#FFFFFF',
    textMuted: '#888888',
    starColor: '100, 150, 200',
    tierColors: ['#A8DADC', '#457B9D', '#1D3557', '#F1FAEE'],
  }}
/>

Browser Support

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+

License

MIT

Support

For issues, feature requests, or questions, please open an issue on GitHub.