Merge pull request #47 from hummingbot/feat/base-page-class

Feat/base page class

INSTALLATION.md

@@ -0,0 +1,70 @@
+## Requirements
+
+You will need to install [StreamLit](https://streamlit.io/). For information about Streamlit installation, see the instructions located at https://docs.streamlit.io/library/get-started/installation.
+
+You will also need to install either [Anaconda](https://www.anaconda.com/) or [Miniconda](https://docs.conda.io/en/latest/miniconda.html) to get Conda:
+* [Anaconda](https://www.anaconda.com/) is a comprehensive Python distribution that includes a large number of pre-installed data science libraries and packages. It is designed to be an all-in-one solution for data science and machine learning tasks. When you install Anaconda, it comes with a collection of popular Python packages like NumPy, pandas, matplotlib, scikit-learn, and more. 
+* [Miniconda](https://docs.conda.io/en/latest/miniconda.html) is a minimal version of Anaconda. It includes only the essential components, such as Python interpreter and Conda package manager. Unlike Anaconda, Miniconda doesn't come with pre-installed packages, which makes its download size much smaller. 
+
+This repository is maintained by Hummingbot Foundation as a companion for users of [Hummingbot](https://github.com/hummingbot/hummingbot), the open source framework for building high-frequency crypto trading bots.
+
+Watch this video to understand how it works:
+https://www.loom.com/share/72d05bcbaf4048a399e3f9247d756a63
+
+## Installation
+
+1. Install Steamlit and Conda packages utilizing their instructions for your specific environment:
+* Install  [StreamLit](https://docs.streamlit.io/library/get-started/installation)
+* Install [Anaconda](https://docs.anaconda.com/free/anaconda/install/index.html) or [Miniconda](https://docs.conda.io/en/latest/miniconda.html)
+
+2. Clone this repo and navigate to the created directory
+```bash
+git clone https://github.com/hummingbot/dashboard.git
+cd dashboard
+```
+
+3. Run conda command to create an isolated `conda` environment and install dependencies
+```
+conda env create -f environment_conda.yml
+```
+
+4. Activate the isoldated 'conda' environment
+```bash
+conda activate dashboard
+```
+
+5. Run the app
+```bash
+streamlit run main.py
+```
+
+## Data Feed
+
+Your `dashboard` environment needs to have access to the database for your Hummingbot environment. This is done by setting up a symbolic link to the 'data' directory of your running Hummingbot instance. 
+
+The data directory differs for Docker versus Source installed Hummingbot. Data directory for each is as follows:
+* Docker installed: /path/to/hummingbot/hummingbot_files/data
+* Source installed: /path/to/hummingbot/data
+
+
+Create a symlink to your Hummingbot `/data` directory
+```bash
+# replace `/path/to/hummingbotdata` with the actual path
+ln -s /path/to/hummingbotdata data
+
+# if you need to remove the symlink
+unlink data
+```
+
+## Updating Dependencies
+
+To update the `dashboard` environment for new dependencies, run:
+```
+conda env update -f environment_conda.yml
+```
+
+To updated the `dashboard` source for latest version, run:
+```
+cd dashboard
+git pull
+```

README.md

@@ -1,129 +1,31 @@
-# Hummingbot Dashboard
+Hummingbot Dashboard is a community project to build dashboards that help you deploy, manage, backtest, and analyze Hummingbot instances (and much more!) Each dashboard is maintained by 1-2 community members.
 
-Collection of data visualization and analysis Hummingbot-related dashboards. The dashboards helps you run and manage Hummingbot, analyze performance, analyze trade data, and much more!
-
-Dashboard is built using [StreamLit](https://streamlit.io/) and uses the Conda environment & package manager to simiplify installation, updates, and manage dependencies. 
-
-You will need to install [StreamLit](https://streamlit.io/). For information about Streamlit installation, see the instructions located at https://docs.streamlit.io/library/get-started/installation.
-
-You will also need to install either [Anaconda](https://www.anaconda.com/) or [Miniconda](https://docs.conda.io/en/latest/miniconda.html) to get Conda:
-* [Anaconda](https://www.anaconda.com/) is a comprehensive Python distribution that includes a large number of pre-installed data science libraries and packages. It is designed to be an all-in-one solution for data science and machine learning tasks. When you install Anaconda, it comes with a collection of popular Python packages like NumPy, pandas, matplotlib, scikit-learn, and more. 
-* [Miniconda](https://docs.conda.io/en/latest/miniconda.html) is a minimal version of Anaconda. It includes only the essential components, such as Python interpreter and Conda package manager. Unlike Anaconda, Miniconda doesn't come with pre-installed packages, which makes its download size much smaller. 
-
-This repository is maintained by Hummingbot Foundation as a companion for users of [Hummingbot](https://github.com/hummingbot/hummingbot), the open source framework for building high-frequency crypto trading bots.
-
-Watch this video to understand how it works:
-https://www.loom.com/share/72d05bcbaf4048a399e3f9247d756a63
-
-
-
-## Dashboards
+### Dashboards
 
 Here are the current dashboards in the collection:
 
-### 🚀 Strategy Performance (WIP)
-
-Dashboard that helps you analyze the performance of a running Hummingbot instance
-
-### 🧙 XE Token Analyzer
-
-Dashboard that helps you visualize the bid-ask spread and volume of different tokens across the crypto exchange landscape. 
-
-This app is most helpful for Hummingbot users running the [Cross-Exchange Market Making](https://hummingbot.org/strategies/cross-exchange-market-making/) and [Arbitrage](https://hummingbot.org/strategies/arbitrage/) strategies.
-
-### 🧳 Hummingbot DB
-
-Inspect and analyze the orders and trades data contained in a SQLite database for a strategy or script. 
-
-These files are located in the `/data` folder in Hummingbot, and are named `<strategy_name>.sqlite`.
-
-### 🦉 TVL vs MCAP Analysis
-
-Easily compare various DeFi protocols based on their market capitalization and total value locked, using DeFiLlama data.
-
-### 🗂 Candles Downloader
-
-Download historical exchange data as OHLVC candles. Supports multiple trading pairs and custom time ranges/intervals.
-
-Current Hummingbot connectors supported:
-* `binance`
-* `binance_perpetual`
-
-### 📋 Data
-
-Reference data for the various apps this collection.
-
-## Installation
-
-1. Install Steamlit and Conda packages utilizing their instructions for your specific environment:
-* Install  [StreamLit](https://docs.streamlit.io/library/get-started/installation)
-* Install [Anaconda](https://docs.anaconda.com/free/anaconda/install/index.html) or [Miniconda](https://docs.conda.io/en/latest/miniconda.html)
-
-2. Clone this repo and navigate to the created directory
-```bash
-git clone https://github.com/hummingbot/dashboard.git
-cd dashboard
-```
-
-3. Run conda command to create an isolated `conda` environment and install dependencies
-```
-conda env create -f environment_conda.yml
-```
-
-4. Activate the isoldated 'conda' environment
-```bash
-conda activate dashboard
-```
-
-5. Run the app
-```bash
-streamlit run main.py
-```
-
-## Data Feed
-
-Your `dashboard` environment needs to have access to the database for your Hummingbot environment. This is done by setting up a symbolic link to the 'data' directory of your running Hummingbot instance. 
-
-The data directory differs for Docker versus Source installed Hummingbot. Data directory for each is as follows:
-* Docker installed: /path/to/hummingbot/hummingbot_files/data
-* Source installed: /path/to/hummingbot/data
-
-
-Create a symlink to your Hummingbot `/data` directory
-```bash
-# replace `/path/to/hummingbotdata` with the actual path
-ln -s /path/to/hummingbotdata data
-
-# if you need to remove the symlink
-unlink data
-```
-
-
-
-## Updates
-
-To update the `dashboard` environment for new dependencies, run:
-```
-conda env update -f environment_conda.yml
-```
+* 🚀 **Strategy Performance**: Analyze the performance of a running Hummingbot instance
+* 🐙 **Bot Orchestration**: Deploy and manage Hummingbot instances
+* ⚙️ **Backtest Manager**: Deploy and manage backtests of directional strategies
+* 🗂 **Candles Downloader**: Download historical exchange data as OHLVC candles. Supports multiple trading pairs and custom time ranges/intervals.
+* 🔍 **DB Inspector**: Inspect and analyze the orders and trades data contained in a Hummingbot strategy database
+* 🧙 **Token Spreads**: Identify cross-exchange trading opportunities by analyzing differences in token spreads across venues
+* 🦉 **TVL vs MCAPs**: Easily compare various DeFi protocols based on their market capitalization and total value locked, using DeFiLlama data.
 
-To updated the `dashboard` source for latest version, run:
-```
-cd dashboard
-git pull
-```
+### Installation
 
-## Contributions
+This project is built using [StreamLit](https://streamlit.io/) and uses Anaconda and Docker to simplify installation, updates, and manage dependencies. 
 
-We welcome new data dashboards, bug fixes, and improvements by the community!
+See [Installation](https://github.com/hummingbot/dashboard/blob/feat/base-page-class/INSTALLATION.md) for how to install and update the dashboard.
 
-To submit a contribution, fork a clone of repository, add or make changes, and issue a pull request. See general guidelines for contributing to Hummingbot listed at https://hummingbot.org/developers/contributions.
+### Contributions
 
+We welcome contributions from the community! See [Contribution](https://github.com/hummingbot/dashboard/blob/feat/base-page-class/CONTRIBUTING.md) for more information.
 
-## Participation
+### Meetings
 
 We hold bi-weekly livestream Dashboard project meetings. You can participate on our [Discord](https://discord.gg/hummingbot) 
-* Alternating Thursdays, 3pm GMT / 11am EST / 8am PST / 11pm SIN
+* Alternating Wenesdays, 3pm GMT / 11am EST / 8am PST / 11pm SIN
 * Design, Status, Demos, etc
 
 

environment_conda.yml

@@ -19,6 +19,8 @@ dependencies:
       - jupyter
       - optuna
       - optuna-dashboard
+      - pathlib
       - streamlit-ace
+      - st-pages
       - git+https://github.com/hummingbot/hbot-remote-client-py.git
       - git+https://github.com/hummingbot/docker-manager.git

main.py

@@ -1,19 +1,27 @@
 import streamlit as st
+from st_pages import Page, show_pages
 
-apptitle = "High Frequency Trading"
-st.set_page_config(page_title=apptitle, page_icon="🦅", layout="wide")
+from utils.st_utils import initialize_st_page
+
+
+initialize_st_page(title="Hummingbot Dashboard", icon="📊")
+
+show_pages(
+    [
+        Page("main.py", "Hummingbot Dashboard", "📊"),
+        Page("pages/strategy_performance/app.py", "Strategy Performance", "🚀"),
+        Page("pages/bot_orchestration/app.py", "Bot Orchestration", "🐙"),
+        Page("pages/backtest_manager/app.py", "Backtest Manager", "⚙️"),
+        Page("pages/candles_downloader/app.py", "Candles Downloader", "🗂"),
+        Page("pages/db_inspector/app.py", "DB Inspector", "🔍"),
+        Page("pages/token_spreads/app.py", "Token Spreads", "🧙"),
+        Page("pages/tvl_vs_mcap/app.py", "TVL vs Market Cap", "🦉"),
+    ]
+)
 
-st.title("Welcome!")
-st.write("---")
-st.code("💡 The purpose of this dashboard is to provide useful information for high frequency trading traders")
-st.write("")
 st.write("Watch this video to understand how the dashboard works! 🦅")
 c1, c2, c3 = st.columns([1, 6, 1])
 with c2:
     st.video("https://youtu.be/l6PWbN2pDK8")
 st.write("If you want to contribute, post your idea in #dev-channel of [hummingbot discord](https://discord.gg/CjxZtkrH)")
 st.write("---")
-
-
-
-

pages/backtest_manager/README.md

@@ -0,0 +1 @@
+Deploy and manage backtests of directional strategies

pages/9_⚙️_Backtesting.py → pages/backtest_manager/app.py

@@ -12,16 +12,15 @@
 from utils.os_utils import load_directional_strategies, save_file, get_function_from_file
 import optuna
 
-st.set_page_config(
-    page_title="Hummingbot Dashboard",
-    page_icon="🚀",
-    layout="wide",
-)
+from utils.st_utils import initialize_st_page
+
+
+initialize_st_page(title="Backtest Manager", icon="⚙️")
+
+# Start content here
 if "strategy_params" not in st.session_state:
     st.session_state.strategy_params = {}
 
-st.title("⚙️ Backtesting")
-
 create, modify, backtest, optimize, analyze = st.tabs(["Create", "Modify", "Backtest", "Optimize", "Analyze"])
 
 with create:

pages/bot_orchestration/README.md

@@ -0,0 +1 @@
+Deploy and manage Hummingbot instances

pages/8_🐙_Bot_Orchestration.py → pages/bot_orchestration/app.py

@@ -1,21 +1,17 @@
 import time
-
+import constants
 import pandas as pd
-from hbotrc import BotCommands
 import streamlit as st
+
 from docker_manager import DockerManager
+from hbotrc import BotCommands
 
-import constants
+from utils.st_utils import initialize_st_page
 
-st.set_page_config(
-    page_title="Hummingbot Dashboard",
-    page_icon=":bar_chart:",
-    layout="wide",
-    initial_sidebar_state="collapsed"
-)
-st.title("🐙 Bot Orchestration")
-st.write("---")
 
+initialize_st_page(title="Bot Orchestration", icon="🐙")
+
+# Start content here
 docker_manager = DockerManager()
 
 active_containers = docker_manager.get_active_containers()

pages/candles_downloader/README.md

@@ -0,0 +1 @@
+Download historical exchange data as OHLVC candles. Supports multiple trading pairs and custom time ranges/intervals.

pages/6_🗂_Candles_Downloader.py → pages/candles_downloader/app.py

@@ -7,14 +7,13 @@
 from utils import os_utils
 from docker_manager import DockerManager
 
-st.set_page_config(
-    page_title="Candles Downloader",
-    page_icon=":bar_chart:",
-    layout="wide",
-)
+from utils.st_utils import initialize_st_page
+
+
+initialize_st_page(title="Candles Downloader", icon="🗂️")
+
+# Start content here
 docker_manager = DockerManager()
-st.write(f"# 🗂️ Candles Downloader")
-st.write("---")
 
 c1, c2, c3 = st.columns([2, 2, 0.5])
 with c1:

pages/db_inspector/README.md

@@ -0,0 +1 @@
+Inspect and analyze the orders and trades data contained in a Hummingbot strategy database

pages/4_🧳_Hummingbot_DB.py → pages/db_inspector/app.py

@@ -3,6 +3,12 @@
 import sqlite3
 import pandas as pd
 
+from utils.st_utils import initialize_st_page
+
+
+initialize_st_page(title="DB Inspector", icon="🔍")
+
+# Start content here
 @st.cache_data
 def get_table_data(database_name: str, table_name: str):
     conn = sqlite3.connect(database_name)
@@ -17,9 +23,6 @@ def get_all_tables(database_name: str):
     tables = [table_row[0] for table_row in cursor.fetchall()]
     return tables
 
-st.set_page_config(layout='wide')
-st.title("🧳 Hummingbot Database Analyzer")
-st.write("---")
 uploaded_file = st.file_uploader("Add your database")
 
 if uploaded_file is not None: