hyperprop-charting-library 0.1.8 → 0.1.9

package/dist/hyperprop-charting-library.cjs

@@ -24,15 +24,15 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 var DEFAULT_GRID_OPTIONS = {
-  color: "#e2e8f0",
-  opacity: 0.9,
+  color: "#2b2f38",
+  opacity: 0.38,
   horizontalLines: true,
   verticalLines: true,
   horizontalTickCount: 5
 };
 var DEFAULT_AXIS_OPTIONS = {
-  lineColor: "#94a3b8",
-  textColor: "#94a3b8",
+  lineColor: "#3b3f47",
+  textColor: "#a9adb6",
   fontSize: 12,
   lineWidth: 1
 };
@@ -42,24 +42,39 @@ var DEFAULT_CROSSHAIR_OPTIONS = {
   width: 1,
   style: "dotted",
   showHorizontal: true,
-  showVertical: true
+  showVertical: true,
+  showPriceLabel: true,
+  showTimeLabel: true,
+  timeLabelFormat: "auto",
+  labelBackgroundColor: "#0b1220",
+  labelTextColor: "#cbd5e1",
+  labelBorderRadius: 3,
+  labelBorderColor: "#94a3b8",
+  labelBorderWidth: 1,
+  labelBorderStyle: "solid"
 };
 var DEFAULT_WATERMARK_OPTIONS = {
   visible: false,
   text: "",
-  color: "#94a3b8",
-  opacity: 0.2,
+  color: "#81858d",
+  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,
   style: "solid",
   thickness: 1,
-  color: "#f59e0b",
-  labelBackgroundColor: "#f59e0b",
-  labelTextColor: "#0f172a",
+  color: "#38bdf8",
+  labelBackgroundColor: "#0b1220",
+  labelTextColor: "#60a5fa",
   labelBorderRadius: 3,
   showLabel: true
 };
@@ -68,9 +83,9 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
   behavior: "static",
   style: "solid",
   thickness: 1,
-  color: "#f59e0b",
-  labelBackgroundColor: "#f59e0b",
-  labelTextColor: "#0f172a",
+  color: "rgba(59,130,246,0.8)",
+  labelBackgroundColor: "#0b1220",
+  labelTextColor: "#60a5fa",
   labelBorderRadius: 3,
   showCloseButton: true,
   widgetPosition: "left",
