enee.io Site Energy Flow

A custom Vue.js component that displays site energy flow data using SVG elements.

  • Vue.js
  • CSS
  • HTML
  • SVG

See the Pen Energy flow component by Neil Merton (@neilmerton) on CodePen.

Features

  • Convert endpoint data into node and edge data objects
  • On-the-fly SVG element creation
  • Animated flow indicators when assets consuming or receiving energy

Technologies Used

  • Vue.js: Reusable component that accepts endpoint data.
  • SVG: elements and animation paths.

Due to the web app being user-authenticated, I’ve included a link to a recreated POC to demonstrate the finalised feature.