hyperprop-charting-library 0.1.11 → 0.1.13

package/dist/hyperprop-charting-library.js

@@ -44,6 +44,14 @@ var DEFAULT_WATERMARK_OPTIONS = {
   imageTintColor: "",
   imageTintOpacity: 1
 };
+var DEFAULT_DASH_PATTERNS = {
+  dotted: [2, 2],
+  dashed: [8, 6],
+  connectorDotted: [2, 3],
+  connectorDashed: [6, 5],
+  borderDotted: [2, 2],
+  borderDashed: [6, 4]
+};
 var DEFAULT_PRICE_LINE_OPTIONS = {
   visible: true,
   style: "solid",
@@ -94,6 +102,9 @@ var DEFAULT_OPTIONS = {
   priceDecimals: 2,
   initialViewport: "latest",
   initialVisibleBars: 60,
+  minVisibleBars: 5,
+  maxVisibleBars: 2e4,
+  maxPanBars: 1e6,
   rightEdgePaddingBars: 2,
   preserveViewportOnDataUpdate: true,
   upColor: "#2fb171",
@@ -120,8 +131,13 @@ var DEFAULT_OPTIONS = {
     labelBackgroundColor: "#38bdf8",
     labelTextColor: "#0b1220",
     labelBorderRadius: 3
-  }
+  },
+  dashPatterns: DEFAULT_DASH_PATTERNS
 };
