addition of stock timeframe flipper

eethansmith · Dec 12, 2023 · 660890c · 660890c
1 parent f2551d2
commit 660890c
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 27 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -10,16 +10,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-.App-header {
-  background-color: #121212; /* Same as body background */
-  padding: 20px;
-  text-align: center;
-}
-
-h1 {
-  color: #F5F5F5; /* Off-white color for the title */
-}
-
 .App-nav {
   display: flex;
   justify-content: space-between;
@@ -76,10 +66,74 @@ h1 {
 }
 
 .project-title {
-  font-size: 22.5px; /* Larger font size for the title */
+  font-size: 22.5px;
   font-weight: bold;
-  color: #F5F5F5; /* Color of the title */
-  margin-left: -400px;
+  color: #F5F5F5;
+}
+
+.App-header {
+  background-color: #121212;
+  padding: 1.5%;
+  position: relative;
+  text-align: center; 
+}
+
+.header-content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.title-container {
+  flex-grow: 1;
+  display: flex;
+  justify-content: center;
+  padding: 0% 20%;
+}
+
+/*-------------------*/
+.time-frame-flipper {
+  position: absolute;
+  right: 2%; /* Adjust as necessary */
+  top: 50%;
+  transform: translateY(-50%); /* Vertically center */
+
+  flex-grow: 0;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0px;
+}
+
+.time-frame-btn {
+  /* Base styles for all buttons */
+  padding: 10px 20px;
+  border: 1px solid #1a1a1a;
+  background-color: #121212;
+  color: #F5F5F5;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.time-frame-btn:hover {
+  /* Hover effect */
+  background-color: #e0e0e0;
+  color: #1a1a1a;
+}
+
+.time-frame-btn.active {
+  /* Styles for the active button */
+  border: 1px solid #F5F5F5;
+  background-color: #1a1a1a;
+  color: white;
+  font-style: bold;
+}
+/*-------------------*/
+
+/* Styles for the title */
+h1 {
+  color: #F5F5F5;
 }
 
 .stock-holdings {

diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -4,12 +4,19 @@ import homeImage from './resources/menu-con.jpg';
 import StockHoldings from './StockHoldings';
 import StockGraph from './StockGraphing';
 import HistoricHoldings from './HistoricHoldings';
+import TimeFrameFlip from './TimeFrameFlip';
 
 function App() {
   const [selectedStock, setSelectedStock] = useState(null);
+  const [timeFrame, setTimeFrame] = useState('All');
 
   const handleStockSelection = (stock) => {
-    setSelectedStock(stock); // Update the selected stock
+    setSelectedStock(stock);
+  };
+
+
+  const handleTimeFrameChange = (newTimeFrame) => {
+    setTimeFrame(newTimeFrame);
   };
 
   // Function to format the profit/loss percentage
@@ -33,30 +40,35 @@ function App() {
         </div>
         {/* Removed activeTab and setActiveTab related code from nav-links */}
         <div className="nav-links">
+          <button>Portfolio</button>
           <button>Overall Profits</button>
           <button>Stock Breakdown</button>
           <button>News</button>
         </div>
       </nav>
       <header className="App-header">
+        <div className="header-content">
+        <div className="title-container">
         <h1>{selectedStock ? `${selectedStock.name}` : 'Overall Portfolio'}</h1>
-        {selectedStock && (
-          <div className="stock-info">
-            <p>
-              Current Value: ${selectedStock.value_held.toFixed(2)}
-              <span style={{ color: selectedStock.profit_loss_percentage >= 0 ? 'green' : 'red' }}>
-                {` (${formatPercentage(selectedStock.profit_loss_percentage)})`}
-              </span>
-            </p>
-            <p>Shares Held: {selectedStock.shares_held}</p>
+        </div>
+          <TimeFrameFlip onTimeFrameChange={handleTimeFrameChange} currentTimeFrame={timeFrame} />
           </div>
+          {selectedStock && (
+            <div className="stock-info">
+              <p>
+                Current Value: ${selectedStock.value_held.toFixed(2)}
+                <span style={{ color: selectedStock.profit_loss_percentage >= 0 ? 'green' : 'red' }}>
+                  {` (${formatPercentage(selectedStock.profit_loss_percentage)})`}
+                </span>
+              </p>
+              <p>Shares Held: {selectedStock.shares_held}</p>
+            </div>
         )}
       </header>
-
       {/* The overall graphing component and its related code have been removed */}
-      {selectedStock && <StockGraph ticker={selectedStock.ticker} />}
+      {selectedStock && <StockGraph ticker={selectedStock.ticker} timeFrame={timeFrame} />}
 
-      <StockHoldings onStockSelect={handleStockSelection} />
+      <StockHoldings onStockSelect={handleStockSelection} timeFrame={timeFrame} />
       <HistoricHoldings/>
       {/* Rest of your components */}
     </div>

diff --git a/frontend/src/StockHoldings.js b/frontend/src/StockHoldings.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-function StockHoldings({ onStockSelect }) {
+function StockHoldings({ onStockSelect, timeFrame }) {
   const [holdings, setHoldings] = useState([]);
   const [images, setImages] = useState({});
 

diff --git a/frontend/src/TimeFrameFlip.js b/frontend/src/TimeFrameFlip.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+function TimeFrameFlip({ onTimeFrameChange, currentTimeFrame }) {
+    return (
+      <div className="time-frame-flipper">
+        <button className={`time-frame-btn ${currentTimeFrame === 'All' ? 'active' : ''}`} onClick={() => onTimeFrameChange('All')}>
+          All
+        </button>
+        <button className={`time-frame-btn ${currentTimeFrame === '1 month' ? 'active' : ''}`} onClick={() => onTimeFrameChange('1 month')}>
+          Month
+        </button>
+        <button className={`time-frame-btn ${currentTimeFrame === '1 day' ? 'active' : ''}`} onClick={() => onTimeFrameChange('1 day')}>
+          Day
+        </button>
+      </div>
+    );
+  }
+
+  export default TimeFrameFlip;
+