Power Network

Usage

import {
  PowerDevice,
  PowerNetworkDevices,
  PowerNetworkDiagram,
  PowerNetworkHome,
  PowerNetworkSources,
  PowerSource,
} from '@epilot/spark-ui/power-network'

<PowerNetworkDiagram title="Power Flow">
  <PowerNetworkSources>
    <PowerSource variant="grid" watts={520} icon={<GridIcon />} />
    <PowerSource variant="solar" watts={3200} icon={<SolarIcon />} />
    <PowerSource variant="battery" watts={1000} icon={<BatteryIcon />} />
  </PowerNetworkSources>
  <PowerNetworkHome autarky={0.89} />
  <PowerNetworkDevices>
    {devices.map((d) => (
      <PowerDevice key={d.id} watts={d.power} icon={d.icon} />
    ))}
  </PowerNetworkDevices>
</PowerNetworkDiagram>

The diagram is composable: each row is its own component, and each bubble registers itself with the parent via context. Sources, devices, and the home node can be added dynamically; connectors are drawn between whichever children are mounted.

The connector animation dash gap, scroll speed, and opacity derive from each node's share of the home's total consumption, so a higher-power flow visibly "moves faster". Connectors snap to a straight line when source and home (or home and device) are vertically aligned, and curve otherwise, so with two devices both lines curve, but a single centred device gets a straight line.

At 0 W the moving dashes cross-fade into a static grey line, so an idle node still reads as wired up instead of disconnected.

Examples

Full network

A complete layout with three sources and three devices.

Idle vs. standby

Both the grid and the battery are at 0 W. The grid grays out, while the battery passes standby to keep its colors, so it reads as online and charged but not in use. Either way the connector stays visible as a static grey line.

Loading

Pass loading to swap node icons for skeletons while data is in-flight.

API Reference

PowerNetworkDiagram

PowerNetworkSources / PowerNetworkDevices

Row containers for source and device bubbles.

PowerNetworkHome

PowerSource

PowerDevice