hyperprop-charting-library 0.1.43 → 0.1.45

package/README.md

@@ -94,6 +94,28 @@ const chart = createChart(root, {
 });
 ```
 
+## TradingView-Style Labels
+
+```ts
+const chart = createChart(root, {
+  labels: {
+    symbolName: "ESH6",
+    showSymbolName: true,
+    showLastPrice: true,
+    showPreviousClose: true,
+    previousClosePrice: 5231.25,
+    showHighLow: true,
+    showBidAsk: true,
+    bidPrice: 5234.75,
+    askPrice: 5235.0,
+    showIndicatorNames: true,
+    showIndicatorValues: true,
+    showCountdownToBarClose: true,
+    noOverlapping: true
+  }
+});
+```
+
 ## Axis Label Density
 
 ```ts

package/dist/hyperprop-charting-library.cjs

@@ -85,6 +85,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",
@@ -174,6 +203,7 @@ var DEFAULT_OPTIONS = {
     labelTextColor: "#0b1220",
     labelBorderRadius: 3
   },
+  labels: DEFAULT_LABELS_OPTIONS,
   dashPatterns: DEFAULT_DASH_PATTERNS,
   indicators: []
 };
@@ -213,6 +243,10 @@ var mergeChartOptions = (baseOptions, options = {}) => ({
     ...baseOptions.tickerLine,
     ...options.tickerLine ?? {}
   },
+  labels: {
+    ...baseOptions.labels,
+    ...options.labels ?? {}
+  },
   dashPatterns: {
     ...baseOptions.dashPatterns,
     ...options.dashPatterns ?? {}
@@ -1279,6 +1313,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)) {
@@ -2038,14 +2080,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();
@@ -2058,24 +2125,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);
@@ -2083,6 +2248,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) {
@@ -2098,6 +2282,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);
@@ -2536,8 +2730,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?.({
@@ -2599,6 +2860,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;
@@ -2715,6 +2990,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;
     }

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

@@ -37,6 +37,7 @@ interface ChartOptions {
     priceLines?: PriceLineOptions[];
     orderLines?: OrderLineOptions[];
     tickerLine?: TickerLineOptions;
+    labels?: LabelsOptions;
     dashPatterns?: Partial<DashPatternOptions>;
     indicators?: IndicatorInstanceOptions[];
 }
@@ -263,6 +264,35 @@ interface TickerLineOptions {
     smoothing?: boolean;
     smoothingSpeed?: number;
 }
+interface LabelsOptions {
+    visible?: boolean;
+    symbolName?: string;
+    showSymbolName?: boolean;
+    showLastPrice?: boolean;
+    showPreviousClose?: boolean;
+    previousClosePrice?: number;
+    showHighLow?: boolean;
+    showBidAsk?: boolean;
+    bidPrice?: number;
+    askPrice?: number;
+    showIndicatorNames?: boolean;
+    showIndicatorValues?: boolean;
+    showCountdownToBarClose?: boolean;
+    noOverlapping?: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+    mutedTextColor?: string;
+    symbolNameBackgroundColor?: string;
+    symbolNameTextColor?: string;
+    previousCloseColor?: string;
+    highLowColor?: string;
+    bidColor?: string;
+    askColor?: string;
+    indicatorTextColor?: string;
+    borderRadius?: number;
+    labelHeight?: number;
+    labelPaddingX?: number;
+}
 interface ChartInstance {
     updateOptions: (options: ChartOptions) => void;
     setData: (data: OhlcDataPoint[]) => void;
@@ -326,4 +356,4 @@ interface ViewportState {
 }
 declare function createChart(element: HTMLElement, options?: ChartOptions): ChartInstance;
 
-export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };
+export { type AxisOptions, type BuiltInIndicatorInfo, type ChartClickEvent, type ChartInstance, type ChartOptions, type CrosshairMoveEvent, type CrosshairOptions, type CrosshairPriceActionEvent, type DashPatternOptions, type GridOptions, type IndicatorInstanceOptions, type IndicatorPane, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };