From 5244aff586df93de2b9973de9c9046e4ad6163bd Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Sun, 27 Apr 2025 21:30:56 -0600 Subject: improve styling --- client/src/App.js | 6 +- client/src/BidsPage.jsx | 99 ++++++++--- client/src/MarketDataPage.jsx | 385 +++++++++++++++++++----------------------- client/src/SubmitBidPage.jsx | 76 ++++++--- 4 files changed, 310 insertions(+), 256 deletions(-) (limited to 'client') diff --git a/client/src/App.js b/client/src/App.js index a83b628..7d84cb0 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -93,13 +93,17 @@ function App() { - +
} /> } /> } /> } /> +
+ ); diff --git a/client/src/BidsPage.jsx b/client/src/BidsPage.jsx index 3a40f41..fad3989 100644 --- a/client/src/BidsPage.jsx +++ b/client/src/BidsPage.jsx @@ -1,49 +1,70 @@ import React, { useEffect, useState } from 'react'; -import { Table, Typography, Spin, Message, Card } from '@arco-design/web-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 = [ +const columns = (bids) => [ { title: 'Timestamp', dataIndex: 'timestamp', + sorter: (a, b) => new Date(a.timestamp) - new Date(b.timestamp), render: (val) => new Date(val).toLocaleString(), }, { title: 'Quantity (MW)', dataIndex: 'quantity', + sorter: (a, b) => a.quantity - b.quantity, render: (val) => val.toFixed(2), }, { title: 'Price ($/MWh)', dataIndex: 'price', + sorter: (a, b) => a.price - b.price, render: (val) => `$${val.toFixed(2)}`, }, { title: 'Status', dataIndex: 'status', - render: (val) => { - let color = 'gray'; - if (val === 'Success') color = 'green'; - else if (val === 'Fail') color = 'red'; - else if (val === 'Submitted') color = 'blue'; - return {val}; - } + 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) => ( + + ), }, { title: 'PnL', dataIndex: 'pnl', + sorter: (a, b) => (a.pnl || 0) - (b.pnl || 0), render: (val) => { if (val === null) return 'N/A'; - const color = val >= 0 ? 'green' : 'red'; - return {val.toFixed(2)}; - } + const isProfit = val >= 0; + const color = isProfit ? 'green' : 'red'; + return ( + + {isProfit ? : } + {val.toFixed(2)} + + ); + }, }, { 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, - } + }, ]; function BidsPage() { @@ -65,24 +86,64 @@ function BidsPage() { }, []); return ( -
- Your Submitted Bids - +
+ + Your Submitted Bids + + + {loading ? ( - +
+ +
+ ) : bids.length === 0 ? ( +
+ +
) : ( 'table-row-hover'} /> )} + + ); } diff --git a/client/src/MarketDataPage.jsx b/client/src/MarketDataPage.jsx index 52ca47c..4da1969 100644 --- a/client/src/MarketDataPage.jsx +++ b/client/src/MarketDataPage.jsx @@ -32,254 +32,213 @@ function TimeAgo({ timestamp, prefix }) { }; return ( - + {prefix}: {formatTimeAgo()} ); } - function MarketDataPage() { const { selectedMarket } = useContext(MarketContext); 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 [now, setNow] = useState(new Date()); - - 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 [dayAheadData, setDayAheadData] = useState([]); + const [loading, setLoading] = useState(true); + const [fiveMinLastUpdated, setFiveMinLastUpdated] = useState(null); + const [dayAheadLastUpdated, setDayAheadLastUpdated] = useState(null); + const [now, setNow] = useState(new Date()); - 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.'); - } - }; + 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 initialize = async () => { - setLoading(true); - await Promise.all([fetchFiveMinData(), fetchDayAheadData()]); - setLoading(false); + 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.'); + } + }; - initVChartArcoTheme({ - defaultMode: 'light', - isWatchingMode: true - }); - }; + const initialize = async () => { + setLoading(true); + await Promise.all([fetchFiveMinData(), fetchDayAheadData()]); + setLoading(false); - initialize(); + initVChartArcoTheme({ + defaultMode: 'light', + isWatchingMode: true + }); + }; - const fiveMinInterval = setInterval(fetchFiveMinData, 5 * 60 * 1000); // 5 minutes - const dayAheadInterval = setInterval(fetchDayAheadData, 60 * 60 * 1000); // 1 hour - const timer = setInterval(() => setNow(new Date()), 1000); + initialize(); - return () => { - clearInterval(fiveMinInterval); - clearInterval(dayAheadInterval); - clearInterval(timer); - }; - }, [selectedMarket]); + const fiveMinInterval = setInterval(fetchFiveMinData, 5 * 60 * 1000); + const dayAheadInterval = setInterval(fetchDayAheadData, 60 * 60 * 1000); + const timer = setInterval(() => setNow(new Date()), 1000); - const getChartSpec = (data, title, zoom) => ({ - type: 'line', - data: { - values: data.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: zoom?.start ?? (title === 'fiveMin' ? 0.9 : 0.05), - end: zoom?.end ?? 1, - onChange: (e) => { - if (title === 'fiveMin') { - setFiveMinZoom({ start: e.start, end: e.end }); - } else { - setDayAheadZoom({ start: e.start, end: e.end }); - } - } + return () => { + clearInterval(fiveMinInterval); + clearInterval(dayAheadInterval); + clearInterval(timer); + }; + }, [selectedMarket]); + + const getChartSpec = (data, title, zoom) => ({ + type: 'line', + data: { + values: data.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: zoom?.start ?? (title === 'fiveMin' ? 0.9 : 0.05), + end: zoom?.end ?? 1, + onChange: (e) => { + if (title === 'fiveMin') { + setFiveMinZoom({ start: e.start, end: e.end }); + } else { + setDayAheadZoom({ start: e.start, end: e.end }); } - ] - }); - + } + }] + }); const computeKPIs = (data) => { - if (!data.length) return { - avgLmp: 0, - totalEnergy: 0, - maxCongestion: 0, - avgLoss: 0 - }; - + 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 - }; + return { avgLmp, totalEnergy, maxCongestion, avgLoss }; }; - const fiveMinKPIs = computeKPIs(fiveMinData); const dayAheadKPIs = computeKPIs(dayAheadData); - const formatTimeAgo = (timestamp) => { - 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 ( -
- Market Data for {MARKET_FULL_NAMES[selectedMarket]} - +
+ + Market Data for {MARKET_FULL_NAMES[selectedMarket]} + {loading ? ( - + ) : ( <> - - - -
- - ${fiveMinKPIs.avgLmp.toFixed(2)} - - - - - {fiveMinKPIs.totalEnergy.toFixed(2)} - - - - - ${fiveMinKPIs.maxCongestion.toFixed(2)} - - - - - ${fiveMinKPIs.avgLoss.toFixed(2)} - - - - - - - ${dayAheadKPIs.avgLmp.toFixed(2)} - - - - - {dayAheadKPIs.totalEnergy.toFixed(2)} - - - - - ${dayAheadKPIs.maxCongestion.toFixed(2)} - - - - - ${dayAheadKPIs.avgLoss.toFixed(2)} - - - - - - -
- -
- - - - -
- -
- - - - +
+ + +
+ + + {[ + { 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)} + + + ))} + + + + + +
+ +
+ + + + +
+ +
+ + + + )} + + ); } diff --git a/client/src/SubmitBidPage.jsx b/client/src/SubmitBidPage.jsx index 94a0c32..7737c20 100644 --- a/client/src/SubmitBidPage.jsx +++ b/client/src/SubmitBidPage.jsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useContext } from 'react'; -import { Form, InputNumber, DatePicker, Button, Message, Typography, Card, Select } from '@arco-design/web-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'; @@ -27,18 +27,15 @@ function SubmitBidPage() { 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]); @@ -56,14 +53,12 @@ function SubmitBidPage() { quantity: values.quantity, price: values.price, market: selectedMarket, - user_id: 1 // Hardcoded user id for now + user_id: 1 }; const res = await fetch(`${API_BASE_URL}/bids/`, { method: 'POST', - headers: { - 'Content-Type': 'application/json' - }, + headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); @@ -83,24 +78,37 @@ function SubmitBidPage() { }; return ( -
- Submit New Bid - - - Current Local Time: {localNow} - - - Current {MARKET_FULL_NAMES[selectedMarket]} Time: {marketNow} - +
+ + Submit New Bid + + + +
+ + Current Local Time: {localNow} + + + Current {MARKET_FULL_NAMES[selectedMarket]} Time: {marketNow} + +
Array.from({ length: 60 }, (_, i) => i !== 0)} timezone={MARKET_TIMEZONES[selectedMarket]} /> @@ -145,12 +152,35 @@ function SubmitBidPage() { - + +
); } -- cgit v1.2.3