From 37787895d56888ab44362252f21fb05c05e97250 Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Sun, 27 Apr 2025 22:44:20 -0600 Subject: reorganize --- client/src/components/BidsPage.jsx | 182 ++++++++++++++++++ client/src/components/MarketDataPage.jsx | 320 +++++++++++++++++++++++++++++++ client/src/components/SubmitBidPage.jsx | 188 ++++++++++++++++++ 3 files changed, 690 insertions(+) create mode 100644 client/src/components/BidsPage.jsx create mode 100644 client/src/components/MarketDataPage.jsx create mode 100644 client/src/components/SubmitBidPage.jsx (limited to 'client/src/components') diff --git a/client/src/components/BidsPage.jsx b/client/src/components/BidsPage.jsx new file mode 100644 index 0000000..e0c4128 --- /dev/null +++ b/client/src/components/BidsPage.jsx @@ -0,0 +1,182 @@ +import React, { useEffect, useState } from 'react'; +import { Table, Typography, Spin, Message, Card, Empty, Badge } from '@arco-design/web-react'; +import { IconArrowRise, IconArrowFall } from '@arco-design/web-react/icon'; +import '@arco-design/web-react/dist/css/arco.css'; +import API_BASE_URL from './config'; + +const columns = (bids) => [ + { + title: 'Timestamp', + dataIndex: 'timestamp', + sorter: (a, b) => new Date(a.timestamp) - new Date(b.timestamp), + render: (val) => new Date(val).toLocaleString(), + width: 180, + }, + { + title: 'Quantity (MW)', + dataIndex: 'quantity', + sorter: (a, b) => a.quantity - b.quantity, + render: (val) => val.toFixed(2), + width: 180, + }, + { + title: 'Price ($/MWh)', + dataIndex: 'price', + sorter: (a, b) => a.price - b.price, + render: (val) => `$${val.toFixed(2)}`, + width: 180, + }, + { + title: 'Status', + dataIndex: 'status', + sorter: (a, b) => a.status.localeCompare(b.status), + filters: [ + { text: 'Submitted', value: 'Submitted' }, + { text: 'Success', value: 'Success' }, + { text: 'Fail', value: 'Fail' }, + ], + onFilter: (value, record) => record.status === value, + render: (val) => ( + + ), + width: 180, + }, + { + title: 'PnL', + dataIndex: 'pnl', + sorter: (a, b) => (a.pnl || 0) - (b.pnl || 0), + render: (val) => { + if (val === null) return 'N/A'; + const isProfit = val >= 0; + const color = isProfit ? 'green' : 'red'; + return ( + + {isProfit ? : } + {val.toFixed(2)} + + ); + }, + width: 180, + }, + { + title: 'Market', + dataIndex: 'market', + sorter: (a, b) => a.market.localeCompare(b.market), + filters: [ + { text: 'ISONE', value: 'ISONE' }, + { text: 'NYISO', value: 'NYISO' }, + { text: 'MISO', value: 'MISO' }, + ], + onFilter: (value, record) => record.market === value, + render: (val) => val, + width: 180, + }, +]; + +function BidsPage() { + const [bids, setBids] = useState([]); + const [loading, setLoading] = useState(true); + + useEffect(() => { + fetch(`${API_BASE_URL}/bids/`) + .then((res) => { + if (!res.ok) throw new Error('Failed to fetch bids'); + return res.json(); + }) + .then((json) => setBids(json)) + .catch((err) => { + console.error(err); + Message.error('Failed to load bids.'); + }) + .finally(() => setLoading(false)); + }, []); + + return ( +
+ + Your Submitted Bids + + + + {loading ? ( +
+ +
+ ) : bids.length === 0 ? ( +
+ +
+ ) : ( +
+ 'table-row-hover'} + /> + + )} + + + + + ); +} + +export default BidsPage; diff --git a/client/src/components/MarketDataPage.jsx b/client/src/components/MarketDataPage.jsx new file mode 100644 index 0000000..5e028f8 --- /dev/null +++ b/client/src/components/MarketDataPage.jsx @@ -0,0 +1,320 @@ +import React, { useEffect, useState, useContext, useRef, useMemo } from 'react'; +import { Typography, Spin, Message, Card, Grid } from '@arco-design/web-react'; +import '@arco-design/web-react/dist/css/arco.css'; +import { initVChartArcoTheme } from '@visactor/vchart-arco-theme'; +import { VChart } from '@visactor/react-vchart'; +import API_BASE_URL from './config'; +import { MarketContext, MARKET_FULL_NAMES } from './App'; + +// TODO: +// +// - [ ] Cancel Promise if market changes +// - [ ] Fix Data Zoom being reset + +const { Row, Col } = Grid; + +function TimeAgo({ timestamp, prefix }) { + const [now, setNow] = useState(new Date()); + + useEffect(() => { + const timer = setInterval(() => setNow(new Date()), 1000); + return () => clearInterval(timer); + }, []); + + const formatTimeAgo = () => { + if (!timestamp) return ''; + const seconds = Math.floor((now - timestamp) / 1000); + if (seconds < 60) return `${seconds} sec ago`; + const minutes = Math.floor(seconds / 60); + if (minutes < 60) return `${minutes} min ago`; + const hours = Math.floor(minutes / 60); + return `${hours} hr ago`; + }; + + return ( + + {prefix}: {formatTimeAgo()} + + ); +} + +function MarketDataPage() { + const { selectedMarket } = useContext(MarketContext); + const fiveMinChartRef = useRef(null); + const dayAheadChartRef = useRef(null); + const [fiveMinZoom, setFiveMinZoom] = useState({ start: 0.9, end: 1 }); + const [dayAheadZoom, setDayAheadZoom] = useState({ start: 0.05, end: 1 }); + const [fiveMinData, setFiveMinData] = useState([]); + const [dayAheadData, setDayAheadData] = useState([]); + const [loading, setLoading] = useState(true); + const [fiveMinLastUpdated, setFiveMinLastUpdated] = useState(null); + const [dayAheadLastUpdated, setDayAheadLastUpdated] = useState(null); + const [, setNow] = useState(new Date()); + + const handleZoomChange = (e, title) => { + if (!e?.start || !e?.end) return; + if (title === 'fiveMin') { + setFiveMinZoom({ start: e.start, end: e.end }); + } else { + setDayAheadZoom({ start: e.start, end: e.end }); + } + }; + + useEffect(() => { + const fetchFiveMinData = async () => { + try { + const res = await fetch(`${API_BASE_URL}/market/real-time?market=${selectedMarket}`); + if (!res.ok) throw new Error('Failed to fetch real-time data'); + const json = await res.json(); + setFiveMinData(json); + setFiveMinLastUpdated(new Date()); + } catch (err) { + console.error(err); + Message.error('Failed to load real-time market data.'); + } + }; + + const fetchDayAheadData = async () => { + try { + const res = await fetch(`${API_BASE_URL}/market/day-ahead?market=${selectedMarket}`); + if (!res.ok) throw new Error('Failed to fetch day-ahead data'); + const json = await res.json(); + setDayAheadData(json); + setDayAheadLastUpdated(new Date()); + } catch (err) { + console.error(err); + Message.error('Failed to load day-ahead market data.'); + } + }; + + const initialize = async () => { + setLoading(true); + await Promise.all([fetchFiveMinData(), fetchDayAheadData()]); + setLoading(false); + + initVChartArcoTheme({ + defaultMode: 'light', + isWatchingMode: true + }); + }; + + initialize(); + + const fiveMinInterval = setInterval(fetchFiveMinData, 5 * 60 * 1000); + const dayAheadInterval = setInterval(fetchDayAheadData, 60 * 60 * 1000); + const timer = setInterval(() => setNow(new Date()), 1000); + + return () => { + clearInterval(fiveMinInterval); + clearInterval(dayAheadInterval); + clearInterval(timer); + }; + }, [selectedMarket]); + + const fiveMinSpec = useMemo(() => ({ + type: 'line', + data: { + values: fiveMinData.map(d => ({ + timestamp: new Date(d.timestamp).toLocaleString(), + LMP: d.lmp, + Energy: d.energy, + Congestion: d.congestion, + Loss: d.loss + })), + transforms: [{ + type: 'fold', + options: { key: 'name', value: 'value', fields: ['LMP', 'Energy', 'Congestion', 'Loss'] } + }] + }, + xField: 'timestamp', + yField: 'value', + seriesField: 'name', + smooth: true, + legend: { position: 'top' }, + tooltip: { + formatter: (datum) => ({ + name: datum.name, + value: datum.value.toFixed(2) + }) + }, + dataZoom: [{ + orient: 'bottom', + height: 20, + start: fiveMinZoom.start, + end: fiveMinZoom.end + }] + }), [fiveMinData, fiveMinZoom]); // <== DEPENDENCIES + + const dayAheadSpec = useMemo(() => ({ + type: 'line', + data: { + values: dayAheadData.map(d => ({ + timestamp: new Date(d.timestamp).toLocaleString(), + LMP: d.lmp, + Energy: d.energy, + Congestion: d.congestion, + Loss: d.loss + })), + transforms: [{ + type: 'fold', + options: { key: 'name', value: 'value', fields: ['LMP', 'Energy', 'Congestion', 'Loss'] } + }] + }, + xField: 'timestamp', + yField: 'value', + seriesField: 'name', + smooth: true, + legend: { position: 'top' }, + tooltip: { + formatter: (datum) => ({ + name: datum.name, + value: datum.value.toFixed(2) + }) + }, + dataZoom: [{ + orient: 'bottom', + height: 20, + start: dayAheadZoom.start, + end: dayAheadZoom.end + }] + }), [dayAheadData, dayAheadZoom]); + + const computeKPIs = (data) => { + if (!data.length) return { avgLmp: 0, totalEnergy: 0, maxCongestion: 0, avgLoss: 0 }; + const avgLmp = data.reduce((sum, d) => sum + d.lmp, 0) / data.length; + const totalEnergy = data.reduce((sum, d) => sum + d.energy, 0); + const maxCongestion = Math.max(...data.map(d => d.congestion)); + const avgLoss = data.reduce((sum, d) => sum + d.loss, 0) / data.length; + return { avgLmp, totalEnergy, maxCongestion, avgLoss }; + }; + + const fiveMinKPIs = computeKPIs(fiveMinData); + const dayAheadKPIs = computeKPIs(dayAheadData); + + return ( +
+ + Market Data for {MARKET_FULL_NAMES[selectedMarket]} + + + {loading ? ( + + ) : ( + <> + + {[ + { label: 'Avg Real-Time LMP ($/MWh)', value: fiveMinKPIs.avgLmp }, + { label: 'Total Real-Time Energy (MWh)', value: fiveMinKPIs.totalEnergy }, + { label: 'Max Real-Time Congestion ($)', value: fiveMinKPIs.maxCongestion }, + { label: 'Avg Real-Time Loss ($)', value: fiveMinKPIs.avgLoss } + ].map((item, idx) => ( +
+ + ${item.value.toFixed(2)} + + + ))} + + + + {[ + { label: 'Avg Day-Ahead LMP ($/MWh)', value: dayAheadKPIs.avgLmp }, + { label: 'Total Day-Ahead Energy (MWh)', value: dayAheadKPIs.totalEnergy }, + { label: 'Max Day-Ahead Congestion ($)', value: dayAheadKPIs.maxCongestion }, + { label: 'Avg Day-Ahead Loss ($)', value: dayAheadKPIs.avgLoss } + ].map((item, idx) => ( + + + ${item.value.toFixed(2)} + + + ))} + + + + + } style={{ borderRadius: 12, marginBottom: 24 }}> +
+ handleZoomChange(e.detail, 'fiveMin')} + /> +
+ + + + } style={{ borderRadius: 12, marginBottom: 24 }}> +
+ handleZoomChange(e.detail, 'dayAhead')} + /> +
+ + + + + )} + + + + ); +} + +export default MarketDataPage; diff --git a/client/src/components/SubmitBidPage.jsx b/client/src/components/SubmitBidPage.jsx new file mode 100644 index 0000000..7737c20 --- /dev/null +++ b/client/src/components/SubmitBidPage.jsx @@ -0,0 +1,188 @@ +import React, { useState, useEffect, useContext } from 'react'; +import { Form, InputNumber, DatePicker, Button, Message, Typography, Card } from '@arco-design/web-react'; +import '@arco-design/web-react/dist/css/arco.css'; +import dayjs from 'dayjs'; +import utc from 'dayjs/plugin/utc'; +import timezone from 'dayjs/plugin/timezone'; +import API_BASE_URL from './config'; +import { MarketContext, MARKET_FULL_NAMES } from './App'; + +dayjs.extend(utc); +dayjs.extend(timezone); + +const MARKET_TIMEZONES = { + ISONE: 'America/New_York', + NYISO: 'America/New_York', + MISO: 'America/Chicago' +}; + +function SubmitBidPage() { + const { selectedMarket } = useContext(MarketContext); + const [form] = Form.useForm(); + const [loading, setLoading] = useState(false); + const [localNow, setLocalNow] = useState(''); + const [marketNow, setMarketNow] = useState(''); + + useEffect(() => { + const updateTime = () => { + const now = dayjs(); + const localFormatted = now.format('dddd, MMMM D, h:mm A'); + const marketTz = MARKET_TIMEZONES[selectedMarket] || 'America/New_York'; + const marketTime = now.tz(marketTz); + const marketFormatted = marketTime.format('dddd, MMMM D, h:mm A'); + setLocalNow(localFormatted); + setMarketNow(marketFormatted); + }; + + updateTime(); + const interval = setInterval(updateTime, 1000); + return () => clearInterval(interval); + }, [selectedMarket]); + + const handleSubmit = async (values) => { + setLoading(true); + try { + const picked = dayjs(values.timestamp); + const adjusted = picked.minute(0).second(0).millisecond(0); + + const marketTz = MARKET_TIMEZONES[selectedMarket] || 'America/New_York'; + const timestampInMarketTz = adjusted.tz(marketTz).format(); + + const payload = { + timestamp: timestampInMarketTz, + quantity: values.quantity, + price: values.price, + market: selectedMarket, + user_id: 1 + }; + + const res = await fetch(`${API_BASE_URL}/bids/`, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload) + }); + + if (!res.ok) { + const error = await res.json(); + throw new Error(error.detail || 'Failed to submit bid'); + } + + Message.success('Bid submitted successfully!'); + form.resetFields(); + } catch (err) { + console.error(err); + Message.error(err.message || 'Submission failed'); + } finally { + setLoading(false); + } + }; + + return ( +
+ + Submit New Bid + + + +
+ + Current Local Time: {localNow} + + + Current {MARKET_FULL_NAMES[selectedMarket]} Time: {marketNow} + +
+ +
+ + Array.from({ length: 60 }, (_, i) => i !== 0), + step: { minute: 60 } + }} + style={{ width: '100%' }} + format="YYYY-MM-DD HH:00" + placeholder="Select date and hour" + timezone={MARKET_TIMEZONES[selectedMarket]} + /> + + + 0' } + ]} + > + + + + = 0' } + ]} + > + + + + + + + + + + +
+ ); +} + +export default SubmitBidPage; -- cgit v1.2.3