hyperprop-charting-library 0.1.123 → 0.1.124

package/dist/hyperprop-charting-library.cjs

@@ -1364,7 +1364,7 @@ function createChart(element, options = {}) {
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
-    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 4, 1, 60);
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += priceDiff * lerp;
@@ -1801,6 +1801,56 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const indexForTimeMs = (timeMs) => {
+    if (!Number.isFinite(timeMs) || data.length === 0) {
+      return null;
+    }
+    const firstMs = data[0].time.getTime();
+    const lastMs = data[data.length - 1].time.getTime();
+    if (timeMs < firstMs) {
+      const stepMs = getTimeStepMs();
+      return stepMs > 0 ? (timeMs - firstMs) / stepMs : 0;
+    }
+    if (timeMs > lastMs) {
+      const stepMs = getTimeStepMs();
+      return data.length - 1 + (stepMs > 0 ? (timeMs - lastMs) / stepMs : 0);
+    }
+    return findNearestIndexForTimeMs(timeMs);
+  };
+  const reanchorDrawingPoint = (point) => {
+    if (!point.time) {
+      return point;
+    }
+    const timeMs = Date.parse(point.time);
+    if (!Number.isFinite(timeMs)) {
+      return point;
+    }
+    const rounded = Math.round(point.index);
+    if (data[rounded]?.time.getTime() === timeMs) {
+      return point;
+    }
+    const mapped = indexForTimeMs(timeMs);
+    if (mapped === null) {
+      return point;
+    }
+    const fraction = point.index - rounded;
+    return { ...point, index: mapped + fraction };
+  };
+  const reanchorDrawingsToData = () => {
+    if (data.length === 0) {
+      return;
+    }
+    drawings = drawings.map((drawing) => ({
+      ...drawing,
+      points: drawing.points.map((point) => reanchorDrawingPoint(point))
+    }));
+    if (draftDrawing) {
+      draftDrawing = {
+        ...draftDrawing,
+        points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
+      };
+    }
+  };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
     if (!point) {
@@ -5785,6 +5835,7 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    reanchorDrawingsToData();
     const lastPoint = data[data.length - 1];
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
@@ -5831,6 +5882,7 @@ function createChart(element, options = {}) {
       }
       merged.set(timeMs, parsed);
       data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+      reanchorDrawingsToData();
     }
     pushSmoothedTicker(parsed.c, parsed.v);
     scheduleDraw();
@@ -6013,11 +6065,13 @@ function createChart(element, options = {}) {
   const setDrawings = (nextDrawings) => {
     drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
     draftDrawing = null;
+    reanchorDrawingsToData();
     emitDrawingsChange();
     scheduleDraw();
   };
   const addDrawing = (drawing) => {
     const next = normalizeDrawingState(drawing);
+    next.points = next.points.map((point) => reanchorDrawingPoint(point));
     drawings.push(next);
     emitDrawingsChange();
     scheduleDraw();
@@ -6029,7 +6083,7 @@ function createChart(element, options = {}) {
         ...serializeDrawing(drawing),
         ...patch,
         id,
-        points: patch.points ?? drawing.points
+        points: (patch.points ?? drawing.points).map((point) => reanchorDrawingPoint(point))
       }) : drawing
     );
     emitDrawingsChange();

package/dist/hyperprop-charting-library.js

@@ -1338,7 +1338,7 @@ function createChart(element, options = {}) {
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
-    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 4, 1, 60);
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += priceDiff * lerp;
@@ -1775,6 +1775,56 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const indexForTimeMs = (timeMs) => {
+    if (!Number.isFinite(timeMs) || data.length === 0) {
+      return null;
+    }
+    const firstMs = data[0].time.getTime();
+    const lastMs = data[data.length - 1].time.getTime();
+    if (timeMs < firstMs) {
+      const stepMs = getTimeStepMs();
+      return stepMs > 0 ? (timeMs - firstMs) / stepMs : 0;
+    }
+    if (timeMs > lastMs) {
+      const stepMs = getTimeStepMs();
+      return data.length - 1 + (stepMs > 0 ? (timeMs - lastMs) / stepMs : 0);
+    }
+    return findNearestIndexForTimeMs(timeMs);
+  };
+  const reanchorDrawingPoint = (point) => {
+    if (!point.time) {
+      return point;
+    }
+    const timeMs = Date.parse(point.time);
+    if (!Number.isFinite(timeMs)) {
+      return point;
+    }
+    const rounded = Math.round(point.index);
+    if (data[rounded]?.time.getTime() === timeMs) {
+      return point;
+    }
+    const mapped = indexForTimeMs(timeMs);
+    if (mapped === null) {
+      return point;
+    }
+    const fraction = point.index - rounded;
+    return { ...point, index: mapped + fraction };
+  };
+  const reanchorDrawingsToData = () => {
+    if (data.length === 0) {
+      return;
+    }
+    drawings = drawings.map((drawing) => ({
+      ...drawing,
+      points: drawing.points.map((point) => reanchorDrawingPoint(point))
+    }));
+    if (draftDrawing) {
+      draftDrawing = {
+        ...draftDrawing,
+        points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
+      };
+    }
+  };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
     if (!point) {
@@ -5759,6 +5809,7 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    reanchorDrawingsToData();
     const lastPoint = data[data.length - 1];
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
@@ -5805,6 +5856,7 @@ function createChart(element, options = {}) {
       }
       merged.set(timeMs, parsed);
       data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+      reanchorDrawingsToData();
     }
     pushSmoothedTicker(parsed.c, parsed.v);
     scheduleDraw();
