hyperprop-charting-library 0.1.113 → 0.1.115

package/dist/hyperprop-charting-library.cjs

@@ -2666,6 +2666,37 @@ function createChart(element, options = {}) {
             }
           }
         }
+      } else if (drawing.type === "rectangle") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (p0 && p1) {
+          const px0 = xFromDrawingPoint(p0);
+          const px1 = xFromDrawingPoint(p1);
+          const leftX = Math.min(px0, px1);
+          const rightX = Math.max(px0, px1);
+          const y0 = yFromPrice(p0.price);
+          const y1 = yFromPrice(p1.price);
+          const topY = Math.min(y0, y1);
+          const botY = Math.max(y0, y1);
+          const boxW = Math.max(1, rightX - leftX);
+          const boxH = Math.max(1, botY - topY);
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.6 : 1;
+          ctx.fillStyle = hexToRgba(drawing.color, 0.14);
+          ctx.fillRect(leftX, topY, boxW, boxH);
+          ctx.lineWidth = Math.max(1, drawing.width);
+          ctx.strokeStyle = drawing.color;
+          applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+          ctx.strokeRect(crisp(leftX), crisp(topY), crisp(rightX) - crisp(leftX), crisp(botY) - crisp(topY));
+          ctx.restore();
+          handleAt(px0, y0, drawing.color);
+          handleAt(px1, y1, drawing.color);
+          handleAt(px0, y1, drawing.color);
+          handleAt(px1, y0, drawing.color);
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, (leftX + rightX) / 2, topY - 4, drawing.color);
+          }
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -4155,6 +4186,21 @@ function createChart(element, options = {}) {
         if (x >= x0 && x <= x1 && y >= yTop && y <= yBot) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "rectangle") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (!p0 || !p1) continue;
