Spaces:

alterzick
/

trading-insight

Running

App Files Files Community

alterzick commited on Jun 7, 2025

Commit

924f680

verified ·

1 Parent(s): 7b789d5

Add 2 files

Browse files

Files changed (1) hide show

index.html +231 -120

index.html CHANGED Viewed

@@ -6,109 +6,186 @@
     <title>Interactive Trading Application</title>
     <link rel="stylesheet" href="styles.css">
     <script src="https://s3.tradingview.com/tv.js"></script>
 </head>
 <body>
     <h1>Commodity Trading Dashboard</h1>
-    <div>
-        <label for="commodity">Select Commodity:</label>
-        <select id="commodity" onchange="updateChart()">
-            <option value="OANDA:WTICOUSD">Oil</option>
-            <option value="OANDA:XAGUSD">Silver</option>
-            <option value="OANDA:XAUUSD">Gold</option>
-        </select>
-    </div>
-    <div>
-        <label for="timeframe">Select Timeframe:</label>
-        <select id="timeframe" onchange="updateChart()">
-            <option value="1">1 Minute</option>
-            <option value="5">5 Minutes</option>
-            <option value="15">15 Minutes</option>
-            <option value="60">1 Hour</option>
-            <option value="240">4 Hours</option>
-            <option value="D">1 Day</option>
-        </select>
-    </div>
-    <h2>Indicator Parameters</h2>
-    <div>
-        <label for="rsi-period">RSI Period:</label>
-        <input type="number" id="rsi-period" value="14" min="1" onchange="updateIndicators()">
-    </div>
-    <div>
-        <label for="macd-fast">MACD Fast Period:</label>
-        <input type="number" id="macd-fast" value="12" min="1" onchange="updateIndicators()">
-    </div>
-    <div>
-        <label for="macd-slow">MACD Slow Period:</label>
-        <input type="number" id="macd-slow" value="26" min="1" onchange="updateIndicators()">
-    </div>
-    <div>
-        <label for="macd-signal">MACD Signal Period:</label>
-        <input type="number" id="macd-signal" value="9" min="1" onchange="updateIndicators()">
-    </div>
-    <div>
-        <label for="stochastic-k">Stochastic %K Period:</label>
-        <input type="number" id="stochastic-k" value="14" min="1" onchange="updateIndicators()">
-    </div>
-    <div>
-        <label for="stochastic-d">Stochastic %D Period:</label>
-        <input type="number" id="stochastic-d" value="3" min="1" onchange="updateIndicators()">
-    </div>
-    <div>
-        <label for="momentum-period">Momentum Period:</label>
-        <input type="number" id="momentum-period" value="10" min="1" onchange="updateIndicators()">
     </div>
-    <div id="tradingview-chart"></div>
-    <h2>Indicators</h2>
-    <ul>
-        <li>RSI: <span id="rsi-value">Loading...</span></li>
-        <li>MACD: <span id="macd-value">Loading...</span></li>
-        <li>Stochastic: <span id="stochastic-value">Loading...</span></li>
-        <li>Awesome Oscillator: <span id="ao-value">Loading...</span></li>
-        <li>Momentum: <span id="momentum-value">Loading...</span></li>
-    </ul>
-    <h2>Recommendations</h2>
-    <div id="recommendations">
-        <p>RSI Recommendation: <span id="rsi-recommendation">Loading...</span></p>
-        <p>MACD Recommendation: <span id="macd-recommendation">Loading...</span></p>
-        <p>Stochastic Recommendation: <span id="stochastic-recommendation">Loading...</span></p>
-        <p>Awesome Oscillator Recommendation: <span id="ao-recommendation">Loading...</span></p>
-        <p>Momentum Recommendation: <span id="momentum-recommendation">Loading...</span></p>
     </div>
-    <h2>Sentiment Analysis</h2>
-    <div id="sentiment-analysis">
-        <p>Retail Position Recommendation: <span id="retail-recommendation">Loading...</span></p>
-        <p>Market Maker Data: <span id="market-maker-data">Loading...</span></p>
-    </div>
-    <h2>Upcoming Economic Calendar</h2>
-    <div id="economic-calendar">
-        <table>
             <thead>
                 <tr>
                     <th>Date</th>
-                    <th>Event</th>
-                    <th>Impact</th>
-                    <th>Actual</th>
-                    <th>Forecast</th>
                 </tr>
             </thead>
