hyperprop-charting-library 0.1.5 → 0.1.7

package/dist/index.cjs

@@ -51,7 +51,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,
@@ -101,6 +107,10 @@ var DEFAULT_OPTIONS = {
   axisColor: "#7f8289",
   axis: DEFAULT_AXIS_OPTIONS,
   priceDecimals: 2,
+  initialViewport: "latest",
+  initialVisibleBars: 60,
+  rightEdgePaddingBars: 2,
+  preserveViewportOnDataUpdate: true,
   upColor: "#2fb171",
   downColor: "#d35a5a",
   gridColor: "#252932",
@@ -178,6 +188,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;
@@ -196,13 +209,36 @@ function createChart(element, options = {}) {
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
   const maxPanBars = 1e6;
-  const rightEdgePaddingBars = 2;
+  const rightEdgePaddingBars = Math.max(0, mergedOptions.rightEdgePaddingBars);
   const getPixelRatio = () => {
     if (typeof window === "undefined") {
       return 1;
     }
     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));
@@ -226,8 +262,13 @@ function createChart(element, options = {}) {
       xSpan = 60;
       return;
     }
-    xSpan = Math.min(60, count);
-    xCenter = count - xSpan / 2;
+    const requestedVisibleBars = Math.max(5, Math.floor(mergedOptions.initialVisibleBars));
+    xSpan = Math.min(requestedVisibleBars, Math.max(5, count));
+    if (mergedOptions.initialViewport === "center") {
+      xCenter = count / 2;
+    } else {
+      xCenter = count - xSpan / 2 + rightEdgePaddingBars;
+    }
     clampXViewport();
   };
   const getYBounds = () => {
@@ -746,6 +787,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);
@@ -1370,7 +1436,11 @@ function createChart(element, options = {}) {
       autoYMin = null;
       autoYMax = null;
     } else {
-      clampXViewport();
+      if (mergedOptions.preserveViewportOnDataUpdate) {
+        clampXViewport();
+      } else {
+        fitXViewport();
+      }
     }
     draw();
   };

package/dist/index.d.cts

@@ -5,6 +5,10 @@ interface ChartOptions {
     axisColor?: string;
     axis?: AxisOptions;
     priceDecimals?: number;
+    initialViewport?: "latest" | "center";
+    initialVisibleBars?: number;
+    rightEdgePaddingBars?: number;
+    preserveViewportOnDataUpdate?: boolean;
     upColor?: string;
     downColor?: string;
     gridColor?: string;
@@ -52,6 +56,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

@@ -5,6 +5,10 @@ interface ChartOptions {
     axisColor?: string;
     axis?: AxisOptions;
     priceDecimals?: number;
+    initialViewport?: "latest" | "center";
+    initialVisibleBars?: number;
+    rightEdgePaddingBars?: number;
+    preserveViewportOnDataUpdate?: boolean;
     upColor?: string;
     downColor?: string;
     gridColor?: string;
@@ -52,6 +56,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

@@ -27,7 +27,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,
@@ -77,6 +83,10 @@ var DEFAULT_OPTIONS = {
   axisColor: "#7f8289",
   axis: DEFAULT_AXIS_OPTIONS,
   priceDecimals: 2,
+  initialViewport: "latest",
+  initialVisibleBars: 60,
+  rightEdgePaddingBars: 2,
+  preserveViewportOnDataUpdate: true,
   upColor: "#2fb171",
   downColor: "#d35a5a",
   gridColor: "#252932",
@@ -154,6 +164,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;
@@ -172,13 +185,36 @@ function createChart(element, options = {}) {
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
   const maxPanBars = 1e6;
-  const rightEdgePaddingBars = 2;
+  const rightEdgePaddingBars = Math.max(0, mergedOptions.rightEdgePaddingBars);
   const getPixelRatio = () => {
     if (typeof window === "undefined") {
       return 1;
     }
     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));
@@ -202,8 +238,13 @@ function createChart(element, options = {}) {
       xSpan = 60;
       return;
     }
-    xSpan = Math.min(60, count);
-    xCenter = count - xSpan / 2;
+    const requestedVisibleBars = Math.max(5, Math.floor(mergedOptions.initialVisibleBars));
+    xSpan = Math.min(requestedVisibleBars, Math.max(5, count));
+    if (mergedOptions.initialViewport === "center") {
+      xCenter = count / 2;
+    } else {
+      xCenter = count - xSpan / 2 + rightEdgePaddingBars;
+    }
     clampXViewport();
   };
   const getYBounds = () => {
@@ -722,6 +763,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);
@@ -1346,7 +1412,11 @@ function createChart(element, options = {}) {
       autoYMin = null;
       autoYMax = null;
     } else {
-      clampXViewport();
+      if (mergedOptions.preserveViewportOnDataUpdate) {
+        clampXViewport();
+      } else {
+        fitXViewport();
+      }
     }
     draw();
   };

package/docs/API.md

@@ -33,6 +33,10 @@ Top-level options:
 - `axisColor` (legacy shorthand for axis line/text color)
 - `axis?: AxisOptions`
 - `priceDecimals` (default `2`, used for axis/ticker/line price labels)
+- `initialViewport` (`"latest"` | `"center"`, default `"latest"`)
+- `initialVisibleBars` (default `60`)
+- `rightEdgePaddingBars` (default `2`, used by latest-anchored viewport)
+- `preserveViewportOnDataUpdate` (default `true`; set `false` to auto-fit on each `setData`)
 - `upColor` (default `#16a34a`)
 - `downColor` (default `#dc2626`)
 - `gridColor` (default `#e2e8f0`)
@@ -79,11 +83,17 @@ Top-level options:
 
 - `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`
 

package/package.json

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