hyperprop-charting-library 0.1.43 → 0.1.45

package/dist/hyperprop-charting-library.js

@@ -61,6 +61,35 @@ var DEFAULT_DASH_PATTERNS = {
   borderDotted: [2, 2],
   borderDashed: [6, 4]
 };
+var DEFAULT_LABELS_OPTIONS = {
+  visible: true,
+  symbolName: "",
+  showSymbolName: false,
+  showLastPrice: true,
+  showPreviousClose: false,
+  previousClosePrice: Number.NaN,
+  showHighLow: false,
+  showBidAsk: false,
+  bidPrice: Number.NaN,
+  askPrice: Number.NaN,
+  showIndicatorNames: false,
+  showIndicatorValues: false,
+  showCountdownToBarClose: false,
+  noOverlapping: true,
+  backgroundColor: "#0b1220",
+  textColor: "#cbd5e1",
+  mutedTextColor: "#94a3b8",
+  symbolNameBackgroundColor: "#1f2937",
+  symbolNameTextColor: "#e5e7eb",
+  previousCloseColor: "#94a3b8",
+  highLowColor: "#a78bfa",
+  bidColor: "#ef4444",
+  askColor: "#22c55e",
+  indicatorTextColor: "#cbd5e1",
+  borderRadius: 3,
+  labelHeight: 20,
+  labelPaddingX: 8
+};
 var DEFAULT_PRICE_LINE_OPTIONS = {
   visible: true,
   style: "solid",
@@ -150,6 +179,7 @@ var DEFAULT_OPTIONS = {
     labelTextColor: "#0b1220",
     labelBorderRadius: 3
   },
+  labels: DEFAULT_LABELS_OPTIONS,
   dashPatterns: DEFAULT_DASH_PATTERNS,
   indicators: []
 };
