Energychain UI

Introduction

Energychain is a blockchain based system for recording energy use, billing, and for trading energy through a grid services aggregator (GSA). Energychain was built on top of Hyperledger Fabric and is based on the Electriq muni-resi program. This UI doesn't actually connect to the blockchain and isn't the UI that was used to demo at the IEEE GET Blockchain Forum conference but is an alternative with slightly different functionality and all the data hard-coded into the Javascript UI application or provided in CSV files.

System Architecture

EnergyChain is a system for recording energy usage, billing information, and facilitating wholesale market trading through a grid services aggregator (GSA) for residential solar and battery residential power purchase agreement (PPA) offtakers signed up for a solar + storage PPA through a program like the Electriq Muni-Resi program. EnergyChain has three roles:

• The residential PPA customer buys electricity at a fixed rate with small annual escalator generated by a solar + storage system installed on their residence. The PPA customer's battery is programmed with a small reserve (generally 2-3 kwh) which belongs to the customer and which, if depleted, is filled at the going rate specified in the PPA. This reserve is for power outages, but the customer has the option to trade the reserve on the wholesale market through the GSA.

• The GSA (Electriq in this case) which handles aggregating small trading offers from the residential PPA customers for the wholesale market, records energy generation and use, and tracks billing. The GSA additionaly handles the interface with the wholesale market (for example, CAISO in California) for selling the customers' offers.

• The municipality in which the residential PPA customers live, which receives a small percentage of the residential PPA customers' bill payments into an escrow account. Funds from this account are used to pay the bill for customers whose bills are past due. If the account exceeds a certain level, the excess rolls over into the municipal treasury.

Communiction of records between the different roles happens through a Hyperledge Fabric blockchain. Below is a figure illustrating the architecture. The channel structure is arranged as follows:

• The GSA is on all municipal and residential channels.

• The municipal government is on all residential channels for residents in its juristiction.

• Each residential user is on a separate channel.

This structure ensures confidentiality of customer information.

While the UI included in this repo only simulates a single municipality with three residential customers, the architecture could in principle be scaled to many customers and many municipalities.

Repo structure

There are five subdirectories of the energychain-ui directory:

• resi- Contains the UI app for the residential PPA offtaker role,
• muni- Contains the UI app for the Parlier municipal government role,
• gsa - Contains a Grafana dasboard UI for Parlier users,
• utils- Contains functions and data shared between the resi and muni UI apps,
• css - Contains css files shared between the resi and muni UI apps.

The gsa UI uses the open source version of the Grafana dashboard building application. A Grafana JSON file contains a template for the Parlier dashboard that loads the three CSV files for the three hypothetical PPA offtakers. The UIs for the resi and muni applications were coded from scratch using React and were created with the create-react-app package. The Ant Design components package was used for widgets, and Ant Design graphical package for graphs. The Ant Design documentation is pretty good but some of the documentation for the graphical package is in Chinese. If you really need to know it, Google Translate does a great job on translating Chinese.

The utils directory files contain account data for 3 hypothetical users in the muni and resi apps, along with anonymized monthly data on consumption, grid export, and grid import, hardcoded into the Javascript. The gsa app has three CSV files of hourly data for a year for the same three houses as the hardcoded data. To complete the application, a backend integration is needed. All the data should be consolidated onto the Hyperledger Fabric blockchain and pulled from there through the EnergyChain REST API.

Installation

muni and resi apps

The create-react-app tool downloads a whole bunch of supporting Javascript modules. Since we have two React apps, this would mean duplicating the entire supporting library in both directories. To get around this problem, we create a fake React app directory, install the additional modules we need, and then symlink the node_modules directory into the muni and resi directories. We also need to symlink the utils and css directories into the src subdirectory because npm won't follow directory paths outside of the project directory. Maybe there is some environment variable or configuration knob to change this behavior, but I've not been able to find it.

Creating the fake app

First step is to install create-react-app at the top level:

npm install create-react-app

Then create a fake app in the directory where you are planning to put the energychain-ui repo:

npx create-react-app fake

After some while, this command will complete. Change into the fake directory and install the dependencies:

npm install antd

npm install @ant-design/charts

npm install react-router-dom@6

Cloning energychain-ui

Clone the energychain-ui repo into the same directory where the fake app directory was created:

git clone https://github.com/jkempf42/energychain-ui.git

Setting up the symbolic links

Change into the energychain-ui/resi directory and link the node_modules library directory locally:

ln -s ../../fake/node_modules ./node_modules

Change into the src subdirectory and link the utils and css directories locally:

ln -s ../../css ./css
ln -s ../../utils ./utils

Now change into the energychain-ui/muni directory and perform the same three steps as above for the muni application.

You should now be able to run the two apps.

gsa app

Install the open source version of Grafana according to the instructions here. The easiest way to install is to use the Ubuntu/Debian package manager apt. You will also need the CSV plugin in order to load the CSV files. This is separate from Grafana, instructions for installing it are located here. Note that you will have to add some configuration info to the Grafana installation file to allow you to load from a local source prior to starting Grafana. There are a couple Grafana installation files lying around and unfortunately the installation instructions for the CSV file don't say which one to use. On Ubuntu, the file to use is /etc/grafana/grafana.ini. Be sure to restart the Grafana server:

sudo systemctl stop grafana-server
sudo systemctl disable grafana-server
sudo systemctl enable grafana-server
sudo systemctl start grafana-server
systemctl status grafana-server

After Grafana is installed and the configuration for the CSV file plugin is added, you can bring up Grafana on your browser at localhost:3000. You need to set the time format using the settings (Cogwheel) icon on the bottom left menu. Click Cogwheel->Preferences then go to the Timezone pulldown and set to UTC. If you don't do that, the time will be off by how ever many hours your timezone is away from Greenwich Mean Time (7 in the case of the Pacific Timezone). In addition, if you deside to add additional houses or municipalities, note that Grafana requires data/time values to be formatted as UTC (YYYY-MM-DDThh:mm, like for example 2022-08-14T11:12).

You now need to set up the three CSV files as data sources. Click on Cogwheel->Data Sources then click on the CSV bar. Click on the Local button and fill in the pathname to one of the CSV files, say <directory>/gsa/HourlyHouse01-27June2021-23July2022.csv. Fill in the name of the data source as CSV-House01. Click Save. Follow the same pattern for the other two CSV files.

Once the data sources are set up, you can import the dashboard. Hover over the Dashboard icon (four small boxes) in the upper left menu. A submenu will come up. Click on +Import item. This will bring up a panel for importing the dashboard. Click on the Upload JSON File and upload Parlier-1660499243085.json from the gsa directory.

Note that all directories from / down to gsa need to be accessable to all, since you're running in the browser, in order for Grafana to be able to read the CSV files.

Running

muni and resi

Change into the resi directory and type:

npm start

npm should start the resi app on localhost:3000.

In a separate shell window, change to the muni directory and type:

'npm start`

again. npm will start up the muni app on a different port.

The two apps are not linked and all the data is hardcoded, but you can play with them to get a sense of how the Energychain system works.

Logins

The login page comes up initially. Login user names for the resi app are "luis", "chauncy", and "angel". Each resi user has a different fictional solar + storage configuation. Login for the muni app is "stephen". The password is not checked but must be something.

Other than that, the apps are self explanatory.

Create React App README.md

You should be able to find a copy of the Create React App README.md in the fake app directory, if you would like to try extending the apps or building production versions.

gsa

In Grafana, dashboard functions are accessed by hovering over the upper left dashboard menu and clicking on the menu that comes up. Click on Browse then EnergyChain->Parlier in the Dashboard browser. This will bring up the Parlier dashboard, which has a bar for each of the hypothetical users. Three dashboard panels are included: Home Consumption, Grid Export, and Grid Import, showing a full year's worth of data. You can add additional panels from the CSV files by clicking on the Add Panel icon, a bargraph with a big red plus on it, on the top menu for the dashboard.