hyperprop-charting-library 0.1.112 → 0.1.114

package/dist/hyperprop-charting-library.cjs

@@ -1035,6 +1035,7 @@ function createChart(element, options = {}) {
   let magnetModifierActive = false;
   let shiftKeyActive = false;
   const MAGNET_WEAK_THRESHOLD_PX = 16;
+  const MAGNET_STRONG_THRESHOLD_PX = 48;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -3942,7 +3943,8 @@ function createChart(element, options = {}) {
         nearest = candidate;
       }
     }
-    if (effective === "weak" && Math.abs(canvasYFromDrawingPrice(nearest) - y) > MAGNET_WEAK_THRESHOLD_PX) {
+    const snapThresholdPx = effective === "weak" ? MAGNET_WEAK_THRESHOLD_PX : MAGNET_STRONG_THRESHOLD_PX;
+    if (Math.abs(canvasYFromDrawingPrice(nearest) - y) > snapThresholdPx) {
       return { index, price };
     }
     return { index: barIndex, price: nearest };
@@ -5196,6 +5198,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,
@@ -5451,6 +5497,7 @@ function createChart(element, options = {}) {
   return {
     updateOptions,
     setData,
+    upsertBar,
     setPriceLines,
     addPriceLine,
     removePriceLine,

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

@@ -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

@@ -1009,6 +1009,7 @@ function createChart(element, options = {}) {
   let magnetModifierActive = false;
   let shiftKeyActive = false;
   const MAGNET_WEAK_THRESHOLD_PX = 16;
+  const MAGNET_STRONG_THRESHOLD_PX = 48;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -3916,7 +3917,8 @@ function createChart(element, options = {}) {
         nearest = candidate;
       }
     }
-    if (effective === "weak" && Math.abs(canvasYFromDrawingPrice(nearest) - y) > MAGNET_WEAK_THRESHOLD_PX) {
+    const snapThresholdPx = effective === "weak" ? MAGNET_WEAK_THRESHOLD_PX : MAGNET_STRONG_THRESHOLD_PX;
+    if (Math.abs(canvasYFromDrawingPrice(nearest) - y) > snapThresholdPx) {
       return { index, price };
     }
     return { index: barIndex, price: nearest };
@@ -5170,6 +5172,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,
@@ -5425,6 +5471,7 @@ function createChart(element, options = {}) {
   return {
     updateOptions,
     setData,
+    upsertBar,
     setPriceLines,
     addPriceLine,
     removePriceLine,

package/dist/index.cjs

@@ -1035,6 +1035,7 @@ function createChart(element, options = {}) {
   let magnetModifierActive = false;
   let shiftKeyActive = false;
   const MAGNET_WEAK_THRESHOLD_PX = 16;
+  const MAGNET_STRONG_THRESHOLD_PX = 48;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -3942,7 +3943,8 @@ function createChart(element, options = {}) {
         nearest = candidate;
       }
     }
-    if (effective === "weak" && Math.abs(canvasYFromDrawingPrice(nearest) - y) > MAGNET_WEAK_THRESHOLD_PX) {
+    const snapThresholdPx = effective === "weak" ? MAGNET_WEAK_THRESHOLD_PX : MAGNET_STRONG_THRESHOLD_PX;
+    if (Math.abs(canvasYFromDrawingPrice(nearest) - y) > snapThresholdPx) {
       return { index, price };
     }
     return { index: barIndex, price: nearest };
@@ -5196,6 +5198,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,
@@ -5451,6 +5497,7 @@ function createChart(element, options = {}) {
   return {
     updateOptions,
     setData,
+    upsertBar,
     setPriceLines,
     addPriceLine,
     removePriceLine,

package/dist/index.d.cts

@@ -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

@@ -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

@@ -1009,6 +1009,7 @@ function createChart(element, options = {}) {
   let magnetModifierActive = false;
   let shiftKeyActive = false;
   const MAGNET_WEAK_THRESHOLD_PX = 16;
+  const MAGNET_STRONG_THRESHOLD_PX = 48;
   let drawingHoverHandler = null;
   let lastHoveredDrawingId = null;
   let selectedDrawingId = null;
@@ -3916,7 +3917,8 @@ function createChart(element, options = {}) {
         nearest = candidate;
       }
     }
-    if (effective === "weak" && Math.abs(canvasYFromDrawingPrice(nearest) - y) > MAGNET_WEAK_THRESHOLD_PX) {
+    const snapThresholdPx = effective === "weak" ? MAGNET_WEAK_THRESHOLD_PX : MAGNET_STRONG_THRESHOLD_PX;
+    if (Math.abs(canvasYFromDrawingPrice(nearest) - y) > snapThresholdPx) {
       return { index, price };
     }
     return { index: barIndex, price: nearest };
@@ -5170,6 +5172,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,
@@ -5425,6 +5471,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.112",
+  "version": "0.1.114",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",