{"path":"ARCHITECTURE.md","size":2916,"locked":false,"binary":false,"truncated":false,"content":"# ARCHITECTURE — CanvasQuantChartPro\n\n### Coordinate System & Layout Division\n\n```\n+-------------------------------------------------------------+-------+\n| 0,0                                                         |       |\n|                       HISTORICAL CANDLES                    | PRE-  |\n|                       (74% Avail Width)                     | DICT  |\n|                                                             | ION   |\n|   |       |               |                                 |       |\n|  [+]     [-]     |       [+]                                | (26%) |\n|   |       |     [+]       |     t0                          |       |\n|                  |              |     .. - - - - - - - [Q90]|       |\n|                                 |   .                       |       |\n|                                 | .  - - - - - - - - [Q75]  |       |\n|                                 *--------------------[MED]  |       |\n|                                 | .  - - - - - - - - [Q25]  |       |\n|                                 |   .                       |       |\n|                                 |     .. - - - - - - - [Q10]|       |\n|                                 |                           |       |\n+---------------------------------+---------------------------+-------+\n| 0,H                                                         | W, H  |\n+-------------------------------------------------------------+-------+\n```\n\n### Core Architecture Components\n\n1. **Canvas Viewport Engine:**\n   - Uses native `HTMLCanvasElement` with `2d` rendering context.\n   - Automatically handles device pixel ratios (`window.devicePixelRatio`) via canvas backing store transforms to ensure sharp rendering on Retina / 4K displays.\n\n2. **Price Axis Dynamic Scale:**\n   - Analyzes visible candlesticks to determine `minP` and `maxP`.\n   - Incorporates forecast target prices and outer quantile boundaries (`pQ10` and `pQ90`) into the price bounds calculation. This guarantees that the prediction fan is never clipped at the top or bottom of the viewport.\n   - Converts price points to Y-coordinates using linear interpolation: `toY(price) = paddingTop + chartH - ((price - yMin) / yRange) * chartH`.\n\n3. **Prediction Corridor Geometry:**\n   - **Outer Fan (Q10 to Q90):** Rendered as a closed polygon path with 12% alpha fill (`rgba(56, 189, 248, 0.12)`).\n   - **Core Confidence Band (Q25 to Q75):** Rendered as a closed polygon path with 22% alpha fill (`rgba(56, 189, 248, 0.22)`).\n   - **Expected Trajectory:** Dashed quadratic path connecting the last known close price at `NOW (t0)` to the median expected return target.\n\n4. **Interaction Pipeline:**\n   - Pan and zoom state are calculated non-destructively on the visible candle slice.\n   - Wheel events adjust zoom factor clamped between `0.5x` and `5.0x`.\n   - Mouse drag modifies pan offset clamped to available historical data boundaries.\n"}