hyperprop-charting-library 0.1.147 → 0.1.149

package/dist/hyperprop-charting-library.cjs

@@ -4297,6 +4297,8 @@ function createChart(element, options = {}) {
   let paneButtonRegions = [];
   let hoveredPaneId = null;
   let hoveredPaneButton = null;
+  let legendRowRegions = [];
+  let hoveredLegendId = null;
   let paneDividerDrag = null;
   let indicatorPaneActionHandler = null;
   let indicatorPaneHeightChangeHandler = null;
@@ -4304,6 +4306,7 @@ function createChart(element, options = {}) {
   let actionDragState = null;
   let pointerDownInfo = null;
   let crosshairPoint = null;
+  let externalCrosshair = null;
   let doubleClickEnabled = mergedOptions.doubleClickEnabled;
   let doubleClickAction = mergedOptions.doubleClickAction;
   setIndicatorLiveThrottleMs(mergedOptions.indicatorUpdate?.liveThrottleMs ?? 80);
@@ -5593,6 +5596,85 @@ function createChart(element, options = {}) {
     ctx.closePath();
     ctx.stroke();
   };
+  const INDICATOR_CONTROL_SIZE = 16;
+  const INDICATOR_CONTROL_GAP = 4;
+  const LEGEND_CONTROLS_WIDTH = (INDICATOR_CONTROL_SIZE + INDICATOR_CONTROL_GAP) * 4 + 8;
+  const drawIndicatorControls = (indicatorId, indicatorType, indicatorVisible, startX, centerY) => {
+    const labels = resolvedLabels;
+    const actionList = [
+      "visibility",
+      "settings",
+      "source",
+      "remove"
+    ];
+    let buttonX = startX;
+    for (const action of actionList) {
+      const buttonY = centerY - INDICATOR_CONTROL_SIZE / 2;
+      const hovered = hoveredPaneButton?.id === indicatorId && hoveredPaneButton.action === action;
+      const iconColor = labels.indicatorTextColor;
+      ctx.save();
+      ctx.fillStyle = hovered ? "rgba(148,163,184,0.30)" : "rgba(148,163,184,0.12)";
+      fillRoundedRect(Math.round(buttonX), Math.round(buttonY), INDICATOR_CONTROL_SIZE, INDICATOR_CONTROL_SIZE, 4);
+      ctx.strokeStyle = iconColor;
+      ctx.fillStyle = iconColor;
+      ctx.globalAlpha = hovered ? 1 : 0.75;
+      ctx.lineWidth = 1.2;
+      ctx.setLineDash([]);
+      const cx = buttonX + INDICATOR_CONTROL_SIZE / 2;
+      const cy = centerY;
+      if (action === "visibility") {
+        ctx.beginPath();
+        ctx.ellipse(cx, cy, 4.6, 3, 0, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.arc(cx, cy, 1.3, 0, Math.PI * 2);
+        ctx.fill();
+        if (!indicatorVisible) {
+          ctx.beginPath();
+          ctx.moveTo(cx - 5.2, cy + 4.6);
+          ctx.lineTo(cx + 5.2, cy - 4.6);
+          ctx.stroke();
+        }
+      } else if (action === "settings") {
+        ctx.beginPath();
+        ctx.arc(cx, cy, 3.4, 0, Math.PI * 2);
+        ctx.stroke();
+        for (let toothIndex = 0; toothIndex < 8; toothIndex += 1) {
+          const angle = Math.PI / 4 * toothIndex;
+          ctx.beginPath();
+          ctx.moveTo(cx + Math.cos(angle) * 3.4, cy + Math.sin(angle) * 3.4);
+          ctx.lineTo(cx + Math.cos(angle) * 5.2, cy + Math.sin(angle) * 5.2);
+          ctx.stroke();
+        }
+        ctx.beginPath();
+        ctx.arc(cx, cy, 1.1, 0, Math.PI * 2);
+        ctx.fill();
+      } else if (action === "source") {
+        const prevSourceFont = ctx.font;
+        ctx.font = `bold 9px ${mergedOptions.fontFamily}`;
+        drawText("{}", cx, cy + 0.5, "center", "middle", iconColor);
+        ctx.font = prevSourceFont;
+      } else {
+        ctx.beginPath();
+        ctx.moveTo(cx - 3.4, cy - 3.4);
+        ctx.lineTo(cx + 3.4, cy + 3.4);
+        ctx.moveTo(cx + 3.4, cy - 3.4);
+        ctx.lineTo(cx - 3.4, cy + 3.4);
+        ctx.stroke();
+      }
+      ctx.restore();
+      paneButtonRegions.push({
+        id: indicatorId,
+        type: indicatorType,
+        action,
+        x: buttonX,
+        y: buttonY,
+        width: INDICATOR_CONTROL_SIZE,
+        height: INDICATOR_CONTROL_SIZE
+      });
+      buttonX += INDICATOR_CONTROL_SIZE + INDICATOR_CONTROL_GAP;
+    }
+  };
   const drawMarkBadge = (x, y, radius, color, shape, label, textColor) => {
     ctx.save();
     ctx.fillStyle = color;
@@ -5673,6 +5755,8 @@ function createChart(element, options = {}) {
     orderDragRegions = [];
     alertRegions = [];
     markRegions = [];
+    paneButtonRegions = [];
+    legendRowRegions = [];
     crosshairPriceActionRegion = null;
     const pixelRatio = getPixelRatio();
     canvas.style.width = `${width}px`;
@@ -7761,87 +7845,10 @@ function createChart(element, options = {}) {
     }
     paneLayoutFullChartHeight = fullChartHeight;
     paneLayoutInfos = [];
-    paneButtonRegions = [];
     if (activeSeparateIndicators.length > 0) {
       const xFromIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       let paneTopCursor = chartBottom + paneGap;
-      const paneButtonSize = 16;
-      const paneButtonGap = 4;
-      const drawPaneButtons = (indicatorId, indicatorType, indicatorVisible, startX, centerY) => {
-        const actionList = [
-          "visibility",
-          "settings",
-          "source",
-          "remove"
-        ];
-        let buttonX = startX;
-        for (const action of actionList) {
-          const buttonY = centerY - paneButtonSize / 2;
-          const hovered = hoveredPaneButton?.id === indicatorId && hoveredPaneButton.action === action;
-          const iconColor = labels.indicatorTextColor;
-          ctx.save();
-          ctx.fillStyle = hovered ? "rgba(148,163,184,0.30)" : "rgba(148,163,184,0.12)";
-          fillRoundedRect(Math.round(buttonX), Math.round(buttonY), paneButtonSize, paneButtonSize, 4);
-          ctx.strokeStyle = iconColor;
-          ctx.fillStyle = iconColor;
-          ctx.globalAlpha = hovered ? 1 : 0.75;
-          ctx.lineWidth = 1.2;
-          ctx.setLineDash([]);
-          const cx = buttonX + paneButtonSize / 2;
-          const cy = centerY;
-          if (action === "visibility") {
-            ctx.beginPath();
-            ctx.ellipse(cx, cy, 4.6, 3, 0, 0, Math.PI * 2);
-            ctx.stroke();
-            ctx.beginPath();
-            ctx.arc(cx, cy, 1.3, 0, Math.PI * 2);
-            ctx.fill();
-            if (!indicatorVisible) {
-              ctx.beginPath();
-              ctx.moveTo(cx - 5.2, cy + 4.6);
-              ctx.lineTo(cx + 5.2, cy - 4.6);
-              ctx.stroke();
-            }
-          } else if (action === "settings") {
-            ctx.beginPath();
-            ctx.arc(cx, cy, 3.4, 0, Math.PI * 2);
-            ctx.stroke();
-            for (let toothIndex = 0; toothIndex < 8; toothIndex += 1) {
-              const angle = Math.PI / 4 * toothIndex;
-              ctx.beginPath();
-              ctx.moveTo(cx + Math.cos(angle) * 3.4, cy + Math.sin(angle) * 3.4);
-              ctx.lineTo(cx + Math.cos(angle) * 5.2, cy + Math.sin(angle) * 5.2);
-              ctx.stroke();
-            }
-            ctx.beginPath();
-            ctx.arc(cx, cy, 1.1, 0, Math.PI * 2);
-            ctx.fill();
-          } else if (action === "source") {
-            const prevSourceFont = ctx.font;
-            ctx.font = `bold 9px ${mergedOptions.fontFamily}`;
-            drawText("{}", cx, cy + 0.5, "center", "middle", iconColor);
-            ctx.font = prevSourceFont;
-          } else {
-            ctx.beginPath();
-            ctx.moveTo(cx - 3.4, cy - 3.4);
-            ctx.lineTo(cx + 3.4, cy + 3.4);
-            ctx.moveTo(cx + 3.4, cy - 3.4);
-            ctx.lineTo(cx - 3.4, cy + 3.4);
-            ctx.stroke();
-          }
-          ctx.restore();
-          paneButtonRegions.push({
-            id: indicatorId,
-            type: indicatorType,
-            action,
-            x: buttonX,
-            y: buttonY,
-            width: paneButtonSize,
-            height: paneButtonSize
-          });
-          buttonX += paneButtonSize + paneButtonGap;
-        }
-      };
+      const drawPaneButtons = drawIndicatorControls;
       activeSeparateIndicators.forEach(({ indicator, plugin }, paneIndex) => {
         const paneHeight = separatePaneHeights[paneIndex] ?? 80;
         const paneTop = paneTopCursor;
@@ -8343,26 +8350,56 @@ function createChart(element, options = {}) {
       };
       const labelEntries = activeOverlayIndicators.map(({ indicator, plugin }) => {
         const inputValues = Object.entries(indicator.inputs).filter(([key, value]) => !LEGEND_EXCLUDED_INPUT_KEYS.has(key) && typeof value !== "boolean" && isLegendInputValue(value)).slice(0, 2).map(([, value]) => formatLegendValue(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);
+        const text = labels.showIndicatorNames && labels.showIndicatorValues && inputValues.length > 0 ? `${plugin.name} ${inputValues.join(" ")}` : labels.showIndicatorNames ? plugin.name : inputValues.join(" ");
+        return { id: indicator.id, type: indicator.type, visible: indicator.visible, text };
+      }).filter((entry) => entry.text.length > 0);
       if (labelEntries.length > 0) {
         const prevFont = ctx.font;
-        ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
-        const legendText = labelEntries.join("   ");
+        const legendFontSize = Math.max(8, axis.fontSize);
+        ctx.font = `${legendFontSize}px ${mergedOptions.fontFamily}`;
         const offsetX = Math.max(0, Number(labels.indicatorLegendOffsetX) || 0);
         const offsetY = Math.max(0, Number(labels.indicatorLegendOffsetY) || 0);
         const position = labels.indicatorLegendPosition;
         const isRight = position === "top-right" || position === "bottom-right";
         const isBottom = position === "bottom-left" || position === "bottom-right";
         const legendX = isRight ? chartRight - offsetX : chartLeft + offsetX;
-        const legendY = isBottom ? chartBottom - offsetY : Math.max(chartTop + offsetY, dataLineBottom);
-        drawText(legendText, legendX, legendY, isRight ? "right" : "left", isBottom ? "bottom" : "top", labels.indicatorTextColor);
+        const legendTop = isBottom ? chartBottom - offsetY : Math.max(chartTop + offsetY, dataLineBottom);
+        const rowHeight = Math.round(legendFontSize * 1.55);
+        labelEntries.forEach((entry, rowIndex) => {
+          const rowTop = isBottom ? legendTop - (labelEntries.length - rowIndex) * rowHeight : legendTop + rowIndex * rowHeight;
+          const rowCenter = rowTop + rowHeight / 2;
+          const dimmed = entry.visible === false;
+          ctx.save();
+          if (dimmed) ctx.globalAlpha = 0.45;
+          drawText(
+            entry.text,
+            legendX,
+            rowCenter,
+            isRight ? "right" : "left",
+            "middle",
+            labels.indicatorTextColor
+          );
+          ctx.restore();
+          const textWidth = measureTextWidth(entry.text);
+          const rowLeft = isRight ? legendX - textWidth : legendX;
+          legendRowRegions.push({
+            id: entry.id,
+            type: entry.type,
+            x: rowLeft,
+            y: rowTop,
+            width: textWidth + LEGEND_CONTROLS_WIDTH,
+            height: rowHeight
+          });
+          if (hoveredLegendId === entry.id) {
+            drawIndicatorControls(
+              entry.id,
+              entry.type,
+              entry.visible !== false,
+              isRight ? legendX + 6 : rowLeft + textWidth + 8,
+              rowCenter
+            );
+          }
+        });
         ctx.font = prevFont;
       }
     }
@@ -8472,7 +8509,26 @@ function createChart(element, options = {}) {
     crosshairPriceActionRegion = null;
     const layout = overlayLayout;
     const crosshair = resolvedCrosshair;
-    if (!layout || !crosshair.visible || !crosshairPoint) {
+    if (!layout) return;
+    if (!crosshairPoint && externalCrosshair !== null && crosshair.visible) {
+      const index = findNearestIndexForTimeMs(externalCrosshair.timeMs);
+      if (index !== null) {
+        const x = layout.chartLeft + (index + 0.5 - layout.xStart) / layout.xSpan * layout.chartWidth;
+        if (x >= layout.chartLeft && x <= layout.chartRight) {
+          ctx.save();
+          ctx.globalAlpha = 0.55;
+          ctx.strokeStyle = crosshair.color;
+          ctx.lineWidth = Math.max(1, crosshair.width);
+          applyDashPattern(crosshair.style, dashPatterns.dotted, dashPatterns.dashed);
+          ctx.beginPath();
+          ctx.moveTo(crisp(x), crisp(layout.chartTop));
+          ctx.lineTo(crisp(x), crisp(layout.fullChartBottom));
+          ctx.stroke();
+          ctx.restore();
+        }
+      }
+    }
+    if (!crosshair.visible || !crosshairPoint) {
       return;
     }
     const { chartLeft, chartTop, chartRight, chartBottom, chartWidth, chartHeight, fullChartBottom, yMin, yRange, xStart, xSpan: xSpan2 } = layout;
@@ -9034,6 +9090,9 @@ function createChart(element, options = {}) {
     if (hits.length === 0) return null;
     return hits.find((region) => region.part === "remove") ?? hits[0];
   };
+  const getLegendRowAt = (x, y) => legendRowRegions.find(
+    (region) => x >= region.x && x <= region.x + region.width && y >= region.y && y <= region.y + region.height
+  ) ?? null;
   const getMarkAt = (x, y) => {
     const tolerance = touchInputActive ? Math.max(1, mergedOptions.touch?.hitToleranceScale ?? 2.2) : 1;
     for (let index = markRegions.length - 1; index >= 0; index -= 1) {
@@ -10783,6 +10842,12 @@ function createChart(element, options = {}) {
           setCrosshairPoint(null);
           return;
         }
+        const legendRow = getLegendRowAt(point.x, point.y);
+        const nextLegendId = legendRow?.id ?? null;
+        if (nextLegendId !== hoveredLegendId) {
+          hoveredLegendId = nextLegendId;
+          scheduleDraw();
+        }
         const hoveredPane = getPaneAt(point.x, point.y);
         const nextHoveredPaneId = hoveredPane?.id ?? null;
         if (nextHoveredPaneId !== hoveredPaneId) {
@@ -11001,10 +11066,11 @@ function createChart(element, options = {}) {
       });
       paneDividerDrag = null;
     }
-    if (event?.type === "pointerleave" && (hoveredPaneId !== null || hoveredPaneButton !== null || hoveredAlertId !== null || hoveredMarkKey !== null)) {
+    if (event?.type === "pointerleave" && (hoveredPaneId !== null || hoveredPaneButton !== null || hoveredAlertId !== null || hoveredMarkKey !== null || hoveredLegendId !== null)) {
       hoveredPaneId = null;
       hoveredPaneButton = null;
       hoveredAlertId = null;
+      hoveredLegendId = null;
       if (hoveredMarkKey !== null) {
         hoveredMarkKey = null;
         markHoverHandler?.(null);
@@ -11944,6 +12010,12 @@ function createChart(element, options = {}) {
   const onAlertAction = (handler) => {
     alertActionHandler = handler;
   };
+  const setExternalCrosshair = (point) => {
+    const nextMs = point && Number.isFinite(point.timeMs) ? point.timeMs : null;
+    if (nextMs === (externalCrosshair?.timeMs ?? null)) return;
+    externalCrosshair = nextMs === null ? null : { timeMs: nextMs };
+    scheduleDraw({ overlayOnly: true });
+  };
   const setTimezone = (timezone) => {
     timezoneSetting = timezone || "local";
     zoneClock = createZoneClock(timezoneSetting);
@@ -12254,6 +12326,7 @@ function createChart(element, options = {}) {
     saveState,
     loadState,
     takeScreenshot,
+    setExternalCrosshair,
     setTimezone,
     getTimezone,
     setTimeFormat,

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

@@ -1030,6 +1030,14 @@ interface ChartInstance {
      * the crosshair tag and day/session boundaries move. Unknown ids fall back
      * to local time rather than throwing.
      */
+    /**
+     * Mirror a sibling chart's crosshair in a multi-chart layout. Matching is
+     * by timestamp, so charts on different intervals or instruments still line
+     * up. Pass null to clear.
+     */
+    setExternalCrosshair: (point: {
+        timeMs: number;
+    } | null) => void;
     setTimezone: (timezone: ChartTimezone) => void;
     getTimezone: () => ChartTimezone;
     /** Switch rendered clock times between 24-hour and 12-hour. */