-            <tbody id="calendar-body">
                 <tr>
-                    <td colspan="5">Loading...</td>
                 </tr>
             </tbody>
         </table>
     </div>
     <script>
         function updateChart() {
             const commodity = document.getElementById("commodity").value;
             const timeframe = document.getElementById("timeframe").value;
@@ -147,8 +224,6 @@
             const stochasticD = parseInt(document.getElementById("stochastic-d").value);
             const momentumPeriod = parseInt(document.getElementById("momentum-period").value);
-            // Here you would typically call a function to recalculate the indicators based on the new parameters
-            // For demonstration, we will just log the values
             console.log("RSI Period:", rsiPeriod);
             console.log("MACD Fast Period:", macdFast);
             console.log("MACD Slow Period:", macdSlow);
@@ -156,16 +231,73 @@
             console.log("Stochastic %K Period:", stochasticK);
             console.log("Stochastic %D Period:", stochasticD);
             console.log("Momentum Period:", momentumPeriod);
-            // You can call a function to recalculate the indicators here
-            // fetchIndicatorsAndSentiment(commodity, timeframe);
         }
-        function fetchIndicatorsAndSentiment(commodity, timeframe) {
-            // Placeholder for fetching indicator values and sentiment analysis
-            // Replace with actual API calls to fetch data from CTO and CFCT
-            // Simulated API response based on timeframe
             const indicators = getIndicatorsBasedOnTimeframe(timeframe);
             const sentiment = {
@@ -173,29 +305,23 @@
                 marketMakerData: Math.random() > 0.5 ? "Long" : "Short"
             };
-            // Update the UI with fetched data
             document.getElementById("rsi-value").innerText = indicators.rsi.toFixed(2);
             document.getElementById("macd-value").innerText = indicators.macd.toFixed(2);
             document.getElementById("stochastic-value").innerText = indicators.stochastic.toFixed(2);
             document.getElementById("ao-value").innerText = indicators.ao.toFixed(2);
             document.getElementById("momentum-value").innerText = indicators.momentum.toFixed(2);
-            // Generate recommendations based on indicator values
             document.getElementById("rsi-recommendation").innerText = getRSIRecommendation(indicators.rsi);
             document.getElementById("macd-recommendation").innerText = getMACDRecommendation(indicators.macd);
             document.getElementById("stochastic-recommendation").innerText = getStochasticRecommendation(indicators.stochastic);
             document.getElementById("ao-recommendation").innerText = getAORecommendation(indicators.ao);
             document.getElementById("momentum-recommendation").innerText = getMomentumRecommendation(indicators.momentum);
-            // Update sentiment analysis
             document.getElementById("retail-recommendation").innerText = sentiment.retailRecommendation;
             document.getElementById("market-maker-data").innerText = sentiment.marketMakerData;
         }
         function fetchEconomicCalendar() {
-            // Placeholder for fetching economic calendar data
-            // Replace with actual API call to fetch economic events
             const events = [
                 { date: "2025-06-01", event: "Manufacturing PMI", impact: "High", actual: "N/A", forecast: "52.5" },
                 { date: "2025-06-03", event: "Non-Farm Payrolls", impact: "High", actual: "N/A", forecast: "200K" },
@@ -210,7 +336,6 @@
             const calendarBody = document.getElementById("calendar-body");
             calendarBody.innerHTML = ""; // Clear previous data
-            // Display events in the calendar
             events.forEach(event => {
                 const row = document.createElement("tr");
                 row.innerHTML = `
@@ -225,7 +350,6 @@
         }
         function getIndicatorsBasedOnTimeframe(timeframe) {
-            // Simulated indicator values based on the selected timeframe
             const baseValues = {
                 rsi: Math.random() * 100,
                 macd: Math.random() * 2 - 1,
@@ -234,25 +358,24 @@
                 momentum: Math.random() * 100
             };
-            // Adjust values based on timeframe (this is just an example)
             switch (timeframe) {
                 case "1":
-                    baseValues.rsi += 5; // Simulate higher volatility for 1 min
                     break;
                 case "5":
-                    baseValues.macd += 0.1; // Slightly adjust MACD for 5 min
                     break;
                 case "15":
-                    baseValues.stochastic += 10; // Adjust Stochastic for 15 min
                     break;
                 case "60":
-                    baseValues.ao += 0.5; // Adjust AO for 1 hour
                     break;
                 case "240":
-                    baseValues.momentum += 15; // Adjust Momentum for 4 hours
                     break;
                 case "D":
-                    baseValues.rsi -= 10; // Adjust RSI for daily
                     break;
             }
@@ -270,11 +393,7 @@
         }
         function getMACDRecommendation(macd) {
-            if (macd > 0) {
-                return "Buy";
-            } else {
-                return "Sell";
-            }
         }
         function getStochasticRecommendation(stochastic) {
@@ -288,19 +407,11 @@
         }
         function getAORecommendation(ao) {
-            if (ao > 0) {
-                return "Buy";
-            } else {
-                return "Sell";
-            }
         }
         function getMomentumRecommendation(momentum) {
-            if (momentum > 0) {
-                return "Buy";
-            } else {
-                return "Sell";
-            }
         }
         // Initialize the chart on page load

     <title>Interactive Trading Application</title>
     <link rel="stylesheet" href="styles.css">
     <script src="https://s3.tradingview.com/tv.js"></script>
+    <style>
+        /* Basic styling for the tab navigation */
+        .tab {
+            display: none;
+        }
+        .tab.active {
+            display: block;
+        }
+        .tab-links {
+            margin-bottom: 20px;
+        }
+        .tab-links button {
+            margin-right: 10px;
+            padding: 10px;
+            cursor: pointer;
+        }
+        /* Basic styling for the trading journal */
+        #trading-journal {
+            margin-top: 20px;
+        }
+        #journal-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        #journal-table th, #journal-table td {
+            border: 1px solid #ddd;
+            padding: 8px;
+        }
+        #journal-table th {
+            background-color: #f2f2f2;
+        }
+        .edit-button, .delete-button {
+            cursor: pointer;
+            color: blue;
+            text-decoration: underline;
+        }
+    </style>
 </head>
 <body>
     <h1>Commodity Trading Dashboard</h1>
+    <div class="tab-links">
+        <button onclick="showTab('dashboard')">Dashboard</button>
+        <button onclick="showTab('trading-journal')">Trading Journal</button>
     </div>
+    <div id="dashboard" class="tab active">
+        <div>
+            <label for="commodity">Select Commodity:</label>
+            <select id="commodity" onchange="updateChart()">
+                <option value="OANDA:WTICOUSD">Oil</option>
+                <option value="OANDA:XAGUSD">Silver</option>
+                <option value="OANDA:XAUUSD">Gold</option>
+            </select>
+        </div>
+        <div>
+            <label for="timeframe">Select Timeframe:</label>
+            <select id="timeframe" onchange="updateChart()">
+                <option value="1">1 Minute</option>
+                <option value="5">5 Minutes</option>
+                <option value="15">15 Minutes</option>
+                <option value="60">1 Hour</option>
+                <option value="240">4 Hours</option>
+                <option value="D">1 Day</option>
+            </select>
+        </div>
+        <h2>Indicator Parameters</h2>
+        <div>
+            <label for="rsi-period">RSI Period:</label>
+            <input type="number" id="rsi-period" value="14" min="1" onchange="updateIndicators()">
+        </div>
+        <div>
+            <label for="macd-fast">MACD Fast Period:</label>
+            <input type="number" id="macd-fast" value="12" min="1" onchange="updateIndicators()">
+        </div>
+        <div>
+            <label for="macd-slow">MACD Slow Period:</label>
+            <input type="number" id="macd-slow" value="26" min="1" onchange="updateIndicators()">
+        </div>
+        <div>
+            <label for="macd-signal">MACD Signal Period:</label>
+            <input type="number" id="macd-signal" value="9" min="1" onchange="updateIndicators()">
+        </div>
+        <div>
+            <label for="stochastic-k">Stochastic %K Period:</label>
+            <input type="number" id="stochastic-k" value="14" min="1" onchange="updateIndicators()">
+        </div>
+        <div>
+            <label for="stochastic-d">Stochastic %D Period:</label>
+            <input type="number" id="stochastic-d" value="3" min="1" onchange="updateIndicators()">
+        </div>
+        <div>
+            <label for="momentum-period">Momentum Period:</label>
+            <input type="number" id="momentum-period" value="10" min="1" onchange="updateIndicators()">
+        </div>
+        <div id="tradingview-chart"></div>
+        <h2>Indicators</h2>
+        <ul>
+            <li>RSI: <span id="rsi-value">Loading...</span></li>
+            <li>MACD: <span id="macd-value">Loading...</span></li>
+            <li>Stochastic: <span id="stochastic-value">Loading...</span></li>
+            <li>Awesome Oscillator: <span id="ao-value">Loading...</span></li>
+            <li>Momentum: <span id="momentum-value">Loading...</span></li>
+        </ul>
+        <h2>Recommendations</h2>
+        <div id="recommendations">
+            <p>RSI Recommendation: <span id="rsi-recommendation">Loading...</span></p>
+            <p>MACD Recommendation: <span id="macd-recommendation">Loading...</span></p>
+            <p>Stochastic Recommendation: <span id="stochastic-recommendation">Loading...</span></p>
+            <p>Awesome Oscillator Recommendation: <span id="ao-recommendation">Loading...</span></p>
+            <p>Momentum Recommendation: <span id="momentum-recommendation">Loading...</span></p>
+        </div>
+        <h2>Sentiment Analysis</h2>
+        <div id="sentiment-analysis">
+            <p>Retail Position Recommendation: <span id="retail-recommendation">Loading...</span></p>
+            <p>Market Maker Data: <span id="market-maker-data">Loading...</span></p>
+        </div>
+        <h2>Upcoming Economic Calendar</h2>
+        <div id="economic-calendar">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Date</th>
+                        <th>Event</th>
+                        <th>Impact</th>
+                        <th>Actual</th>
+                        <th>Forecast</th>
+                    </tr>
+                </thead>
+                <tbody id="calendar-body">
+                    <tr>
+                        <td colspan="5">Loading...</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
     </div>
+    <div id="trading-journal" class="tab">
+        <h2>Trading Journal</h2>
+        <input type="date" id="trade-date" placeholder="Trade Date">
+        <input type="number" id="buy-price" placeholder="Buy Price" step="0.01">
+        <input type="number" id="sell-price" placeholder="Sell Price" step="0.01">
+        <button onclick="addJournalEntry()">Add Entry</button>
+        <table id="journal-table">
             <thead>
                 <tr>
                     <th>Date</th>
+                    <th>Buy Price</th>
+                    <th>Sell Price</th>
+                    <th>Actions</th>
                 </tr>
             </thead>
+            <tbody id="journal-body">
                 <tr>
+                    <td colspan="4">No entries yet.</td>
                 </tr>
             </tbody>
         </table>
     </div>
     <script>
+        let journalEntries = [];
+        function showTab(tabName) {
+            const tabs = document.querySelectorAll('.tab');
+            tabs.forEach(tab => {
+                tab.classList.remove('active');
+            });
+            document.getElementById(tabName).classList.add('active');
+        }
         function updateChart() {
             const commodity = document.getElementById("commodity").value;
             const timeframe = document.getElementById("timeframe").value;
             const stochasticD = parseInt(document.getElementById("stochastic-d").value);
             const momentumPeriod = parseInt(document.getElementById("momentum-period").value);
             console.log("RSI Period:", rsiPeriod);
             console.log("MACD Fast Period:", macdFast);
             console.log("MACD Slow Period:", macdSlow);
             console.log("Stochastic %K Period:", stochasticK);
             console.log("Stochastic %D Period:", stochasticD);
             console.log("Momentum Period:", momentumPeriod);
+        }
+        function addJournalEntry() {
+            const tradeDate = document.getElementById("trade-date").value;
+            const buyPrice = parseFloat(document.getElementById("buy-price").value);
+            const sellPrice = parseFloat(document.getElementById("sell-price").value);
+            if (!tradeDate || isNaN(buyPrice) || isNaN(sellPrice)) {
+                alert("Please fill in all fields correctly.");
+                return;
+            }
+            journalEntries.push({ date: tradeDate, buy: buyPrice, sell: sellPrice });
+            document.getElementById("trade-date").value = ""; // Clear input
+            document.getElementById("buy-price").value = ""; // Clear input
+            document.getElementById("sell-price").value = ""; // Clear input
+            renderJournalEntries();
         }
+        function renderJournalEntries() {
+            const journalBody = document.getElementById("journal-body");
+            journalBody.innerHTML = ""; // Clear previous entries
+            if (journalEntries.length === 0) {
+                journalBody.innerHTML = "<tr><td colspan='4'>No entries yet.</td></tr>";
+                return;
+            }
+            journalEntries.forEach((entry, index) => {
+                const row = document.createElement("tr");
+                row.innerHTML = `
+                    <td>${entry.date}</td>
+                    <td>${entry.buy.toFixed(2)}</td>
+                    <td>${entry.sell.toFixed(2)}</td>
+                    <td>
+                        <span class="edit-button" onclick="editJournalEntry(${index})">Edit</span> |
+                        <span class="delete-button" onclick="deleteJournalEntry(${index})">Delete</span>
+                    </td>
+                `;
+                journalBody.appendChild(row);
+            });
+        }
+        function editJournalEntry(index) {
+            const entry = journalEntries[index];
+            const newDate = prompt("Edit Trade Date:", entry.date);
+            const newBuyPrice = prompt("Edit Buy Price:", entry.buy);
+            const newSellPrice = prompt("Edit Sell Price:", entry.sell);
+            if (newDate !== null && newBuyPrice !== null && newSellPrice !== null) {
+                journalEntries[index] = {
+                    date: newDate,
+                    buy: parseFloat(newBuyPrice),
+                    sell: parseFloat(newSellPrice)
+                };
+                renderJournalEntries();
+            }
+        }
+        function deleteJournalEntry(index) {
+            if (confirm("Are you sure you want to delete this entry?")) {
+                journalEntries.splice(index, 1);
+                renderJournalEntries();
+            }
+        }
+        function fetchIndicatorsAndSentiment(commodity, timeframe) {
             const indicators = getIndicatorsBasedOnTimeframe(timeframe);
             const sentiment = {
                 marketMakerData: Math.random() > 0.5 ? "Long" : "Short"
             };
             document.getElementById("rsi-value").innerText = indicators.rsi.toFixed(2);
             document.getElementById("macd-value").innerText = indicators.macd.toFixed(2);
             document.getElementById("stochastic-value").innerText = indicators.stochastic.toFixed(2);
             document.getElementById("ao-value").innerText = indicators.ao.toFixed(2);
             document.getElementById("momentum-value").innerText = indicators.momentum.toFixed(2);
             document.getElementById("rsi-recommendation").innerText = getRSIRecommendation(indicators.rsi);
             document.getElementById("macd-recommendation").innerText = getMACDRecommendation(indicators.macd);
             document.getElementById("stochastic-recommendation").innerText = getStochasticRecommendation(indicators.stochastic);
             document.getElementById("ao-recommendation").innerText = getAORecommendation(indicators.ao);
             document.getElementById("momentum-recommendation").innerText = getMomentumRecommendation(indicators.momentum);
             document.getElementById("retail-recommendation").innerText = sentiment.retailRecommendation;
             document.getElementById("market-maker-data").innerText = sentiment.marketMakerData;
         }
         function fetchEconomicCalendar() {
             const events = [
                 { date: "2025-06-01", event: "Manufacturing PMI", impact: "High", actual: "N/A", forecast: "52.5" },
                 { date: "2025-06-03", event: "Non-Farm Payrolls", impact: "High", actual: "N/A", forecast: "200K" },
             const calendarBody = document.getElementById("calendar-body");
             calendarBody.innerHTML = ""; // Clear previous data
             events.forEach(event => {
                 const row = document.createElement("tr");
                 row.innerHTML = `
         }
         function getIndicatorsBasedOnTimeframe(timeframe) {
             const baseValues = {
                 rsi: Math.random() * 100,
                 macd: Math.random() * 2 - 1,
                 momentum: Math.random() * 100
             };
             switch (timeframe) {
                 case "1":
+                    baseValues.rsi += 5;
                     break;
                 case "5":
+                    baseValues.macd += 0.1;
                     break;
                 case "15":
+                    baseValues.stochastic += 10;
                     break;
                 case "60":
+                    baseValues.ao += 0.5;
                     break;
                 case "240":
+                    baseValues.momentum += 15;
                     break;
                 case "D":
+                    baseValues.rsi -= 10;
                     break;
             }
         }
         function getMACDRecommendation(macd) {
+            return macd > 0 ? "Buy" : "Sell";
         }
         function getStochasticRecommendation(stochastic) {
         }
         function getAORecommendation(ao) {
+            return ao > 0 ? "Buy" : "Sell";
         }
         function getMomentumRecommendation(momentum) {
+            return momentum > 0 ? "Buy" : "Sell";
         }
         // Initialize the chart on page load