Added fibonacci tool

improved tools toolbox and tooltips
Multiple tweaks

Author: alaa-eddine

demo/qfchart-demo.html

@@ -122,8 +122,8 @@ <h1>QFChart Library Demo</h1>
         const chartContainer = document.getElementById("main-chart");
         const chart = new QFChart.QFChart(chartContainer, {
           title: "BTC/USDT", // Custom title
-          height: "600px",
-          tooltip: {
+          height: "740px",
+          databox: {
             position: "right",
           },
           dataZoom: {
@@ -135,25 +135,35 @@ <h1>QFChart Library Demo</h1>
             mainPaneHeight: "60%",
             gap: 5,
           },
+          controls: {
+            collapse: true,
+            maximize: true,
+            fullscreen: true,
+          },
         });
 
         // Set Market Data
         chart.setMarketData(ohlcvData);
 
         chart.addIndicator("Institutional Bias", institBiasPlots, {
           isOverlay: true,
-          height: 10,
+          height: 14,
           titleColor: "#2962FF",
         });
 
         // Set Indicators
         // Group plots into one indicator
-        chart.addIndicator("SQZMOM", plots, { isOverlay: false, height: 10 });
+        chart.addIndicator("SQZMOM", plots, {
+          isOverlay: false,
+          height: 14,
+          controls: { collapse: true, maximize: true },
+        });
 
         chart.addIndicator("MACD", macdPlots, {
           isOverlay: false,
           height: 10,
           titleColor: "#ff9900",
+          controls: { collapse: true, maximize: true },
         });
 
         // Register Measure Tool Plugin
@@ -163,6 +173,36 @@ <h1>QFChart Library Demo</h1>
         // Register Line Tool Plugin
         const lineTool = new QFChart.LineTool();
         chart.registerPlugin(lineTool);
+
+        // Register Fibonacci Tool Plugin
+        const fibTool = new QFChart.FibonacciTool();
+        chart.registerPlugin(fibTool);
+
+        // Logging Event Listeners for Drawing Tools
+        chart.events.on("drawing:hover", (payload) =>
+          console.log("Event: drawing:hover", payload)
+        );
+        chart.events.on("drawing:mouseout", (payload) =>
+          console.log("Event: drawing:mouseout", payload)
+        );
+        chart.events.on("drawing:mousedown", (payload) =>
+          console.log("Event: drawing:mousedown", payload)
+        );
+        chart.events.on("drawing:click", (payload) =>
+          console.log("Event: drawing:click", payload)
+        );
+        chart.events.on("drawing:point:hover", (payload) =>
+          console.log("Event: drawing:point:hover", payload)
+        );
+        chart.events.on("drawing:point:mouseout", (payload) =>
+          console.log("Event: drawing:point:mouseout", payload)
+        );
+        chart.events.on("drawing:point:mousedown", (payload) =>
+          console.log("Event: drawing:point:mousedown", payload)
+        );
+        chart.events.on("drawing:point:click", (payload) =>
+          console.log("Event: drawing:point:click", payload)
+        );
       });
     </script>
   </body>

docs/api.md

@@ -37,6 +37,9 @@ Adds an indicator to the chart.
 - **options**:
   - `isOverlay`: (boolean) If `true`, renders on the main chart. If `false`, creates a new pane below.
   - `height`: (number) Height percentage for the new pane (e.g., `15` for 15%).
+  - `controls`: (object) Control buttons configuration.
+    - `collapse`: (boolean) Show collapse/expand button.
+    - `maximize`: (boolean) Show maximize/restore pane button.
 
 #### `removeIndicator(id: string)`
 
@@ -56,8 +59,9 @@ Adds a persistent drawing (like a line or shape) to the chart. These drawings mo
   ```typescript
   interface DrawingElement {
     id: string;
-    type: "line";
+    type: "line" | "fibonacci";
     points: DataCoordinate[]; // [{ timeIndex, value }, ...]
+    paneIndex?: number;
     style?: { color?: string; lineWidth?: number };
   }
   ```
@@ -82,16 +86,17 @@ Cleans up event listeners and disposes of the ECharts instance.
 
 Configuration object passed to the constructor.
 
