hyperprop-charting-library 0.1.70 → 0.1.72

package/dist/index.d.cts

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position";
 interface DrawingPoint {
     index: number;
     price: number;

package/dist/index.d.ts

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position";
 interface DrawingPoint {
     index: number;
     price: number;

package/dist/index.js

@@ -2088,6 +2088,7 @@ function createChart(element, options = {}) {
     };
     const xFromDrawingPoint = (point) => chartLeft + (point.index + 0.5 - xStart) / xSpan * chartWidth;
     const FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1, 1.618];
+    const FIB_EXT_RATIOS = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
     const hexToRgba = (hex, alpha) => {
       const cleaned = hex.replace("#", "");
       if (cleaned.length !== 6) {
@@ -2288,6 +2289,165 @@ function createChart(element, options = {}) {
           });
           ctx.font = prevFont;
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (p0 && p1) {
+          const x0 = xFromDrawingPoint(p0);
+          const y0 = yFromPrice(p0.price);
+          const x1 = xFromDrawingPoint(p1);
+          const y1 = yFromPrice(p1.price);
+          ctx.save();
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.6);
+          ctx.setLineDash([4, 4]);
+          ctx.lineWidth = 1;
+          ctx.beginPath();
+          ctx.moveTo(x0, y0);
+          ctx.lineTo(x1, y1);
+          if (p2) {
+            ctx.lineTo(xFromDrawingPoint(p2), yFromPrice(p2.price));
+          }
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(x0, y0, drawing.color);
+          drawDrawingHandle(x1, y1, drawing.color);
+          if (p2) {
+            const x2 = xFromDrawingPoint(p2);
+            const y2 = yFromPrice(p2.price);
+            drawDrawingHandle(x2, y2, drawing.color);
+            const palette = drawing.colors.length > 0 ? drawing.colors : null;
+            const levelColorAt = (index) => palette ? palette[index % palette.length] : drawing.color;
+            const move = p1.price - p0.price;
+            const levelLines = FIB_EXT_RATIOS.map((ratio) => {
+              const price = p2.price + move * ratio;
+              return { ratio, price, y: yFromPrice(price) };
+            });
+            for (let index = 0; index < levelLines.length - 1; index += 1) {
+              const top = levelLines[index];
+              const bottom = levelLines[index + 1];
+              const bandTop = Math.min(top.y, bottom.y);
+              const bandBottom = Math.max(top.y, bottom.y);
+              ctx.save();
+              ctx.fillStyle = hexToRgba(levelColorAt(index), 0.1);
+              ctx.globalAlpha = draft ? 0.5 : 1;
+              ctx.fillRect(chartLeft, bandTop, chartRight - chartLeft, bandBottom - bandTop);
+              ctx.restore();
+            }
+            ctx.save();
+            ctx.lineWidth = drawing.width;
+            applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+            levelLines.forEach((level, index) => {
+              ctx.strokeStyle = levelColorAt(index);
+              ctx.beginPath();
+              ctx.moveTo(crisp(chartLeft), crisp(level.y));
+              ctx.lineTo(crisp(chartRight), crisp(level.y));
+              ctx.stroke();
+            });
+            ctx.restore();
+            const prevFont = ctx.font;
+            ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+            levelLines.forEach((level, index) => {
+              const labelText = `${level.ratio} (${formatPrice(level.price)})`;
+              const textWidth = ctx.measureText(labelText).width;
+              const padding = 4;
+              const bgX = chartLeft + 4;
+              const bgY = level.y - 9;
+              ctx.fillStyle = mergedOptions.backgroundColor;
+              fillRoundedRect(bgX, bgY, textWidth + padding * 2, 16, 3);
+              ctx.fillStyle = levelColorAt(index);
+              ctx.textAlign = "left";
+              ctx.textBaseline = "middle";
+              ctx.fillText(labelText, bgX + padding, bgY + 8);
+            });
+            ctx.font = prevFont;
+            if (drawing.label) {
+              drawDrawingLabel(drawing.label, (x0 + x2) / 2, Math.min(y0, y2), drawing.color);
+            }
+          }
+        }
+      } else if (drawing.type === "long-position" || drawing.type === "short-position") {
+        const entry = drawing.points[0];
+        const target = drawing.points[1];
+        const stop = drawing.points[2];
+        const right = drawing.points[3];
+        if (entry && target && stop && right) {
+          const leftX = xFromDrawingPoint(entry);
+          const rightX = xFromDrawingPoint(right);
+          const boxX0 = Math.min(leftX, rightX);
+          const boxX1 = Math.max(leftX, rightX);
+          const boxW = Math.max(1, boxX1 - boxX0);
+          const entryY = yFromPrice(entry.price);
+          const targetY = yFromPrice(target.price);
+          const stopY = yFromPrice(stop.price);
+          const profitFill = "rgba(38,166,154,0.16)";
+          const lossFill = "rgba(239,83,80,0.16)";
+          const profitLine = "rgba(38,166,154,0.9)";
+          const lossLine = "rgba(239,83,80,0.9)";
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.6 : 1;
+          ctx.fillStyle = profitFill;
+          ctx.fillRect(boxX0, Math.min(entryY, targetY), boxW, Math.abs(targetY - entryY));
+          ctx.fillStyle = lossFill;
+          ctx.fillRect(boxX0, Math.min(entryY, stopY), boxW, Math.abs(stopY - entryY));
+          ctx.restore();
+          ctx.save();
+          ctx.setLineDash([]);
+          ctx.lineWidth = Math.max(1, drawing.width);
+          ctx.strokeStyle = profitLine;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(targetY));
+          ctx.lineTo(crisp(boxX1), crisp(targetY));
+          ctx.stroke();
+          ctx.strokeStyle = lossLine;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(stopY));
+          ctx.lineTo(crisp(boxX1), crisp(stopY));
+          ctx.stroke();
+          ctx.strokeStyle = drawing.color;
+          ctx.beginPath();
+          ctx.moveTo(crisp(boxX0), crisp(entryY));
+          ctx.lineTo(crisp(boxX1), crisp(entryY));
+          ctx.stroke();
+          ctx.restore();
+          drawDrawingHandle(leftX, targetY, drawing.color);
+          drawDrawingHandle(leftX, entryY, drawing.color);
+          drawDrawingHandle(leftX, stopY, drawing.color);
+          drawDrawingHandle(rightX, entryY, drawing.color);
+          const tick = getConfiguredTickSize();
+          const pctOf = (price) => {
+            if (!Number.isFinite(entry.price) || entry.price === 0) return "0.00%";
+            return `${((price - entry.price) / Math.abs(entry.price) * 100).toFixed(2)}%`;
+          };
+          const ticksOf = (price) => tick > 0 ? ` ${Math.round(Math.abs(price - entry.price) / tick)}t` : "";
+          const targetDist = Math.abs(target.price - entry.price);
+          const stopDist = Math.abs(entry.price - stop.price);
+          const rr = stopDist > 0 ? targetDist / stopDist : 0;
+          const cx = (boxX0 + boxX1) / 2;
+          const drawPositionPill = (text, centerX, centerY, bg) => {
+            const prevFont = ctx.font;
+            ctx.font = `500 11px ${mergedOptions.fontFamily}`;
+            const padding = 6;
+            const textW = ctx.measureText(text).width;
+            const pillW = textW + padding * 2;
+            const pillH = 18;
+            const pillX = centerX - pillW / 2;
+            const pillY = centerY - pillH / 2;
+            ctx.fillStyle = bg;
+            fillRoundedRect(pillX, pillY, pillW, pillH, 4);
+            ctx.fillStyle = "#ffffff";
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.fillText(text, centerX, pillY + pillH / 2);
+            ctx.font = prevFont;
+          };
+          drawPositionPill(`Target ${formatPrice(target.price)} (${pctOf(target.price)})${ticksOf(target.price)}`, cx, targetY, profitLine);
+          drawPositionPill(`Stop ${formatPrice(stop.price)} (${pctOf(stop.price)})${ticksOf(stop.price)}`, cx, stopY, lossLine);
+          drawPositionPill(`Entry ${formatPrice(entry.price)}  RR ${rr.toFixed(2)}`, cx, entryY, hexToRgba(drawing.color, 0.92));
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, cx, Math.min(targetY, stopY) - 4, drawing.color);
+          }
+        }
       }
       ctx.restore();
     };
