|
1 |
| -# Nuxt Minimal Starter |
| 1 | +# Stochastix UI |
2 | 2 |
|
3 |
| -Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. |
| 3 | +**Stochastix UI** is the official frontend for the [Stochastix](https://github.com/phpquant/stochastix-core) quantitative trading backtesting framework. It is a modern, fully-featured Single Page Application (SPA) built with Nuxt 3, providing a rich, interactive graphical user interface to configure, launch, and analyze backtesting results generated by the core engine. |
4 | 4 |
|
5 |
| -## Setup |
| 5 | +This application is designed to run locally, communicating with a running instance of the `stochastix-core` backend via its REST API. |
6 | 6 |
|
7 |
| -Make sure to install dependencies: |
| 7 | +## Features |
8 | 8 |
|
9 |
| -```bash |
10 |
| -# npm |
11 |
| -npm install |
12 |
| - |
13 |
| -# pnpm |
14 |
| -pnpm install |
| 9 | +- **Dynamic Backtest Configuration**: Launch new backtests by selecting from available strategies and configuring their unique parameters through a dynamically generated form. |
| 10 | +- **Comprehensive Results Visualization**: Dive deep into backtest performance with detailed reports and visualizations. |
| 11 | + - **Performance Summaries**: At-a-glance overview of key metrics like PnL, win rate, and total trades. |
| 12 | + - **Detailed Statistics**: In-depth tables for pair-by-pair performance, entry/exit tag analysis, and a full breakdown of over 20 summary metrics (Sharpe, Sortino, Drawdown, etc.). |
| 13 | + - **Visual Analysis Plots**: Interactive charts for Equity/Drawdown curves, and rolling Alpha/Beta plots against the benchmark. |
| 14 | + - **Interactive Candlestick Charts**: Visualize trades and open positions directly on the price chart, complete with overlay and pane-based indicators. |
| 15 | + - **Full Trade History**: A complete log of all closed and open positions for granular review. |
| 16 | +- **Real-Time Progress**: Monitor backtest and data download progress in real-time with progress bars connected to the backend via Mercure streams. |
| 17 | +- **Data Management**: |
| 18 | + - **Local Data Overview**: View all locally available market data, sorted by symbol and timeframe. |
| 19 | + - **Data Downloader**: An interface to queue new market data downloads from supported exchanges, with sequential processing to respect rate limits. |
| 20 | + - **Dataset Inspector**: Validate data integrity by inspecting files for gaps, duplicates, or out-of-order records, and view file metadata and data samples. |
| 21 | +- **Responsive Design**: A clean, modern UI that works seamlessly on both desktop and mobile devices. |
15 | 22 |
|
16 |
| -# yarn |
17 |
| -yarn install |
| 23 | +## Documentation |
18 | 24 |
|
19 |
| -# bun |
20 |
| -bun install |
21 |
| -``` |
| 25 | +For the latest official documentation, visit the [Stochastix Documentation](https://phpquant.github.io/stochastix-docs). |
22 | 26 |
|
23 |
| -## Development Server |
| 27 | +## Tech Stack |
24 | 28 |
|
25 |
| -Start the development server on `http://localhost:3000`: |
| 29 | +- **Framework**: [Nuxt 3](https://nuxt.com/) |
| 30 | +- **Language**: [TypeScript](https://www.typescriptlang.org/) |
| 31 | +- **UI Library**: [Nuxt UI](https://ui.nuxt.com/) |
| 32 | +- **State Management**: [Pinia](https://pinia.vuejs.org/) |
| 33 | +- **Charting**: [TradingView Lightweight Charts](https://www.tradingview.com/lightweight-charts/) |
| 34 | +- **Validation**: [Zod](https://zod.dev/) |
| 35 | +- **Internationalization**: [@nuxtjs/i18n](https://i18n.nuxtjs.org/) |
| 36 | +- **Icons**: [@nuxt/icon](https://icon.nuxt.com/) |
26 | 37 |
|
27 |
| -```bash |
28 |
| -# npm |
29 |
| -npm run dev |
| 38 | +## Prerequisites |
30 | 39 |
|
31 |
| -# pnpm |
32 |
| -pnpm dev |
| 40 | +1. **Node.js**: Version 24 or higher. |
| 41 | +2. **Stochastix Core Backend**: A running instance of the `stochastix-core` application is required for the UI to function. |
| 42 | +## Installation |
33 | 43 |
|
34 |
| -# yarn |
35 |
| -yarn dev |
| 44 | +1. Clone the repository: |
36 | 45 |
|
37 |
| -# bun |
38 |
| -bun run dev |
39 |
| -``` |
| 46 | + ```bash |
| 47 | + git clone https://github.com/phpquant/stochastix-ui.git |
| 48 | + cd stochastix-ui |
| 49 | + ``` |
40 | 50 |
|
41 |
| -## Production |
| 51 | +2. Install the dependencies: |
42 | 52 |
|
43 |
| -Build the application for production: |
| 53 | + ```bash |
| 54 | + npm install |
| 55 | + ``` |
44 | 56 |
|
45 |
| -```bash |
46 |
| -# npm |
47 |
| -npm run build |
| 57 | +## Configuration |
48 | 58 |
|
49 |
| -# pnpm |
50 |
| -pnpm build |
| 59 | +The Nuxt UI needs to know the location of the `stochastix-core` API. This is configured via an environment variable. |
51 | 60 |
|
52 |
| -# yarn |
53 |
| -yarn build |
| 61 | +Create a `.env` file in the root of the project: |
54 | 62 |
|
55 |
| -# bun |
56 |
| -bun run build |
| 63 | +```env |
| 64 | +# Example: If your backend is running on http://localhost:8000 |
| 65 | +NUXT_API_BASE_SERVER=http://localhost:8000 |
57 | 66 | ```
|
58 | 67 |
|
59 |
| -Locally preview production build: |
| 68 | +When using the provided Docker setup, this variable is automatically set in the `compose.yaml` file to point to the `php` service container. |
| 69 | + |
| 70 | +## Development |
| 71 | + |
| 72 | +To start the development server with hot-reloading on `http://localhost:3000`: |
60 | 73 |
|
61 | 74 | ```bash
|
62 |
| -# npm |
63 |
| -npm run preview |
| 75 | +npm run dev |
| 76 | +``` |
64 | 77 |
|
65 |
| -# pnpm |
66 |
| -pnpm preview |
| 78 | +The application will proxy API requests from `/api` to the backend URL specified in `NUXT_API_BASE_SERVER`. |
67 | 79 |
|
68 |
| -# yarn |
69 |
| -yarn preview |
| 80 | +## Production |
70 | 81 |
|
71 |
| -# bun |
72 |
| -bun run preview |
| 82 | +To build the application for production: |
| 83 | + |
| 84 | +```bash |
| 85 | +npm run generate |
| 86 | +``` |
| 87 | + |
| 88 | +To preview the production build locally: |
| 89 | + |
| 90 | +```bash |
| 91 | +npx serve ./output/public |
73 | 92 | ```
|
74 | 93 |
|
75 |
| -Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. |
| 94 | +For more information, see the [Nuxt Deployment Documentation](https://nuxt.com/docs/getting-started/deployment). |
0 commit comments