# Energy graph Widget type: `opendash-widget-ec-energyflow-graph` · Plugin: `@opendash/plugin-echarts` ## Description Shows the directional energy flow between sources and sinks (devices). Use it to identify where energy is produced, consumed or transferred. The widget renders an ECharts graph in which configured data items become nodes (for example photovoltaic, storage, consumer, grid) and the connections you define become directed edges with arrows indicating flow direction. The current build ships a fixed demonstration topology (grid, photovoltaic, storage, heater, household appliances) with example power values to illustrate the layout. ## Data requirements - `dataItems`: select by `dimension`, minimum 1, maximum 20. Allowed value type: `Number`. - `dataFetching`: live only (`live: true`, `history: false`). - `hideDataFilter: true` — the standard data filter UI is hidden for this widget. Selected numeric dimensions are intended to drive the graph nodes; their live values represent the energy at each node. ## Options | Option | Type | Default | Description | | --- | --- | --- | --- | | `layout` (Layout type) | `"force" \| "circular" \| "none"` | `"force"` | Graph layout. `force` = Force Layout (auto-arranged), `circular` = Circular Layout, `none` = Fixed Positions (uses each node's configured position). | | `showLabels` (Show labels) | `boolean` | `true` | Whether node labels are shown. | | `showValues` (Show values) | `boolean` | `true` | Whether numeric values are shown on nodes and flow edges. | | `nodeConfig` | `{ [itemId]: { name; type; position? } }` | `{}` | Per-item node configuration. `name` is the displayed node name (defaults to the data item name), `type` is one of `photovoltaic`, `storage`, `consumer`, `grid`, `generic`, and `position` optionally fixes the node's `{x, y}`. | | `connections` | `{ from; to; bidirectional? }[]` | `[]` | Directed energy-flow edges between nodes, referencing item IDs. `bidirectional` adds a reverse edge so flow can be shown in both directions. | Note: the settings panel labels (layout title/type, node name/type, connection texts, etc.) are referenced via translation keys under the `echarts:energyflow.settings.*` namespace; the node-type and layout option labels visible in the UI are "Force Layout", "Circular Layout", "Fixed Positions" and the node types Photovoltaic, Energy Storage, Consumer, Grid and Generic. ## Presets There is a Data Explorer entry but no widget presets defined. - Data Explorer: **Energy graph** — Shows the directional energy flow between sources and sinks (devices). Use it to identify where energy is produced, consumed or transferred. Icon `fa:chart-network`, empty default config. ## How to use 1. From the Data Explorer, add the "Energy graph" widget, or add it directly to a dashboard. 2. Select up to 20 numeric data dimensions that represent your energy nodes (producers, storage, consumers, grid). 3. In the settings, open **Node Configuration** and, for each item, set a display **name** and choose its **type** (Photovoltaic, Energy Storage, Consumer, Grid or Generic). 4. Under **Energy Flow Connections**, add connections by choosing a **From** node and a **To** node; enable **bidirectional** if energy can flow both ways. 5. Pick a **Layout type** (Force, Circular or Fixed Positions) and toggle **Show labels** / **Show values** to control what is displayed on the graph.