markets charts updated, wip

web/web/__init__.py

@@ -27,6 +27,7 @@
 from web.api.v1.group import group_api_bp
 from web.api.v1.alert import alerts_api_bp
 from web.api.v1.market import market_api_bp
+from web.api.v1.markets import markets_api_bp
 from web.api.v1.user_sd import user_sd_api_bp
 from web.api.v1.utility import utility_api_bp
 from web.api.v1.address import address_api_bp
@@ -101,6 +102,7 @@ def register_blueprints(app):
     app.register_blueprint(group_api_bp, url_prefix='/api/v1/')
     app.register_blueprint(market_api_bp, url_prefix='/api/v1/')
     app.register_blueprint(alerts_api_bp, url_prefix='/api/v1/')
+    app.register_blueprint(markets_api_bp, url_prefix='/api/v1/')
     app.register_blueprint(user_sd_api_bp, url_prefix='/api/v1/')
     app.register_blueprint(utility_api_bp, url_prefix='/api/v1/')
     app.register_blueprint(address_api_bp, url_prefix='/api/v1/')

web/web/api/v1/markets.py

@@ -0,0 +1,98 @@
+import random
+import datetime
+import pandas as pd
+from flask import Blueprint, request
+from sqlalchemy import desc, asc
+from .response_wrapper import ApiResponseWrapper
+
+from web.models.hce_bids import HceBids, HceBidsSchema
+from web.models.meter_interval import MeterInterval, MeterIntervalSchema
+from web.models.market_interval import MarketInterval, MarketIntervalSchema
+
+
+markets_api_bp = Blueprint('markets_api_bp', __name__)
+
+@markets_api_bp.route('/markets/auction_market/', methods=['GET'])
+def get_auction_market():
+    '''
+    Retrieves data for the auction market chart
+    '''
+    arw = ApiResponseWrapper()
+
+    # latest market interval
+    latest_market_interval = MarketInterval.query.order_by(desc('start_time')).first()
+    latest_market_interval_start_time = latest_market_interval.start_time
+    latest_market_interval_end_time = latest_market_interval.end_time
+
+    hce_bids_schema = HceBidsSchema()
+    hce_bids = HceBids.query.filter(HceBids.created_at > latest_market_interval_start_time).filter(HceBids.created_at < latest_market_interval_end_time)
+    hce_bids = HceBids.query.all()
+    hce = hce_bids_schema.dump(hce_bids, many=True)
+    df = pd.DataFrame(hce)
+    df.to_csv('web/charts_development/data/hce_bids.csv')
+
+    meter_interval_schema = MeterIntervalSchema()
+    meter_intervals = MeterInterval.query.all()
+    result = meter_interval_schema.dump(meter_intervals, many=True)
+    df = pd.DataFrame(result)
+    df.to_csv('web/meter_intervals.csv')
+    one = [value["qmtp"] for value in result]
+
+    results = {
+        'labels': [],
+        'one': one,
+        'two': []
+    }
+    return arw.to_json(results)
+
+
+
+@markets_api_bp.route('/markets/clearing_price/', methods=['GET'])
+def get_clearing_price():
+    '''
+    Retrieves data for the clearing_price_overtime chart
+    '''
+    arw = ApiResponseWrapper()
+
+    # date of 30 days ago
+    thirty_days_ago = datetime.datetime.today() - datetime.timedelta(days=30)
+
+    market_interval_schema = MarketIntervalSchema()
+    market_interval = MarketInterval.query.order_by(asc('start_time')).filter(MarketInterval.start_time > thirty_days_ago)
+    market_interval = MarketInterval.query.order_by(asc('start_time')).all()
+
+    result = market_interval_schema.dump(market_interval, many=True)
+    labels = [value["end_time"] for value in result]
+    one = [value["p_clear"] for value in result]
+    results = {
+        'labels': labels,
+        'one': one,
+        'two': []
+    }
+    return arw.to_json(results)
+
+
+
+@markets_api_bp.route('/markets/energy_demand/', methods=['GET'])
+def get_historical_data():
+    '''
+    Retrieves data for the energy_demand chart
+    '''
+    arw = ApiResponseWrapper()
+
+    # date of 30 days ago
+    thirty_days_ago = datetime.datetime.today() - datetime.timedelta(days=30)
+
+    market_interval_schema = MarketIntervalSchema()
+    market_interval = MarketInterval.query.order_by(asc('start_time')).filter(MarketInterval.start_time > thirty_days_ago)
+    market_interval = MarketInterval.query.order_by(asc('start_time')).all()
+
+    result = market_interval_schema.dump(market_interval, many=True)
+    labels = [value["end_time"] for value in result]
+    one = [value["q_clear"] for value in result]
+    results = {
+        'labels': labels,
+        'one': one,
+        'two': []
+    }
+    return arw.to_json(results)

