1 files changed, 56 insertions, 42 deletions

diff --git a/client/src/MarketDataPage.jsx b/client/src/MarketDataPage.jsx
index 76d8284..52ca47c 100644
--- a/client/src/MarketDataPage.jsx
+++ b/client/src/MarketDataPage.jsx
@@ -6,6 +6,10 @@ 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;
 
@@ -37,7 +41,9 @@ function TimeAgo({ timestamp, prefix }) {
 
 function MarketDataPage() {
   const { selectedMarket } = useContext(MarketContext);
-    const [fiveMinData, setFiveMinData] = useState([]);
+  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);
@@ -95,49 +101,57 @@ function MarketDataPage() {
       };
     }, [selectedMarket]);
 
-  const getChartSpec = (data, title) => ({
-    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: [
+    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: [
         {
-          type: 'fold',
-          options: {
-            key: 'name',
-            value: 'value',
-            fields: ['LMP', 'Energy', 'Congestion', 'Loss']
+          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 });
+            }
           }
         }
       ]
-    },
-    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: title === 'fiveMin' ? 0.9 : 0.05,
-        end: 1
-      }
-    ]
-  });
+    });
+
 
   const computeKPIs = (data) => {
     if (!data.length) return {
@@ -243,7 +257,7 @@ function MarketDataPage() {
               title='Real-Time Market Data'
             >
               <div style={{ padding: 20 }}>
-                <VChart spec={getChartSpec(fiveMinData, 'fiveMin')} />
+                <VChart spec={getChartSpec(fiveMinData, 'fiveMin', fiveMinZoom)} />
               </div>
             </Card>
           </Col>
@@ -259,7 +273,7 @@ function MarketDataPage() {
               title='Day-Ahead Market Data'
             >
               <div style={{ padding: 20 }}>
-                <VChart spec={getChartSpec(dayAheadData, 'dayAhead')} />
+                <VChart spec={getChartSpec(dayAheadData, 'dayAhead', dayAheadZoom)} />
               </div>
             </Card>
           </Col>