@@ -3449,6 +3609,63 @@ function createChart(element, options = {}) {
             return { drawing, target: "line" };
           }
         }
+      } else if (drawing.type === "fib-extension") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        const p2 = drawing.points[2];
+        if (!p0 || !p1) continue;
+        const x0 = canvasXFromDrawingPoint(p0);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const x1 = canvasXFromDrawingPoint(p1);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - x0, y - y0) <= 8) {
+          return { drawing, target: "handle", pointIndex: 0 };
+        }
+        if (Math.hypot(x - x1, y - y1) <= 8) {
+          return { drawing, target: "handle", pointIndex: 1 };
+        }
+        if (p2) {
+          const x2 = canvasXFromDrawingPoint(p2);
+          const y2 = canvasYFromDrawingPrice(p2.price);
+          if (Math.hypot(x - x2, y - y2) <= 8) {
+            return { drawing, target: "handle", pointIndex: 2 };
+          }
+          const move = p1.price - p0.price;
+          const fibExtRatios = [0, 0.382, 0.5, 0.618, 1, 1.272, 1.618, 2.618];
+          for (const ratio of fibExtRatios) {
+            const lineY = canvasYFromDrawingPrice(p2.price + move * ratio);
+            if (Math.abs(y - lineY) <= 5) {
+              return { drawing, target: "line" };
+            }
+          }
+          if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6 || distanceToSegment(x, y, x1, y1, x2, y2) <= 6) {
+            return { drawing, target: "line" };
+          }
+        } else if (distanceToSegment(x, y, x0, y0, x1, y1) <= 6) {
+          return { drawing, target: "line" };
+        }
+      } else if (drawing.type === "long-position" || drawing.type === "short-position") {
+        const entry = drawing.points[0];
+        const target = drawing.points[1];
+        const stop = drawing.points[2];
+        const right = drawing.points[3];
+        if (!entry || !target || !stop || !right) continue;
+        const leftX = canvasXFromDrawingPoint(entry);
+        const rightX = canvasXFromDrawingPoint(right);
+        const entryY = canvasYFromDrawingPrice(entry.price);
+        const targetY = canvasYFromDrawingPrice(target.price);
+        const stopY = canvasYFromDrawingPrice(stop.price);
+        if (Math.hypot(x - leftX, y - targetY) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - leftX, y - entryY) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - leftX, y - stopY) <= 9) return { drawing, target: "handle", pointIndex: 2 };
+        if (Math.hypot(x - rightX, y - entryY) <= 9) return { drawing, target: "handle", pointIndex: 3 };
+        const x0 = Math.min(leftX, rightX);
+        const x1 = Math.max(leftX, rightX);
+        const yTop = Math.min(targetY, stopY, entryY);
+        const yBot = Math.max(targetY, stopY, entryY);
+        if (x >= x0 && x <= x1 && y >= yTop && y <= yBot) {
+          return { drawing, target: "line" };
+        }
       }
     }
     return null;