@@ -97,12 +112,17 @@ var DEFAULT_ORDER_LINE_OPTIONS = {
 var DEFAULT_OPTIONS = {
   width: 720,
   height: 360,
-  backgroundColor: "#ffffff",
-  axisColor: "#94a3b8",
+  backgroundColor: "#101114",
+  axisColor: "#7f8289",
   axis: DEFAULT_AXIS_OPTIONS,
-  upColor: "#16a34a",
-  downColor: "#dc2626",
-  gridColor: "#e2e8f0",
+  priceDecimals: 2,
+  initialViewport: "latest",
+  initialVisibleBars: 60,
+  rightEdgePaddingBars: 2,
+  preserveViewportOnDataUpdate: true,
+  upColor: "#2fb171",
+  downColor: "#d35a5a",
+  gridColor: "#252932",
   fontFamily: "Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
   candleBodyWidthRatio: 0.7,
   candleMinWidth: 0.5,
@@ -118,12 +138,12 @@ var DEFAULT_OPTIONS = {
   orderLines: [],
   tickerLine: {
     visible: true,
-    style: "dashed",
+    style: "dotted",
     thickness: 1,
-    color: "#22c55e",
-    labelBackgroundColor: "#22c55e",
+    color: "#38bdf8",
+    labelBackgroundColor: "#38bdf8",
     labelTextColor: "#0b1220",
-    labelBorderRadius: 6
+    labelBorderRadius: 3
   }
 };
 function createChart(element, options = {}) {
@@ -165,6 +185,7 @@ function createChart(element, options = {}) {
   }));
   let orderActionHandler = null;
   let chartClickHandler = null;
+  let crosshairMoveHandler = null;
   let orderActionRegions = [];
   let orderDragRegions = [];
   let generatedPriceLineId = 1;
@@ -177,6 +198,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;
@@ -195,13 +219,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));
@@ -225,8 +272,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 = () => {
@@ -266,13 +318,8 @@ function createChart(element, options = {}) {
     return { min: nextMin, max: nextMax };
   };
   const formatPrice = (price) => {
-    if (price >= 1e3) {
-      return price.toFixed(0);
-    }
-    if (price >= 100) {
-      return price.toFixed(1);
-    }
-    return price.toFixed(2);
+    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    return price.toFixed(decimals);
   };
   const parseData = (nextData) => {
     return nextData.map((point) => ({
@@ -326,6 +373,42 @@ function createChart(element, options = {}) {
     const extra = index - (data.length - 1);
     return new Date(last.time.getTime() + extra * stepMs);
   };
+  const formatHoverTimeLabel = (time, mode) => {
+    if (mode === "time") {
+      return time.toLocaleTimeString(void 0, {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false
+      });
+    }
+    if (mode === "datetime") {
+      return time.toLocaleString(void 0, {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false
+      });
+    }
+    if (mode === "date") {
+      return time.toLocaleDateString(void 0, {
+        month: "short",
+        day: "numeric"
+      });
+    }
+    const stepMs = getTimeStepMs();
+    if (stepMs < 24 * 60 * 60 * 1e3) {
+      return time.toLocaleTimeString(void 0, {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false
+      });
+    }
+    return time.toLocaleDateString(void 0, {
+      month: "short",
+      day: "numeric"
+    });
+  };
   const drawText = (text, x, y, align = "left", baseline = "alphabetic", color = mergedOptions.axis?.textColor ?? mergedOptions.axisColor) => {
     ctx.fillStyle = color;
     ctx.textAlign = align;
@@ -389,7 +472,7 @@ function createChart(element, options = {}) {
       return;
     }
     const lineY = clamp(yFromPrice(renderPrice), chartTop + 1, chartBottom - 1);
-    const color = mergedLine.color ?? (mergedLine.side === "buy" ? mergedOptions.upColor : mergedLine.side === "sell" ? mergedOptions.downColor : "#f59e0b");
+    const color = line.color ?? (mergedLine.type === "takeProfit" ? "rgba(45,212,191,0.86)" : mergedLine.type === "stop" ? "rgba(245,158,11,0.86)" : "rgba(59,130,246,0.8)");
     if (Number.isFinite(mergedLine.fillToPrice)) {
       const fillY = clamp(yFromPrice(mergedLine.fillToPrice), chartTop + 1, chartBottom - 1);
       const topY = Math.min(lineY, fillY);
@@ -500,7 +583,7 @@ function createChart(element, options = {}) {
     const borderRadius = Math.max(0, mergedLine.labelBorderRadius);
     const widgetBackground = mergedOptions.backgroundColor;
     const widgetBorder = color;
-    const textColor = mergedLine.labelTextColor;
+    const textColor = line.labelTextColor ?? (mergedLine.type === "takeProfit" ? "#5eead4" : mergedLine.type === "stop" ? "#fbbf24" : mergedLine.labelTextColor);
     const mainWidgetX = leftWidgetX + actionButtonsTotalWidth + actionButtonsGap;
     ctx.fillStyle = widgetBackground;
     fillRoundedRect(Math.round(mainWidgetX), Math.round(labelY), mainWidgetWidth, labelHeight, borderRadius);
@@ -750,6 +833,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);
@@ -947,6 +1055,61 @@ function createChart(element, options = {}) {
       });
       drawText(timeLabel, x, chartBottom + 8, "center", "top", axis.textColor);
     }
+    if (crosshair.visible && crosshairPoint) {
+      const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
+      const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
+      const labelPaddingX = 8;
+      const labelHeight = 20;
+      const labelRadius = Math.max(0, crosshair.labelBorderRadius);
+      const labelBackground = crosshair.labelBackgroundColor;
+      const labelTextColor = crosshair.labelTextColor;
+      const labelBorderColor = crosshair.labelBorderColor;
+      const labelBorderWidth = Math.max(0, crosshair.labelBorderWidth);
+      const labelBorderStyle = crosshair.labelBorderStyle;
+      const strokeCrosshairLabel = (x, y, widthValue) => {
+        if (labelBorderWidth <= 0) {
+          return;
+        }
+        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([]);
+        }
+        strokeRoundedRect(Math.round(x), Math.round(y), widthValue, labelHeight, labelRadius);
+        ctx.restore();
+      };
+      if (crosshair.showPriceLabel) {
+        const hoverPrice = yMin + (chartBottom - cy) / chartHeight * yRange;
+        const priceText = formatPrice(hoverPrice);
+        const priceWidth = Math.ceil(ctx.measureText(priceText).width) + labelPaddingX * 2;
+        const priceX = chartRight + 4;
+        const priceY = clamp(cy - labelHeight / 2, chartTop, chartBottom - labelHeight);
+        ctx.fillStyle = labelBackground;
+        fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, labelRadius);
+        strokeCrosshairLabel(priceX, priceY, priceWidth);
+        drawText(priceText, priceX + labelPaddingX, priceY + labelHeight / 2, "left", "middle", labelTextColor);
+      }
+      if (crosshair.showTimeLabel) {
+        const ratio = clamp((cx - chartLeft) / chartWidth, 0, 1);
+        const hoverIndex = Math.round(xStart + ratio * xSpan - 0.5);
+        const hoverTime = getTimeForIndex(hoverIndex);
+        if (hoverTime) {
+          const timeText = formatHoverTimeLabel(hoverTime, crosshair.timeLabelFormat);
+          const timeWidth = Math.ceil(ctx.measureText(timeText).width) + labelPaddingX * 2;
+          const timeX = clamp(cx - timeWidth / 2, chartLeft, chartRight - timeWidth);
+          const timeY = chartBottom + 8;
+          ctx.fillStyle = labelBackground;
+          fillRoundedRect(Math.round(timeX), Math.round(timeY), timeWidth, labelHeight, labelRadius);
+          strokeCrosshairLabel(timeX, timeY, timeWidth);
+          drawText(timeText, timeX + labelPaddingX, timeY + labelHeight / 2, "left", "middle", labelTextColor);
+        }
+      }
+    }
   };
   const zoomX = (factor, anchorX) => {
     if (!drawState || data.length === 0) {
@@ -1041,6 +1204,39 @@ function createChart(element, options = {}) {
     const ratio = clamp((drawState.chartBottom - y) / drawState.chartHeight, 0, 1);
     return drawState.yMin + ratio * (drawState.yMax - drawState.yMin);
   };
+  const indexFromCanvasX = (x) => {
+    if (!drawState) {
+      return null;
+    }
+    const ratio = clamp((x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    return Math.round(drawState.xStart + ratio * drawState.xSpan - 0.5);
+  };
+  const emitCrosshairMove = (x, y, region) => {
+    if (!crosshairMoveHandler) {
+      return;
+    }
+    const index = indexFromCanvasX(x);
+    const hoverTime = index === null ? null : getTimeForIndex(index);
+    const parsedPoint = index === null ? void 0 : data[index];
+    const point = parsedPoint === void 0 ? void 0 : {
+      t: parsedPoint.time.toISOString(),
+      o: parsedPoint.o,
+      h: parsedPoint.h,
+      l: parsedPoint.l,
+      c: parsedPoint.c,
+      ...parsedPoint.v === void 0 ? {} : { v: parsedPoint.v }
+    };
+    const payload = {
+      x,
+      y,
+      region,
+      ...region === "plot" ? { price: Number(priceFromCanvasY(y).toFixed(mergedOptions.priceDecimals)) } : {},
+      ...index === null ? {} : { index },
+      ...hoverTime ? { time: hoverTime.toISOString() } : {},
+      ...point ? { point } : {}
+    };
+    crosshairMoveHandler(payload);
+  };
   const getHitRegion = (x, y) => {
     if (!drawState) {
       return "outside";
@@ -1192,14 +1388,17 @@ function createChart(element, options = {}) {
       }
       const hoverRegion = getHitRegion(point.x, point.y);
       if (hoverRegion === "plot") {
-        canvas.style.cursor = "grab";
+        canvas.style.cursor = "default";
         setCrosshairPoint(point);
+        emitCrosshairMove(point.x, point.y, "plot");
       } else if (hoverRegion === "x-axis") {
         canvas.style.cursor = "ew-resize";
         setCrosshairPoint(null);
+        emitCrosshairMove(point.x, point.y, "x-axis");
       } else if (hoverRegion === "y-axis") {
         canvas.style.cursor = "ns-resize";
         setCrosshairPoint(null);
+        emitCrosshairMove(point.x, point.y, "y-axis");
       } else {
         canvas.style.cursor = "default";
         setCrosshairPoint(null);
@@ -1209,7 +1408,7 @@ function createChart(element, options = {}) {
     const deltaX = point.x - lastPointerX;
     const deltaY = point.y - lastPointerY;
     if (dragMode === "plot") {
-      canvas.style.cursor = "grabbing";
+      canvas.style.cursor = "default";
       pan(deltaX, deltaY, true, true);
       setCrosshairPoint(null);
     } else if (dragMode === "x-axis") {
@@ -1374,7 +1573,11 @@ function createChart(element, options = {}) {
       autoYMin = null;
       autoYMax = null;
     } else {
-      clampXViewport();
+      if (mergedOptions.preserveViewportOnDataUpdate) {
+        clampXViewport();
+      } else {
+        fitXViewport();
+      }
     }
     draw();
   };
@@ -1435,6 +1638,9 @@ function createChart(element, options = {}) {
   const onChartClick = (handler) => {
     chartClickHandler = handler;
   };
+  const onCrosshairMove = (handler) => {
+    crosshairMoveHandler = handler;
+  };
   const setDoubleClickEnabled = (enabled) => {
     doubleClickEnabled = enabled;
   };
@@ -1463,6 +1669,7 @@ function createChart(element, options = {}) {
     removeOrderLine,
     onOrderAction,
     onChartClick,
+    onCrosshairMove,
     setDoubleClickEnabled,
     setDoubleClickAction,
     resize,

package/dist/hyperprop-charting-library.d.ts

@@ -4,6 +4,11 @@ interface ChartOptions {
     backgroundColor?: string;
     axisColor?: string;
     axis?: AxisOptions;
+    priceDecimals?: number;
+    initialViewport?: "latest" | "center";
+    initialVisibleBars?: number;
+    rightEdgePaddingBars?: number;
+    preserveViewportOnDataUpdate?: boolean;
     upColor?: string;
     downColor?: string;
     gridColor?: string;
@@ -42,6 +47,15 @@ interface CrosshairOptions {
     style?: "solid" | "dotted" | "dashed";
     showHorizontal?: boolean;
     showVertical?: boolean;
+    showPriceLabel?: boolean;
+    showTimeLabel?: boolean;
+    timeLabelFormat?: "auto" | "date" | "time" | "datetime";
+    labelBackgroundColor?: string;
+    labelTextColor?: string;
+    labelBorderRadius?: number;
+    labelBorderColor?: string;
+    labelBorderWidth?: number;
+    labelBorderStyle?: "solid" | "dotted" | "dashed";
 }
 interface WatermarkOptions {
     visible?: boolean;
@@ -51,6 +65,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;
@@ -132,6 +152,15 @@ interface ChartClickEvent {
     price?: number;
     region: "plot" | "x-axis" | "y-axis";
 }
+interface CrosshairMoveEvent {
+    x: number;
+    y: number;
+    region: "plot" | "x-axis" | "y-axis";
+    price?: number;
+    index?: number;
+    time?: string;
+    point?: OhlcDataPoint;
+}
 interface TickerLineOptions {
     visible?: boolean;
     style?: "solid" | "dotted" | "dashed";
@@ -152,6 +181,7 @@ interface ChartInstance {
     removeOrderLine: (id: string) => void;
     onOrderAction: (handler: ((event: OrderActionEvent) => void) | null) => void;
     onChartClick: (handler: ((event: ChartClickEvent) => void) | null) => void;
+    onCrosshairMove: (handler: ((event: CrosshairMoveEvent) => void) | null) => void;
     setDoubleClickEnabled: (enabled: boolean) => void;
     setDoubleClickAction: (action: "reset" | "placeLimitOrder") => void;
     resize: (width?: number, height?: number) => void;
@@ -167,4 +197,4 @@ interface OhlcDataPoint {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type ChartClickEvent, type ChartInstance, type ChartOptions, 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 GridOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type WatermarkOptions, createChart };