hyperprop-charting-library 0.1.146 → 0.1.148

package/dist/hyperprop-charting-library.js

@@ -2036,8 +2036,8 @@ var BUILTIN_DONCHIAN_INDICATOR = {
   }
 };
 var computeVolumeProfile = (data, fromIndex, toIndex, rowCount, valueAreaPercent) => {
-  const from = Math.max(0, fromIndex);
-  const to = Math.min(data.length - 1, toIndex);
+  const from = Math.max(0, Math.round(fromIndex));
+  const to = Math.min(data.length - 1, Math.round(toIndex));
   if (to < from) return null;
   let low = Number.POSITIVE_INFINITY;
   let high = Number.NEGATIVE_INFINITY;
@@ -3896,6 +3896,9 @@ function createChart(element, options = {}) {
       pointValue: Number(drawing.pointValue) || 1,
       qtyPrecision: Number.isFinite(drawing.qtyPrecision) ? Math.max(0, Math.floor(Number(drawing.qtyPrecision))) : 0,
       fontSize: Math.max(6, Number(drawing.fontSize) || 14),
+      profileRows: Math.max(4, Math.min(200, Math.round(Number(drawing.profileRows)) || 24)),
+      profileValueAreaPercent: Math.max(10, Math.min(99, Number(drawing.profileValueAreaPercent) || 70)),
+      profileWidthRatio: Math.max(0.1, Math.min(1, Number(drawing.profileWidthRatio) || 0.5)),
       ...drawing.label === void 0 ? {} : { label: drawing.label }
     };
   };
@@ -3929,6 +3932,9 @@ function createChart(element, options = {}) {
     pointValue: drawing.pointValue,
     qtyPrecision: drawing.qtyPrecision,
     fontSize: drawing.fontSize,
+    profileRows: drawing.profileRows,
+    profileValueAreaPercent: drawing.profileValueAreaPercent,
+    profileWidthRatio: drawing.profileWidthRatio,
     ...drawing.label === void 0 ? {} : { label: drawing.label }
   });
   let tradeMarkers = [];
@@ -4255,6 +4261,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;
@@ -5551,6 +5559,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;
@@ -5631,6 +5718,8 @@ function createChart(element, options = {}) {
     orderDragRegions = [];
     alertRegions = [];
     markRegions = [];
+    paneButtonRegions = [];
+    legendRowRegions = [];
     crosshairPriceActionRegion = null;
     const pixelRatio = getPixelRatio();
     canvas.style.width = `${width}px`;
@@ -6635,6 +6724,81 @@ function createChart(element, options = {}) {
           handleAt(ax, ay, drawing.color);
           handleAt(bx, by, drawing.color);
         }
+      } else if (drawing.type === "fixed-range-volume-profile") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (p0 && p1 && data.length > 0) {
+          const fromIndex = Math.max(0, Math.round(Math.min(p0.index, p1.index)));
+          const toIndex = Math.min(data.length - 1, Math.round(Math.max(p0.index, p1.index)));
+          const leftX = xFromDrawingPoint(p0.index <= p1.index ? p0 : p1) - candleSpacing / 2;
+          const rightX = xFromDrawingPoint(p0.index <= p1.index ? p1 : p0) + candleSpacing / 2;
+          const rangeWidth = Math.max(1, rightX - leftX);
+          const rows = Math.max(4, Math.min(200, Math.round(drawing.profileRows) || 24));
+          const valueAreaPercent = Math.max(10, Math.min(99, Number(drawing.profileValueAreaPercent) || 70));
+          const profile = toIndex >= fromIndex ? computeVolumeProfile(data, fromIndex, toIndex, rows, valueAreaPercent) : null;
+          ctx.save();
+          ctx.globalAlpha = draft ? 0.5 : 1;
+          ctx.fillStyle = hexToRgba(drawing.color, 0.06);
+          ctx.fillRect(leftX, chartTop, rangeWidth, chartBottom - chartTop);
+          ctx.strokeStyle = hexToRgba(drawing.color, 0.5);
+          ctx.lineWidth = 1;
+          ctx.setLineDash([4, 3]);
+          ctx.beginPath();
+          ctx.moveTo(crisp(leftX), chartTop);
+          ctx.lineTo(crisp(leftX), chartBottom);
+          ctx.moveTo(crisp(rightX), chartTop);
+          ctx.lineTo(crisp(rightX), chartBottom);
+          ctx.stroke();
+          ctx.setLineDash([]);
+          if (profile && profile.maxRowVolume > 0) {
+            const widthRatio = Math.max(0.1, Math.min(1, Number(drawing.profileWidthRatio) || 0.5));
+            const maxWidth = rangeWidth * widthRatio;
+            for (let row = 0; row < profile.rows.length; row += 1) {
+              const bucket = profile.rows[row];
+              if (bucket.total <= 0) continue;
+              const yTop = yFromPrice(bucket.high);
+              const yBottom = yFromPrice(bucket.low);
+              const top = Math.min(yTop, yBottom);
+              const height2 = Math.max(1, Math.abs(yBottom - yTop) - 1);
+              if (top > chartBottom || top + height2 < chartTop) continue;
+              const inValueArea = row >= profile.valueAreaFrom && row <= profile.valueAreaTo;
+              ctx.globalAlpha = (draft ? 0.5 : 1) * (inValueArea ? 0.5 : 0.2);
+              const rowWidth = bucket.total / profile.maxRowVolume * maxWidth;
+              const upWidth = rowWidth * (bucket.up / bucket.total);
+              ctx.fillStyle = mergedOptions.upColor;
+              ctx.fillRect(leftX, top, upWidth, height2);
+              ctx.fillStyle = mergedOptions.downColor;
+              ctx.fillRect(leftX + upWidth, top, rowWidth - upWidth, height2);
+            }
+            ctx.globalAlpha = draft ? 0.6 : 1;
+            const poc = profile.rows[profile.pocIndex];
+            const drawProfileLevel = (price, color, label, dashed) => {
+              const y = yFromPrice(price);
+              if (y < chartTop || y > chartBottom) return;
+              ctx.strokeStyle = color;
+              ctx.lineWidth = 1;
+              ctx.setLineDash(dashed ? [4, 3] : []);
+              ctx.beginPath();
+              ctx.moveTo(leftX, crisp(y));
+              ctx.lineTo(leftX + maxWidth, crisp(y));
+              ctx.stroke();
+              ctx.setLineDash([]);
+              const prevFont = ctx.font;
+              ctx.font = `10px ${mergedOptions.fontFamily}`;
+              ctx.fillStyle = color;
+              ctx.textAlign = "left";
+              ctx.textBaseline = "bottom";
+              ctx.fillText(label, leftX + 3, y - 1);
+              ctx.font = prevFont;
+            };
+            drawProfileLevel(profile.rows[profile.valueAreaTo].high, "#7e8aa3", "VAH", true);
+            drawProfileLevel(profile.rows[profile.valueAreaFrom].low, "#7e8aa3", "VAL", true);
+            drawProfileLevel((poc.low + poc.high) / 2, "#f7a600", "POC", false);
+          }
+          ctx.restore();
+          handleAt(leftX, yFromPrice(p0.index <= p1.index ? p0.price : p1.price), drawing.color);
+          handleAt(rightX, yFromPrice(p0.index <= p1.index ? p1.price : p0.price), drawing.color);
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -7644,87 +7808,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;
@@ -8226,26 +8313,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;
       }
     }
