hyperprop-charting-library 0.1.49 → 0.1.50

package/dist/hyperprop-charting-library.cjs

@@ -98,6 +98,9 @@ var DEFAULT_LABELS_OPTIONS = {
   askPrice: Number.NaN,
   showIndicatorNames: false,
   showIndicatorValues: false,
+  indicatorLegendPosition: "top-left",
+  indicatorLegendOffsetX: 10,
+  indicatorLegendOffsetY: 10,
   showCountdownToBarClose: false,
   noOverlapping: true,
   backgroundColor: "#0b1220",
@@ -531,7 +534,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];
@@ -539,7 +542,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;
@@ -588,6 +591,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,
+        backgroundColor: color,
+        textColor: "#0f172a"
+      }
+    ];
+  }
+  return paneInfo;
 };
 var getPercentileValue = (values, percentile) => {
   if (values.length === 0) {
@@ -760,7 +808,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 = {
@@ -772,7 +823,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 = {
@@ -784,7 +838,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,
@@ -792,7 +846,12 @@ 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
+      }
     );
   }
 };
@@ -1356,6 +1415,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)) {
@@ -1380,8 +1444,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(
@@ -1619,11 +1684,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);
@@ -1698,9 +1763,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;
@@ -2053,7 +2172,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,
@@ -2086,6 +2205,60 @@ 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 (!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) {
@@ -2117,7 +2290,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) => {
@@ -2281,12 +2453,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
         };
@@ -2316,7 +2489,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);
@@ -2361,7 +2534,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;
       }
     }
@@ -2419,8 +2599,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);

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

@@ -80,13 +80,46 @@ interface IndicatorRenderContext {
     upColor: string;
     downColor: string;
 }
+interface IndicatorPaneAxisOptions {
+    min: number;
+    max: number;
+    ticks?: number[];
+    decimals?: number;
+    format?: (value: number) => string;
+}
+interface IndicatorPaneGuideLine {
+    value: number;
+    label?: string;
+    color?: string;
+    style?: "solid" | "dotted" | "dashed";
+}
+interface IndicatorPaneValue {
+    label?: string;
+    value?: number;
+    text?: string;
+    color?: string;
+}
+interface IndicatorPaneValueLabel {
+    value: number;
+    text?: string;
+    color?: string;
+    backgroundColor?: string;
+    textColor?: string;
+}
+interface IndicatorPaneRenderInfo {
+    title?: string;
+    axis?: IndicatorPaneAxisOptions;
+    guideLines?: IndicatorPaneGuideLine[];
+    legendValues?: IndicatorPaneValue[];
+    valueLabels?: IndicatorPaneValueLabel[];
+}
 interface IndicatorPlugin<TInputs extends Record<string, unknown> = Record<string, unknown>> {
     id: string;
     name: string;
     pane?: IndicatorPane;
     paneHeightRatio?: number;
     defaultInputs?: TInputs;
-    draw: (ctx: CanvasRenderingContext2D, renderContext: IndicatorRenderContext, inputs: TInputs) => void;
+    draw: (ctx: CanvasRenderingContext2D, renderContext: IndicatorRenderContext, inputs: TInputs) => void | IndicatorPaneRenderInfo;
 }
 interface BuiltInIndicatorInfo {
     id: string;
@@ -282,6 +315,9 @@ interface LabelsOptions {
     askPrice?: number;
     showIndicatorNames?: boolean;
     showIndicatorValues?: boolean;
+    indicatorLegendPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    indicatorLegendOffsetX?: number;
+    indicatorLegendOffsetY?: number;
     showCountdownToBarClose?: boolean;
     noOverlapping?: boolean;
     backgroundColor?: string;
@@ -361,4 +397,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 LabelsOptions, 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 IndicatorPaneAxisOptions, type IndicatorPaneGuideLine, type IndicatorPaneRenderInfo, type IndicatorPaneValue, type IndicatorPaneValueLabel, type IndicatorPlugin, type IndicatorRenderContext, type LabelsOptions, type OhlcDataPoint, type OrderActionButton, type OrderActionEvent, type OrderLineOptions, type PriceLineOptions, type TickerLineOptions, type ViewportState, type WatermarkOptions, createChart };