Power flow diagram

Who it’s for

The Power flow diagram is for anyone watching a site with several sources and sinks of power: a solar plant with a battery, a microgrid controller, a building with rooftop PV and a grid connection, or a row of inverters and meters that are each a device of their own. They can already read each value on its own. What they want to see at a glance is where the power is coming from right now, where it is going, and what is left for the load.

What it does

A site controller reports solar at 6.58 MW, wind at 2.15 MW, grid import at 2.20 MW, grid export at 1.45 MW and a battery at -1.20 MW. The diagram puts solar, wind and the battery on the left and the two grid keys on the right. Dots run inward from solar, wind and grid import, and outward toward the battery and the grid export. The circle prints Total load 8.28 MW: the flows in minus the flows out.

• Draws up to ten readings as cards around a central total, each one wired to the circle by its own connector in the key’s color.
• Shows which way each flow runs with dots that move along the connector, and how big it is by how thick the connector is and how fast the dots move, so the largest flow is visible before any number is read.
• Splits the ring around the total into one arc per flowing key, sized by its share, so the mix of sources reads at a glance.
• Follows the sign of a battery or any other two-way key: positive flows to the center, negative flows away, and the dots turn round when the value does.
• Explains itself on hover. A card shows its value, flow direction and share of the ring; the circle lists every key behind the total, signed the way it was counted; the +N more pill lists the keys without a card.
• Keeps a key at zero on the diagram as a still, faded line, so an idle generator reads as idle rather than missing.
• Converts units before adding them, so keys in kW and MW add up correctly in the circle. Keys that cannot be added, such as kW and %, show Mixed units instead of a wrong total.
• Leaves out the slots it does not need. With five keys the diagram draws five cards, three on the left and two on the right, with no empty placeholder.
• Reads keys from one entity or from several. With several, each card is named after its entity as well as its key, such as Inverter 2 · Power.
• Fits itself to the widget at any size. On a short widget the cards drop to one line and the circle keeps only the value, so nothing overlaps at any height.
• Shows the latest values only. It does not chart history, and it does not draw flows between the cards themselves, only between each card and the center.

How to set up

Data keys

The widget takes keys from one or more entities: up to ten for the cards, five on each side, and one more for the circle. Keys past the tenth card get no card of their own but still count in the total and the ring; a +N more pill under the circle says how many, and hovering it lists them with their values.

• Each card — any numeric key, Timeseries or Attribute. The label, units and decimals come from the key’s own configuration. When the keys come from more than one entity, the card label is prefixed with the entity name, unless the key label already contains it. A key that has no value yet shows a dash on its card and is left out of the total. A text value, such as OFF, is printed as it is and never added up.
• The circle, optional — any numeric key with its Position set to Center. The circle then shows that key instead of a value worked out from the cards.

Each key has four settings of its own:

• Position — Automatic by default. Automatic keys are shared between the sides, the first half on the left, up to five on each, in the order they are listed. Choose *Left

• or Right to pin a key to one side, or Center to show it inside the circle.

• Flow direction — To the center by default. *From the center
  • suits export and consumers. Positive in, negative out suits a battery or a two-way meter: a positive value flows to the center and is added, a negative one flows away and is subtracted. No flow draws a still line and keeps the key out of the balance.
• Show icon — off by default. Turn it on to show a tinted badge on the card and to pick its Icon, bolt by default. See How to customize.

Center

• Center value — Flows in minus flows out by default. Used when no key is set to the Center position. Sum of all keys adds every card as it is, and Label only leaves the circle without a value.
• Center units — empty by default, which prints the total in the largest unit among the keys, so kW and MW add up in MW. Type a unit such as kW to print the total in that unit instead. Watt, watt-hour, VA and var keys, with or without a k, M or G prefix, are converted before adding. A key with no units is taken to be in the center’s unit already.

How to customize

Center

• To rename the total — Center label, Total load by default. When a key sits in the center and this is left empty, the circle uses that key’s label.
• To change the fonts in the circle — Label font and Value font. The sizes apply at the standard widget size and grow with the diagram. A long value shrinks to stay inside the circle.
• To fill the circle with a color or a gradient — Circle fill, Card surface by default, which matches the cards and picks its own text color. Solid and Gradient use Circle color, #312E81 by default, and Outline only leaves just the ring.
• To recolor the text in the circle — Text color, #FFFFFF by default, shown for every fill except Card surface. The label uses it slightly lighter.
• To draw the ring in one color instead of shares — set Ring shows to One color. It is Share of each flow by default, one arc per flowing key. Ring color, #6366F1 by default, colors the one-color ring, and the arcs too when the lines use one color.
• To make the circle bigger or smaller — Circle size, %, 100 by default, from 50 to 200. The circle never grows into the cards.
• To make the ring thicker, thinner or remove it — Ring width, 7 by default. Zero removes the ring.
• To change the glow around the circle — Glow, *Drop shadow

• by default. Halo and Pulsing halo ring the circle in the color of the largest flow, and None removes it.

Lines

• To stop the moving dots — turn off Animate flows, on by default. The lines are then drawn solid.
• To draw every connector in one color — set Line color from to One color for all and pick Line color, #6366F1 by default. It is Each key’s own color by default, taken from the color of each data key.
• To show an icon on a card — turn on the key’s Show icon and pick an Icon. It sits in a tinted badge in the connector’s color; with the icon field cleared the badge shows a dot.
• To switch between right angles and curves — Line shape, Sharp corners by default, or Smooth curves.

Appearance

• To recolor the cards — Card color, #FFFFFF by default, and Card text color, #101828 by default. Labels use the text color lighter and borders fainter still. A dark card color switches the borders, shadows and badges to suit, and with Circle fill on Card surface the circle follows the cards.

Tips

• Set a battery’s Flow direction to Positive in, negative out. Discharging then runs into the center and counts toward the total, and charging runs out of it and is subtracted, with no second key needed.
• Put the load your site meter reports in the center with Position set to Center when the cards do not cover every source. A balance worked out from an incomplete set of keys looks precise and is wrong.
• For a control-room display, give the widget a dark background and set Card color to a slightly lighter dark tone with a white Card text color. The circle, borders and badges follow.
• Set the decimals on each key rather than looking for a widget setting. The total uses the most decimals among the keys, and at least two when it prints kW values in MW.