@@ -3616,6 +3833,66 @@ function createChart(element, options = {}) {
       draw();
       return true;
     }
+    if (activeDrawingTool === "fib-extension") {
+      if (draftDrawing?.type === "fib-extension") {
+        if (draftDrawing.points.length < 3) {
+          draftDrawing = normalizeDrawingState({
+            ...serializeDrawing(draftDrawing),
+            points: [...draftDrawing.points.slice(0, -1), point, point]
+          });
+          draw();
+          return true;
+        }
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], draftDrawing.points[1], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        draw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fib-extension");
+      draftDrawing = normalizeDrawingState({
+        type: "fib-extension",
+        points: [point, point],
+        color: defaults.color ?? "#2563eb",
+        colors: defaults.colors ?? FIB_DEFAULT_PALETTE,
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
+      });
+      draw();
+      return true;
+    }
+    if (activeDrawingTool === "long-position" || activeDrawingTool === "short-position") {
+      const isLong = activeDrawingTool === "long-position";
+      const tick = getConfiguredTickSize();
+      const priceOffset = tick > 0 ? tick * 20 : Math.abs(point.price) * 0.01 || 1;
+      const width2 = Math.max(5, Math.round(xSpan * 0.15));
+      const entryPrice = point.price;
+      const targetPrice = isLong ? entryPrice + priceOffset : entryPrice - priceOffset;
+      const stopPrice = isLong ? entryPrice - priceOffset : entryPrice + priceOffset;
+      const defaults = getDrawingToolDefaults(activeDrawingTool);
+      drawings.push(
+        normalizeDrawingState({
+          type: activeDrawingTool,
+          points: [
+            point,
+            normalizeDrawingPoint(point.index, targetPrice),
+            normalizeDrawingPoint(point.index, stopPrice),
+            normalizeDrawingPoint(point.index + width2, entryPrice)
+          ],
+          color: defaults.color ?? "#2563eb",
+          style: defaults.style ?? "solid",
+          width: defaults.width ?? 1
+        })
+      );
+      emitDrawingsChange();
+      draw();
+      return true;
+    }
     return false;
   };
   const setDrawingDefaults = (tool, defaults) => {
@@ -3639,6 +3916,22 @@ function createChart(element, options = {}) {
       if (drawing.id !== drawingDragState?.drawingId || drawing.locked) {
         return drawing;
       }
+      if (drawingDragState.target === "handle" && (drawing.type === "long-position" || drawing.type === "short-position")) {
+        const pts = drawing.points.map((point) => ({ ...point }));
+        const entry = pts[0];
+        const pointIndex = drawingDragState.pointIndex ?? 0;
+        if (pointIndex === 0) {
+          pts[0] = normalizeDrawingPoint(entry.index, currentPoint.price);
+          if (pts[3]) pts[3] = normalizeDrawingPoint(pts[3].index, currentPoint.price);
+        } else if (pointIndex === 1 && pts[1]) {
+          pts[1] = normalizeDrawingPoint(entry.index, currentPoint.price);
+        } else if (pointIndex === 2 && pts[2]) {
+          pts[2] = normalizeDrawingPoint(entry.index, currentPoint.price);
+        } else if (pointIndex === 3 && pts[3]) {
+          pts[3] = normalizeDrawingPoint(currentPoint.index, entry.price);
+        }
+        return { ...drawing, points: pts };
+      }
       if (drawingDragState.target === "handle") {
         return {
           ...drawing,
@@ -3888,12 +4181,12 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
       const nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint) {
         draftDrawing = {
           ...draftDrawing,
-          points: [draftDrawing.points[0], nextPoint]
+          points: [...draftDrawing.points.slice(0, -1), nextPoint]
         };
         canvas.style.cursor = "crosshair";
         draw();

package/docs/API.md

@@ -416,11 +416,13 @@ Volume style inputs:
 Drawings are user-created chart tools, separate from indicators. They are interactive chart objects like horizontal lines and trendlines.
 
 - `id?: string`
-- `type: "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement"`
+- `type: "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension"`
   - `horizontal-line` / `vertical-line`: single-point, full-width/full-height line (one click to place)
   - `trendline`: two-point segment (click start, click end)
   - `ray`: two-point line that extends infinitely past the second point
   - `fib-retracement`: two-point retracement with levels/bands
+  - `fib-extension`: trend-based three-point extension (click trend start, trend end, then the projection origin); levels project from the third point by the first→second move
+  - `long-position` / `short-position`: risk/reward forecasting box (single click drops a default box). Points are `[entry, target, stop, rightEdge]`; anchors are target/entry/stop on the left and a time-width handle on the right. Labels show price, % move, ticks, and risk/reward ratio.
 - `points: DrawingPoint[]`
 - `visible?: boolean`
 - `color?: string`
@@ -447,6 +449,9 @@ chart.setActiveDrawingTool("vertical-line");   // next plot click creates a vert
 chart.setActiveDrawingTool("trendline");       // first click starts, second click commits
 chart.setActiveDrawingTool("ray");             // first click starts, second click commits (extends past p2)
 chart.setActiveDrawingTool("fib-retracement"); // first click starts, second click commits
+chart.setActiveDrawingTool("fib-extension");   // three clicks: trend start, trend end, projection origin
+chart.setActiveDrawingTool("long-position");   // single click drops a long risk/reward box
+chart.setActiveDrawingTool("short-position");  // single click drops a short risk/reward box
 chart.setActiveDrawingTool(null);              // back to normal cursor/pan
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperprop-charting-library",
-  "version": "0.1.70",
+  "version": "0.1.72",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",