@@ -5987,11 +6039,13 @@ function createChart(element, options = {}) {
   const setDrawings = (nextDrawings) => {
     drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
     draftDrawing = null;
+    reanchorDrawingsToData();
     emitDrawingsChange();
     scheduleDraw();
   };
   const addDrawing = (drawing) => {
     const next = normalizeDrawingState(drawing);
+    next.points = next.points.map((point) => reanchorDrawingPoint(point));
     drawings.push(next);
     emitDrawingsChange();
     scheduleDraw();
@@ -6003,7 +6057,7 @@ function createChart(element, options = {}) {
         ...serializeDrawing(drawing),
         ...patch,
         id,
-        points: patch.points ?? drawing.points
+        points: (patch.points ?? drawing.points).map((point) => reanchorDrawingPoint(point))
       }) : drawing
     );
     emitDrawingsChange();

package/dist/index.cjs

@@ -1364,7 +1364,7 @@ function createChart(element, options = {}) {
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
-    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 4, 1, 60);
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += priceDiff * lerp;
@@ -1801,6 +1801,56 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const indexForTimeMs = (timeMs) => {
+    if (!Number.isFinite(timeMs) || data.length === 0) {
+      return null;
+    }
+    const firstMs = data[0].time.getTime();
+    const lastMs = data[data.length - 1].time.getTime();
+    if (timeMs < firstMs) {
+      const stepMs = getTimeStepMs();
+      return stepMs > 0 ? (timeMs - firstMs) / stepMs : 0;
+    }
+    if (timeMs > lastMs) {
+      const stepMs = getTimeStepMs();
+      return data.length - 1 + (stepMs > 0 ? (timeMs - lastMs) / stepMs : 0);
+    }
+    return findNearestIndexForTimeMs(timeMs);
+  };
+  const reanchorDrawingPoint = (point) => {
+    if (!point.time) {
+      return point;
+    }
+    const timeMs = Date.parse(point.time);
+    if (!Number.isFinite(timeMs)) {
+      return point;
+    }
+    const rounded = Math.round(point.index);
+    if (data[rounded]?.time.getTime() === timeMs) {
+      return point;
+    }
+    const mapped = indexForTimeMs(timeMs);
+    if (mapped === null) {
+      return point;
+    }
+    const fraction = point.index - rounded;
+    return { ...point, index: mapped + fraction };
+  };
+  const reanchorDrawingsToData = () => {
+    if (data.length === 0) {
+      return;
+    }
+    drawings = drawings.map((drawing) => ({
+      ...drawing,
+      points: drawing.points.map((point) => reanchorDrawingPoint(point))
+    }));
+    if (draftDrawing) {
+      draftDrawing = {
+        ...draftDrawing,
+        points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
+      };
+    }
+  };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
     if (!point) {
@@ -5785,6 +5835,7 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    reanchorDrawingsToData();
     const lastPoint = data[data.length - 1];
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
@@ -5831,6 +5882,7 @@ function createChart(element, options = {}) {
       }
       merged.set(timeMs, parsed);
       data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+      reanchorDrawingsToData();
     }
     pushSmoothedTicker(parsed.c, parsed.v);
     scheduleDraw();
