hyperprop-charting-library 0.1.117 → 0.1.119

package/dist/hyperprop-charting-library.cjs

@@ -43,7 +43,10 @@ var DEFAULT_GRID_OPTIONS = {
   verticalLines: true,
   xTickCount: 8,
   yTickCount: 6,
-  horizontalTickCount: 6
+  horizontalTickCount: 6,
+  sessionSeparators: false,
+  sessionSeparatorColor: "#3b4150",
+  sessionSeparatorOpacity: 0.55
 };
 var DEFAULT_AXIS_OPTIONS = {
   lineColor: "#3b3f47",
@@ -1146,7 +1149,7 @@ function createChart(element, options = {}) {
   canvas.setAttribute("draggable", "false");
   element.innerHTML = "";
   element.appendChild(canvas);
-  const margin = { top: 16, right: 72, bottom: 34, left: 12 };
+  const margin = { top: 16, right: 72, bottom: 26, left: 12 };
   let cachedRightMargin = margin.right;
   const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
   const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
@@ -2917,6 +2920,32 @@ function createChart(element, options = {}) {
       }
       ctx.restore();
     }
+    if (grid.sessionSeparators && data.length > 1) {
+      const first = Math.max(1, startIndex);
+      const barDeltaMs = data.length > 1 ? Math.abs(data[Math.min(first, data.length - 1)].time.getTime() - data[Math.min(first, data.length - 1) - 1].time.getTime()) : 0;
+      if (barDeltaMs > 0 && barDeltaMs < 0.9 * 864e5) {
+        const SESSION_ANCHOR_MS = 22 * 36e5;
+        const sessionDayOf = (ms) => Math.floor((ms - SESSION_ANCHOR_MS) / 864e5);
+        ctx.save();
+        ctx.globalAlpha = clamp(grid.sessionSeparatorOpacity, 0, 1);
+        ctx.strokeStyle = grid.sessionSeparatorColor;
+        ctx.lineWidth = 1;
+        for (let index = first; index <= endIndex; index += 1) {
+          const point = data[index];
+          const prev = data[index - 1];
+          if (!point || !prev) continue;
+          if (sessionDayOf(point.time.getTime()) === sessionDayOf(prev.time.getTime())) {
+            continue;
+          }
+          const x = chartLeft + (index - xStart) / xSpan * chartWidth;
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(chartTop));
+          ctx.lineTo(crisp(x), crisp(fullChartBottom));
+          ctx.stroke();
+        }
+        ctx.restore();
+      }
+    }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const useSmoothedCandle = tickerOpts.smoothing && smoothedTickerPrice !== null;
     const lastDataIndex = data.length - 1;

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

