hyperprop-charting-library 0.1.8 → 0.1.9

package/dist/index.d.ts

@@ -49,9 +49,13 @@ interface CrosshairOptions {
     showVertical?: boolean;
     showPriceLabel?: boolean;
     showTimeLabel?: boolean;
+    timeLabelFormat?: "auto" | "date" | "time" | "datetime";
     labelBackgroundColor?: string;
     labelTextColor?: string;
     labelBorderRadius?: number;
+    labelBorderColor?: string;
+    labelBorderWidth?: number;
+    labelBorderStyle?: "solid" | "dotted" | "dashed";
 }
 interface WatermarkOptions {
     visible?: boolean;
@@ -148,6 +152,15 @@ interface ChartClickEvent {
     price?: number;
     region: "plot" | "x-axis" | "y-axis";
 }
+interface CrosshairMoveEvent {
+    x: number;
+    y: number;
+    region: "plot" | "x-axis" | "y-axis";
+    price?: number;
+    index?: number;
+    time?: string;
+    point?: OhlcDataPoint;
+}
 interface TickerLineOptions {
     visible?: boolean;
     style?: "solid" | "dotted" | "dashed";
@@ -168,6 +181,7 @@ interface ChartInstance {
     removeOrderLine: (id: string) => void;
     onOrderAction: (handler: ((event: OrderActionEvent) => void) | null) => void;
     onChartClick: (handler: ((event: ChartClickEvent) => void) | null) => void;
+    onCrosshairMove: (handler: ((event: CrosshairMoveEvent) => void) | null) => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     resize: (width?: number, height?: number) => void;
@@ -183,4 +197,4 @@ interface OhlcDataPoint {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };
+export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };

package/dist/index.js

@@ -21,9 +21,13 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   showVertical: true,
   showPriceLabel: true,
   showTimeLabel: true,
+  timeLabelFormat: "auto",
   labelBackgroundColor: "#0b1220",
   labelTextColor: "#cbd5e1",
-  labelBorderRadius: 3
+  labelBorderRadius: 3,
+  labelBorderColor: "#94a3b8",
+  labelBorderWidth: 1,
+  labelBorderStyle: "solid"
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -157,6 +161,7 @@ function createChart(element, options = {}) {
   }));
   let orderActionHandler = null;
   let chartClickHandler = null;
+  let crosshairMoveHandler = null;
   let orderActionRegions = [];
   let orderDragRegions = [];
   let generatedPriceLineId = 1;
@@ -344,6 +349,42 @@ function createChart(element, options = {}) {
     const extra = index - (data.length - 1);
     return new Date(last.time.getTime() + extra * stepMs);
   };