-| Property          | Type                 | Default                    | Description                              |
-| ----------------- | -------------------- | -------------------------- | ---------------------------------------- |
-| `title`           | `string`             | `"Market"`                 | Main chart title displayed in tooltip.   |
-| `height`          | `string` \| `number` | -                          | Explicit height for the container.       |
-| `padding`         | `number`             | `0.2`                      | Vertical padding for auto-scaling (0-1). |
-| `upColor`         | `string`             | `"#00da3c"`                | Color for bullish candles.               |
-| `downColor`       | `string`             | `"#ec0000"`                | Color for bearish candles.               |
-| `backgroundColor` | `string`             | `"#1e293b"`                | Chart background color.                  |
-| `tooltip`         | `object`             | `{ position: 'floating' }` | Tooltip configuration (see Layouts).     |
-| `dataZoom`        | `object`             | -                          | Configuration for the zoom slider.       |
+| Property          | Type                 | Default                    | Description                                                    |
+| ----------------- | -------------------- | -------------------------- | -------------------------------------------------------------- |
+| `title`           | `string`             | `"Market"`                 | Main chart title displayed in databox.                         |
+| `height`          | `string` \| `number` | -                          | Explicit height for the container.                             |
+| `padding`         | `number`             | `0.2`                      | Vertical padding for auto-scaling (0-1).                       |
+| `upColor`         | `string`             | `"#00da3c"`                | Color for bullish candles.                                     |
+| `downColor`       | `string`             | `"#ec0000"`                | Color for bearish candles.                                     |
+| `backgroundColor` | `string`             | `"#1e293b"`                | Chart background color.                                        |
+| `databox`         | `object`             | `{ position: 'floating' }` | Databox configuration (see Layouts).                           |
+| `dataZoom`        | `object`             | -                          | Configuration for the zoom slider.                             |
+| `controls`        | `object`             | `{}`                       | Enable control buttons (`collapse`, `maximize`, `fullscreen`). |
 
 ### `OHLCV`
 

docs/index.md

@@ -14,7 +14,7 @@ permalink: /
 - **Candlestick Charts**: High-performance rendering of OHLCV data.
 - **Multi-Pane Indicators**: Support for stacking indicators in separate panes (e.g., RSI, MACD) with customizable heights.
 - **Overlay Indicators**: Add indicators directly on top of the main chart (e.g., SMA, Bollinger Bands).
-- **Flexible Layouts**: Configurable sidebars for tooltips (Left/Right/Floating) to avoid obstructing the chart.
+- **Flexible Layouts**: Configurable sidebars for data display (Left/Right/Floating) to avoid obstructing the chart.
 - **Dynamic Resizing**: Automatically handles window resizing and layout adjustments.
 - **Plugin System**: Extensible architecture for adding interactive tools (e.g., Measure Tool).
 - **TypeScript Support**: Written in TypeScript with full type definitions.

docs/layout-and-customization.md

@@ -9,32 +9,34 @@ permalink: /layout
 
 QFChart offers flexible layout options to adapt to different screen sizes and user preferences.
 
-## Tooltip Positioning
+## Databox Positioning
 
-The tooltip is the primary way to view precise values. You can configure its behavior using `options.tooltip.position`.
+The databox is the primary way to view precise values. You can configure its behavior using `options.databox.position`.
 
 ### Modes
 
 1. **Floating (Default)**
+
    - Follows the mouse cursor.
    - Automatically switches sides to avoid going off-screen.
    - Best for maximizing chart space.
 
    ```javascript
-   tooltip: {
-       position: 'floating'
+   databox: {
+     position: "floating";
    }
    ```
 
 2. **Sidebar (Left/Right)**
+
    - Dedicates a fixed sidebar (250px) for data display.
    - Chart automatically resizes to fill remaining width.
-   - Prevents the tooltip from obscuring the chart data.
+   - Prevents the databox from obscuring the chart data.
    - Ideal for desktop views with detailed indicators.
 
    ```javascript
-   tooltip: {
-       position: 'left' // or 'right'
+   databox: {
+     position: "left"; // or 'right'
    }
    ```
 
@@ -48,24 +50,59 @@ You can specify the height of each indicator pane as a percentage of the total c
 
 ```javascript
 // Add RSI with 15% height
-chart.addIndicator("RSI", rsiPlots, { 
-    isOverlay: false, 
-    height: 15 
+chart.addIndicator("RSI", rsiPlots, {
+  isOverlay: false,
+  height: 15,
 });
 
 // Add MACD with 20% height
-chart.addIndicator("MACD", macdPlots, { 
-    isOverlay: false, 
-    height: 20 
+chart.addIndicator("MACD", macdPlots, {
+  isOverlay: false,
+  height: 20,
 });
 ```
 
 **Layout Algorithm:**
