hyperprop-charting-library 0.1.6 → 0.1.8

package/dist/index.cjs

@@ -42,7 +42,12 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   width: 1,
   style: "dotted",
   showHorizontal: true,
-  showVertical: true
+  showVertical: true,
+  showPriceLabel: true,
+  showTimeLabel: true,
+  labelBackgroundColor: "#0b1220",
+  labelTextColor: "#cbd5e1",
+  labelBorderRadius: 3
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -51,7 +56,13 @@ var DEFAULT_WATERMARK_OPTIONS = {
   opacity: 0.14,
   fontSize: 92,
   fontWeight: 700,
-  thickness: 0
+  thickness: 0,
+  imageSrc: "",
+  imageScale: 1,
+  imageMaxWidthRatio: 0.42,
+  imageMaxHeightRatio: 0.3,
+  imageTintColor: "",
+  imageTintOpacity: 1
 };
 var DEFAULT_PRICE_LINE_OPTIONS = {
   visible: true,
@@ -182,6 +193,9 @@ function createChart(element, options = {}) {
   let yMaxOverride = null;
   let autoYMin = null;
   let autoYMax = null;
+  let watermarkImageSrc = null;
+  let watermarkImage = null;
+  let watermarkImageReady = false;
   let drawState = null;
   let orderDragState = null;
   let actionDragState = null;
@@ -207,6 +221,29 @@ function createChart(element, options = {}) {
     }
     return Math.max(1, window.devicePixelRatio || 1);
   };
+  const ensureWatermarkImage = (src) => {
+    if (src === watermarkImageSrc) {
+      return;
+    }
+    watermarkImageSrc = src;
+    watermarkImageReady = false;
+    watermarkImage = null;
+    if (!src) {
+      return;
+    }
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.onload = () => {
+      watermarkImage = image;
+      watermarkImageReady = true;
+      draw();
+    };
+    image.onerror = () => {
+      watermarkImage = null;
+      watermarkImageReady = false;
+    };
+    image.src = src;
+  };
   const crisp = (value) => Math.round(value) + 0.5;
   const clamp = (value, min, max) => {
     return Math.min(max, Math.max(min, value));
@@ -755,6 +792,31 @@ function createChart(element, options = {}) {
     const yFromPrice = (price) => {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
+    if (watermark.visible && watermark.imageSrc.trim().length > 0) {
+      ensureWatermarkImage(watermark.imageSrc.trim());
+      if (watermarkImageReady && watermarkImage) {
+        const maxW = chartWidth * clamp(watermark.imageMaxWidthRatio, 0.05, 1);
+        const maxH = chartHeight * clamp(watermark.imageMaxHeightRatio, 0.05, 1);
+        const naturalW = Math.max(1, watermarkImage.naturalWidth || watermarkImage.width);
+        const naturalH = Math.max(1, watermarkImage.naturalHeight || watermarkImage.height);
+        const containScale = Math.min(maxW / naturalW, maxH / naturalH);
+        const scale = Math.max(0.05, containScale * Math.max(0.05, watermark.imageScale));
+        const drawW = naturalW * scale;
+        const drawH = naturalH * scale;
+        const drawX = chartLeft + (chartWidth - drawW) / 2;
+        const drawY = chartTop + (chartHeight - drawH) / 2;
+        ctx.save();
+        ctx.globalAlpha = clamp(watermark.opacity, 0, 1);
+        ctx.drawImage(watermarkImage, drawX, drawY, drawW, drawH);
+        if (watermark.imageTintColor.trim().length > 0) {
+          ctx.globalCompositeOperation = "source-atop";
+          ctx.globalAlpha = clamp(watermark.opacity, 0, 1) * clamp(watermark.imageTintOpacity, 0, 1);
+          ctx.fillStyle = watermark.imageTintColor;
+          ctx.fillRect(drawX, drawY, drawW, drawH);
+        }
+        ctx.restore();
+      }
+    }
     if (watermark.visible && watermark.text.trim().length > 0) {
       ctx.save();
       ctx.globalAlpha = clamp(watermark.opacity, 0, 1);
@@ -952,6 +1014,42 @@ function createChart(element, options = {}) {
       });
       drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
     }
+    if (crosshair.visible && crosshairPoint) {
+      const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
+      const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
+      const labelPaddingX = 8;
+      const labelHeight = 20;
+      const labelRadius = Math.max(0, crosshair.labelBorderRadius);
+      const labelBackground = crosshair.labelBackgroundColor;
+      const labelTextColor = crosshair.labelTextColor;
+      if (crosshair.showPriceLabel) {
+        const hoverPrice = yMin + (chartBottom - cy) / chartHeight * yRange;
+        const priceText = formatPrice(hoverPrice);
+        const priceWidth = Math.ceil(ctx.measureText(priceText).width) + labelPaddingX * 2;
+        const priceX = chartRight + 4;
+        const priceY = clamp(cy - labelHeight / 2, chartTop, chartBottom - labelHeight);
+        ctx.fillStyle = labelBackground;
+        fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, labelRadius);
+        drawText(priceText, priceX + labelPaddingX, priceY + labelHeight / 2, "left", "middle", labelTextColor);
+      }
+      if (crosshair.showTimeLabel) {
+        const ratio = clamp((cx - chartLeft) / chartWidth, 0, 1);
+        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 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);
+          drawText(timeText, timeX + labelPaddingX, timeY + labelHeight / 2, "left", "middle", labelTextColor);
+        }
+      }
+    }
   };
   const zoomX = (factor, anchorX) => {
     if (!drawState || data.length === 0) {
@@ -1197,7 +1295,7 @@ function createChart(element, options = {}) {
       }
       const hoverRegion = getHitRegion(point.x, point.y);
       if (hoverRegion === "plot") {
-        canvas.style.cursor = "grab";
+        canvas.style.cursor = "default";
         setCrosshairPoint(point);
       } else if (hoverRegion === "x-axis") {
         canvas.style.cursor = "ew-resize";

package/dist/index.d.cts

@@ -47,6 +47,11 @@ interface CrosshairOptions {
     style?: "solid" | "dotted" | "dashed";
     showHorizontal?: boolean;
     showVertical?: boolean;
+    showPriceLabel?: boolean;
+    showTimeLabel?: boolean;
+    labelBackgroundColor?: string;
+    labelTextColor?: string;
+    labelBorderRadius?: number;
 }
 interface WatermarkOptions {
     visible?: boolean;
@@ -56,6 +61,12 @@ interface WatermarkOptions {
     fontSize?: number;
     fontWeight?: number | string;
     thickness?: number;
+    imageSrc?: string;
+    imageScale?: number;
+    imageMaxWidthRatio?: number;
+    imageMaxHeightRatio?: number;
+    imageTintColor?: string;
+    imageTintOpacity?: number;
 }
 interface PriceLineOptions {
     id?: string;

package/dist/index.d.ts

@@ -47,6 +47,11 @@ interface CrosshairOptions {
     style?: "solid" | "dotted" | "dashed";
     showHorizontal?: boolean;
     showVertical?: boolean;
+    showPriceLabel?: boolean;
+    showTimeLabel?: boolean;
+    labelBackgroundColor?: string;
+    labelTextColor?: string;
+    labelBorderRadius?: number;
 }
 interface WatermarkOptions {
     visible?: boolean;
@@ -56,6 +61,12 @@ interface WatermarkOptions {
     fontSize?: number;
     fontWeight?: number | string;
     thickness?: number;
+    imageSrc?: string;
+    imageScale?: number;
+    imageMaxWidthRatio?: number;
+    imageMaxHeightRatio?: number;
+    imageTintColor?: string;
+    imageTintOpacity?: number;
 }
 interface PriceLineOptions {
     id?: string;

package/dist/index.js

@@ -18,7 +18,12 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   width: 1,
   style: "dotted",
   showHorizontal: true,
-  showVertical: true
+  showVertical: true,
+  showPriceLabel: true,
+  showTimeLabel: true,
+  labelBackgroundColor: "#0b1220",
+  labelTextColor: "#cbd5e1",
+  labelBorderRadius: 3
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
@@ -27,7 +32,13 @@ var DEFAULT_WATERMARK_OPTIONS = {
   opacity: 0.14,
   fontSize: 92,
   fontWeight: 700,
-  thickness: 0
+  thickness: 0,
+  imageSrc: "",
+  imageScale: 1,
+  imageMaxWidthRatio: 0.42,
+  imageMaxHeightRatio: 0.3,
+  imageTintColor: "",
+  imageTintOpacity: 1
 };
 var DEFAULT_PRICE_LINE_OPTIONS = {
   visible: true,
@@ -158,6 +169,9 @@ function createChart(element, options = {}) {
   let yMaxOverride = null;
   let autoYMin = null;
   let autoYMax = null;
+  let watermarkImageSrc = null;
+  let watermarkImage = null;
+  let watermarkImageReady = false;
   let drawState = null;
   let orderDragState = null;
   let actionDragState = null;
@@ -183,6 +197,29 @@ function createChart(element, options = {}) {
     }
     return Math.max(1, window.devicePixelRatio || 1);
   };
+  const ensureWatermarkImage = (src) => {
+    if (src === watermarkImageSrc) {
+      return;
+    }
+    watermarkImageSrc = src;
+    watermarkImageReady = false;
+    watermarkImage = null;
+    if (!src) {
+      return;
+    }
+    const image = new Image();
+    image.crossOrigin = "anonymous";
+    image.onload = () => {
+      watermarkImage = image;
+      watermarkImageReady = true;
+      draw();
+    };
+    image.onerror = () => {
+      watermarkImage = null;
+      watermarkImageReady = false;
+    };
+    image.src = src;
+  };
   const crisp = (value) => Math.round(value) + 0.5;
   const clamp = (value, min, max) => {
     return Math.min(max, Math.max(min, value));
@@ -731,6 +768,31 @@ function createChart(element, options = {}) {
     const yFromPrice = (price) => {
       return chartBottom - (price - yMin) / yRange * chartHeight;
     };
+    if (watermark.visible && watermark.imageSrc.trim().length > 0) {
+      ensureWatermarkImage(watermark.imageSrc.trim());
+      if (watermarkImageReady && watermarkImage) {
+        const maxW = chartWidth * clamp(watermark.imageMaxWidthRatio, 0.05, 1);
+        const maxH = chartHeight * clamp(watermark.imageMaxHeightRatio, 0.05, 1);
+        const naturalW = Math.max(1, watermarkImage.naturalWidth || watermarkImage.width);
+        const naturalH = Math.max(1, watermarkImage.naturalHeight || watermarkImage.height);
+        const containScale = Math.min(maxW / naturalW, maxH / naturalH);
+        const scale = Math.max(0.05, containScale * Math.max(0.05, watermark.imageScale));
+        const drawW = naturalW * scale;
+        const drawH = naturalH * scale;
+        const drawX = chartLeft + (chartWidth - drawW) / 2;
+        const drawY = chartTop + (chartHeight - drawH) / 2;
+        ctx.save();
+        ctx.globalAlpha = clamp(watermark.opacity, 0, 1);
+        ctx.drawImage(watermarkImage, drawX, drawY, drawW, drawH);
+        if (watermark.imageTintColor.trim().length > 0) {
+          ctx.globalCompositeOperation = "source-atop";
+          ctx.globalAlpha = clamp(watermark.opacity, 0, 1) * clamp(watermark.imageTintOpacity, 0, 1);
+          ctx.fillStyle = watermark.imageTintColor;
+          ctx.fillRect(drawX, drawY, drawW, drawH);
+        }
+        ctx.restore();
+      }
+    }
     if (watermark.visible && watermark.text.trim().length > 0) {
       ctx.save();
       ctx.globalAlpha = clamp(watermark.opacity, 0, 1);
@@ -928,6 +990,42 @@ function createChart(element, options = {}) {
       });
       drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
     }
+    if (crosshair.visible && crosshairPoint) {
+      const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
+      const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
+      const labelPaddingX = 8;
+      const labelHeight = 20;
+      const labelRadius = Math.max(0, crosshair.labelBorderRadius);
+      const labelBackground = crosshair.labelBackgroundColor;
+      const labelTextColor = crosshair.labelTextColor;
+      if (crosshair.showPriceLabel) {
+        const hoverPrice = yMin + (chartBottom - cy) / chartHeight * yRange;
+        const priceText = formatPrice(hoverPrice);
+        const priceWidth = Math.ceil(ctx.measureText(priceText).width) + labelPaddingX * 2;
+        const priceX = chartRight + 4;
+        const priceY = clamp(cy - labelHeight / 2, chartTop, chartBottom - labelHeight);
+        ctx.fillStyle = labelBackground;
+        fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, labelRadius);
+        drawText(priceText, priceX + labelPaddingX, priceY + labelHeight / 2, "left", "middle", labelTextColor);
+      }
+      if (crosshair.showTimeLabel) {
+        const ratio = clamp((cx - chartLeft) / chartWidth, 0, 1);
+        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 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);
+          drawText(timeText, timeX + labelPaddingX, timeY + labelHeight / 2, "left", "middle", labelTextColor);
+        }
+      }
+    }
   };
   const zoomX = (factor, anchorX) => {
     if (!drawState || data.length === 0) {
@@ -1173,7 +1271,7 @@ function createChart(element, options = {}) {
       }
       const hoverRegion = getHitRegion(point.x, point.y);
       if (hoverRegion === "plot") {
-        canvas.style.cursor = "grab";
+        canvas.style.cursor = "default";
         setCrosshairPoint(point);
       } else if (hoverRegion === "x-axis") {
         canvas.style.cursor = "ew-resize";

package/docs/API.md

@@ -78,26 +78,37 @@ Top-level options:
 - `style` (`"solid" | "dotted" | "dashed"`, default `"dotted"`)
 - `showHorizontal` (default `true`)
 - `showVertical` (default `true`)
+- `showPriceLabel` (default `true`)
+- `showTimeLabel` (default `true`)
+- `labelBackgroundColor` (default `#0b1220`)
+- `labelTextColor` (default `#cbd5e1`)
+- `labelBorderRadius` (default `3`)
 
 ### `WatermarkOptions`
 
 - `visible` (default `false`)
 - `text` (default `""`)
-- `color` (default `#94a3b8`)
-- `opacity` (default `0.2`)
+- `color` (default `#81858d`)
+- `opacity` (default `0.14`)
 - `fontSize` (default `92`)
 - `fontWeight` (default `700`)
 - `thickness` (stroke width, default `0`)
+- `imageSrc` (default `""`, URL/path to watermark logo)
+- `imageScale` (default `1`)
+- `imageMaxWidthRatio` (default `0.42`)
+- `imageMaxHeightRatio` (default `0.3`)
+- `imageTintColor` (default `""`, set `"#ffffff"` for white logo tint)
+- `imageTintOpacity` (default `1`)
 
 ### `TickerLineOptions`
 
 - `visible` (default `true`)
-- `style` (`"solid" | "dotted" | "dashed"`, default `"dashed"`)
+- `style` (`"solid" | "dotted" | "dashed"`, default `"dotted"`)
 - `thickness` (default `1`)
-- `color` (default `#22c55e`)
-- `labelBackgroundColor` (default `#22c55e`)
+- `color` (default `#38bdf8`)
+- `labelBackgroundColor` (default `#38bdf8`)
 - `labelTextColor` (default `#0b1220`)
-- `labelBorderRadius` (default `6`)
+- `labelBorderRadius` (default `3`)
 
 ### `PriceLineOptions`
 

package/package.json

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