hyperprop-charting-library 0.1.11 → 0.1.13

package/README.md

@@ -32,6 +32,20 @@ const data: OhlcDataPoint[] = [
 chart.setData(data);
 ```
 
+## Dash Pattern Styling
+
+You can control dotted/dashed spacing globally with `dashPatterns`:
+
+```ts
+const chart = createChart(root, {
+  dashPatterns: {
+    dotted: [2, 1],
+    connectorDotted: [2, 2],
+    borderDotted: [2, 1]
+  }
+});
+```
+
 ## Full Documentation
 
 - API reference: `docs/API.md`
@@ -46,8 +60,9 @@ chart.setData(data);
 - `chart.setData(data)`
 - `chart.setPriceLines(lines)` / `chart.addPriceLine(line)` / `chart.removePriceLine(id)`
 - `chart.setOrderLines(lines)` / `chart.addOrderLine(line)` / `chart.updateOrderLine(id, patch)` / `chart.removeOrderLine(id)`
-- `chart.onOrderAction(handler)` / `chart.onChartClick(handler)`
+- `chart.onOrderAction(handler)` / `chart.onChartClick(handler)` / `chart.onCrosshairMove(handler)`
 - `chart.setDoubleClickEnabled(enabled)` / `chart.setDoubleClickAction(action)`
+- `chart.zoomInX()` / `chart.zoomOutX()` / `chart.panX(bars)` / `chart.resetViewport()`
 - `chart.resize(width, height)` / `chart.destroy()`
 
 ## Scope

package/dist/hyperprop-charting-library.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,8 +155,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,
@@ -170,6 +186,10 @@ function createChart(element, options = {}) {
     tickerLine: {
       ...DEFAULT_OPTIONS.tickerLine,
       ...options.tickerLine
+    },
+    dashPatterns: {
+      ...DEFAULT_DASH_PATTERNS,
+      ...options.dashPatterns ?? {}
     }
   };
   let width = mergedOptions.width;
@@ -198,6 +218,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;
@@ -218,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") {
@@ -253,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) {
@@ -260,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);
   };
@@ -272,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 {
@@ -425,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));
@@ -485,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));
@@ -503,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));
@@ -612,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;
@@ -957,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));
@@ -1005,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));
@@ -1055,6 +1069,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);
@@ -1073,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();
       };
@@ -1115,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;
@@ -1130,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;
@@ -1180,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 {
@@ -1523,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);
@@ -1559,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();
@@ -1670,6 +1737,14 @@ function createChart(element, options = {}) {
     onOrderAction,
     onChartClick,
     onCrosshairMove,
+    zoomInX,
+    zoomOutX,
+    zoomInY,
+    zoomOutY,
+    panX,
+    panY,
+    resetViewport,
+    fitContent,
     setDoubleClickEnabled,
     setDoubleClickAction,
     resize,

package/dist/hyperprop-charting-library.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 };