handling on click feature for stock buttons

frontend/src/App.js

@@ -2,10 +2,12 @@
 import React, { useState } from 'react';
 import './App.css';
 import homeImage from './menu-con.jpg';
-import StockHoldings from './StockHoldings'; // Make sure this path is correct
+import StockHoldings from './StockHoldings';
+import StockGraph from './StockGraphing';
 
 function App() {
   const [activeTab, setActiveTab] = useState('Overall Portfolio'); // default active tab
+  const [selectedTicker, setSelectedTicker] = useState(null);
 
   return (
     <div className="App">

frontend/src/StockGraphing.js

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from 'react';
+import { Line } from 'react-chartjs-2';
+import 'chart.js/auto';
+
+function StockGraph({ ticker }) { // Use destructuring to get the ticker prop
+    const [stockData, setStockData] = useState([]);
+
+    useEffect(() => {
+        // Ensure the ticker value is included in the fetch URL
+        fetch(`http://localhost:8000/api/graph_stock/${ticker}/`)
+            .then(response => response.json())
+            .then(data => setStockData(data))
+            .catch(error => console.error('Error fetching data:', error));
+    }, [ticker]); // Include ticker in the dependency array
+
+    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,
+            borderColor: 'rgb(75, 192, 192)',
+            tension: 0.1
+        }]
+    };
+
+    return <Line data={chartData} />;
+}
+
+export default StockGraph;

frontend/src/StockHoldings.js

@@ -34,6 +34,10 @@ function StockHoldings() {
     }
   };
 
+  const handleStockClick = (ticker) => {
+    onStockSelect(ticker);
+  };
+
   // useEffect to call the fetch function when the component mounts
   useEffect(() => {
     fetchStockHoldings();
@@ -87,7 +91,7 @@ function StockHoldings() {
     <div className="stock-holdings">
       <h2>Current Stock Holdings</h2>
       {holdings.map((stock, index) => (
-        <button key={index} className="stock-button">
+        <button key={index} className="stock-button" onClick={() => handleStockClick(stock.ticker)}>
           <img src={getImageUrl(stock.ticker)} alt={stock.name} className="stock-image" />
           <div className="stock-details">
             <div className="stock-name">{stock.name}</div>