@@ -215,6 +215,14 @@ interface GridOptions {
     xTickCount?: number;
     yTickCount?: number;
     horizontalTickCount?: number;
+    /**
+     * Vertical separator at every trading-day boundary (a bar whose UTC
+     * calendar day differs from the previous bar's). Drawn stronger than the
+     * regular grid so intraday charts stay oriented while scrolling history.
+     */
+    sessionSeparators?: boolean;
+    sessionSeparatorColor?: string;
+    sessionSeparatorOpacity?: number;
 }
 interface CrosshairOptions {
     visible?: boolean;

package/dist/hyperprop-charting-library.js

@@ -17,7 +17,10 @@ var DEFAULT_GRID_OPTIONS = {
   verticalLines: true,
   xTickCount: 8,
   yTickCount: 6,
-  horizontalTickCount: 6
+  horizontalTickCount: 6,
+  sessionSeparators: false,
+  sessionSeparatorColor: "#3b4150",
+  sessionSeparatorOpacity: 0.55
 };
 var DEFAULT_AXIS_OPTIONS = {
   lineColor: "#3b3f47",
@@ -1120,7 +1123,7 @@ function createChart(element, options = {}) {
   canvas.setAttribute("draggable", "false");
   element.innerHTML = "";
   element.appendChild(canvas);
-  const margin = { top: 16, right: 72, bottom: 34, left: 12 };
+  const margin = { top: 16, right: 72, bottom: 26, left: 12 };
   let cachedRightMargin = margin.right;
   const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
   const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
@@ -2891,6 +2894,32 @@ function createChart(element, options = {}) {
       }
       ctx.restore();
     }
+    if (grid.sessionSeparators && data.length > 1) {
+      const first = Math.max(1, startIndex);
+      const barDeltaMs = data.length > 1 ? Math.abs(data[Math.min(first, data.length - 1)].time.getTime() - data[Math.min(first, data.length - 1) - 1].time.getTime()) : 0;
+      if (barDeltaMs > 0 && barDeltaMs < 0.9 * 864e5) {
+        const SESSION_ANCHOR_MS = 22 * 36e5;
+        const sessionDayOf = (ms) => Math.floor((ms - SESSION_ANCHOR_MS) / 864e5);
+        ctx.save();
+        ctx.globalAlpha = clamp(grid.sessionSeparatorOpacity, 0, 1);
+        ctx.strokeStyle = grid.sessionSeparatorColor;
+        ctx.lineWidth = 1;
+        for (let index = first; index <= endIndex; index += 1) {
+          const point = data[index];
+          const prev = data[index - 1];
+          if (!point || !prev) continue;
+          if (sessionDayOf(point.time.getTime()) === sessionDayOf(prev.time.getTime())) {
+            continue;
+          }
+          const x = chartLeft + (index - xStart) / xSpan * chartWidth;
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(chartTop));
+          ctx.lineTo(crisp(x), crisp(fullChartBottom));
+          ctx.stroke();
+        }
+        ctx.restore();
+      }
+    }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const useSmoothedCandle = tickerOpts.smoothing && smoothedTickerPrice !== null;
     const lastDataIndex = data.length - 1;

package/dist/index.cjs

@@ -43,7 +43,10 @@ var DEFAULT_GRID_OPTIONS = {
   verticalLines: true,
   xTickCount: 8,
   yTickCount: 6,
-  horizontalTickCount: 6
+  horizontalTickCount: 6,
+  sessionSeparators: false,
+  sessionSeparatorColor: "#3b4150",
+  sessionSeparatorOpacity: 0.55
 };
 var DEFAULT_AXIS_OPTIONS = {
   lineColor: "#3b3f47",
@@ -1146,7 +1149,7 @@ function createChart(element, options = {}) {
   canvas.setAttribute("draggable", "false");
   element.innerHTML = "";
   element.appendChild(canvas);
-  const margin = { top: 16, right: 72, bottom: 34, left: 12 };
+  const margin = { top: 16, right: 72, bottom: 26, left: 12 };
   let cachedRightMargin = margin.right;
   const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
   const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
@@ -2917,6 +2920,32 @@ function createChart(element, options = {}) {
       }
       ctx.restore();
     }
+    if (grid.sessionSeparators && data.length > 1) {
+      const first = Math.max(1, startIndex);
+      const barDeltaMs = data.length > 1 ? Math.abs(data[Math.min(first, data.length - 1)].time.getTime() - data[Math.min(first, data.length - 1) - 1].time.getTime()) : 0;
+      if (barDeltaMs > 0 && barDeltaMs < 0.9 * 864e5) {
+        const SESSION_ANCHOR_MS = 22 * 36e5;
+        const sessionDayOf = (ms) => Math.floor((ms - SESSION_ANCHOR_MS) / 864e5);
+        ctx.save();
+        ctx.globalAlpha = clamp(grid.sessionSeparatorOpacity, 0, 1);
+        ctx.strokeStyle = grid.sessionSeparatorColor;
+        ctx.lineWidth = 1;
+        for (let index = first; index <= endIndex; index += 1) {
+          const point = data[index];
+          const prev = data[index - 1];
+          if (!point || !prev) continue;
+          if (sessionDayOf(point.time.getTime()) === sessionDayOf(prev.time.getTime())) {
+            continue;
+          }
+          const x = chartLeft + (index - xStart) / xSpan * chartWidth;
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(chartTop));
+          ctx.lineTo(crisp(x), crisp(fullChartBottom));
+          ctx.stroke();
+        }
+        ctx.restore();
+      }
+    }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const useSmoothedCandle = tickerOpts.smoothing && smoothedTickerPrice !== null;
     const lastDataIndex = data.length - 1;

package/dist/index.d.cts

@@ -215,6 +215,14 @@ interface GridOptions {
     xTickCount?: number;
     yTickCount?: number;
     horizontalTickCount?: number;
+    /**
+     * Vertical separator at every trading-day boundary (a bar whose UTC
+     * calendar day differs from the previous bar's). Drawn stronger than the
+     * regular grid so intraday charts stay oriented while scrolling history.
+     */
+    sessionSeparators?: boolean;
+    sessionSeparatorColor?: string;
+    sessionSeparatorOpacity?: number;
 }
 interface CrosshairOptions {
     visible?: boolean;

package/dist/index.d.ts

@@ -215,6 +215,14 @@ interface GridOptions {
     xTickCount?: number;
     yTickCount?: number;
     horizontalTickCount?: number;
+    /**
+     * Vertical separator at every trading-day boundary (a bar whose UTC
+     * calendar day differs from the previous bar's). Drawn stronger than the
+     * regular grid so intraday charts stay oriented while scrolling history.
+     */
+    sessionSeparators?: boolean;
+    sessionSeparatorColor?: string;
+    sessionSeparatorOpacity?: number;
 }
 interface CrosshairOptions {
     visible?: boolean;

package/dist/index.js

@@ -17,7 +17,10 @@ var DEFAULT_GRID_OPTIONS = {
   verticalLines: true,
   xTickCount: 8,
   yTickCount: 6,
-  horizontalTickCount: 6
+  horizontalTickCount: 6,
+  sessionSeparators: false,
+  sessionSeparatorColor: "#3b4150",
+  sessionSeparatorOpacity: 0.55
 };
 var DEFAULT_AXIS_OPTIONS = {
   lineColor: "#3b3f47",
@@ -1120,7 +1123,7 @@ function createChart(element, options = {}) {
   canvas.setAttribute("draggable", "false");
   element.innerHTML = "";
   element.appendChild(canvas);
-  const margin = { top: 16, right: 72, bottom: 34, left: 12 };
+  const margin = { top: 16, right: 72, bottom: 26, left: 12 };
   let cachedRightMargin = margin.right;
   const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
   const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
@@ -2891,6 +2894,32 @@ function createChart(element, options = {}) {
       }
       ctx.restore();
     }
+    if (grid.sessionSeparators && data.length > 1) {
+      const first = Math.max(1, startIndex);
+      const barDeltaMs = data.length > 1 ? Math.abs(data[Math.min(first, data.length - 1)].time.getTime() - data[Math.min(first, data.length - 1) - 1].time.getTime()) : 0;
+      if (barDeltaMs > 0 && barDeltaMs < 0.9 * 864e5) {
+        const SESSION_ANCHOR_MS = 22 * 36e5;
+        const sessionDayOf = (ms) => Math.floor((ms - SESSION_ANCHOR_MS) / 864e5);
+        ctx.save();
+        ctx.globalAlpha = clamp(grid.sessionSeparatorOpacity, 0, 1);
+        ctx.strokeStyle = grid.sessionSeparatorColor;
+        ctx.lineWidth = 1;
+        for (let index = first; index <= endIndex; index += 1) {
+          const point = data[index];
+          const prev = data[index - 1];
+          if (!point || !prev) continue;
+          if (sessionDayOf(point.time.getTime()) === sessionDayOf(prev.time.getTime())) {
+            continue;
+          }
+          const x = chartLeft + (index - xStart) / xSpan * chartWidth;
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(chartTop));
+          ctx.lineTo(crisp(x), crisp(fullChartBottom));
+          ctx.stroke();
+        }
+        ctx.restore();
+      }
+    }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const useSmoothedCandle = tickerOpts.smoothing && smoothedTickerPrice !== null;
     const lastDataIndex = data.length - 1;

package/package.json

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