web/web/markets/static/actions.js

@@ -0,0 +1,57 @@
+import { api } from '../../static/js/network_client';
+
+// Auction Market Chart
+export function getAuctionMarketData() {
+    return dispatch => {
+        api.get('markets/auction_market', (response) => {
+            dispatch(auctionMarketDataUpdated(response.results.data));
+        }, (error) => {
+            console.warn(error);
+        });
+    };
+}
+
+export function auctionMarketDataUpdated(data) {
+    return {
+        type: 'AUCTION_MARKET_DATA_UPDATED',
+        data
+    };
+}
+
+
+// Clearing Price Over Time
+export function getClearingPriceData() {
+    return dispatch => {
+        api.get('markets/clearing_price', (response) => {
+            dispatch(ClearingPriceDataUpdated(response.results.data));
+        }, (error) => {
+            console.warn(error);
+        });
+    };
+}
+
+export function ClearingPriceDataUpdated(data) {
+    return {
+        type: 'CLEARING_PRICE_DATA_UPDATED',
+        data
+    };
+}
+
+
+// Energy Demand Data
+export function getEnergyDemandData() {
+    return dispatch => {
+        api.get('markets/energy_demand', (response) => {
+            dispatch(EnergyDemandDataUpdated(response.results.data));
+        }, (error) => {
+            console.warn(error);
+        });
+    };
+}
+
+export function EnergyDemandDataUpdated(data) {
+    return {
+        type: 'ENERGY_DEMAND_DATA_UPDATED',
+        data
+    };
+}

web/web/markets/static/auction_market.js

