(feat) add grid pages

pages/config/grid_strike/README.md

@@ -0,0 +1,80 @@
+# MACD BB V1 Configuration Tool
+
+Welcome to the MACD BB V1 Configuration Tool! This tool allows you to create, modify, visualize, backtest, and save configurations for the MACD BB V1 directional trading strategy. Here’s how you can make the most out of it.
+
+## Features
+
+- **Start from Default Configurations**: Begin with a default configuration or use the values from an existing configuration.
+- **Modify Configuration Values**: Change various parameters of the configuration to suit your trading strategy.
+- **Visualize Results**: See the impact of your changes through visual charts.
+- **Backtest Your Strategy**: Run backtests to evaluate the performance of your strategy.
+- **Save and Deploy**: Once satisfied, save the configuration to deploy it later.
+
+## How to Use
+
+### 1. Load Default Configuration
+
+Start by loading the default configuration for the MACD BB V1 strategy. This provides a baseline setup that you can customize to fit your needs.
+
+### 2. User Inputs
+
+Input various parameters for the strategy configuration. These parameters include:
+
+- **Connector Name**: Select the trading platform or exchange.
+- **Trading Pair**: Choose the cryptocurrency trading pair.
+- **Leverage**: Set the leverage ratio. (Note: if you are using spot trading, set the leverage to 1)
+- **Total Amount (Quote Currency)**: Define the total amount you want to allocate for trading.
+- **Max Executors per Side**: Specify the maximum number of executors per side.
+- **Cooldown Time**: Set the cooldown period between trades.
+- **Position Mode**: Choose between different position modes.
+- **Candles Connector**: Select the data source for candlestick data.
+- **Candles Trading Pair**: Choose the trading pair for candlestick data.
+- **Interval**: Set the interval for candlestick data.
+- **Bollinger Bands Length**: Define the length of the Bollinger Bands.
+- **Standard Deviation Multiplier**: Set the standard deviation multiplier for the Bollinger Bands.
+- **Long Threshold**: Configure the threshold for long positions.
+- **Short Threshold**: Configure the threshold for short positions.
+- **MACD Fast**: Set the fast period for the MACD indicator.
+- **MACD Slow**: Set the slow period for the MACD indicator.
+- **MACD Signal**: Set the signal period for the MACD indicator.
+- **Risk Management**: Set parameters for stop loss, take profit, time limit, and trailing stop settings.
+
+### 3. Visualize Indicators
+
+Visualize the Bollinger Bands and MACD on the OHLC (Open, High, Low, Close) chart to see the impact of your configuration. Here are some hints to help you fine-tune the indicators:
+
+- **Bollinger Bands Length**: A larger length will make the Bollinger Bands wider and smoother, while a smaller length will make them narrower and more volatile.
+- **Long Threshold**: This is a reference to the Bollinger Band. A value of 0 means the lower band, and a value of 1 means the upper band. For example, if the long threshold is 0, long positions will only be taken if the price is below the lower band.
+- **Short Threshold**: Similarly, a value of 1.1 means the price must be above the upper band by 0.1 of the band’s range to take a short position.
+- **Thresholds**: The closer you set the thresholds to 0.5, the more trades will be executed. The farther away they are, the fewer trades will be executed.
+- **MACD**: The MACD is used to determine trend changes. If the MACD value is negative and the histogram becomes positive, it signals a market trend up, suggesting a long position. Conversely, if the MACD value is positive and the histogram becomes negative, it signals a market trend down, suggesting a short position.
+
+### Combining MACD and Bollinger Bands for Trade Signals
+
+The MACD BB V1 strategy uses the MACD to identify potential trend changes and the Bollinger Bands to filter these signals:
+
+- **Long Signal**: The MACD value must be negative, and the histogram must become positive, indicating a potential uptrend. The price must also be below the long threshold of the Bollinger Bands (e.g., below the lower band if the threshold is 0).
+- **Short Signal**: The MACD value must be positive, and the histogram must become negative, indicating a potential downtrend. The price must also be above the short threshold of the Bollinger Bands (e.g., above the upper band if the threshold is 1.1).
+
+This combination ensures that you only take trend-following trades when the market is already deviated from the mean, enhancing the effectiveness of your trading strategy.
+
+### 4. Executor Distribution
+
+The total amount in the quote currency will be distributed among the maximum number of executors per side. For example, if the total amount quote is 1000 and the max executors per side is 5, each executor will have 200 to trade. If the signal is on, the first executor will place an order and wait for the cooldown time before the next one executes, continuing this pattern for the subsequent orders.
+
+### 5. Backtesting
+
+Run backtests to evaluate the performance of your configured strategy. The backtesting section allows you to:
+
+- **Process Data**: Analyze historical trading data.
+- **Visualize Results**: See performance metrics and charts.
+- **Evaluate Accuracy**: Assess the accuracy of your strategy’s predictions and trades.
+- **Understand Close Types**: Review different types of trade closures and their frequencies.
+
+### 6. Save Configuration
+
+Once you are satisfied with your configuration and backtest results, save the configuration for future use in the Deploy tab. This allows you to deploy the same strategy later without having to reconfigure it from scratch.
+
+---
+
+Feel free to experiment with different configurations to find the optimal setup for your trading strategy. Happy trading!