+  const formatHoverTimeLabel = (time, mode) => {
+    if (mode === "time") {
+      return time.toLocaleTimeString(void 0, {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false
+      });
+    }
+    if (mode === "datetime") {
+      return time.toLocaleString(void 0, {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false
+      });
+    }
+    if (mode === "date") {
+      return time.toLocaleDateString(void 0, {
+        month: "short",
+        day: "numeric"
+      });
+    }
+    const stepMs = getTimeStepMs();
+    if (stepMs < 24 * 60 * 60 * 1e3) {
+      return time.toLocaleTimeString(void 0, {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false
+      });
+    }
+    return time.toLocaleDateString(void 0, {
+      month: "short",
+      day: "numeric"
+    });
+  };
   const drawText = (text, x, y, align = "left", baseline = "alphabetic", color = mergedOptions.axis?.textColor ?? mergedOptions.axisColor) => {
     ctx.fillStyle = color;
     ctx.textAlign = align;
@@ -998,6 +1039,26 @@ function createChart(element, options = {}) {
       const labelRadius = Math.max(0, crosshair.labelBorderRadius);
       const labelBackground = crosshair.labelBackgroundColor;
       const labelTextColor = crosshair.labelTextColor;
+      const labelBorderColor = crosshair.labelBorderColor;
+      const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
+      const labelBorderStyle = crosshair.labelBorderStyle;
+      const strokeCrosshairLabel = (x, y, widthValue) => {
+        if (labelBorderWidth <= 0) {
+          return;
+        }
+        ctx.save();
+        ctx.strokeStyle = labelBorderColor;
+        ctx.lineWidth = labelBorderWidth;
+        if (labelBorderStyle === "dotted") {
+          ctx.setLineDash([2, 3]);
+        } else if (labelBorderStyle === "dashed") {
+          ctx.setLineDash([6, 4]);
+        } else {
+          ctx.setLineDash([]);
+        }
+        strokeRoundedRect(Math.round(x), Math.round(y), widthValue, labelHeight, labelRadius);
+        ctx.restore();
+      };
       if (crosshair.showPriceLabel) {
         const hoverPrice = yMin + (chartBottom - cy) / chartHeight * yRange;
         const priceText = formatPrice(hoverPrice);
@@ -1006,6 +1067,7 @@ function createChart(element, options = {}) {
         const priceY = clamp(cy - labelHeight / 2, chartTop, chartBottom - labelHeight);
         ctx.fillStyle = labelBackground;
         fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, labelRadius);
+        strokeCrosshairLabel(priceX, priceY, priceWidth);
         drawText(priceText, priceX + labelPaddingX, priceY + labelHeight / 2, "left", "middle", labelTextColor);
       }
       if (crosshair.showTimeLabel) {
@@ -1013,15 +1075,13 @@ function createChart(element, options = {}) {
         const hoverIndex = Math.round(xStart + ratio * xSpan - 0.5);
         const hoverTime = getTimeForIndex(hoverIndex);
         if (hoverTime) {
-          const timeText = hoverTime.toLocaleDateString(void 0, {
-            month: "short",
-            day: "numeric"
-          });
+          const timeText = formatHoverTimeLabel(hoverTime, crosshair.timeLabelFormat);
           const timeWidth = Math.ceil(ctx.measureText(timeText).width) + labelPaddingX * 2;
           const timeX = clamp(cx - timeWidth / 2, chartLeft, chartRight - timeWidth);
           const timeY = chartBottom + 8;
           ctx.fillStyle = labelBackground;
           fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth, labelHeight, labelRadius);
+          strokeCrosshairLabel(timeX, timeY, timeWidth);
           drawText(timeText, timeX + labelPaddingX, timeY + labelHeight / 2, "left", "middle", labelTextColor);
         }
       }
@@ -1120,6 +1180,39 @@ function createChart(element, options = {}) {
     const ratio = clamp((drawState.chartBottom - y) / drawState.chartHeight, 0, 1);
     return drawState.yMin + ratio * (drawState.yMax - drawState.yMin);
   };
+  const indexFromCanvasX = (x) => {
+    if (!drawState) {
+      return null;
+    }
+    const ratio = clamp((x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    return Math.round(drawState.xStart + ratio * drawState.xSpan - 0.5);
+  };
+  const emitCrosshairMove = (x, y, region) => {
+    if (!crosshairMoveHandler) {
+      return;
+    }
+    const index = indexFromCanvasX(x);
+    const hoverTime = index === null ? null : getTimeForIndex(index);
+    const parsedPoint = index === null ? void 0 : data[index];
+    const point = parsedPoint === void 0 ? void 0 : {
+      t: parsedPoint.time.toISOString(),
+      o: parsedPoint.o,
+      h: parsedPoint.h,
+      l: parsedPoint.l,
+      c: parsedPoint.c,
+      ...parsedPoint.v === void 0 ? {} : { v: parsedPoint.v }
+    };
+    const payload = {
+      x,
+      y,
+      region,
+      ...region === "plot" ? { price: Number(priceFromCanvasY(y).toFixed(mergedOptions.priceDecimals)) } : {},
+      ...index === null ? {} : { index },
+      ...hoverTime ? { time: hoverTime.toISOString() } : {},
+      ...point ? { point } : {}
+    };
+    crosshairMoveHandler(payload);
+  };
   const getHitRegion = (x, y) => {
     if (!drawState) {
       return "outside";
@@ -1273,12 +1366,15 @@ function createChart(element, options = {}) {
       if (hoverRegion === "plot") {
         canvas.style.cursor = "default";
         setCrosshairPoint(point);
+        emitCrosshairMove(point.x, point.y, "plot");
       } else if (hoverRegion === "x-axis") {
         canvas.style.cursor = "ew-resize";
         setCrosshairPoint(null);
+        emitCrosshairMove(point.x, point.y, "x-axis");
       } else if (hoverRegion === "y-axis") {
         canvas.style.cursor = "ns-resize";
         setCrosshairPoint(null);
+        emitCrosshairMove(point.x, point.y, "y-axis");
       } else {
         canvas.style.cursor = "default";
         setCrosshairPoint(null);
@@ -1288,7 +1384,7 @@ function createChart(element, options = {}) {
     const deltaX = point.x - lastPointerX;
     const deltaY = point.y - lastPointerY;
     if (dragMode === "plot") {
-      canvas.style.cursor = "grabbing";
+      canvas.style.cursor = "default";
       pan(deltaX, deltaY, true, true);
       setCrosshairPoint(null);
     } else if (dragMode === "x-axis") {
@@ -1518,6 +1614,9 @@ function createChart(element, options = {}) {
   const onChartClick = (handler) => {
     chartClickHandler = handler;
   };
+  const onCrosshairMove = (handler) => {
+    crosshairMoveHandler = handler;
+  };
   const setDoubleClickEnabled = (enabled) => {
     doubleClickEnabled = enabled;
   };
@@ -1546,6 +1645,7 @@ function createChart(element, options = {}) {
     removeOrderLine,
     onOrderAction,
     onChartClick,
+    onCrosshairMove,
     setDoubleClickEnabled,
     setDoubleClickAction,
     resize,

package/docs/API.md

@@ -80,9 +80,13 @@ Top-level options:
 - `showVertical` (default `true`)
 - `showPriceLabel` (default `true`)
 - `showTimeLabel` (default `true`)
+- `timeLabelFormat` (`"auto" | "date" | "time" | "datetime"`, default `"auto"`)
 - `labelBackgroundColor` (default `#0b1220`)
 - `labelTextColor` (default `#cbd5e1`)
 - `labelBorderRadius` (default `3`)
+- `labelBorderColor` (default `#94a3b8`)
+- `labelBorderWidth` (default `1`)
+- `labelBorderStyle` (`"solid" | "dotted" | "dashed"`, default `"solid"`)
 
 ### `WatermarkOptions`
 
@@ -208,6 +212,7 @@ Connector/fill visuals:
 - `removeOrderLine(id: string): void`
 - `onOrderAction(handler: ((event: OrderActionEvent) => void) | null): void`
 - `onChartClick(handler: ((event: ChartClickEvent) => void) | null): void`
+- `onCrosshairMove(handler: ((event: CrosshairMoveEvent) => void) | null): void`
 - `setDoubleClickEnabled(enabled: boolean): void`
 - `setDoubleClickAction(action: "reset" | "placeLimitOrder"): void`
 - `resize(width?: number, height?: number): void`

package/docs/EVENTS.md

@@ -76,6 +76,39 @@ type ChartClickEvent = {
 
 ---
 
+## `onCrosshairMove`
+
+Register:
+
+```ts
+chart.onCrosshairMove((event) => {
+  // update OHLC header, hover widgets, etc
+});
+```
+
+Payload type:
+
+```ts
+type CrosshairMoveEvent = {
+  x: number;
+  y: number;
+  region: "plot" | "x-axis" | "y-axis";
+  price?: number;
+  index?: number;
+  time?: string;
+  point?: OhlcDataPoint;
+};
+```
+
+### Notes
+
+- Fires while hovering in chart regions.
+- For plot hover, `price` is included.
+- `point` is included when hover maps to an existing candle index.
+- Use this to implement TradingView-style dynamic OHLC readout in your app header.
+
+---
+
 ## Double-click integration
 
 Set behavior:

package/package.json

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