hyperprop-charting-library 0.1.49 → 0.1.51

package/dist/hyperprop-charting-library.js

@@ -74,6 +74,10 @@ var DEFAULT_LABELS_OPTIONS = {
   askPrice: Number.NaN,
   showIndicatorNames: false,
   showIndicatorValues: false,
+  showIndicatorValueLabels: true,
+  indicatorLegendPosition: "top-left",
+  indicatorLegendOffsetX: 10,
+  indicatorLegendOffsetY: 10,
   showCountdownToBarClose: false,
   noOverlapping: true,
   backgroundColor: "#0b1220",
@@ -507,7 +511,7 @@ var drawOverlaySeries = (ctx, renderContext, values, color, width) => {
   }
   ctx.restore();
 };
-var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride, maxOverride, guideLines) => {
+var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride, maxOverride, guideLines, options = {}) => {
   const visible = [];
   for (let index = renderContext.startIndex; index <= renderContext.endIndex; index += 1) {
     const value = values[index];
@@ -515,7 +519,7 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
       visible.push(value);
     }
   }
-  if (visible.length === 0) return;
+  if (visible.length === 0) return void 0;
   const minValue = minOverride ?? Math.min(...visible);
   const maxValue = maxOverride ?? Math.max(...visible);
   const range = maxValue - minValue || 1;
@@ -564,6 +568,51 @@ var drawSeparateSeries = (ctx, renderContext, values, color, width, minOverride,
     }
   }
   ctx.restore();