+
 1. Sums up all explicit indicator heights.
 2. Calculates gaps (default 20px dynamic equivalent).
 3. Allocates remaining space to the Main Chart (Candlesticks).
 4. If remaining space is too small (<20%), it clamps the main chart height.
 
+## Pane Controls
+
+You can enable interactive controls for each pane (Main Chart and Indicators) to allow users to customize their view at runtime.
+
+### Available Controls
+
+- **Collapse (`+` / `−`)**: Minimizes the pane to a small strip, giving more space to other panes.
+- **Maximize (`□` / `❐`)**: Expands the pane to fill the entire chart container (viewport), hiding other panes.
+- **Fullscreen (`⛶`)**: Expands the chart container to fill the entire monitor screen (Browser Fullscreen). _Only available for Main Chart._
+
+### Configuration
+
+Controls are configured via the `controls` object in `QFChartOptions` (for the main chart) or the options object in `addIndicator`.
+
+```javascript
+// Main Chart Configuration
+const chart = new QFChart(container, {
+  controls: {
+    collapse: true, // Enable collapse button
+    maximize: true, // Enable maximize pane button
+    fullscreen: true, // Enable browser fullscreen button
+  },
+});
+
+// Indicator Configuration
+chart.addIndicator("MACD", plots, {
+  isOverlay: false,
+  controls: {
+    collapse: true,
+    maximize: true,
+  },
+});
+```
+
 ## DataZoom Control
 
 The zoom slider allows users to navigate history.
@@ -81,4 +118,3 @@ dataZoom: {
 - **Top**: Places slider at the very top. Chart starts below.
 - **Bottom**: Places slider at the bottom.
 - **Hidden**: Set `visible: false` to control zoom only via mouse wheel/drag.
-

docs/plugins.md

@@ -39,6 +39,17 @@ The `MeasureTool` is a built-in plugin that allows users to measure price and ti
   3.  **Click** again to finish and freeze the measurement.
   4.  **Click** anywhere else or drag the chart to clear the measurement.
 
+### Fibonacci Tool
+
+The `FibonacciTool` allows users to draw Fibonacci retracement levels on the chart.
+
+- **Usage**: Click the Fibonacci icon in the toolbar.
+- **Interaction**:
+  1.  **Click** to set the start point (e.g., swing high).
+  2.  **Move** mouse to set the end point (e.g., swing low).
+  3.  **Click** to finish drawing.
+- **Levels**: 0, 0.236, 0.382, 0.5, 0.618, 0.786, 1.
+
 ## Creating Custom Plugins
 
 You can create your own plugins by extending the `AbstractPlugin` class or implementing the `Plugin` interface directly. We recommend extending `AbstractPlugin` as it provides useful helpers and automatic event cleanup.
@@ -112,8 +123,9 @@ export interface ChartContext {
 
 export interface DrawingElement {
   id: string;
-  type: "line";
+  type: "line" | "fibonacci";
   points: DataCoordinate[];
+  paneIndex?: number;
   style?: {
     color?: string;
     lineWidth?: number;
@@ -129,6 +141,31 @@ The chart exposes an Event Bus via `context.events` for communication between pl
 - `chart:resize`, `chart:dataZoom`, `chart:updated`
 - `plugin:activated`, `plugin:deactivated`
 
+#### Drawing Events
+
+When using the native drawing system (via `addDrawing`), the chart emits granular events for interactions with drawing elements:
+
+- **Shape Events**:
+  - `drawing:hover`: Mouse over a drawing shape (e.g., line).
+  - `drawing:mouseout`: Mouse out of a drawing shape.
+  - `drawing:mousedown`: Mouse down on a drawing shape.
+  - `drawing:click`: Click on a drawing shape.
+- **Control Point Events**:
+  - `drawing:point:hover`: Mouse over a control point (start/end).
+  - `drawing:point:mouseout`: Mouse out of a control point.
+  - `drawing:point:mousedown`: Mouse down on a control point.
+  - `drawing:point:click`: Click on a control point.
+
+All drawing events carry a payload identifying the drawing:
+
+```typescript
+{
+  id: string,       // The ID of the drawing
+  type?: string,    // The type of drawing (e.g., "line")
+  pointIndex?: number // For point events: 0 (start), 1 (end), etc.
+}
+```
+
 ### Coordinate Conversion & Native Drawings
 
 For persistent drawings (lines, shapes that stick to the chart), you should use the `addDrawing` API instead of manual ZRender management.