+var BRAND_LOGO_VIEWBOX_WIDTH = 190;
+var BRAND_LOGO_VIEWBOX_HEIGHT = 186;
+var BRAND_LOGO_PATH_A = "M0 93.0171V45.2271H48.9851V75.0332C48.9851 84.9545 57.0416 93.0001 66.9763 93.0001H94.9957V186H49.0531V110.984C49.0531 101.063 40.9965 93.0171 31.0619 93.0171H0Z";
+var BRAND_LOGO_PATH_B = "M190 92.9915V140.782H141.015V110.975C141.015 101.054 132.958 93.0085 123.023 93.0085H95.0039V0H140.955V75.0162C140.955 84.9374 149.012 92.9831 158.946 92.9831H190V92.9915Z";
 function createChart(element, options = {}) {
   const mergedOptions = {
     ...DEFAULT_OPTIONS,
@@ -146,6 +162,10 @@ function createChart(element, options = {}) {
     tickerLine: {
       ...DEFAULT_OPTIONS.tickerLine,
       ...options.tickerLine
+    },
+    dashPatterns: {
+      ...DEFAULT_DASH_PATTERNS,
+      ...options.dashPatterns ?? {}
     }
   };
   let width = mergedOptions.width;
@@ -174,6 +194,8 @@ function createChart(element, options = {}) {
   let yMaxOverride = null;
   let autoYMin = null;
   let autoYMax = null;
+  const brandLogoPathA = new Path2D(BRAND_LOGO_PATH_A);
+  const brandLogoPathB = new Path2D(BRAND_LOGO_PATH_B);
   let watermarkImageSrc = null;
   let watermarkImage = null;
   let watermarkImageReady = false;
@@ -194,7 +216,9 @@ function createChart(element, options = {}) {
   element.innerHTML = "";
   element.appendChild(canvas);
   const margin = { top: 16, right: 72, bottom: 34, left: 12 };
-  const maxPanBars = 1e6;
+  const minVisibleBars = Math.max(1, Math.floor(mergedOptions.minVisibleBars));
+  const maxVisibleBars = Math.max(minVisibleBars, Math.floor(mergedOptions.maxVisibleBars));
+  const maxPanBars = Math.max(0, Math.floor(mergedOptions.maxPanBars));
   const rightEdgePaddingBars = Math.max(0, mergedOptions.rightEdgePaddingBars);
   const getPixelRatio = () => {
     if (typeof window === "undefined") {
@@ -229,6 +253,23 @@ function createChart(element, options = {}) {
   const clamp = (value, min, max) => {
     return Math.min(max, Math.max(min, value));
   };
+  const dashPatterns = {
+    dotted: mergedOptions.dashPatterns.dotted ?? DEFAULT_DASH_PATTERNS.dotted,
+    dashed: mergedOptions.dashPatterns.dashed ?? DEFAULT_DASH_PATTERNS.dashed,
+    connectorDotted: mergedOptions.dashPatterns.connectorDotted ?? DEFAULT_DASH_PATTERNS.connectorDotted,
+    connectorDashed: mergedOptions.dashPatterns.connectorDashed ?? DEFAULT_DASH_PATTERNS.connectorDashed,
+    borderDotted: mergedOptions.dashPatterns.borderDotted ?? DEFAULT_DASH_PATTERNS.borderDotted,
+    borderDashed: mergedOptions.dashPatterns.borderDashed ?? DEFAULT_DASH_PATTERNS.borderDashed
+  };
+  const applyDashPattern = (style, dotted, dashed) => {
+    if (style === "dotted") {
+      ctx.setLineDash(dotted);
+    } else if (style === "dashed") {
+      ctx.setLineDash(dashed);
+    } else {
+      ctx.setLineDash([]);
+    }
+  };
   const clampXViewport = () => {
     const count = data.length;
     if (count === 0) {
@@ -236,8 +277,8 @@ function createChart(element, options = {}) {
       xSpan = 60;
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, count + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, count + maxPanBars * 2));
     xSpan = clamp(xSpan, minSpan, maxSpan);
     xCenter = clamp(xCenter, -maxPanBars, count + maxPanBars);
   };
@@ -248,8 +289,9 @@ function createChart(element, options = {}) {
       xSpan = 60;
       return;
     }
-    const requestedVisibleBars = Math.max(5, Math.floor(mergedOptions.initialVisibleBars));
-    xSpan = Math.min(requestedVisibleBars, Math.max(5, count));
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minVisibleBars, count + maxPanBars * 2));
+    const requestedVisibleBars = clamp(Math.floor(mergedOptions.initialVisibleBars), minVisibleBars, maxSpan);
+    xSpan = requestedVisibleBars;
     if (mergedOptions.initialViewport === "center") {
       xCenter = count / 2;
     } else {
@@ -401,13 +443,7 @@ function createChart(element, options = {}) {
     ctx.save();
     ctx.strokeStyle = color;
     ctx.lineWidth = Math.max(1, mergedLine.thickness);
-    if (mergedLine.style === "dotted") {
-      ctx.setLineDash([2, 4]);
-    } else if (mergedLine.style === "dashed") {
-      ctx.setLineDash([8, 6]);
-    } else {
-      ctx.setLineDash([]);
-    }
+    applyDashPattern(mergedLine.style, dashPatterns.dotted, dashPatterns.dashed);
     ctx.beginPath();
     ctx.moveTo(crisp(chartLeft), crisp(lineY));
     ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -461,13 +497,7 @@ function createChart(element, options = {}) {
     ctx.save();
     ctx.strokeStyle = color;
     ctx.lineWidth = Math.max(1, mergedLine.thickness);
-    if (mergedLine.style === "dotted") {
-      ctx.setLineDash([2, 4]);
-    } else if (mergedLine.style === "dashed") {
-      ctx.setLineDash([8, 6]);
-    } else {
-      ctx.setLineDash([]);
-    }
+    applyDashPattern(mergedLine.style, dashPatterns.dotted, dashPatterns.dashed);
     ctx.beginPath();
     ctx.moveTo(crisp(chartLeft), crisp(lineY));
     ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -479,13 +509,11 @@ function createChart(element, options = {}) {
       ctx.save();
       ctx.strokeStyle = mergedLine.connectorColor ?? color;
       ctx.lineWidth = Math.max(1, mergedLine.connectorThickness);
-      if (mergedLine.connectorStyle === "dotted") {
-        ctx.setLineDash([2, 5]);
-      } else if (mergedLine.connectorStyle === "dashed") {
-        ctx.setLineDash([6, 5]);
-      } else {
-        ctx.setLineDash([]);
-      }
+      applyDashPattern(
+        mergedLine.connectorStyle,
+        dashPatterns.connectorDotted,
+        dashPatterns.connectorDashed
+      );
       ctx.beginPath();
       ctx.moveTo(crisp(connectorX), crisp(lineY));
       ctx.lineTo(crisp(connectorX), crisp(connectorY));
@@ -588,13 +616,11 @@ function createChart(element, options = {}) {
         ctx.save();
         ctx.strokeStyle = actionBorderColor;
         ctx.lineWidth = 1;
-        if (actionBorderStyle === "dotted") {
-          ctx.setLineDash([2, 3]);
-        } else if (actionBorderStyle === "dashed") {
-          ctx.setLineDash([6, 4]);
-        } else {
-          ctx.setLineDash([]);
-        }
+        applyDashPattern(
+          actionBorderStyle,
+          dashPatterns.borderDotted,
+          dashPatterns.borderDashed
+        );
         strokeRoundedRect(Math.round(actionX), Math.round(actionY), actionW, actionH, actionRadius);
         ctx.restore();
         const baseFont = ctx.font;
@@ -933,13 +959,7 @@ function createChart(element, options = {}) {
       ctx.save();
       ctx.strokeStyle = crosshair.color;
       ctx.lineWidth = Math.max(1, crosshair.width);
-      if (crosshair.style === "dotted") {
-        ctx.setLineDash([2, 4]);
-      } else if (crosshair.style === "dashed") {
-        ctx.setLineDash([8, 6]);
-      } else {
-        ctx.setLineDash([]);
-      }
+      applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
       if (crosshair.showVertical) {
         ctx.beginPath();
         ctx.moveTo(crisp(cx), crisp(chartTop));
@@ -981,13 +1001,7 @@ function createChart(element, options = {}) {
       ctx.save();
       ctx.strokeStyle = tickerColor;
       ctx.lineWidth = tickerThickness;
-      if (tickerStyle === "dotted") {
-        ctx.setLineDash([2, 4]);
-      } else if (tickerStyle === "dashed") {
-        ctx.setLineDash([8, 6]);
-      } else {
-        ctx.setLineDash([]);
-      }
+      applyDashPattern(tickerStyle, dashPatterns.dotted, dashPatterns.dashed);
       ctx.beginPath();
       ctx.moveTo(crisp(chartLeft), crisp(lineY));
       ctx.lineTo(crisp(chartRight), crisp(lineY));
@@ -1031,6 +1045,17 @@ function createChart(element, options = {}) {
       });
       drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
     }
+    const brandLogoWidth = 34;
+    const brandLogoHeight = BRAND_LOGO_VIEWBOX_HEIGHT / BRAND_LOGO_VIEWBOX_WIDTH * brandLogoWidth;
+    const brandLogoX = chartLeft + 16;
+    const brandLogoY = chartBottom - brandLogoHeight - 10;
+    ctx.save();
+    ctx.translate(brandLogoX, brandLogoY);
+    ctx.scale(brandLogoWidth / BRAND_LOGO_VIEWBOX_WIDTH, brandLogoHeight / BRAND_LOGO_VIEWBOX_HEIGHT);
+    ctx.fillStyle = "#ffffff";
+    ctx.fill(brandLogoPathA);
+    ctx.fill(brandLogoPathB);
+    ctx.restore();
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
@@ -1049,13 +1074,11 @@ function createChart(element, options = {}) {
         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([]);
-        }
+        applyDashPattern(
+          labelBorderStyle,
+          dashPatterns.borderDotted,
+          dashPatterns.borderDashed
+        );
         strokeRoundedRect(Math.round(x), Math.round(y), widthValue, labelHeight, labelRadius);
         ctx.restore();
       };
@@ -1091,8 +1114,8 @@ function createChart(element, options = {}) {
     if (!drawState || data.length === 0) {
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, data.length + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
     const nextSpan = clamp(xSpan * factor, minSpan, maxSpan);
     const anchorRatio = clamp((anchorX - drawState.chartLeft) / drawState.chartWidth, 0, 1);
     const anchorIndex = drawState.xStart + anchorRatio * xSpan;
@@ -1106,8 +1129,8 @@ function createChart(element, options = {}) {
     if (!drawState || data.length === 0) {
       return;
     }
-    const minSpan = 5;
-    const maxSpan = Math.max(minSpan, data.length + maxPanBars * 2);
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
     const nextSpan = clamp(xSpan * factor, minSpan, maxSpan);
     const rightEdgeIndex = data.length + rightEdgePaddingBars;
     const nextStart = rightEdgeIndex - nextSpan;
@@ -1156,6 +1179,64 @@ function createChart(element, options = {}) {
     }
     draw();
   };
+  const resetYViewport = () => {
+    yMinOverride = null;
+    yMaxOverride = null;
+    autoYMin = null;
+    autoYMax = null;
+  };
+  const zoomInX = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomX(1 / Math.max(1.01, factor), drawState.chartLeft + drawState.chartWidth / 2);
+  };
+  const zoomOutX = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomX(Math.max(1.01, factor), drawState.chartLeft + drawState.chartWidth / 2);
+  };
+  const zoomInY = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomY(1 / Math.max(1.01, factor), drawState.chartTop + drawState.chartHeight / 2);
+  };
+  const zoomOutY = (factor = 1.25) => {
+    if (!drawState) {
+      return;
+    }
+    zoomY(Math.max(1.01, factor), drawState.chartTop + drawState.chartHeight / 2);
+  };
+  const panX = (bars) => {
+    if (!Number.isFinite(bars) || bars === 0) {
+      return;
+    }
+    xCenter += bars;
+    clampXViewport();
+    draw();
+  };
+  const panY = (priceDelta) => {
+    if (!drawState || !Number.isFinite(priceDelta) || priceDelta === 0) {
+      return;
+    }
+    const currentMin = yMinOverride ?? drawState.yMin;
+    const currentMax = yMaxOverride ?? drawState.yMax;
+    const clamped = clampYRange(currentMin + priceDelta, currentMax + priceDelta);
+    yMinOverride = clamped.min;
+    yMaxOverride = clamped.max;
+    draw();
+  };
+  const fitContent = () => {
+    fitXViewport();
+    draw();
+  };
+  const resetViewport = () => {
+    fitXViewport();
+    resetYViewport();
+    draw();
+  };
   const getCanvasPoint = (event) => {
     const rect = canvas.getBoundingClientRect();
     return {
@@ -1499,19 +1580,11 @@ function createChart(element, options = {}) {
       return;
     }
     if (region === "y-axis") {
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
       draw();
       return;
     }
-    fitXViewport();
-    yMinOverride = null;
-    yMaxOverride = null;
-    autoYMin = null;
-    autoYMax = null;
-    draw();
+    resetViewport();
   };
   canvas.addEventListener("pointerdown", onPointerDown);
   canvas.addEventListener("pointermove", onPointerMove);
@@ -1535,19 +1608,13 @@ function createChart(element, options = {}) {
     if (data.length === 0) {
       xCenter = 0;
       xSpan = 60;
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
       draw();
       return;
     }
     if (!hadData) {
       fitXViewport();
-      yMinOverride = null;
-      yMaxOverride = null;
-      autoYMin = null;
-      autoYMax = null;
+      resetYViewport();
     } else {
       if (mergedOptions.preserveViewportOnDataUpdate) {
         clampXViewport();
@@ -1646,6 +1713,14 @@ function createChart(element, options = {}) {
     onOrderAction,
     onChartClick,
     onCrosshairMove,
+    zoomInX,
+    zoomOutX,
+    zoomInY,
+    zoomOutY,
+    panX,
+    panY,
+    resetViewport,
+    fitContent,
     setDoubleClickEnabled,
     setDoubleClickAction,
     resize,