pages/config/grid_strike/app.py

@@ -0,0 +1,151 @@
+import plotly.graph_objects as go
+import streamlit as st
+from hummingbot.core.data_type.common import TradeType
+from plotly.subplots import make_subplots
+
+from frontend.components.backtesting import backtesting_section
+from frontend.components.config_loader import get_default_config_loader
+from frontend.components.save_config import render_save_config
+from frontend.pages.config.grid_strike.user_inputs import user_inputs
+from frontend.pages.config.utils import get_candles
+from frontend.st_utils import get_backend_api_client, initialize_st_page
+from frontend.visualization import theme
+from frontend.visualization.candles import get_candlestick_trace
+from frontend.visualization.utils import add_traces_to_fig
+
+
+def get_grid_range_traces(grid_ranges):
+    """Generate horizontal line traces for grid ranges with different colors."""
+    dash_styles = ['solid', 'dash', 'dot', 'dashdot', 'longdash']  # 5 different styles
+    
+    traces = []
+    buy_count = 0
+    sell_count = 0
+    
+    for i, grid_range in enumerate(grid_ranges):
+        # Set color based on trade type
+        if grid_range["side"] == TradeType.BUY:
+            color = 'rgba(0, 255, 0, 1)'  # Bright green for buy
+            dash_style = dash_styles[buy_count % len(dash_styles)]
+            buy_count += 1
+        else:
+            color = 'rgba(255, 0, 0, 1)'  # Bright red for sell
+            dash_style = dash_styles[sell_count % len(dash_styles)]
+            sell_count += 1
+        
+        # Start price line
+        traces.append(go.Scatter(
+            x=[],  # Will be set to full range when plotting
+            y=[float(grid_range["start_price"]), float(grid_range["start_price"])],
+            mode='lines',
+            line=dict(color=color, width=1.5, dash=dash_style),
+            name=f'Range {i} Start: {float(grid_range["start_price"]):,.2f} ({grid_range["side"].name})',
+            hoverinfo='name'
+        ))
+        
+        # End price line
+        traces.append(go.Scatter(
+            x=[],  # Will be set to full range when plotting
+            y=[float(grid_range["end_price"]), float(grid_range["end_price"])],
+            mode='lines',
+            line=dict(color=color, width=1.5, dash=dash_style),
+            name=f'Range {i} End: {float(grid_range["end_price"]):,.2f} ({grid_range["side"].name})',
+            hoverinfo='name'
+        ))
+    
+    return traces
+
+# Initialize the Streamlit page
+initialize_st_page(title="Grid Strike", icon="📊", initial_sidebar_state="expanded")
+backend_api_client = get_backend_api_client()
+
+get_default_config_loader("grid_strike")
+# User inputs
+inputs = user_inputs()
+st.session_state["default_config"].update(inputs)
+
+# Load candle data
+candles = get_candles(
+    connector_name=inputs["connector_name"],
+    trading_pair=inputs["trading_pair"],
+    interval=inputs["interval"],
+    days=inputs["days_to_visualize"]
+)
+
+# Create a subplot with just 1 row for price action
+fig = make_subplots(
+    rows=1, cols=1,
+    subplot_titles=(f'Grid Strike - {inputs["trading_pair"]} ({inputs["interval"]})',),
+)
+
+# Add basic candlestick chart
+candlestick_trace = get_candlestick_trace(candles)
+add_traces_to_fig(fig, [candlestick_trace], row=1, col=1)
+
+# Add grid range visualization
+grid_traces = get_grid_range_traces(inputs["grid_ranges"])
+for trace in grid_traces:
+    # Set the x-axis range for all grid traces
+    trace.x = [candles.index[0], candles.index[-1]]
+    fig.add_trace(trace, row=1, col=1)
+
+# Update y-axis to make sure all grid ranges and candles are visible
+all_prices = []
+# Add candle prices
+all_prices.extend(candles['high'].tolist())
+all_prices.extend(candles['low'].tolist())
+# Add grid range prices
+for grid_range in inputs["grid_ranges"]:
+    all_prices.extend([float(grid_range["start_price"]), float(grid_range["end_price"])])
+
+y_min, y_max = min(all_prices), max(all_prices)
+padding = (y_max - y_min) * 0.1  # Add 10% padding
+fig.update_yaxes(range=[y_min - padding, y_max + padding])
+
+# Update layout for better visualization
+layout_updates = {
+    "legend": dict(
+        yanchor="top",
+        y=0.99,
+        xanchor="left",
+        x=0.01,
+        bgcolor="rgba(0,0,0,0.5)"
+    ),
+    "hovermode": 'x unified',
+    "showlegend": True,
+    "height": 600,  # Make the chart taller
+    "yaxis": dict(
+        fixedrange=False,  # Allow y-axis zooming
+        autorange=True,    # Enable auto-ranging
+    )
+}
+
+# Merge the default theme with our updates
+fig.update_layout(
+    **(theme.get_default_layout() | layout_updates)
+)
+
+# Use Streamlit's functionality to display the plot
+st.plotly_chart(fig, use_container_width=True)
+
+# Add after user inputs and before saving
+def prepare_config_for_save(config):
+    """Prepare config for JSON serialization."""
+    prepared_config = config.copy()
+    grid_ranges = []
+    for grid_range in prepared_config["grid_ranges"]:
+        grid_range = grid_range.copy()
+        grid_range["side"] = grid_range["side"].value
+        grid_range["open_order_type"] = grid_range["open_order_type"].value
+        grid_range["take_profit_order_type"] = grid_range["take_profit_order_type"].value
+        grid_ranges.append(grid_range)
+    prepared_config["grid_ranges"] = grid_ranges
+    prepared_config["position_mode"] = prepared_config["position_mode"].value
+    del prepared_config["candles_connector"]
+    del prepared_config["interval"]
+    del prepared_config["days_to_visualize"]
+    return prepared_config
+
+# Replace the render_save_config line with:
+render_save_config(st.session_state["default_config"]["id"], 
+                  prepare_config_for_save(st.session_state["default_config"]))

