graphing for stocks visualised on main screen

eethansmith · Dec 4, 2023 · 8851546 · 8851546
1 parent 0ff0e27
commit 8851546
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 12 deletions.
diff --git a/backend/myapp/__pycache__/graph_stock_holdings.cpython-38.pyc b/backend/myapp/__pycache__/graph_stock_holdings.cpython-38.pyc
diff --git a/backend/myapp/__pycache__/urls.cpython-38.pyc b/backend/myapp/__pycache__/urls.cpython-38.pyc
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -140,4 +140,16 @@ h1 {
 .gain-loss {
   font-weight: bold;
   font-size: 0.9em;
+}
+
+.StockGraph {
+  /* Center the graph */
+  margin: 0 auto;
+  max-width: 80%;
+}
+
+.stock-graph-container {
+  width: 70%; /* Adjust this to your preference */
+  height: 500px; /* Adjust height as needed */
+  margin: 0 auto; /* Center the graph */
 }
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -9,6 +9,10 @@ function App() {
   const [activeTab, setActiveTab] = useState('Overall Portfolio'); // default active tab
   const [selectedTicker, setSelectedTicker] = useState(null);
 
+  const handleStockSelection = (ticker) => {
+    setSelectedTicker(ticker); // Update the selected stock ticker
+  };
+
   return (
     <div className="App">
       <nav className="App-nav">
@@ -32,9 +36,13 @@ function App() {
         </div>
       </nav>
       <header className="App-header">
-        <h1>Overall Portfolio</h1>
+      <h1>{selectedTicker ? `${selectedTicker} Holdings` : 'Overall Portfolio'}</h1>
       </header>
-      <StockHoldings/>
+
+      {selectedTicker && <StockGraph ticker={selectedTicker} />}
+
+      <StockHoldings onStockSelect={handleStockSelection} />
+
       { /* Add the rest of your components here */}
     </div>
   );

diff --git a/frontend/src/StockGraphing.js b/frontend/src/StockGraphing.js
@@ -16,15 +16,47 @@ function StockGraph({ ticker }) { // Use destructuring to get the ticker prop
     const chartData = {
         labels: stockData.map(data => data.date),
         datasets: [{
-            label: `${ticker} Stock Value`, // Dynamic label based on ticker
             data: stockData.map(data => data.value),
-            fill: false,
+            fill: true,
+            label: '',
+            backgroundColor: 'rgba(75, 192, 192, 0.2)', // Light green background
             borderColor: 'rgb(75, 192, 192)',
-            tension: 0.1
+            borderWidth: 2,
+            tension: 0.1,
+            pointRadius: 0,
+            hoverRadius: 0,
         }]
     };
 
-    return <Line data={chartData} />;
+    const chartOptions = {
+        responsive: true,
+        scales: {
+            y: {
+                beginAtZero: true // Start Y-axis at 0
+            }
+        },
+        legend: {
+            display: false // Hide the legend
+        },
+        tooltips: {
+            mode: 'index',
+            intersect: false
+        },
+        hover: {
+            mode: 'nearest',
+            intersect: true
+        },
+        animation: {
+            duration: 1000 // Animation duration in milliseconds
+        }
+    };
+
+
+    return (
+        <div className="stock-graph-container">
+            <Line data={chartData} />
+        </div>
+    );
 }
 
 export default StockGraph;
diff --git a/frontend/src/StockHoldings.js b/frontend/src/StockHoldings.js
@@ -16,7 +16,7 @@ import ORCL from './resources/ORCL.png';
 import ZS from './resources/ZS.png';
 import IBM from './resources/IBM.png';
 
-function StockHoldings() {
+function StockHoldings({ onStockSelect }) {
   const [holdings, setHoldings] = useState([]);
 
   // Function to fetch data from your API
@@ -35,16 +35,14 @@ function StockHoldings() {
   };
 
   const handleStockClick = (ticker) => {
-    onStockSelect(ticker);
+    if (onStockSelect) {
+      onStockSelect(ticker); // Use the passed onStockSelect function
+    }
   };
 
-  // useEffect to call the fetch function when the component mounts
   useEffect(() => {
     fetchStockHoldings();
-
-    // Set up an interval to fetch data every few seconds
     const interval = setInterval(fetchStockHoldings, 2000);
-
     return () => clearInterval(interval);
   }, []);