Fix #1357: Predictoor dashboard v02

READMEs/predictoor-dashboard.md

@@ -20,35 +20,46 @@ pdr lake etl update ./my_ppss.yaml sapphire-mainnet
 
 For more information on how the lake works and how to configure it, refer to [`this readme`](./lake-and-etl.md).
 
-2. **Run the dash app from command line**
+2. **Configure ppss(Optional)**
+
+This step is optional but very useful and **highly recommended if you are running a Predictoor bot**.
+
+By configuring the **ppss -> predictoor_ss -> my_addresses** list and providing one or multiple predictoor addresses, you can easily track those addresses. The app will automatically read the addresses and display all relevant data when it starts. Additionally, if you modify settings and select different Predictoors and feeds, you can easily reset the dashboard to your Predictoor settings.
+
+3. **Run the dash app from command line**
 
 After fetching the chain data locally into the lake, the next step is to read, process, and display the data by running the dashboard with the following command:
 
 ```console
 pdr dashboard ./my_ppss.yaml sapphire-mainnet
 ```
 
-This command will open a browser window where you can select predictors and feeds to visualize their performance.
+This command will open a browser window where you can select predictoors and feeds to visualize their performance.
 
 ## **How to use**
 
-By default, the plots will be empty because no predictors or feeds are selected.
+By default, if ppss is not configured with predictoor addresses, the plots will be empty until at least one predictoor and feed are selected. Otherwise you will see stats on the provided predictoor addresses.
 
-After **selecting one or more predictors and feeds combinations** where predictions has been submitted, and the payout method called, the plots will be populated with the relevant data.
+After **selecting one or more predictors and feeds combinations** where predictions has been submitted, and the payout method called, the plots and metrics will be populated with the relevant data.
 
-You can then observe how your predictor bots or others have been performing on different feeds and even compare them.
+You can then observe how your predictoor bots or others have been performing on different feeds and even compare them.
 
 **IMPORTANT: Only predictions data where the payout method has been called are visible.**
 
 The displayed charts are:
-
 1. **Accuracy** - how predictoor accuracy has evolved durring the selected period of time.
 2. **Profit** - what is the profit in OCEAN over the period. Here you can clearly see if you are profitable or not.
 3. **Costs** - how much predictoor has staked for each epoch.
 
+
+To summarize the stats across multiple feeds and Predictoors, follow the **displayed metrics**. These include: **Average Accuracy, Total Profit, and Average Stake**. These metrics make it easy to track overall statistics for the selected Predictoors and users.
+
+
+Furthermore, you can select different periods of time for the data calculation, so you can easily see stats on **last day, last week, or last month**.
+
 ## **How to contribute**
 
-We are constantly looking for ways to improve the Predictoor dashboard to help predictors become more profitable and are open to suggestions and ideas.
+We are constantly looking for ways to improve the Predictoor dashboard to help predictoors become more profitable and are open to suggestions and ideas.
 
-If you are a predictor and want to help us improve this tool, [join our Discord channel](https://discord.gg/Tvqd7Z648H) and drop a message, or open a GitHub issue.
+If you are a predictoor and want to help us improve this tool, [join our Discord channel](https://discord.gg/Tvqd7Z648H) and drop a message, or open a GitHub issue.
 

pdr_backend/cli/arg_feed.py

@@ -24,6 +24,7 @@ def __init__(
         signal: Union[ArgSignal, str, None] = None,
         pair: Union[ArgPair, str, None] = None,
         timeframe: Optional[Union[ArgTimeframe, str]] = None,
+        contract: Optional[str] = None,
     ):
         if signal is not None:
             self.signal = ArgSignal(signal) if isinstance(signal, str) else signal
@@ -44,6 +45,8 @@ def __init__(
         else:
             self.timeframe = timeframe
 
+        self.contract = contract
+
     def __str__(self):
         feed_str = f"{self.exchange} {self.pair}"
 

pdr_backend/cli/arg_feeds.py

@@ -2,7 +2,7 @@
 # Copyright 2024 Ocean Protocol Foundation
 # SPDX-License-Identifier: Apache-2.0
 #
-from typing import List, Set, Union
+from typing import Dict, List, Optional, Set, Union
 
 from enforce_typing import enforce_types
 
@@ -77,3 +77,20 @@ def __str__(self) -> str:
     @enforce_types
     def to_strs(self) -> List[str]:
         return _pack_feeds_str(self[:])
+
+    @staticmethod
+    def from_table_data(table_data: Optional[List[Dict]]) -> "ArgFeeds":
+        if not table_data:
+            return ArgFeeds([])
+
+        return ArgFeeds(
+            [
+                ArgFeed(
+                    pair=row["pair"],
+                    contract=row["contract"],
+                    exchange=row["source"],
+                    timeframe=row["timeframe"],
+                )
+                for row in table_data
+            ]
+        )

pdr_backend/cli/test/test_arg_feed.py

@@ -35,7 +35,7 @@ def test_ArgFeed_main_constructor():
     # not ok - Type Error
     tups = [
         (),
-        ("binance", "open", "BTC/USDT", "", ""),
+        ("binance", "open", "BTC/USDT", "", "", ""),
     ]
     for feed_tup in tups:
         with pytest.raises(TypeError):

pdr_backend/pdr_dashboard/assets/styles.css

@@ -0,0 +1,99 @@
+html, body, #root {
+    margin: 0;
+    height: 100vh;
+}
+
+body{
+    padding: 10px;
+}
+
+.main-container {
+    height: calc( 100vh - 105px );
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+#page_title {
+    width: 100%;
+    text-align: center;
+    padding-top: 10px;
+    padding-bottom: 20px;
+}
+
+#error_message {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+}
+
+#loading {
+    height: calc( 100vh - 105px );
+    width: 100%;
+}
+
+#predictoors_container .show-hide {
+    display: none;
+}
+
+/* Hide the default radio circle */
+#date-period-radio-items input[type="radio"] {
+    display: none;
+}
+
+button{
+    background-color: #007BFF !important;
+    color: white;
+}
+
+/* Style the label as buttons */
+#date-period-radio-items label {
+    display: inline-block;
+    padding: 5px 14px;
+    margin-right: 10px;
+    background-color: #007BFF;
+    color: white;
+    border: 1px solid #007BFF;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+/* Style for selected label */
+#date-period-radio-items label:has(input:checked) {
+    background-color: #00254d;
+    border-color: #0056b3;
+}
+
+.form-check-label, .form-switch{
+    margin: 0;
+}
+
+.wrap-with-gap {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 10px;
+}
+
+.table-title {    
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.button-select-all {
+    border: 0;
+    min-width: 90px;
+    font-size: 15px;
+    background-color: #dedede;
+    border-radius: 3px;
+}
+
+.button-clear-all {
+    border: 0;
+    font-size: 15px;
+    background-color: #dedede;
+    border-radius: 3px;
+}

pdr_backend/pdr_dashboard/dash_components/app_constants.py

@@ -0,0 +1,9 @@
+PREDICTOOR_TABLE_COLUMNS = [
+    {"name": "User Address", "id": "user_address"},
+    {"name": "Profit", "id": "total_profit"},
+    {"name": "Accuracy", "id": "avg_accuracy"},
+    {"name": "Stake", "id": "avg_stake"},
+    {"name": "User", "id": "user"},
+]
+
+PREDICTOOR_TABLE_HIDDEN_COLUMNS = ["user"]