pages/config/grid_strike/user_inputs.py

@@ -0,0 +1,254 @@
+from decimal import Decimal
+from typing import Dict, List
+
+import streamlit as st
+from hummingbot.core.data_type.common import OrderType, PositionMode, TradeType
+
+from frontend.pages.config.utils import get_candles
+
+
+def get_price_range_defaults(connector_name: str, trading_pair: str, interval: str, days: int = 7):
+    """Fetch candles and compute default price range based on recent min/max prices."""
+    try:
+        candles = get_candles(
+            connector_name=connector_name,
+            trading_pair=trading_pair,
+            interval=interval,
+            days=days
+        )
+        
+        min_price = float(candles['low'].quantile(0.05))
+        max_price = float(candles['high'].quantile(0.95))
+        
+        return round(min_price, 2), round(max_price, 2)
+    except Exception as e:
+        st.warning(f"Could not fetch price data: {str(e)}. Using default values.")
+        return 40000.0, 60000.0  # Fallback defaults
+
+def get_grid_range_traces(grid_ranges):
+    """Generate horizontal line traces for grid ranges with different colors."""
+    dash_styles = ['solid', 'dash', 'dot', 'dashdot', 'longdash']  # 5 different styles
+    
+    traces = []
+    buy_count = 0
+    sell_count = 0
+    
+    for i, grid_range in enumerate(grid_ranges):
+        # Set color based on trade type
+        if grid_range["side"] == TradeType.BUY:
+            color = 'rgba(0, 255, 0, 1)'  # Bright green for buy
+            dash_style = dash_styles[buy_count % len(dash_styles)]
+            buy_count += 1
+        else:
+            color = 'rgba(255, 0, 0, 1)'  # Bright red for sell
+            dash_style = dash_styles[sell_count % len(dash_styles)]
+            sell_count += 1
+        
+        # Start price line
+        traces.append(go.Scatter(
+            x=[],  # Will be set to full range when plotting
+            y=[float(grid_range["start_price"]), float(grid_range["start_price"])],
+            mode='lines',
+            line=dict(color=color, width=1.5, dash=dash_style),
+            name=f'Range {i} Start: {float(grid_range["start_price"]):,.2f} ({grid_range["side"].name})',
+            hoverinfo='name'
+        ))
+        
+        # End price line
+        traces.append(go.Scatter(
+            x=[],  # Will be set to full range when plotting
+            y=[float(grid_range["end_price"]), float(grid_range["end_price"])],
+            mode='lines',
+            line=dict(color=color, width=1.5, dash=dash_style),
+            name=f'Range {i} End: {float(grid_range["end_price"]):,.2f} ({grid_range["side"].name})',
+            hoverinfo='name'
+        ))
+    
+    return traces
+
+def user_inputs():
+    default_config = st.session_state.get("default_config", {})
+    
+    # Split the page into two columns for the expanders
+    left_col, right_col = st.columns(2)
+    
+    with left_col:
+        # Basic trading parameters
+        with st.expander("Basic Configuration", expanded=True):
+            c1, c2, c3 = st.columns(3)
+            with c1:
+                connector_name = st.text_input("Connector Name", value="binance")
+            with c2:
+                trading_pair = st.text_input("Trading Pair", value="BTC-USDT")
+            with c3:
+                leverage = st.number_input("Leverage", min_value=1, value=20)
+        
+        # Visualization Configuration
+        with st.expander("Chart Configuration", expanded=True):
+            c1, c2, c3 = st.columns(3)
+            with c1:
+                candles_connector = st.text_input(
+                    "Candles Connector",
+                    value=connector_name,  # Use same connector as trading by default
+                    help="Connector to fetch price data from"
+                )
+            with c2:
+                interval = st.selectbox(
+                    "Interval",
+                    options=["1m", "3m", "5m", "15m", "30m", "1h", "2h", "4h", "6h", "12h", "1d"],
+                    index=10,  # Default to 30m
+                    help="Candlestick interval"
+                )
+            with c3:
+                days_to_visualize = st.number_input(
+                    "Days to Display",
+                    min_value=1,
+                    max_value=365,
+                    value=180,
+                    help="Number of days of historical data to display"
+                )
+
+        # Get default price ranges based on current market data
+        default_min, default_max = get_price_range_defaults(
+            candles_connector,
+            trading_pair,
+            interval,
+            days_to_visualize
+        )
+                
+        # Grid Ranges Configuration
+        with st.expander("Grid Ranges", expanded=True):
+            grid_ranges = []
+            num_ranges = st.number_input("Number of Grid Ranges", min_value=1, max_value=5, value=1)
+            
+            for i in range(num_ranges):
+                st.markdown(f"#### Range {i}")
+                
+                # Price configuration
+                c1, c2, c3, c4 = st.columns(4)
+                with c1:
+                    # Set default start price based on side
+                    side = st.selectbox(
+                        f"Side {i}",
+                        options=[TradeType.BUY.name, TradeType.SELL.name],
+                        key=f"side_{i}"
+                    )
+                
+                with c2:
+                    # Set default start price based on side
+                    start_price = st.number_input(
+                        f"Start Price {i}",
+                        value=default_min,
+                        key=f"start_price_{i}"
+                    )
+                
+                with c3:
+                    # Set default end price based on side
+                    end_price = st.number_input(
+                        f"End Price {i}",
+                        value=default_max,
+                        key=f"end_price_{i}"
+                    )
+                
+                with c4:
+                    total_amount_pct = st.number_input(
+                        f"Amount % {i}",
+                        min_value=0.0,
+                        max_value=100.0,
+                        value=10.0,
+                        key=f"amount_pct_{i}"
+                    )
+                
+                st.markdown("---")
+                
+                grid_ranges.append({
+                    "id": f"R{i}",
+                    "start_price": Decimal(str(start_price)),
+                    "end_price": Decimal(str(end_price)),
+                    "total_amount_pct": Decimal(str(total_amount_pct/100)),
+                    "side": TradeType[side],
+                    "open_order_type": OrderType.LIMIT_MAKER,
+                    "take_profit_order_type": OrderType.LIMIT
+                })
+
+    with right_col:
+        # Amount configuration
+        with st.expander("Amount Configuration", expanded=True):
+            total_amount_quote = st.number_input(
+                "Total Amount (Quote)", 
+                min_value=0.0, 
+                value=1000.0,
+                help="Total amount in quote currency to use for trading"
+            )
+            min_order_amount = st.number_input(
+                "Minimum Order Amount",
+                min_value=1.0,
+                value=10.0,
+                help="Minimum amount for each order"
+            )
+
+        # Advanced Configuration
+        with st.expander("Advanced Configuration", expanded=True):
+            position_mode = st.selectbox(
+                "Position Mode",
+                options=["HEDGE", "ONEWAY"],
+                index=0
+            )
+            
+            c1, c2 = st.columns(2)
+            with c1:
+                time_limit = st.number_input(
+                    "Time Limit (hours)",
+                    min_value=1,
+                    value=48,
+                    help="Strategy time limit in hours"
+                )
+                min_spread = st.number_input(
+                    "Min Spread Between Orders",
+                    min_value=0.0000,
+                    value=0.0001,
+                    format="%.4f",  # Show 3 decimal places
+                    help="Minimum price difference between orders",
+                    step=0.0001
+                )
+                activation_bounds = st.number_input(
+                    "Activation Bounds",
+                    min_value=0.0,
+                    value=0.01,
+                    format="%.4f",
+                    help="Price deviation to trigger updates"
+                )
+            with c2:
+                max_open_orders = st.number_input(
+                    "Maximum Open Orders",
+                    min_value=1,
+                    value=5,
+                    help="Maximum number of open orders"
+                )
+                grid_update_interval = st.number_input(
+                    "Grid Update Interval (s)",
+                    min_value=1,
+                    value=60,
+                    help="How often to update grid ranges"
+                )
+
+    return {
+        "controller_name": "grid_strike",
+        "controller_type": "generic",
+        "connector_name": connector_name,
+        "candles_connector": candles_connector,
+        "trading_pair": trading_pair,
+        "interval": interval,
+        "days_to_visualize": days_to_visualize,
+        "leverage": leverage,
+        "total_amount_quote": Decimal(str(total_amount_quote)),
+        "grid_ranges": grid_ranges,
+        "position_mode": PositionMode[position_mode],
+        "time_limit": time_limit * 60 * 60,
+        "activation_bounds": Decimal(str(activation_bounds)),
+        "min_spread_between_orders": Decimal(str(min_spread)) if min_spread > 0 else None,
+        "min_order_amount": Decimal(str(min_order_amount)),
+        "max_open_orders": max_open_orders,
+        "grid_range_update_interval": grid_update_interval,
+        "extra_balance_base_usd": Decimal("10")
+    }

pages/permissions.py

@@ -8,6 +8,7 @@ def main_page():
 def public_pages():
     return [
         Section("Config Generator", "🎛️"),
+        Page("frontend/pages/config/grid_strike/app.py", "Grid Strike", "🎳"),
         Page("frontend/pages/config/pmm_simple/app.py", "PMM Simple", "👨‍🏫"),
         Page("frontend/pages/config/pmm_dynamic/app.py", "PMM Dynamic", "👩‍🏫"),
         Page("frontend/pages/config/dman_maker_v2/app.py", "D-Man Maker V2", "🤖"),