Energy Flow
Interactive energy flow visualization using React Flow.
Interactive Demo
Adjust Values
3.5 kW
-1.2 kW
Positive = charging, Negative = discharging
0.5 kW
2.8 kW
0.0 kW
75%
Features
- 5 node types: Solar, Battery, Grid, Home, EV Charger
- Animated edges showing energy flow direction
- Dynamic edge thickness based on power flow
- Color-coded sources: Green (solar), Yellow (battery), Blue (grid)
- Auto-calculated flow distribution
- Dark mode support
- Pan and zoom controls
- Draggable nodes
Node Types
Solar
Source only - outputs energy to other nodes
Battery
Bi-directional - can charge or discharge
Grid
Bi-directional - import or export power
Home
Sink - receives energy from multiple sources
EV Charger
Sink - receives energy for vehicle charging
Usage
import { EnergyFlow } from "@/components/ui/energy-flow"
<EnergyFlow
solarPower={3500} // Watts
batteryPower={-1200} // Negative = discharging
gridImport={500} // Watts from grid
gridExport={0} // Watts to grid
homeConsumption={2800} // Watts
evCharging={0} // Watts
batterySoC={75} // Percentage
/>Dependencies
npm install @xyflow/react