hyperprop-charting-library 0.1.11 → 0.1.13

package/dist/index.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,7 +131,8 @@ 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;
@@ -150,6 +162,10 @@ function createChart(element, options = {}) {
     tickerLine: {
       ...DEFAULT_OPTIONS.tickerLine,
       ...options.tickerLine
+    },
+    dashPatterns: {
+      ...DEFAULT_DASH_PATTERNS,
+      ...options.dashPatterns ?? {}
     }
   };
   let width = mergedOptions.width;
@@ -200,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") {
@@ -235,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) {
@@ -242,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);
   };
@@ -254,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 {
@@ -407,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));
@@ -467,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));
@@ -485,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));
@@ -594,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;
@@ -939,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));
@@ -987,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));
@@ -1066,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();
       };
@@ -1108,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;
@@ -1123,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;
@@ -1173,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 {
@@ -1516,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);
@@ -1552,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();
@@ -1663,6 +1713,14 @@ function createChart(element, options = {}) {
     onOrderAction,
     onChartClick,
     onCrosshairMove,
+    zoomInX,
+    zoomOutX,
+    zoomInY,
+    zoomOutY,
+    panX,
+    panY,
+    resetViewport,
+    fitContent,
     setDoubleClickEnabled,
     setDoubleClickAction,
     resize,

package/docs/API.md

@@ -29,17 +29,20 @@ Top-level options:
 
 - `width` (default `720`)
 - `height` (default `360`)
-- `backgroundColor` (default `#ffffff`)
+- `backgroundColor` (default `#101114`)
 - `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`)
+- `minVisibleBars` (default `5`, lower clamp for x zoom)
+- `maxVisibleBars` (default `20000`, upper clamp for x zoom)
+- `maxPanBars` (default `1000000`, max bars allowed to pan beyond data)
 - `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`)
+- `upColor` (default `#2fb171`)
+- `downColor` (default `#d35a5a`)
+- `gridColor` (default `#252932`)
 - `fontFamily`
 - `candleBodyWidthRatio` (default `0.7`)
 - `candleMinWidth` (default `0.5`)
@@ -54,18 +57,19 @@ Top-level options:
 - `priceLines?: PriceLineOptions[]`
 - `orderLines?: OrderLineOptions[]`
 - `tickerLine?: TickerLineOptions`
+- `dashPatterns?: Partial<DashPatternOptions>` (controls dotted/dashed spacing)
 
 ### `AxisOptions`
 
-- `lineColor` (default `#94a3b8`)
-- `textColor` (default `#94a3b8`)
+- `lineColor` (default `#3b3f47`)
+- `textColor` (default `#a9adb6`)
 - `fontSize` (default `12`)
 - `lineWidth` (default `1`)
 
 ### `GridOptions`
 
-- `color` (default `#e2e8f0`)
-- `opacity` (default `0.9`)
+- `color` (default `#2b2f38`)
+- `opacity` (default `0.38`)
 - `horizontalLines` (default `true`)
 - `verticalLines` (default `true`)
 - `horizontalTickCount` (default `5`)
@@ -126,6 +130,15 @@ watermark: {
 - `labelTextColor` (default `#0b1220`)
 - `labelBorderRadius` (default `3`)
 
+### `DashPatternOptions`
+
+- `dotted` (default `[2, 2]`)
+- `dashed` (default `[8, 6]`)
+- `connectorDotted` (default `[2, 3]`)
+- `connectorDashed` (default `[6, 5]`)
+- `borderDotted` (default `[2, 2]`)
+- `borderDashed` (default `[6, 4]`)
+
 ### `PriceLineOptions`
 
 - `id?: string`
@@ -225,6 +238,14 @@ Connector/fill visuals:
 - `onOrderAction(handler: ((event: OrderActionEvent) => void) | null): void`
 - `onChartClick(handler: ((event: ChartClickEvent) => void) | null): void`
 - `onCrosshairMove(handler: ((event: CrosshairMoveEvent) => void) | null): void`
+- `zoomInX(factor?: number): void` (default factor `1.25`)
+- `zoomOutX(factor?: number): void` (default factor `1.25`)
+- `zoomInY(factor?: number): void` (default factor `1.25`)
+- `zoomOutY(factor?: number): void` (default factor `1.25`)
+- `panX(bars: number): void` (negative = left, positive = right)
+- `panY(priceDelta: number): void` (positive = move viewport up)
+- `fitContent(): void` (x-only fit, keeps y zoom)
+- `resetViewport(): void` (fit x + reset y auto-scale)
 - `setDoubleClickEnabled(enabled: boolean): void`
 - `setDoubleClickAction(action: "reset" | "placeLimitOrder"): void`
 - `resize(width?: number, height?: number): void`

package/docs/RECIPES.md

@@ -38,6 +38,19 @@ chart.addPriceLine({
 });
 ```
 
+## Tighten dotted spacing globally
+
+```ts
+const chart = createChart(root, {
+  dashPatterns: {
+    dotted: [2, 1],
+    dashed: [8, 5],
+    connectorDotted: [2, 2],
+    borderDotted: [2, 1]
+  }
+});
+```
+
 ## Add a draggable pending limit line
 
 ```ts

package/package.json

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