vyuhDiagram
Core

Live energy flow ​

Loading interactive example…Open in new tab ↗
Opening the live canvas…

A simulated telemetry stream stands in for the site's API. It feeds a MobX store, and a reaction on the store writes each reading into the diagram with batch('Telemetry', ..., history: false): the kW metrics, the load colours and the load bars, which animate to their new length with Motion.smooth. The switch pauses and resumes the feed.

Edit, drag or restyle any asset while readings arrive. The readings add no undo entries and never interrupt a drag, and Undo, on the rail or with Command/Ctrl+Z, undoes only your edits, keeping the latest readings. The battery gauge takes the other path: a widget in a shape slot observes the store and rebuilds without editing the document. A flow effect plays along the active connection and a beacon around the active asset. See Live data and Animation & effects.

Source ​

dart
EditResult applyEnergyReading(
  DiagramController controller,
  EnergyReading reading,
) {
  final exporting = reading.gridKw >= 0;
  return controller.edits.batch('Telemetry', () {
    _metric(controller, 'solar', '${reading.solarKw} kW generating');
    _metric(controller, 'site', '${reading.demandKw} kW load');
    _metric(controller, 'charger', '${reading.chargerKw} kW charging');
    _metric(
      controller,
      'battery',
      '${reading.batteryPercent}% · ${exporting ? 'charging' : 'supporting'}',
    );
    _metric(
      controller,
      'grid',
      '${exporting ? 'Exporting' : 'Importing'} ${reading.gridKw.abs()} kW',
    );
    _load(controller, 'solar', reading.solarKw / 180);
    _load(controller, 'site', reading.demandKw / 150);
    _load(controller, 'charger', reading.chargerKw / 60);
    _load(controller, 'grid', reading.gridKw.abs() / 120);
  }, history: false);
}