@@ -8917,6 +9034,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) {
@@ -9407,6 +9527,19 @@ function createChart(element, options = {}) {
         if (distanceToSegment(x, y, bx + blockW / 2, by + blockH / 2, ax, ay) <= 5 * hitTolerance) {
           return { drawing, target: "line" };
         }
+      } else if (drawing.type === "fixed-range-volume-profile") {
+        const p0 = drawing.points[0];
+        const p1 = drawing.points[1];
+        if (!p0 || !p1) continue;
+        const px0 = canvasXFromDrawingPoint(p0);
+        const px1 = canvasXFromDrawingPoint(p1);
+        const y0 = canvasYFromDrawingPrice(p0.price);
+        const y1 = canvasYFromDrawingPrice(p1.price);
+        if (Math.hypot(x - px0, y - y0) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 0 };
+        if (Math.hypot(x - px1, y - y1) <= 9 * hitTolerance) return { drawing, target: "handle", pointIndex: 1 };
+        if (x >= Math.min(px0, px1) && x <= Math.max(px0, px1)) {
+          return { drawing, target: "line" };
+        }
       } else if (drawing.type === "price-range") {
         const p0 = drawing.points[0];
         const p1 = drawing.points[1];
@@ -9858,6 +9991,33 @@ function createChart(element, options = {}) {
       scheduleDraw();
       return true;
     }
+    if (activeDrawingTool === "fixed-range-volume-profile") {
+      if (draftDrawing?.type === "fixed-range-volume-profile") {
+        const completed = normalizeDrawingState({
+          ...serializeDrawing(draftDrawing),
+          points: [draftDrawing.points[0], point]
+        });
+        drawings.push(completed);
+        draftDrawing = null;
+        activeDrawingTool = null;
+        emitDrawingsChange();
+        scheduleDraw();
+        return true;
+      }
+      const defaults = getDrawingToolDefaults("fixed-range-volume-profile");
+      draftDrawing = normalizeDrawingState({
+        type: "fixed-range-volume-profile",
+        points: [point, point],
+        color: defaults.color ?? "#5b8def",
+        style: defaults.style ?? "solid",
+        width: defaults.width ?? 1,
+        ...defaults.profileRows === void 0 ? {} : { profileRows: defaults.profileRows },
+        ...defaults.profileValueAreaPercent === void 0 ? {} : { profileValueAreaPercent: defaults.profileValueAreaPercent },
+        ...defaults.profileWidthRatio === void 0 ? {} : { profileWidthRatio: defaults.profileWidthRatio }
+      });
+      scheduleDraw();
+      return true;
+    }
     if (activeDrawingTool === "price-range") {
       const tick = getConfiguredTickSize();
       const visibleRange = drawState.yMax - drawState.yMin;
@@ -10626,6 +10786,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) {
@@ -10844,10 +11010,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);