+  let latestValue = null;
+  for (let index = values.length - 1; index >= 0; index -= 1) {
+    const value = values[index];
+    if (Number.isFinite(value ?? Number.NaN)) {
+      latestValue = value;
+      break;
+    }
+  }
+  const decimals = options.decimals ?? 2;
+  const formatValue = (value) => value.toFixed(decimals);
+  const axisTicks = options.axisTicks ?? guideLines;
+  const paneInfo = {
+    ...options.title ? { title: options.title } : {},
+    axis: {
+      min: minValue,
+      max: maxValue,
+      ...axisTicks ? { ticks: axisTicks } : {},
+      decimals
+    }
+  };
+  if (guideLines) {
+    paneInfo.guideLines = guideLines.map((value) => ({ value, label: formatValue(value), style: "dotted" }));
+  }
+  if (latestValue !== null) {
+    paneInfo.legendValues = [
+      {
+        ...options.legendLabel ? { label: options.legendLabel } : {},
+        value: latestValue,
+        text: formatValue(latestValue),
+        color
+      }
+    ];
+  }
+  if (options.valueLabel !== false && latestValue !== null) {
+    paneInfo.valueLabels = [
+      {
+        value: latestValue,
+        text: formatValue(latestValue),
+        color: options.valueLabelColor ?? color,
+        backgroundColor: options.valueLabelBackgroundColor ?? options.valueLabelColor ?? color,
+        textColor: options.valueLabelTextColor ?? "#0f172a"
+      }
+    ];
+  }
+  return paneInfo;
 };
 var getPercentileValue = (values, percentile) => {
   if (values.length === 0) {
@@ -736,7 +785,10 @@ var BUILTIN_STDDEV_INDICATOR = {
       renderContext.data,
       () => computeStdDevSeries(renderContext.data, length, inputs.source ?? "close")
     );
-    drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#f97316", Number(inputs.width) || 2);
+    return drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#f97316", Number(inputs.width) || 2, void 0, void 0, void 0, {
+      title: `StdDev ${length}`,
+      decimals: 2
+    });
   }
 };
 var BUILTIN_ATR_INDICATOR = {
@@ -748,7 +800,10 @@ var BUILTIN_ATR_INDICATOR = {
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 14);
     const values = withCachedSeries(`atr|${length}`, renderContext.data, () => computeAtrSeries(renderContext.data, length));
-    drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#eab308", Number(inputs.width) || 2);
+    return drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#eab308", Number(inputs.width) || 2, void 0, void 0, void 0, {
+      title: `ATR ${length}`,
+      decimals: 2
+    });
   }
 };
 var BUILTIN_RSI_INDICATOR = {
@@ -760,7 +815,7 @@ var BUILTIN_RSI_INDICATOR = {
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 14);
     const values = withCachedSeries(`rsi|${length}`, renderContext.data, () => computeRsiSeries(renderContext.data, length));
-    drawSeparateSeries(
+    return drawSeparateSeries(
       ctx,
       renderContext,
       values,
@@ -768,7 +823,15 @@ var BUILTIN_RSI_INDICATOR = {
       Number(inputs.width) || 2,
       0,
       100,
-      [30, 50, 70]
+      [30, 50, 70],
+      {
+        title: `RSI ${length}`,
+        axisTicks: [0, 30, 50, 70, 100],
+        decimals: 2,
+        valueLabelColor: "#9E9E9E",
+        valueLabelBackgroundColor: "#9E9E9E",
+        valueLabelTextColor: "#0f172a"
+      }
     );
   }
 };
@@ -1332,6 +1395,11 @@ function createChart(element, options = {}) {
     const pad = (value) => String(value).padStart(2, "0");
     return hours > 0 ? `${hours}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`;
   };
+  const getRightAxisLabelX = (chartRight) => chartRight + 1;
+  const getRightAxisLabelWidth = (chartRight, contentWidth) => {
+    const scaleWidth = Math.max(0, Math.floor(width - getRightAxisLabelX(chartRight)));
+    return Math.max(contentWidth, scaleWidth);
+  };
   const drawPriceLine = (line, yFromPrice, chartLeft, chartTop, chartRight, chartBottom) => {
     const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
     if (!mergedLine.visible || !Number.isFinite(mergedLine.price)) {
@@ -1356,8 +1424,9 @@ function createChart(element, options = {}) {
     ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
     const labelPaddingX = 8;
     const labelHeight = 20;
-    const labelWidth = mergedLine.label === void 0 ? getPriceLabelWidth(labelText, labelPaddingX) : Math.ceil(ctx.measureText(labelText).width) + labelPaddingX * 2;
-    const labelX = chartRight + 4;
+    const measuredLabelWidth = mergedLine.label === void 0 ? getPriceLabelWidth(labelText, labelPaddingX) : Math.ceil(ctx.measureText(labelText).width) + labelPaddingX * 2;
+    const labelWidth = getRightAxisLabelWidth(chartRight, measuredLabelWidth);
+    const labelX = getRightAxisLabelX(chartRight);
     const labelY = placeRightAxisLabel(lineY - labelHeight / 2, labelHeight, chartTop, chartBottom - labelHeight);
     ctx.fillStyle = mergedLine.labelBackgroundColor;
     fillRoundedRect(
@@ -1595,11 +1664,11 @@ function createChart(element, options = {}) {
     const priceText = formatPrice(renderPrice);
     const pricePaddingX = 8;
     const measuredPriceWidth = getPriceLabelWidth(priceText, pricePaddingX);
-    const priceWidth = mergedLine.id === void 0 ? measuredPriceWidth : Math.max(measuredPriceWidth, orderPriceTagWidthById.get(mergedLine.id) ?? 0);
+    const priceWidth = mergedLine.id === void 0 ? getRightAxisLabelWidth(chartRight, measuredPriceWidth) : getRightAxisLabelWidth(chartRight, Math.max(measuredPriceWidth, orderPriceTagWidthById.get(mergedLine.id) ?? 0));
     if (mergedLine.id) {
       orderPriceTagWidthById.set(mergedLine.id, priceWidth);
     }
-    const priceX = chartRight + 4;
+    const priceX = getRightAxisLabelX(chartRight);
     const priceY = placeRightAxisLabel(targetLabelY, labelHeight, chartTop, chartBottom - labelHeight);
     ctx.fillStyle = mergedLine.labelBackgroundColor ?? color;
     fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, borderRadius);
@@ -1674,9 +1743,63 @@ function createChart(element, options = {}) {
     ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
     ctx.fillStyle = mergedOptions.backgroundColor;
     ctx.fillRect(0, 0, width, height);
+    const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
+    const estimateRightMargin = () => {
+      const paddingX = Math.max(4, labels.labelPaddingX);
+      const measure = (text) => Math.ceil(ctx.measureText(text).width) + paddingX * 2;
+      let required = margin.right - 1;
+      const include = (text) => {
+        const normalized = text?.trim();
+        if (normalized) {
+          required = Math.max(required, measure(normalized));
+        }
+      };
+      const ticker2 = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+      const lastPoint2 = data[data.length - 1];
+      if ((ticker2.visible ?? true) && labels.showLastPrice && lastPoint2) {
+        include(formatPrice(lastPoint2.c));
+        if (ticker2.labelSubtext) include(String(ticker2.labelSubtext));
+        for (const subtext of ticker2.labelSubtexts ?? []) {
+          include(String(subtext));
+        }
+      }
+      if (labels.showSymbolName) {
+        include(labels.symbolName);
+      }
+      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)) {
+          include(`PDC ${formatPrice(previousCloseCandidate)}`);
+        }
+      }
+      if (labels.showHighLow && data.length > 0) {
+        include(`H ${formatPrice(Math.max(...data.map((point) => point.h)))}`);
+        include(`L ${formatPrice(Math.min(...data.map((point) => point.l)))}`);
+      }
+      if (labels.showBidAsk) {
+        if (Number.isFinite(labels.bidPrice)) include(`B ${formatPrice(labels.bidPrice)}`);
+        if (Number.isFinite(labels.askPrice)) include(`A ${formatPrice(labels.askPrice)}`);
+      }
+      for (const line of priceLines) {
+        const mergedLine = { ...DEFAULT_PRICE_LINE_OPTIONS, ...line };
+        if (mergedLine.visible && Number.isFinite(mergedLine.price)) {
+          include(mergedLine.label ?? formatPrice(mergedLine.price));
+        }
+      }
+      for (const line of orderLines) {
+        const mergedLine = { ...DEFAULT_ORDER_LINE_OPTIONS, ...line };
+        const renderPrice = mergedLine.behavior === "follow" && Number.isFinite(mergedLine.followPrice) ? mergedLine.followPrice : mergedLine.price;
+        if (mergedLine.visible && Number.isFinite(renderPrice)) {
+          include(formatPrice(renderPrice));
+        }
+      }
+      const maxRightMargin = Math.max(margin.right, width - margin.left - 160);
+      return Math.min(maxRightMargin, Math.max(margin.right, Math.ceil(required + 1)));
+    };
+    const rightMargin = estimateRightMargin();
     const chartLeft = margin.left;
     const chartTop = margin.top;
-    const chartWidth = width - margin.left - margin.right;
+    const chartWidth = width - margin.left - rightMargin;
     const fullChartHeight = height - margin.top - margin.bottom;
     const fullChartBottom = chartTop + fullChartHeight;
     const chartRight = chartLeft + chartWidth;
@@ -2029,7 +2152,7 @@ function createChart(element, options = {}) {
         ctx.beginPath();
         ctx.rect(chartLeft + 1, paneTop + 1, Math.max(0, chartWidth - 2), Math.max(0, paneHeight - 2));
         ctx.clip();
-        plugin.draw(
+        const paneInfo = plugin.draw(
           ctx,
           {
             data,
@@ -2062,6 +2185,63 @@ function createChart(element, options = {}) {
         ctx.lineTo(crisp(chartRight), crisp(paneTop));
         ctx.stroke();
         ctx.restore();
+        const axisInfo = paneInfo?.axis;
+        if (axisInfo && Number.isFinite(axisInfo.min) && Number.isFinite(axisInfo.max) && axisInfo.max !== axisInfo.min) {
+          const paneRange = axisInfo.max - axisInfo.min;
+          const yFromPaneValue = (value) => {
+            const ratio = (value - axisInfo.min) / paneRange;
+            return paneBottom - ratio * paneHeight;
+          };
+          const formatPaneValue = (value) => {
+            if (axisInfo.format) {
+              return axisInfo.format(value);
+            }
+            const decimals = axisInfo.decimals ?? (Math.abs(paneRange) <= 2 ? 2 : Math.abs(paneRange) <= 20 ? 1 : 0);
+            return value.toFixed(Math.max(0, Math.min(8, Math.round(decimals))));
+          };
+          const axisTicks = axisInfo.ticks && axisInfo.ticks.length > 0 ? axisInfo.ticks : [axisInfo.min, axisInfo.min + paneRange / 2, axisInfo.max];
+          const uniqueTicks = Array.from(new Set(axisTicks.filter((tick) => Number.isFinite(tick))));
+          ctx.save();
+          ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
+          for (const tick of uniqueTicks) {
+            if (tick < axisInfo.min || tick > axisInfo.max) {
+              continue;
+            }
+            drawText(formatPaneValue(tick), chartRight + 6, yFromPaneValue(tick), "left", "middle", yAxis.textColor);
+          }
+          ctx.restore();
+          if (labels.visible) {
+            const prevFont = ctx.font;
+            ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
+            const legendTitle = paneInfo.title ?? plugin.name;
+            const legendValues = paneInfo.legendValues ?? [];
+            const legendParts = [
+              legendTitle,
+              ...legendValues.map((value) => value.text ?? (value.value === void 0 ? "" : formatPaneValue(value.value))).filter(Boolean)
+            ].filter(Boolean);
+            if (legendParts.length > 0) {
+              drawText(legendParts.join("  "), chartLeft + 10, paneTop + 8, "left", "top", labels.indicatorTextColor);
+            }
+            for (const label of paneInfo.valueLabels ?? []) {
+              if (!labels.showIndicatorValueLabels) {
+                continue;
+              }
+              if (!Number.isFinite(label.value) || label.value < axisInfo.min || label.value > axisInfo.max) {
+                continue;
+              }
+              const text = label.text ?? formatPaneValue(label.value);
+              const labelPaddingX = 7;
+              const labelHeight = Math.max(16, yAxisFontSize + 8);
+              const labelWidth = getRightAxisLabelWidth(chartRight, Math.ceil(ctx.measureText(text).width) + labelPaddingX * 2);
+              const labelX = getRightAxisLabelX(chartRight);
+              const labelY = clamp(yFromPaneValue(label.value) - labelHeight / 2, paneTop + 2, paneBottom - labelHeight - 2);
+              ctx.fillStyle = label.backgroundColor ?? label.color ?? labels.backgroundColor;
+              fillRoundedRect(Math.round(labelX), Math.round(labelY), labelWidth, labelHeight, Math.max(0, labels.borderRadius));
+              drawText(text, labelX + labelPaddingX, labelY + labelHeight / 2, "left", "middle", label.textColor ?? labels.textColor);
+            }
+            ctx.font = prevFont;
+          }
+        }
       });
     }
     if (crosshair.visible && crosshairPoint && crosshair.showVertical) {
@@ -2093,7 +2273,6 @@ function createChart(element, options = {}) {
       drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
       ctx.font = prevFont;
     }
-    const labels = { ...DEFAULT_LABELS_OPTIONS, ...mergedOptions.labels ?? {} };
     resetLabelSlots(labels.noOverlapping);
     const priceAxisLabels = [];
     const addPriceAxisLabel = (label) => {
@@ -2257,12 +2436,13 @@ function createChart(element, options = {}) {
           ctx.font = baseFont;
         }
         const labelTextWidth = Math.max(primaryWidth, subtextWidth);
+        const labelWidth = getRightAxisLabelWidth(chartRight, labelTextWidth);
         return {
           ...label,
           subtexts,
           subtextFontSize,
           height: labelHeight,
-          width: labelTextWidth,
+          width: labelWidth,
           targetY: clamp(yFromPrice(label.price), chartTop + 1, chartBottom - 1) - labelHeight / 2,
           y: 0
         };
@@ -2292,7 +2472,7 @@ function createChart(element, options = {}) {
         );
         rightAxisLabelSlots.sort((a, b) => a.y - b.y);
       }
-      const labelX = chartRight + 4;
+      const labelX = getRightAxisLabelX(chartRight);
       for (const label of positionedLabels) {
         ctx.fillStyle = label.backgroundColor;
         fillRoundedRect(Math.round(labelX), Math.round(label.y), label.width, label.height, labelRadius);
@@ -2337,7 +2517,14 @@ function createChart(element, options = {}) {
         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);
+        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 : chartTop + offsetY;
+        drawText(legendText, legendX, legendY, isRight ? "right" : "left", isBottom ? "bottom" : "top", labels.indicatorTextColor);
         ctx.font = prevFont;
       }
     }
@@ -2395,8 +2582,8 @@ function createChart(element, options = {}) {
       if (crosshair.showPriceLabel) {
         const hoverPrice = yMin + (chartBottom - cy) / chartHeight * yRange;
         const priceText = formatPrice(hoverPrice);
-        const priceWidth = getPriceLabelWidth(priceText, labelPaddingX);
-        const priceX = chartRight + 4;
+        const priceWidth = getRightAxisLabelWidth(chartRight, getPriceLabelWidth(priceText, labelPaddingX));
+        const priceX = getRightAxisLabelX(chartRight);
         const priceY = clamp(cy - labelHeight / 2, chartTop, chartBottom - labelHeight);
         ctx.fillStyle = labelBackground;
         fillRoundedRect(Math.round(priceX), Math.round(priceY), priceWidth, labelHeight, labelRadius);