@@ -189,6 +219,10 @@ var mergeChartOptions = (baseOptions, options = {}) => ({
     ...baseOptions.tickerLine,
     ...options.tickerLine ?? {}
   },
+  labels: {
+    ...baseOptions.labels,
+    ...options.labels ?? {}
+  },
   dashPatterns: {
     ...baseOptions.dashPatterns,
     ...options.dashPatterns ?? {}
@@ -1255,6 +1289,14 @@ function createChart(element, options = {}) {
     ctx.textBaseline = baseline;
     ctx.fillText(text, x, y);
   };
+  const formatDuration = (ms) => {
+    const totalSeconds = Math.max(0, Math.floor(ms / 1e3));
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor(totalSeconds % 3600 / 60);
+    const seconds = totalSeconds % 60;
+    const pad = (value) => String(value).padStart(2, "0");
+    return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`;
+  };
   const drawPriceLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
     if (!mergedLine.visible || !Number.isFinite(mergedLine.price)) {
@@ -2014,14 +2056,39 @@ function createChart(element, options = {}) {
       drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
       ctx.font = prevFont;
     }
+    const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
+    const priceAxisLabels = [];
+    const addPriceAxisLabel = (label) => {
+      if (!labels.visible || !Number.isFinite(label.price) || label.text.length === 0) {
+        return;
+      }
+      priceAxisLabels.push(label);
+    };
+    const drawReferenceLine = (price, color, style = "dotted") => {
+      if (!Number.isFinite(price)) {
+        return;
+      }
+      const y = clamp(yFromPrice(price), chartTop + 1, chartBottom - 1);
+      ctx.save();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1;
+      applyDashPattern(style, dashPatterns.dotted, dashPatterns.dashed);
+      ctx.beginPath();
+      ctx.moveTo(crisp(chartLeft), crisp(y));
+      ctx.lineTo(crisp(chartRight), crisp(y));
+      ctx.stroke();
+      ctx.restore();
+    };
     const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const lastPoint = data[data.length - 1];
+    let tickerPrice = null;
+    let tickerColor = null;
     if ((ticker.visible ?? true) && lastPoint) {
-      const tickerPrice = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint.c;
+      tickerPrice = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice : lastPoint.c;
       const tickerY = yFromPrice(tickerPrice);
       const lineY = clamp(tickerY, chartTop + 1, chartBottom - 1);
       const lastDirection = ticker.smoothing && smoothedTickerPrice !== null ? smoothedTickerPrice >= lastPoint.o ? "up" : "down" : getCandleDirectionByIndex(data.length - 1);
-      const tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
+      tickerColor = ticker.color ?? (lastDirection === "up" ? mergedOptions.upColor : mergedOptions.downColor);
       const tickerThickness = Math.max(1, ticker.thickness ?? 1);
       const tickerStyle = ticker.style ?? "solid";
       ctx.save();
@@ -2034,24 +2101,122 @@ function createChart(element, options = {}) {
       ctx.stroke();
       ctx.setLineDash([]);
       ctx.restore();
-      const tickerLabel = formatPrice(tickerPrice);
+    }
+    if ((ticker.visible ?? true) && labels.showLastPrice && tickerPrice !== null && tickerColor !== null) {
+      addPriceAxisLabel({
+        text: formatPrice(tickerPrice),
+        price: tickerPrice,
+        backgroundColor: ticker.labelBackgroundColor ?? tickerColor,
+        textColor: ticker.labelTextColor ?? "#0b1220",
+        color: tickerColor,
+        priority: 100
+      });
+    }
+    if (labels.showSymbolName && labels.symbolName.trim().length > 0 && tickerPrice !== null) {
+      addPriceAxisLabel({
+        text: labels.symbolName.trim(),
+        price: tickerPrice,
+        backgroundColor: labels.symbolNameBackgroundColor,
+        textColor: labels.symbolNameTextColor,
+        color: labels.symbolNameBackgroundColor,
+        priority: 95
+      });
+    }
+    if (labels.showPreviousClose) {
+      const previousCloseCandidate = Number.isFinite(labels.previousClosePrice) ? labels.previousClosePrice : data.length > 1 ? data[data.length - 2]?.c : Number.NaN;
+      if (previousCloseCandidate !== void 0 && Number.isFinite(previousCloseCandidate)) {
+        const previousClose = previousCloseCandidate;
+        drawReferenceLine(previousClose, labels.previousCloseColor, "dashed");
+        addPriceAxisLabel({
+          text: `PDC ${formatPrice(previousClose)}`,
+          price: previousClose,
+          backgroundColor: labels.backgroundColor,
+          textColor: labels.mutedTextColor,
+          color: labels.previousCloseColor,
+          priority: 50
+        });
+      }
+    }
+    if (labels.showHighLow && visibleData.length > 0) {
+      const visibleHigh = Math.max(...visibleData.map((point) => point.h));
+      const visibleLow = Math.min(...visibleData.map((point) => point.l));
+      addPriceAxisLabel({
+        text: `H ${formatPrice(visibleHigh)}`,
+        price: visibleHigh,
+        backgroundColor: labels.backgroundColor,
+        textColor: labels.textColor,
+        color: labels.highLowColor,
+        priority: 40
+      });
+      addPriceAxisLabel({
+        text: `L ${formatPrice(visibleLow)}`,
+        price: visibleLow,
+        backgroundColor: labels.backgroundColor,
+        textColor: labels.textColor,
+        color: labels.highLowColor,
+        priority: 40
+      });
+    }
+    if (labels.showBidAsk) {
+      if (Number.isFinite(labels.bidPrice)) {
+        drawReferenceLine(labels.bidPrice, labels.bidColor, "dotted");
+        addPriceAxisLabel({
+          text: `B ${formatPrice(labels.bidPrice)}`,
+          price: labels.bidPrice,
+          backgroundColor: labels.bidColor,
+          textColor: "#0b1220",
+          color: labels.bidColor,
+          priority: 80
+        });
+      }
+      if (Number.isFinite(labels.askPrice)) {
+        drawReferenceLine(labels.askPrice, labels.askColor, "dotted");
+        addPriceAxisLabel({
+          text: `A ${formatPrice(labels.askPrice)}`,
+          price: labels.askPrice,
+          backgroundColor: labels.askColor,
+          textColor: "#0b1220",
+          color: labels.askColor,
+          priority: 80
+        });
+      }
+    }
+    if (priceAxisLabels.length > 0) {
+      const labelPaddingX = Math.max(4, labels.labelPaddingX);
+      const labelHeight = Math.max(14, labels.labelHeight);
+      const labelRadius = Math.max(0, labels.borderRadius);
       ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
-      const labelPaddingX = 8;
-      const labelHeight = 20;
-      const labelWidth = getPriceLabelWidth(tickerLabel, labelPaddingX);
+      const positionedLabels = priceAxisLabels.map((label) => {
+        const labelTextWidth = label.text === formatPrice(label.price) ? getPriceLabelWidth(label.text, labelPaddingX) : Math.ceil(ctx.measureText(label.text).width) + labelPaddingX * 2;
+        return {
+          ...label,
+          width: labelTextWidth,
+          targetY: clamp(yFromPrice(label.price), chartTop + 1, chartBottom - 1) - labelHeight / 2,
+          y: 0
+        };
+      }).sort((a, b) => a.targetY - b.targetY || b.priority - a.priority);
+      const minY = chartTop;
+      const maxY = chartBottom - labelHeight;
+      let cursorY = minY;
+      for (const label of positionedLabels) {
+        label.y = labels.noOverlapping ? Math.max(clamp(label.targetY, minY, maxY), cursorY) : clamp(label.targetY, minY, maxY);
+        cursorY = label.y + labelHeight + 2;
+      }
+      if (labels.noOverlapping && positionedLabels.length > 0) {
+        const lastLabel = positionedLabels[positionedLabels.length - 1];
+        const overflow = lastLabel ? lastLabel.y + labelHeight - maxY : 0;
+        if (overflow > 0) {
+          for (const label of positionedLabels) {
+            label.y = Math.max(minY, label.y - overflow);
+          }
+        }
+      }
       const labelX = chartRight + 4;
-      const labelY = clamp(lineY - labelHeight / 2, chartTop, chartBottom - labelHeight);
-      const labelRadius = Math.max(0, ticker.labelBorderRadius ?? 0);
-      ctx.fillStyle = ticker.labelBackgroundColor ?? tickerColor;
-      fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, labelRadius);
-      drawText(
-        tickerLabel,
-        labelX + labelPaddingX,
-        labelY + labelHeight / 2,
-        "left",
-        "middle",
-        ticker.labelTextColor ?? "#0b1220"
-      );
+      for (const label of positionedLabels) {
+        ctx.fillStyle = label.backgroundColor;
+        fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, labelHeight, labelRadius);
+        drawText(label.text, labelX + labelPaddingX, label.y + labelHeight / 2, "left", "middle", label.textColor);
+      }
     }
     for (const priceLine of priceLines) {
       drawPriceLine(priceLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
@@ -2059,6 +2224,25 @@ function createChart(element, options = {}) {
     for (const orderLine of orderLines) {
       drawOrderLine(orderLine, yFromPrice, chartLeft, chartTop, chartRight, chartBottom);
     }
+    if (labels.visible && (labels.showIndicatorNames || labels.showIndicatorValues)) {
+      const labelEntries = [...activeOverlayIndicators, ...activeSeparateIndicators].map(({ indicator, plugin }) => {
+        const inputValues = Object.entries(indicator.inputs).filter(([, value]) => typeof value === "number" || typeof value === "string" || typeof value === "boolean").slice(0, 2).map(([, value]) => String(value));
+        if (labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0) {
+          return `${plugin.name} ${inputValues.join(" ")}`;
+        }
+        if (labels.showIndicatorNames) {
+          return plugin.name;
+        }
+        return inputValues.join(" ");
+      }).filter((entry) => entry.length > 0);
+      if (labelEntries.length > 0) {
+        const prevFont = ctx.font;
+        ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+        const legendText = labelEntries.join("   ");
+        drawText(legendText, chartLeft + 10, chartTop + 10, "left", "top", labels.indicatorTextColor);
+        ctx.font = prevFont;
+      }
+    }
     for (let index = tickStartIndex; index <= visibleTickEnd; index += xStep) {
       const tickTime = getTimeForIndex(index);
       if (!tickTime) {
@@ -2074,6 +2258,16 @@ function createChart(element, options = {}) {
       drawText(timeLabel, x, fullChartBottom + 8, "center", "top", xAxis.textColor);
       ctx.font = prevFont;
     }
+    if (labels.visible && labels.showCountdownToBarClose && lastPoint) {
+      const stepMs = getTimeStepMs();
+      const rawRemainingMs = lastPoint.time.getTime() + stepMs - Date.now();
+      const countdownMs = rawRemainingMs >= 0 && rawRemainingMs <= stepMs * 2 ? rawRemainingMs : stepMs - Date.now() % stepMs;
+      const countdownText = formatDuration(countdownMs);
+      const prevFont = ctx.font;
+      ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
+      drawText(countdownText, chartRight + 6, fullChartBottom + 8, "left", "top", xAxis.textColor);
+      ctx.font = prevFont;
+    }
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
       const cy = clamp(crosshairPoint.y, chartTop, chartBottom);
@@ -2512,8 +2706,75 @@ function createChart(element, options = {}) {
   let lastPointerX = 0;
   let lastPointerY = 0;
   let activePointerId = null;
+  const touchPointers = /* @__PURE__ */ new Map();
+  let pinchZoomState = null;
+  const getTouchPair = () => {
+    const points = Array.from(touchPointers.values());
+    const first = points[0];
+    const second = points[1];
+    return first && second ? [first, second] : null;
+  };
+  const getPointerDistance = (first, second) => {
+    return Math.hypot(second.x - first.x, second.y - first.y);
+  };
+  const getMidpoint = (first, second) => {
+    return {
+      x: (first.x + second.x) / 2,
+      y: (first.y + second.y) / 2
+    };
+  };
+  const beginPinchZoom = (first, second) => {
+    if (!drawState || data.length === 0) {
+      return;
+    }
+    const midpoint = getMidpoint(first, second);
+    const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    pinchZoomState = {
+      startDistance: Math.max(1, getPointerDistance(first, second)),
+      startSpan: xSpan,
+      anchorIndex: drawState.xStart + anchorRatio * xSpan
+    };
+    isDragging = false;
+    dragMode = null;
+    activePointerId = null;
+    pointerDownInfo = null;
+    orderDragState = null;
+    actionDragState = null;
+    canvas.style.cursor = "default";
+    setCrosshairPoint(null);
+  };
+  const applyPinchZoom = (first, second) => {
+    if (!drawState || !pinchZoomState || data.length === 0) {
+      return;
+    }
+    const distance = getPointerDistance(first, second);
+    if (distance <= 0) {
+      return;
+    }
+    const minSpan = minVisibleBars;
+    const maxSpan = Math.min(maxVisibleBars, Math.max(minSpan, data.length + maxPanBars * 2));
+    const nextSpan = clamp(pinchZoomState.startSpan * (pinchZoomState.startDistance / distance), minSpan, maxSpan);
+    const midpoint = getMidpoint(first, second);
+    const anchorRatio = clamp((midpoint.x - drawState.chartLeft) / drawState.chartWidth, 0, 1);
+    const nextStart = pinchZoomState.anchorIndex - anchorRatio * nextSpan;
+    xSpan = nextSpan;
+    xCenter = nextStart + nextSpan / 2;
+    clampXViewport();
+    updateFollowLatest(false);
+    emitViewportChange();
+    draw();
+  };
   const onPointerDown = (event) => {
     const point = getCanvasPoint(event);
+    if (event.pointerType === "touch") {
+      touchPointers.set(event.pointerId, point);
+      canvas.setPointerCapture(event.pointerId);
+      const touchPair = getTouchPair();
+      if (touchPair) {
+        beginPinchZoom(touchPair[0], touchPair[1]);
+        return;
+      }
+    }
     const crosshairButtonRegion = getCrosshairPriceActionRegion(point.x, point.y);
     if (crosshairButtonRegion) {
       crosshairPriceActionHandler?.({
@@ -2575,6 +2836,20 @@ function createChart(element, options = {}) {
   };
   const onPointerMove = (event) => {
     const point = getCanvasPoint(event);
+    if (event.pointerType === "touch" && touchPointers.has(event.pointerId)) {
+      touchPointers.set(event.pointerId, point);
+      const touchPair = getTouchPair();
+      if (touchPair) {
+        if (!pinchZoomState) {
+          beginPinchZoom(touchPair[0], touchPair[1]);
+        }
+        applyPinchZoom(touchPair[0], touchPair[1]);
+        return;
+      }
+      if (pinchZoomState) {
+        return;
+      }
+    }
     if (pointerDownInfo && pointerDownInfo.pointerId === event.pointerId && !pointerDownInfo.moved) {
       const dx = point.x - pointerDownInfo.x;
       const dy = point.y - pointerDownInfo.y;
@@ -2691,6 +2966,22 @@ function createChart(element, options = {}) {
     lastPointerY = point.y;
   };
   const endPointerDrag = (event) => {
+    if (event?.pointerType === "touch") {
+      touchPointers.delete(event.pointerId);
+      if (pinchZoomState) {
+        pinchZoomState = null;
+        isDragging = false;
+        dragMode = null;
+        activePointerId = null;
+        pointerDownInfo = null;
+        setCrosshairPoint(null);
+        canvas.style.cursor = "default";
+        return;
+      }
+    } else if (!event) {
+      touchPointers.clear();
+      pinchZoomState = null;
+    }
     if (event && activePointerId !== null && event.pointerId !== activePointerId) {
       return;
     }