@@ -15,22 +15,17 @@ class AuctionMarketChart extends React.Component {
             // The data for our dataset
             data: {
                 labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-			    datasets: [
+      			    datasets: [
                     {
                         label: 'Dataset 1',
                         backgroundColor: 'red',
-                        data: []
+                        data: this.props.ds ? this.props.ds.one : []
                     },
                     {
                         label: 'Dataset 2',
                         backgroundColor: 'blue',
-                        data: []
+                        data: this.props.ds ? this.props.ds.two : []
                     },
-                    {
-				        label: 'Dataset 3',
-				        backgroundColor: 'green',
-                        data: []
-                    }
                 ]
             },
 
@@ -51,15 +46,15 @@ class AuctionMarketChart extends React.Component {
 				},
 				scales: {
 					xAxes: [{
-                        stacked: true,
+            stacked: true,
 						display: true,
 						scaleLabel: {
 							display: true,
 							labelString: this.props.xTitle
 						}
 					}],
 					yAxes: [{
-                        stacked: true,
+            stacked: true,
 						display: true,
 						scaleLabel: {
 							display: true,

web/web/markets/static/historical.js → web/web/markets/static/clearing_price.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Chart from 'chart.js';
 
-class HistoricalChart extends React.Component {
+class ClearingPriceChart extends React.Component {
     componentDidMount() {
         this.updateChart();
     }
@@ -14,21 +14,21 @@ class HistoricalChart extends React.Component {
 
             // The data for our dataset
             data: {
-                labels: [],
+                labels: this.props.ds ? this.props.ds.labels : [],
                 datasets: [
                     {
                         label: 'My First dataset',
                         fill: false,
                         backgroundColor: 'rgb(255, 99, 132)',
                         borderColor: 'rgb(255, 99, 132)',
-                        data: [2,4,55]
+                        data: this.props.ds ? this.props.ds.one : []
                     },
                     {
                         label: 'My Second dataset',
                         fill: false,
                         backgroundColor: 'rgb(55, 99, 255)',
                         borderColor: 'rgb(55, 99, 255)',
-                        data: [5,4,7]
+                        data: this.props.ds ? this.props.ds.one : []
                     }
                 ]
             },
@@ -75,4 +75,4 @@ class HistoricalChart extends React.Component {
     }
 }
 
-export default HistoricalChart;
+export default ClearingPriceChart;

web/web/markets/static/auction.js → web/web/markets/static/energy_demand.js

@@ -1,7 +1,7 @@
 import React from "react";
 import Chart from 'chart.js';
 
-class AuctionChart extends React.Component {
+class EnergyDemandChart extends React.Component {
     componentDidMount() {
         this.updateChart();
     }
@@ -14,21 +14,21 @@ class AuctionChart extends React.Component {
 
             // The data for our dataset
             data: {
-                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+                labels: this.props.ds ? this.props.ds.labels : [],
                 datasets: [
                     {
                         label: 'My First dataset',
                         fill: false,
                         backgroundColor: 'rgb(255, 99, 132)',
                         borderColor: 'rgb(255, 99, 132)',
-                        data: []
+                        data: this.props.ds ? this.props.ds.one : []
                     },
                     {
                         label: 'My Second dataset',
                         fill: false,
                         backgroundColor: 'rgb(55, 99, 255)',
                         borderColor: 'rgb(55, 99, 255)',
-                        data: []
+                        data: this.props.ds ? this.props.ds.one : []
                     }
                 ]
             },
@@ -75,4 +75,4 @@ class AuctionChart extends React.Component {
     }
 }
 
-export default AuctionChart;
+export default EnergyDemandChart;

web/web/markets/static/markets.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import * as action from './actions';
-import AuctionChart from './auction';
+import ClearingPriceChart from './clearing_price';
 import { connect } from 'react-redux';
 import { Switch } from '@rmwc/switch';
 import { Button } from '@rmwc/button';
-import HistoricalChart from './historical';
+import EnergyDemandChart from './energy_demand';
 import { TextField } from '@rmwc/textfield';
 import AuctionMarketChart from './auction_market';
 import { selectMenuOption } from '../../static/js/actions';
@@ -22,9 +22,14 @@ class Markets extends React.Component {
         // so we fix that by having each component do it, 😔, this is
         // not great since the component shouldn't care about the menu
         this.props.dispatch(selectMenuOption('markets'));
+        this.props.dispatch(action.getAuctionMarketData());
+        this.props.dispatch(action.getClearingPriceData());
+        this.props.dispatch(action.getEnergyDemandData());
     }
 
     render() {
+        console.log(this.props.energyDemandData)
+
         return (
             <div className="power-dispatch-container">
                 <div className="power-dispatch-margin-fix">
@@ -35,15 +40,17 @@ class Markets extends React.Component {
                                 xTitle="Capacity (MW)"
                                 yTitle="Price ($/MWh)"
                                 chartTitle="Auction Market"
-                                chartSubtitle="Transformer Capacity" />
+                                chartSubtitle="Transformer Capacity"
+                                ds={this.props.auctionMarketData} />
                         </div>
                         <div className="pd-chart-resource">
-                            <AuctionChart
+                            <ClearingPriceChart
                                 id="auction-chart"
                                 xTitle="Time"
                                 yTitle="Price ($/MWh)"
-                                chartTitle="Auction"
-                                chartSubtitle="" />
+                                chartTitle="Clearing Price"
+                                chartSubtitle=""
+                                ds={this.props.clearingPriceData} />
                         </div>
                     </div>
 
@@ -97,11 +104,12 @@ class Markets extends React.Component {
                     <div className="power-dispatch-forms-container">
                         <div className="pd-form-container">
                             <div className="pd-chart-system-load">
-                                <HistoricalChart
+                                <EnergyDemandChart
                                     id="historical-market-chart"
                                     xTitle="Time"
                                     yTitle="Price ($/MWh)"
-                                    chartTitle="Historical Data" />
+                                    chartTitle="Energy Demand"
+                                    ds={this.props.energyDemandData} />
                             </div>
                         </div>
                     </div>
@@ -111,7 +119,11 @@ class Markets extends React.Component {
     }
 }
 
-const ConnectedMarkets = connect(state => ({}))(Markets);
+const ConnectedMarkets = connect(state => ({
+  auctionMarketData: state.markets.auctionMarketData,
+  clearingPriceData: state.markets.clearingPriceData,
+  energyDemandData: state.markets.energyDemandData,
+}))(Markets);
 
 const marketsElement = (
     <ConnectedComponentWrapper isVisible={true} pageTitle="MARKETS">

web/web/markets/static/reducer.js

@@ -1,7 +1,17 @@
-const initialState = {}
+const initialState = {
+    auctionMarketData: [],
+    clearingPriceData: [],
+    energyDemandData: [],
+}
 
 export default function markets(state = initialState, action) {
-    switch (action.type) {        
+    switch (action.type) {
+        case 'AUCTION_MARKET_DATA_UPDATED':
+            return { ...state, auctionMarketData: action.data };
+        case 'CLEARING_PRICE_DATA_UPDATED':
+            return { ...state, clearingPriceData: action.data };
+        case 'ENERGY_DEMAND_DATA_UPDATED':
+            return { ...state, energyDemandData: action.data };
         default:
             return state;
     }