A powerful library to generate interactive electrical single line diagrams and network diagrams.
Largely based on the source code of stac
Visit www.acelerex.com
Add package with repository url to your package.json
file:
"dependencies": {
"acelerex-sld": "git+https://github.com/vicentecastroa/single-line-diagram.git"
}
Then, run npm i acelerex-sld
In a vue component, insert a <div id="diagram-div"></div>
into template. Then import drawGraph
from Acelerex SLD. To generate the diagram, call the function drawGraph
passing a network json like the example:
<template>
<div id="diagram-div"></div>
</template>
import drawGraph from "acelerex-sld";
export default {
name: "DiagramExample",
mounted() {
drawGraph({
bus: [
{ id: 1, name: "Bus1" },
{ id: 2, name: "Bus2" },
{ id: 3, name: "Bus3" },
],
branch: [
{ id: 1, fromBus: 1, toBus: 2 },
{ id: 2, fromBus: 1, toBus: 3 },
],
storages: [{ id: 1, busId: 1, name: "Storage 1", breaker: "close" }],
generators: [
{ id: 1, busId: 3, name: "Generator 1", type: "SOLAR" },
{ id: 2, busId: 1, name: "Generator 2", type: "WIND", breaker: "open" },
{
id: 3,
busId: 2,
name: "Generator 3",
type: "HYDRO",
breaker: "close",
},
],
loads: [{ id: 1, busId: 1, name: "Demand 1", breaker: "close" }],
markets: [{ id: 1, busId: 1, name: "Market 1", breaker: "close" }],
transformers: [{ id: 1, branchId: 1 }],
switches: [{ id: 1, branchId: 2 }],
busLocations: [{busId: 1, x: 200, y: 250}]
});
},
};
Finally, take src/css/baseStyle.css and paste it in your styles folder.
This example will generate the following diagram:
- Add
config
option fordrawGraph()
- Load from saved layout
- Switches states (closed-open)
- Emit click events for switches and breakers
- Orthogonal edges
- Fix nodes drag
- Add transformers and switches
- Multiple buses support
- Node circle icon to a bus bar
- Toolbar with 'reset view' button
- Single project support
- Connect resources (Storages, Loads, Generators, Markets) to Bus.
- Breakers for each connection