@@ -6013,11 +6065,13 @@ function createChart(element, options = {}) {
   const setDrawings = (nextDrawings) => {
     drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
     draftDrawing = null;
+    reanchorDrawingsToData();
     emitDrawingsChange();
     scheduleDraw();
   };
   const addDrawing = (drawing) => {
     const next = normalizeDrawingState(drawing);
+    next.points = next.points.map((point) => reanchorDrawingPoint(point));
     drawings.push(next);
     emitDrawingsChange();
     scheduleDraw();
@@ -6029,7 +6083,7 @@ function createChart(element, options = {}) {
         ...serializeDrawing(drawing),
         ...patch,
         id,
-        points: patch.points ?? drawing.points
+        points: (patch.points ?? drawing.points).map((point) => reanchorDrawingPoint(point))
       }) : drawing
     );
     emitDrawingsChange();

package/dist/index.js

@@ -1338,7 +1338,7 @@ function createChart(element, options = {}) {
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
-    const speed = clamp(tickerOpts.smoothingSpeed ?? 8, 1, 60);
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 4, 1, 60);
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += priceDiff * lerp;
@@ -1775,6 +1775,56 @@ function createChart(element, options = {}) {
     const upperDelta = Math.abs(upperPoint.time.getTime() - timeMs);
     return lowerDelta <= upperDelta ? lower : upper;
   };
+  const indexForTimeMs = (timeMs) => {
+    if (!Number.isFinite(timeMs) || data.length === 0) {
+      return null;
+    }
+    const firstMs = data[0].time.getTime();
+    const lastMs = data[data.length - 1].time.getTime();
+    if (timeMs < firstMs) {
+      const stepMs = getTimeStepMs();
+      return stepMs > 0 ? (timeMs - firstMs) / stepMs : 0;
+    }
+    if (timeMs > lastMs) {
+      const stepMs = getTimeStepMs();
+      return data.length - 1 + (stepMs > 0 ? (timeMs - lastMs) / stepMs : 0);
+    }
+    return findNearestIndexForTimeMs(timeMs);
+  };
+  const reanchorDrawingPoint = (point) => {
+    if (!point.time) {
+      return point;
+    }
+    const timeMs = Date.parse(point.time);
+    if (!Number.isFinite(timeMs)) {
+      return point;
+    }
+    const rounded = Math.round(point.index);
+    if (data[rounded]?.time.getTime() === timeMs) {
+      return point;
+    }
+    const mapped = indexForTimeMs(timeMs);
+    if (mapped === null) {
+      return point;
+    }
+    const fraction = point.index - rounded;
+    return { ...point, index: mapped + fraction };
+  };
+  const reanchorDrawingsToData = () => {
+    if (data.length === 0) {
+      return;
+    }
+    drawings = drawings.map((drawing) => ({
+      ...drawing,
+      points: drawing.points.map((point) => reanchorDrawingPoint(point))
+    }));
+    if (draftDrawing) {
+      draftDrawing = {
+        ...draftDrawing,
+        points: draftDrawing.points.map((point) => reanchorDrawingPoint(point))
+      };
+    }
+  };
   const getCandleDirectionByIndex = (index) => {
     const point = data[index];
     if (!point) {
@@ -5759,6 +5809,7 @@ function createChart(element, options = {}) {
         fitXViewport();
       }
     }
+    reanchorDrawingsToData();
     const lastPoint = data[data.length - 1];
     if (lastPoint) {
       pushSmoothedTicker(lastPoint.c, lastPoint.v);
@@ -5805,6 +5856,7 @@ function createChart(element, options = {}) {
       }
       merged.set(timeMs, parsed);
       data = Array.from(merged.values()).sort((a, b) => a.time.getTime() - b.time.getTime());
+      reanchorDrawingsToData();
     }
     pushSmoothedTicker(parsed.c, parsed.v);
     scheduleDraw();
@@ -5987,11 +6039,13 @@ function createChart(element, options = {}) {
   const setDrawings = (nextDrawings) => {
     drawings = dedupeDrawingIds(nextDrawings.map((drawing) => normalizeDrawingState(drawing)));
     draftDrawing = null;
+    reanchorDrawingsToData();
     emitDrawingsChange();
     scheduleDraw();
   };
   const addDrawing = (drawing) => {
     const next = normalizeDrawingState(drawing);
+    next.points = next.points.map((point) => reanchorDrawingPoint(point));
     drawings.push(next);
     emitDrawingsChange();
     scheduleDraw();
@@ -6003,7 +6057,7 @@ function createChart(element, options = {}) {
         ...serializeDrawing(drawing),
         ...patch,
         id,
-        points: patch.points ?? drawing.points
+        points: (patch.points ?? drawing.points).map((point) => reanchorDrawingPoint(point))
       }) : drawing
     );
     emitDrawingsChange();

package/package.json

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