changes to formatting of the graphing

eethansmith · Dec 5, 2023 · c057185 · c057185
1 parent 549def9
commit c057185
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -12,6 +12,14 @@ function App() {
   const handleStockSelection = (stock) => {
     setSelectedStock(stock);
   };
+    // Function to format the profit/loss percentage
+    const formatPercentage = (percentage) => {
+      if (percentage > 0) {
+        return `+${percentage.toFixed(2)}%`;
+      } else {
+        return `${percentage.toFixed(2)}%`; // Negative values already have a minus sign
+      }
+    };
 
   return (
     <div className="App">
@@ -39,7 +47,12 @@ function App() {
       <h1>{selectedStock ? `${selectedStock.name}` : 'Overall Portfolio'}</h1>
         {selectedStock && (
           <div className="stock-info">
-            <p>Current Value: ${selectedStock.value_held.toFixed(2)} {selectedStock.profit_loss_percentage.toFixed(2)}%</p>
+            <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>
             {/* Add other details you want to display */}
             </div>

diff --git a/frontend/src/StockGraphing.js b/frontend/src/StockGraphing.js
@@ -19,10 +19,10 @@ function StockGraph({ ticker }) { // Use destructuring to get the ticker prop
             data: stockData.map(data => data.value),
             fill: true,
             label: '',
-            backgroundColor: 'rgba(75, 192, 192, 0.2)', // Light green background
-            borderColor: 'rgb(75, 192, 192)',
-            borderWidth: 2,
-            tension: 0.1,
+            backgroundColor: 'rgba(245, 245, 245, 0.2)',
+            borderColor: 'rgb(245, 245, 245)',
+            borderWidth: 0.8,
+            tension: 0.08,
             pointRadius: 0,
             hoverRadius: 0,
         }]
@@ -47,7 +47,7 @@ function StockGraph({ ticker }) { // Use destructuring to get the ticker prop
             intersect: true
         },
         animation: {
-            duration: 1000 // Animation duration in milliseconds
+            duration: 2000 // Animation duration in milliseconds
         }
     };