Skip to content

Pages

Page-specific HTML content generators.

Each function generates the HTML content for a specific dashboard page, which is then wrapped in the standard layout by render_page.

backtest_page()

Generate the backtest configuration page.

The page provides a form for configuring and running backtests with:

  • Strategy selection and parameter configuration
  • Bar period selection (Second, Minute, Hour, Day)
  • Publisher and dataset selection for data source filtering
  • Symbol search and selection with preset management
  • Date range selection constrained by available data
  • Run history display with selection and deletion

Returns:

Type Description
str

HTML string for the backtest page content.
Source code in src/onesecondtrader/dashboard/pages.py 
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
def backtest_page() -> str:
    """
    Generate the backtest configuration page.

    The page provides a form for configuring and running backtests with:

    - Strategy selection and parameter configuration
    - Bar period selection (Second, Minute, Hour, Day)
    - Publisher and dataset selection for data source filtering
    - Symbol search and selection with preset management
    - Date range selection constrained by available data
    - Run history display with selection and deletion

    Returns:
        HTML string for the backtest page content.
    """
    content = f"""
    <style>{BACKTEST_CSS}</style>
    <div class="backtest-layout">
        <div class="backtest-left">
            <div class="card">
                <h2>Settings</h2>
                <div class="form-group">
                    <label>Strategy</label>
                    <select id="strategy" onchange="loadStrategyParams()"></select>
                    <div class="section-header">Parameters</div>
                    <div id="strategy-params" class="params-container"></div>
                </div>
                <div class="form-group">
                    <label>Bar Period</label>
                    <select id="bar-period" onchange="onBarPeriodChange()">
                        <option value="">-- Select bar period --</option>
                    </select>
                </div>
                <div class="form-group" id="symbols-section" style="display: none;">
                    <label>Symbols</label>
                    <div class="symbol-section">
                        <div class="publisher-row">
                            <select id="publisher-name" onchange="onPublisherChange()">
                                <option value="">-- Select Publisher --</option>
                            </select>
                            <select id="publisher-dataset" onchange="onDatasetChange()">
                                <option value="">-- Select Dataset --</option>
                            </select>
                        </div>
                        <div id="symbol-selection" style="display: none;">
                            <div class="preset-row">
                                <select id="preset-select" onchange="loadPreset()"></select>
                                <input type="text" id="preset-name" placeholder="New preset name..." oninput="updateButtonStates()">
                                <button id="preset-save-btn" class="btn btn-sm btn-secondary" onclick="savePreset()">Save</button>
                                <button id="preset-delete-btn" class="btn btn-sm btn-danger" onclick="deletePreset()">Delete</button>
                            </div>
                            <div class="search-row">
                                <input type="text" id="symbol-search" placeholder="Search symbols..." oninput="searchSymbols()">
                            </div>
                            <div id="search-results" class="search-results"></div>
                            <div id="selected-label" class="selected-label">Selected (0):</div>
                            <div id="selected-symbols" class="selected-symbols"></div>
                        </div>
                    </div>
                </div>
                <div class="date-row">
                    <div class="form-group">
                        <label>Start Date</label>
                        <input type="date" id="start-date" onchange="clampDate('start-date')">
                    </div>
                    <div class="form-group">
                        <label>End Date</label>
                        <input type="date" id="end-date" onchange="clampDate('end-date')">
                    </div>
                </div>
                <div class="form-group" style="margin-top: 16px;">
                    <button id="run-btn" class="btn" onclick="runBacktest()" disabled>Run Backtest</button>
                </div>
            </div>
        </div>
        <div class="backtest-right">
            <div class="card">
                <h2>Runs</h2>
                <div id="runs-list" class="runs-list"></div>
            </div>
        </div>
    </div>
    <script>{BACKTEST_JS}</script>
    """
    return render_page("Backtest", content, "backtest")