+        const px0 = canvasXFromDrawingPoint(p0);
+        const px1 = canvasXFromDrawingPoint(p1);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - px0, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - px0, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 2 };
+        if (Math.hypot(x - px1, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 3 };
+        if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
+          return { drawing, target: "line" };
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -4411,6 +4457,30 @@ function createChart(element, options = {}) {
       drawingEditTextHandler?.({ drawing: serializeDrawing(created), target: "line", x, y });
       return true;
     }
+    if (activeDrawingTool === "rectangle") {
+      if (draftDrawing?.type === "rectangle") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        scheduleDraw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("rectangle");
+      draftDrawing = normalizeDrawingState({
+        type: "rectangle",
+        points: [point, point],
+        color: defaults.color ?? "#2962ff",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
+      });
+      scheduleDraw();
+      return true;
+    }
     if (activeDrawingTool === "price-range") {
       const tick = getConfiguredTickSize();
       const visibleRange = drawState.yMax - drawState.yMin;
@@ -4512,6 +4582,25 @@ function createChart(element, options = {}) {
         }
         return { ...drawing, points: pts };
       }
+      if (drawingDragState.target === "handle" && drawing.type === "rectangle") {
+        const pts = drawing.points.map((point) => ({ ...point }));
+        const p0 = pts[0];
+        const p1 = pts[1];
+        if (!p0 || !p1) return drawing;
+        const pointIndex = drawingDragState.pointIndex ?? 0;
+        if (pointIndex === 0) {
+          pts[0] = normalizeDrawingPoint(currentPoint.index, currentPoint.price);
+        } else if (pointIndex === 1) {
+          pts[1] = normalizeDrawingPoint(currentPoint.index, currentPoint.price);
+        } else if (pointIndex === 2) {
+          pts[0] = normalizeDrawingPoint(currentPoint.index, p0.price);
+          pts[1] = normalizeDrawingPoint(p1.index, currentPoint.price);
+        } else if (pointIndex === 3) {
+          pts[0] = normalizeDrawingPoint(p0.index, currentPoint.price);
+          pts[1] = normalizeDrawingPoint(currentPoint.index, p1.price);
+        }
+        return { ...drawing, points: pts };
+      }
       if (drawingDragState.target === "handle" && shiftKeyActive && (drawing.type === "trendline" || drawing.type === "ray")) {
         const pointIndex = drawingDragState.pointIndex ?? 0;
         const anchor = drawing.points[pointIndex === 0 ? 1 : 0];
@@ -4780,7 +4869,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "rectangle" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
       let nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint && shiftKeyActive && (draftDrawing.type === "trendline" || draftDrawing.type === "ray") && draftDrawing.points[0]) {
         nextPoint = constrainAngleFromAnchor(draftDrawing.points[0], point.x, point.y) ?? nextPoint;
@@ -5198,6 +5287,50 @@ function createChart(element, options = {}) {
     }
     scheduleDraw();
   };
+  const upsertBar = (point) => {
+    const time = new Date(point.t);
+    const timeMs = time.getTime();
+    const open = Number(point.o);
+    const close = Number(point.c);
+    const highInput = Number(point.h);
+    const lowInput = Number(point.l);
+    if (!Number.isFinite(timeMs) || !Number.isFinite(open) || !Number.isFinite(close) || !Number.isFinite(highInput) || !Number.isFinite(lowInput)) {
+      return;
+    }
+    const volumeValue = point.v === void 0 ? void 0 : Number(point.v);
+    const parsed = {
+      time,
+      o: open,
+      h: Math.max(highInput, open, close),
+      l: Math.min(lowInput, open, close),
+      c: close,
+      ...volumeValue === void 0 || !Number.isFinite(volumeValue) ? {} : { v: volumeValue }
+    };
+    const last = data[data.length - 1];
+    if (!last) {
+      setData([point]);
+      return;
+    }
+    const lastMs = last.time.getTime();
+    if (timeMs === lastMs) {
+      data[data.length - 1] = parsed;
+    } else if (timeMs > lastMs) {
+      data.push(parsed);
+      if (mergedOptions.preserveViewportOnDataUpdate && followLatest) {
+        xCenter = data.length - xSpan / 2 + rightEdgePaddingBars;
+        clampXViewport();
+      }
+    } else {
+      const merged = /* @__PURE__ */ new Map();
+      for (const existing of data) {
+        merged.set(existing.time.getTime(), existing);
+      }
+      merged.set(timeMs, parsed);
+      data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+    }
+    pushSmoothedTicker(parsed.c, parsed.v);
+    scheduleDraw();
+  };
   const setPriceLines = (lines) => {
     priceLines = lines.map((line, index) => ({
       ...line,
@@ -5453,6 +5586,7 @@ function createChart(element, options = {}) {
   return {
     updateOptions,
     setData,
+    upsertBar,
     setPriceLines,
     addPriceLine,
     removePriceLine,

package/dist/hyperprop-charting-library.d.ts

@@ -44,7 +44,7 @@ interface ChartOptions {
     drawings?: DrawingObjectOptions[];
 }
 type IndicatorPane = "overlay" | "separate";
-type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "text" | "note";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "rectangle" | "text" | "note";
 interface DrawingPoint {
     index: number;
     price: number;
@@ -412,6 +412,13 @@ interface LabelsOptions {
 interface ChartInstance {
     updateOptions: (options: ChartOptions) => void;
     setData: (data: OhlcDataPoint[]) => void;
+    /**
+     * Incrementally upsert a single bar: O(1) update-in-place for the live
+     * (forming) bar and O(1) append for a new bar, instead of re-ingesting the
+     * full series through `setData`. Out-of-order timestamps fall back to a
+     * full merge, so correctness never depends on call ordering.
+     */
+    upsertBar: (point: OhlcDataPoint) => void;
     setPriceLines: (lines: PriceLineOptions[]) => void;
     addPriceLine: (line: PriceLineOptions) => string;
     removePriceLine: (id: string) => void;

package/dist/hyperprop-charting-library.js

@@ -2640,6 +2640,37 @@ function createChart(element, options = {}) {
             }
           }
         }
+      } else if (drawing.type === "rectangle") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (p0 && p1) {
+          const px0 = xFromDrawingPoint(p0);
+          const px1 = xFromDrawingPoint(p1);
+          const leftX = Math.min(px0, px1);
+          const rightX = Math.max(px0, px1);
+          const y0 = yFromPrice(p0.price);
+          const y1 = yFromPrice(p1.price);
+          const topY = Math.min(y0, y1);
+          const botY = Math.max(y0, y1);
+          const boxW = Math.max(1, rightX - leftX);
+          const boxH = Math.max(1, botY - topY);
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.6 : 1;
+          ctx.fillStyle = hexToRgba(drawing.color, 0.14);
+          ctx.fillRect(leftX, topY, boxW, boxH);
+          ctx.lineWidth = Math.max(1, drawing.width);
+          ctx.strokeStyle = drawing.color;
+          applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+          ctx.strokeRect(crisp(leftX), crisp(topY), crisp(rightX) - crisp(leftX), crisp(botY) - crisp(topY));
+          ctx.restore();
+          handleAt(px0, y0, drawing.color);
+          handleAt(px1, y1, drawing.color);
+          handleAt(px0, y1, drawing.color);
+          handleAt(px1, y0, drawing.color);
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, (leftX + rightX) / 2, topY - 4, drawing.color);
+          }
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -4129,6 +4160,21 @@ function createChart(element, options = {}) {
         if (x >= x0 && x <= x1 && y >= yTop && y <= yBot) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "rectangle") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (!p0 || !p1) continue;
+        const px0 = canvasXFromDrawingPoint(p0);
+        const px1 = canvasXFromDrawingPoint(p1);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - px0, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - px0, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 2 };
+        if (Math.hypot(x - px1, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 3 };
+        if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
+          return { drawing, target: "line" };
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -4385,6 +4431,30 @@ function createChart(element, options = {}) {
       drawingEditTextHandler?.({ drawing: serializeDrawing(created), target: "line", x, y });
       return true;
     }
+    if (activeDrawingTool === "rectangle") {
+      if (draftDrawing?.type === "rectangle") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        scheduleDraw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("rectangle");
+      draftDrawing = normalizeDrawingState({
+        type: "rectangle",
+        points: [point, point],
+        color: defaults.color ?? "#2962ff",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
+      });
+      scheduleDraw();
+      return true;
+    }
     if (activeDrawingTool === "price-range") {
       const tick = getConfiguredTickSize();
       const visibleRange = drawState.yMax - drawState.yMin;
@@ -4486,6 +4556,25 @@ function createChart(element, options = {}) {
         }
         return { ...drawing, points: pts };
       }
+      if (drawingDragState.target === "handle" && drawing.type === "rectangle") {
+        const pts = drawing.points.map((point) => ({ ...point }));
+        const p0 = pts[0];
+        const p1 = pts[1];
+        if (!p0 || !p1) return drawing;
+        const pointIndex = drawingDragState.pointIndex ?? 0;
+        if (pointIndex === 0) {
+          pts[0] = normalizeDrawingPoint(currentPoint.index, currentPoint.price);
+        } else if (pointIndex === 1) {
+          pts[1] = normalizeDrawingPoint(currentPoint.index, currentPoint.price);
+        } else if (pointIndex === 2) {
+          pts[0] = normalizeDrawingPoint(currentPoint.index, p0.price);
+          pts[1] = normalizeDrawingPoint(p1.index, currentPoint.price);
+        } else if (pointIndex === 3) {
+          pts[0] = normalizeDrawingPoint(p0.index, currentPoint.price);
+          pts[1] = normalizeDrawingPoint(currentPoint.index, p1.price);
+        }
+        return { ...drawing, points: pts };
+      }
       if (drawingDragState.target === "handle" && shiftKeyActive && (drawing.type === "trendline" || drawing.type === "ray")) {
         const pointIndex = drawingDragState.pointIndex ?? 0;
         const anchor = drawing.points[pointIndex === 0 ? 1 : 0];
@@ -4754,7 +4843,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "rectangle" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
       let nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint && shiftKeyActive && (draftDrawing.type === "trendline" || draftDrawing.type === "ray") && draftDrawing.points[0]) {
         nextPoint = constrainAngleFromAnchor(draftDrawing.points[0], point.x, point.y) ?? nextPoint;
@@ -5172,6 +5261,50 @@ function createChart(element, options = {}) {
     }
     scheduleDraw();
   };
+  const upsertBar = (point) => {
+    const time = new Date(point.t);
+    const timeMs = time.getTime();
+    const open = Number(point.o);
+    const close = Number(point.c);
+    const highInput = Number(point.h);
+    const lowInput = Number(point.l);
+    if (!Number.isFinite(timeMs) || !Number.isFinite(open) || !Number.isFinite(close) || !Number.isFinite(highInput) || !Number.isFinite(lowInput)) {
+      return;
+    }
+    const volumeValue = point.v === void 0 ? void 0 : Number(point.v);
+    const parsed = {
+      time,
+      o: open,
+      h: Math.max(highInput, open, close),
+      l: Math.min(lowInput, open, close),
+      c: close,
+      ...volumeValue === void 0 || !Number.isFinite(volumeValue) ? {} : { v: volumeValue }
+    };
+    const last = data[data.length - 1];
+    if (!last) {
+      setData([point]);
+      return;
+    }
+    const lastMs = last.time.getTime();
+    if (timeMs === lastMs) {
+      data[data.length - 1] = parsed;
+    } else if (timeMs > lastMs) {
+      data.push(parsed);
+      if (mergedOptions.preserveViewportOnDataUpdate && followLatest) {
+        xCenter = data.length - xSpan / 2 + rightEdgePaddingBars;
+        clampXViewport();
+      }
+    } else {
+      const merged = /* @__PURE__ */ new Map();
+      for (const existing of data) {
+        merged.set(existing.time.getTime(), existing);
+      }
+      merged.set(timeMs, parsed);
+      data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+    }
+    pushSmoothedTicker(parsed.c, parsed.v);
+    scheduleDraw();
+  };
   const setPriceLines = (lines) => {
     priceLines = lines.map((line, index) => ({
       ...line,
@@ -5427,6 +5560,7 @@ function createChart(element, options = {}) {
   return {
     updateOptions,
     setData,
+    upsertBar,
     setPriceLines,
     addPriceLine,
     removePriceLine,

package/dist/index.cjs

@@ -2666,6 +2666,37 @@ function createChart(element, options = {}) {
             }
           }
         }
+      } else if (drawing.type === "rectangle") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (p0 && p1) {
+          const px0 = xFromDrawingPoint(p0);
+          const px1 = xFromDrawingPoint(p1);
+          const leftX = Math.min(px0, px1);
+          const rightX = Math.max(px0, px1);
+          const y0 = yFromPrice(p0.price);
+          const y1 = yFromPrice(p1.price);
+          const topY = Math.min(y0, y1);
+          const botY = Math.max(y0, y1);
+          const boxW = Math.max(1, rightX - leftX);
+          const boxH = Math.max(1, botY - topY);
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.6 : 1;
+          ctx.fillStyle = hexToRgba(drawing.color, 0.14);
+          ctx.fillRect(leftX, topY, boxW, boxH);
+          ctx.lineWidth = Math.max(1, drawing.width);
+          ctx.strokeStyle = drawing.color;
+          applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+          ctx.strokeRect(crisp(leftX), crisp(topY), crisp(rightX) - crisp(leftX), crisp(botY) - crisp(topY));
+          ctx.restore();
+          handleAt(px0, y0, drawing.color);
+          handleAt(px1, y1, drawing.color);
+          handleAt(px0, y1, drawing.color);
+          handleAt(px1, y0, drawing.color);
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, (leftX + rightX) / 2, topY - 4, drawing.color);
+          }
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -4155,6 +4186,21 @@ function createChart(element, options = {}) {
         if (x >= x0 && x <= x1 && y >= yTop && y <= yBot) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "rectangle") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (!p0 || !p1) continue;
+        const px0 = canvasXFromDrawingPoint(p0);
+        const px1 = canvasXFromDrawingPoint(p1);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - px0, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - px0, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 2 };
+        if (Math.hypot(x - px1, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 3 };
+        if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
+          return { drawing, target: "line" };
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -4411,6 +4457,30 @@ function createChart(element, options = {}) {
       drawingEditTextHandler?.({ drawing: serializeDrawing(created), target: "line", x, y });
       return true;
     }
+    if (activeDrawingTool === "rectangle") {
+      if (draftDrawing?.type === "rectangle") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        scheduleDraw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("rectangle");
+      draftDrawing = normalizeDrawingState({
+        type: "rectangle",
+        points: [point, point],
+        color: defaults.color ?? "#2962ff",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
+      });
+      scheduleDraw();
+      return true;
+    }
     if (activeDrawingTool === "price-range") {
       const tick = getConfiguredTickSize();
       const visibleRange = drawState.yMax - drawState.yMin;
@@ -4512,6 +4582,25 @@ function createChart(element, options = {}) {
         }
         return { ...drawing, points: pts };
       }
+      if (drawingDragState.target === "handle" && drawing.type === "rectangle") {
+        const pts = drawing.points.map((point) => ({ ...point }));
+        const p0 = pts[0];
+        const p1 = pts[1];
+        if (!p0 || !p1) return drawing;
+        const pointIndex = drawingDragState.pointIndex ?? 0;
+        if (pointIndex === 0) {
+          pts[0] = normalizeDrawingPoint(currentPoint.index, currentPoint.price);
+        } else if (pointIndex === 1) {
+          pts[1] = normalizeDrawingPoint(currentPoint.index, currentPoint.price);
+        } else if (pointIndex === 2) {
+          pts[0] = normalizeDrawingPoint(currentPoint.index, p0.price);
+          pts[1] = normalizeDrawingPoint(p1.index, currentPoint.price);
+        } else if (pointIndex === 3) {
+          pts[0] = normalizeDrawingPoint(p0.index, currentPoint.price);
+          pts[1] = normalizeDrawingPoint(currentPoint.index, p1.price);
+        }
+        return { ...drawing, points: pts };
+      }
       if (drawingDragState.target === "handle" && shiftKeyActive && (drawing.type === "trendline" || drawing.type === "ray")) {
         const pointIndex = drawingDragState.pointIndex ?? 0;
         const anchor = drawing.points[pointIndex === 0 ? 1 : 0];
@@ -4780,7 +4869,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "rectangle" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
       let nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint && shiftKeyActive && (draftDrawing.type === "trendline" || draftDrawing.type === "ray") && draftDrawing.points[0]) {
         nextPoint = constrainAngleFromAnchor(draftDrawing.points[0], point.x, point.y) ?? nextPoint;
@@ -5198,6 +5287,50 @@ function createChart(element, options = {}) {
     }
     scheduleDraw();
   };
+  const upsertBar = (point) => {
+    const time = new Date(point.t);
+    const timeMs = time.getTime();
+    const open = Number(point.o);
+    const close = Number(point.c);
+    const highInput = Number(point.h);
+    const lowInput = Number(point.l);
+    if (!Number.isFinite(timeMs) || !Number.isFinite(open) || !Number.isFinite(close) || !Number.isFinite(highInput) || !Number.isFinite(lowInput)) {
+      return;
+    }
+    const volumeValue = point.v === void 0 ? void 0 : Number(point.v);
+    const parsed = {
+      time,
+      o: open,
+      h: Math.max(highInput, open, close),
+      l: Math.min(lowInput, open, close),
+      c: close,
+      ...volumeValue === void 0 || !Number.isFinite(volumeValue) ? {} : { v: volumeValue }
+    };
+    const last = data[data.length - 1];
+    if (!last) {
+      setData([point]);
+      return;
+    }
+    const lastMs = last.time.getTime();
+    if (timeMs === lastMs) {
+      data[data.length - 1] = parsed;
+    } else if (timeMs > lastMs) {
+      data.push(parsed);
+      if (mergedOptions.preserveViewportOnDataUpdate && followLatest) {
+        xCenter = data.length - xSpan / 2 + rightEdgePaddingBars;
+        clampXViewport();
+      }
+    } else {
+      const merged = /* @__PURE__ */ new Map();
+      for (const existing of data) {
+        merged.set(existing.time.getTime(), existing);
+      }
+      merged.set(timeMs, parsed);
+      data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+    }
+    pushSmoothedTicker(parsed.c, parsed.v);
+    scheduleDraw();
+  };
   const setPriceLines = (lines) => {
     priceLines = lines.map((line, index) => ({
       ...line,
@@ -5453,6 +5586,7 @@ function createChart(element, options = {}) {
   return {
     updateOptions,
     setData,
+    upsertBar,
     setPriceLines,
     addPriceLine,
     removePriceLine,

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" | "fib-extension" | "long-position" | "short-position" | "price-range" | "text" | "note";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "rectangle" | "text" | "note";
 interface DrawingPoint {
     index: number;
     price: number;
@@ -412,6 +412,13 @@ interface LabelsOptions {
 interface ChartInstance {
     updateOptions: (options: ChartOptions) => void;
     setData: (data: OhlcDataPoint[]) => void;
+    /**
+     * Incrementally upsert a single bar: O(1) update-in-place for the live
+     * (forming) bar and O(1) append for a new bar, instead of re-ingesting the
+     * full series through `setData`. Out-of-order timestamps fall back to a
+     * full merge, so correctness never depends on call ordering.
+     */
+    upsertBar: (point: OhlcDataPoint) => void;
     setPriceLines: (lines: PriceLineOptions[]) => void;
     addPriceLine: (line: PriceLineOptions) => string;
     removePriceLine: (id: string) => void;

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" | "fib-extension" | "long-position" | "short-position" | "price-range" | "text" | "note";
+type DrawingToolType = "horizontal-line" | "vertical-line" | "trendline" | "ray" | "fib-retracement" | "fib-extension" | "long-position" | "short-position" | "price-range" | "rectangle" | "text" | "note";
 interface DrawingPoint {
     index: number;
     price: number;
@@ -412,6 +412,13 @@ interface LabelsOptions {
 interface ChartInstance {
     updateOptions: (options: ChartOptions) => void;
     setData: (data: OhlcDataPoint[]) => void;
+    /**
+     * Incrementally upsert a single bar: O(1) update-in-place for the live
+     * (forming) bar and O(1) append for a new bar, instead of re-ingesting the
+     * full series through `setData`. Out-of-order timestamps fall back to a
+     * full merge, so correctness never depends on call ordering.
+     */
+    upsertBar: (point: OhlcDataPoint) => void;
     setPriceLines: (lines: PriceLineOptions[]) => void;
     addPriceLine: (line: PriceLineOptions) => string;
     removePriceLine: (id: string) => void;

package/dist/index.js

@@ -2640,6 +2640,37 @@ function createChart(element, options = {}) {
             }
           }
         }
+      } else if (drawing.type === "rectangle") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (p0 && p1) {
+          const px0 = xFromDrawingPoint(p0);
+          const px1 = xFromDrawingPoint(p1);
+          const leftX = Math.min(px0, px1);
+          const rightX = Math.max(px0, px1);
+          const y0 = yFromPrice(p0.price);
+          const y1 = yFromPrice(p1.price);
+          const topY = Math.min(y0, y1);
+          const botY = Math.max(y0, y1);
+          const boxW = Math.max(1, rightX - leftX);
+          const boxH = Math.max(1, botY - topY);
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.6 : 1;
+          ctx.fillStyle = hexToRgba(drawing.color, 0.14);
+          ctx.fillRect(leftX, topY, boxW, boxH);
+          ctx.lineWidth = Math.max(1, drawing.width);
+          ctx.strokeStyle = drawing.color;
+          applyDashPattern(drawing.style, dashPatterns.dotted, dashPatterns.dashed);
+          ctx.strokeRect(crisp(leftX), crisp(topY), crisp(rightX) - crisp(leftX), crisp(botY) - crisp(topY));
+          ctx.restore();
+          handleAt(px0, y0, drawing.color);
+          handleAt(px1, y1, drawing.color);
+          handleAt(px0, y1, drawing.color);
+          handleAt(px1, y0, drawing.color);
+          if (drawing.label) {
+            drawDrawingLabel(drawing.label, (leftX + rightX) / 2, topY - 4, drawing.color);
+          }
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -4129,6 +4160,21 @@ function createChart(element, options = {}) {
         if (x >= x0 && x <= x1 && y >= yTop && y <= yBot) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "rectangle") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (!p0 || !p1) continue;
+        const px0 = canvasXFromDrawingPoint(p0);
+        const px1 = canvasXFromDrawingPoint(p1);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - px0, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 1 };
+        if (Math.hypot(x - px0, y - y1) <= 9) return { drawing, target: "handle", pointIndex: 2 };
+        if (Math.hypot(x - px1, y - y0) <= 9) return { drawing, target: "handle", pointIndex: 3 };
+        if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1) && y >= Math.min(y0, y1) && y <= Math.max(y0, y1)) {
+          return { drawing, target: "line" };
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -4385,6 +4431,30 @@ function createChart(element, options = {}) {
       drawingEditTextHandler?.({ drawing: serializeDrawing(created), target: "line", x, y });
       return true;
     }
+    if (activeDrawingTool === "rectangle") {
+      if (draftDrawing?.type === "rectangle") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        scheduleDraw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("rectangle");
+      draftDrawing = normalizeDrawingState({
+        type: "rectangle",
+        points: [point, point],
+        color: defaults.color ?? "#2962ff",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1
+      });
+      scheduleDraw();
+      return true;
+    }
     if (activeDrawingTool === "price-range") {
       const tick = getConfiguredTickSize();
       const visibleRange = drawState.yMax - drawState.yMin;
@@ -4486,6 +4556,25 @@ function createChart(element, options = {}) {
         }
         return { ...drawing, points: pts };
       }
+      if (drawingDragState.target === "handle" && drawing.type === "rectangle") {
+        const pts = drawing.points.map((point) => ({ ...point }));
+        const p0 = pts[0];
+        const p1 = pts[1];
+        if (!p0 || !p1) return drawing;
+        const pointIndex = drawingDragState.pointIndex ?? 0;
+        if (pointIndex === 0) {
+          pts[0] = normalizeDrawingPoint(currentPoint.index, currentPoint.price);
+        } else if (pointIndex === 1) {
+          pts[1] = normalizeDrawingPoint(currentPoint.index, currentPoint.price);
+        } else if (pointIndex === 2) {
+          pts[0] = normalizeDrawingPoint(currentPoint.index, p0.price);
+          pts[1] = normalizeDrawingPoint(p1.index, currentPoint.price);
+        } else if (pointIndex === 3) {
+          pts[0] = normalizeDrawingPoint(p0.index, currentPoint.price);
+          pts[1] = normalizeDrawingPoint(currentPoint.index, p1.price);
+        }
+        return { ...drawing, points: pts };
+      }
       if (drawingDragState.target === "handle" && shiftKeyActive && (drawing.type === "trendline" || drawing.type === "ray")) {
         const pointIndex = drawingDragState.pointIndex ?? 0;
         const anchor = drawing.points[pointIndex === 0 ? 1 : 0];
@@ -4754,7 +4843,7 @@ function createChart(element, options = {}) {
       setCrosshairPoint(null);
       return;
     }
-    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
+    if (draftDrawing && (activeDrawingTool === "trendline" || activeDrawingTool === "ray" || activeDrawingTool === "rectangle" || activeDrawingTool === "fib-retracement" || activeDrawingTool === "fib-extension")) {
       let nextPoint = drawingPointFromCanvas(point.x, point.y);
       if (nextPoint && shiftKeyActive && (draftDrawing.type === "trendline" || draftDrawing.type === "ray") && draftDrawing.points[0]) {
         nextPoint = constrainAngleFromAnchor(draftDrawing.points[0], point.x, point.y) ?? nextPoint;
@@ -5172,6 +5261,50 @@ function createChart(element, options = {}) {
     }
     scheduleDraw();
   };
+  const upsertBar = (point) => {
+    const time = new Date(point.t);
+    const timeMs = time.getTime();
+    const open = Number(point.o);
+    const close = Number(point.c);
+    const highInput = Number(point.h);
+    const lowInput = Number(point.l);
+    if (!Number.isFinite(timeMs) || !Number.isFinite(open) || !Number.isFinite(close) || !Number.isFinite(highInput) || !Number.isFinite(lowInput)) {
+      return;
+    }
+    const volumeValue = point.v === void 0 ? void 0 : Number(point.v);
+    const parsed = {
+      time,
+      o: open,
+      h: Math.max(highInput, open, close),
+      l: Math.min(lowInput, open, close),
+      c: close,
+      ...volumeValue === void 0 || !Number.isFinite(volumeValue) ? {} : { v: volumeValue }
+    };
+    const last = data[data.length - 1];
+    if (!last) {
+      setData([point]);
+      return;
+    }
+    const lastMs = last.time.getTime();
+    if (timeMs === lastMs) {
+      data[data.length - 1] = parsed;
+    } else if (timeMs > lastMs) {
+      data.push(parsed);
+      if (mergedOptions.preserveViewportOnDataUpdate && followLatest) {
+        xCenter = data.length - xSpan / 2 + rightEdgePaddingBars;
+        clampXViewport();
+      }
+    } else {
+      const merged = /* @__PURE__ */ new Map();
+      for (const existing of data) {
+        merged.set(existing.time.getTime(), existing);
+      }
+      merged.set(timeMs, parsed);
+      data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+    }
+    pushSmoothedTicker(parsed.c, parsed.v);
+    scheduleDraw();
+  };
   const setPriceLines = (lines) => {
     priceLines = lines.map((line, index) => ({
       ...line,
@@ -5427,6 +5560,7 @@ function createChart(element, options = {}) {
   return {
     updateOptions,
     setData,
+    upsertBar,
     setPriceLines,
     addPriceLine,
     removePriceLine,

package/package.json

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