hyperprop-charting-library 0.1.11 → 0.1.13

package/dist/index.cjs

@@ -68,6 +68,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",
@@ -118,6 +126,9 @@ var DEFAULT_OPTIONS = {
   priceDecimals: 2,
   initialViewport: "latest",
   initialVisibleBars: 60,
+  minVisibleBars: 5,
+  maxVisibleBars: 2e4,
+  maxPanBars: 1e6,
   rightEdgePaddingBars: 2,
   preserveViewportOnDataUpdate: true,
   upColor: "#2fb171",
@@ -144,7 +155,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;
@@ -174,6 +186,10 @@ function createChart(element, options = {}) {
     tickerLine: {
       ...DEFAULT_OPTIONS.tickerLine,
       ...options.tickerLine
+    },
+    dashPatterns: {
+      ...DEFAULT_DASH_PATTERNS,
+      ...options.dashPatterns ?? {}
     }
   };
   let width = mergedOptions.width;
@@ -224,7 +240,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") {
@@ -259,6 +277,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) {
@@ -266,8 +301,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);
   };
@@ -278,8 +313,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 {
@@ -431,13 +467,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));
@@ -491,13 +521,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));
@@ -509,13 +533,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));
@@ -618,13 +640,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;
@@ -963,13 +983,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));
@@ -1011,13 +1025,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));
@@ -1090,13 +1098,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();
       };
@@ -1132,8 +1138,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;
@@ -1147,8 +1153,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;
@@ -1197,6 +1203,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 {
@@ -1540,19 +1604,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);
@@ -1576,19 +1632,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();
@@ -1687,6 +1737,14 @@ function createChart(element, options = {}) {
     onOrderAction,
     onChartClick,
     onCrosshairMove,
+    zoomInX,
+    zoomOutX,
+    zoomInY,
+    zoomOutY,
+    panX,
+    panY,
+    resetViewport,
+    fitContent,
     setDoubleClickEnabled,
     setDoubleClickAction,
     resize,

package/dist/index.d.cts

@@ -7,6 +7,9 @@ interface ChartOptions {
     priceDecimals?: number;
     initialViewport?: "latest" | "center";
     initialVisibleBars?: number;
+    minVisibleBars?: number;
+    maxVisibleBars?: number;
+    maxPanBars?: number;
     rightEdgePaddingBars?: number;
     preserveViewportOnDataUpdate?: boolean;
     upColor?: string;
@@ -26,6 +29,15 @@ interface ChartOptions {
     priceLines?: PriceLineOptions[];
     orderLines?: OrderLineOptions[];
     tickerLine?: TickerLineOptions;
+    dashPatterns?: Partial<DashPatternOptions>;
+}
+interface DashPatternOptions {
+    dotted: [number, number];
+    dashed: [number, number];
+    connectorDotted: [number, number];
+    connectorDashed: [number, number];
+    borderDotted: [number, number];
+    borderDashed: [number, number];
 }
 interface AxisOptions {
     lineColor?: string;
@@ -182,6 +194,14 @@ interface ChartInstance {
     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;
+    zoomOutX: (factor?: number) => void;
+    zoomInY: (factor?: number) => void;
+    zoomOutY: (factor?: number) => void;
+    panX: (bars: number) => void;
+    panY: (priceDelta: number) => void;
+    resetViewport: () => void;
+    fitContent: () => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     resize: (width?: number, height?: number) => void;
@@ -197,4 +217,4 @@ interface OhlcDataPoint {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-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 };
+export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type DashPatternOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };

package/dist/index.d.ts

@@ -7,6 +7,9 @@ interface ChartOptions {
     priceDecimals?: number;
     initialViewport?: "latest" | "center";
     initialVisibleBars?: number;
+    minVisibleBars?: number;
+    maxVisibleBars?: number;
+    maxPanBars?: number;
     rightEdgePaddingBars?: number;
     preserveViewportOnDataUpdate?: boolean;
     upColor?: string;
@@ -26,6 +29,15 @@ interface ChartOptions {
     priceLines?: PriceLineOptions[];
     orderLines?: OrderLineOptions[];
     tickerLine?: TickerLineOptions;
+    dashPatterns?: Partial<DashPatternOptions>;
+}
+interface DashPatternOptions {
+    dotted: [number, number];
+    dashed: [number, number];
+    connectorDotted: [number, number];
+    connectorDashed: [number, number];
+    borderDotted: [number, number];
+    borderDashed: [number, number];
 }
 interface AxisOptions {
     lineColor?: string;
@@ -182,6 +194,14 @@ interface ChartInstance {
     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;
+    zoomOutX: (factor?: number) => void;
+    zoomInY: (factor?: number) => void;
+    zoomOutY: (factor?: number) => void;
+    panX: (bars: number) => void;
+    panY: (priceDelta: number) => void;
+    resetViewport: () => void;
+    fitContent: () => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     resize: (width?: number, height?: number) => void;
@@ -197,4 +217,4 @@ interface OhlcDataPoint {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-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 };
+export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type DashPatternOptions, type GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };