hyperprop-charting-library 0.1.24 → 0.1.25

package/dist/hyperprop-charting-library.js

@@ -109,6 +109,8 @@ var DEFAULT_OPTIONS = {
   backgroundColor: "#101114",
   axisColor: "#7f8289",
   axis: DEFAULT_AXIS_OPTIONS,
+  xAxis: DEFAULT_AXIS_OPTIONS,
+  yAxis: DEFAULT_AXIS_OPTIONS,
   priceDecimals: 2,
   stabilizePriceLabels: true,
   priceLabelMinIntegerDigits: 3,
@@ -127,6 +129,7 @@ var DEFAULT_OPTIONS = {
   candleBodyWidthRatio: 0.7,
   candleMinWidth: 0.5,
   candleWickWidth: 1,
+  tickSize: 0,
   candleColorMode: "openClose",
   candleColorEpsilon: -1,
   autoScaleSmoothing: 0.16,
@@ -364,6 +367,35 @@ var computeAtrSeries = (data, length) => {
   }
   return result;
 };
+var builtInSeriesCache = /* @__PURE__ */ new Map();
+var getSeriesFingerprint = (data) => {
+  const length = data.length;
+  const last = length > 0 ? data[length - 1] : void 0;
+  const prev = length > 1 ? data[length - 2] : void 0;
+  if (!last) return "empty";
+  return [
+    length,
+    last.time.getTime(),
+    last.o,
+    last.h,
+    last.l,
+    last.c,
+    last.v ?? "",
+    prev?.time.getTime() ?? "",
+    prev?.c ?? "",
+    prev?.v ?? ""
+  ].join("|");
+};
+var withCachedSeries = (key, data, compute) => {
+  const fingerprint = getSeriesFingerprint(data);
+  const existing = builtInSeriesCache.get(key);
+  if (existing && existing.fingerprint === fingerprint) {
+    return existing.values;
+  }
+  const values = compute();
+  builtInSeriesCache.set(key, { fingerprint, values });
+  return values;
+};
 var drawOverlaySeries = (ctx, renderContext, values, color, width) => {
   if (!renderContext.yFromPrice) return;
   const yFromPrice = renderContext.yFromPrice;
@@ -461,6 +493,8 @@ var BUILTIN_VOLUME_INDICATOR = {
   defaultInputs: {
     upOpacity: 0.7,
     downOpacity: 0.7,
+    upColor: "",
+    downColor: "",
     minBarWidth: 1,
     overlayHeightRatio: 0.22
   },
@@ -491,9 +525,11 @@ var BUILTIN_VOLUME_INDICATOR = {
       const barY = Math.round(paneBottom - volumeHeight);
       const direction = renderContext.getCandleDirectionByIndex(index);
       const opacity = direction === "up" ? upOpacity : downOpacity;
+      const upBarColor = inputs.upColor && inputs.upColor.trim().length > 0 ? inputs.upColor : upColor;
+      const downBarColor = inputs.downColor && inputs.downColor.trim().length > 0 ? inputs.downColor : downColor;
       ctx.save();
       ctx.globalAlpha = opacity;
-      ctx.fillStyle = direction === "up" ? upColor : downColor;
+      ctx.fillStyle = direction === "up" ? upBarColor : downBarColor;
       ctx.fillRect(barX, barY, Math.max(1, Math.round(barWidth)), volumeHeight);
       ctx.restore();
     }
@@ -506,7 +542,11 @@ var BUILTIN_SMA_INDICATOR = {
   defaultInputs: { length: 20, source: "close", color: "#60a5fa", width: 2 },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 20);
-    const values = computeSmaSeries(renderContext.data, length, inputs.source ?? "close");
+    const values = withCachedSeries(
+      `sma|${length}|${inputs.source ?? "close"}`,
+      renderContext.data,
+      () => computeSmaSeries(renderContext.data, length, inputs.source ?? "close")
+    );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#60a5fa", Number(inputs.width) || 2);
   }
 };
@@ -517,7 +557,11 @@ var BUILTIN_EMA_INDICATOR = {
   defaultInputs: { length: 20, source: "close", color: "#f59e0b", width: 2 },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 20);
-    const values = computeEmaSeries(renderContext.data, length, inputs.source ?? "close");
+    const values = withCachedSeries(
+      `ema|${length}|${inputs.source ?? "close"}`,
+      renderContext.data,
+      () => computeEmaSeries(renderContext.data, length, inputs.source ?? "close")
+    );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#f59e0b", Number(inputs.width) || 2);
   }
 };
@@ -528,7 +572,11 @@ var BUILTIN_WMA_INDICATOR = {
   defaultInputs: { length: 20, source: "close", color: "#a78bfa", width: 2 },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 20);
-    const values = computeWmaSeries(renderContext.data, length, inputs.source ?? "close");
+    const values = withCachedSeries(
+      `wma|${length}|${inputs.source ?? "close"}`,
+      renderContext.data,
+      () => computeWmaSeries(renderContext.data, length, inputs.source ?? "close")
+    );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#a78bfa", Number(inputs.width) || 2);
   }
 };
@@ -539,7 +587,11 @@ var BUILTIN_VWMA_INDICATOR = {
   defaultInputs: { length: 20, source: "close", color: "#ef4444", width: 2 },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 20);
-    const values = computeVwmaSeries(renderContext.data, length, inputs.source ?? "close");
+    const values = withCachedSeries(
+      `vwma|${length}|${inputs.source ?? "close"}`,
+      renderContext.data,
+      () => computeVwmaSeries(renderContext.data, length, inputs.source ?? "close")
+    );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#ef4444", Number(inputs.width) || 2);
   }
 };
@@ -550,7 +602,11 @@ var BUILTIN_RMA_INDICATOR = {
   defaultInputs: { length: 14, source: "close", color: "#22c55e", width: 2 },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 14);
-    const values = computeRmaSeries(renderContext.data, length, inputs.source ?? "close");
+    const values = withCachedSeries(
+      `rma|${length}|${inputs.source ?? "close"}`,
+      renderContext.data,
+      () => computeRmaSeries(renderContext.data, length, inputs.source ?? "close")
+    );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#22c55e", Number(inputs.width) || 2);
   }
 };
@@ -561,7 +617,11 @@ var BUILTIN_HMA_INDICATOR = {
   defaultInputs: { length: 21, source: "close", color: "#14b8a6", width: 2 },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 21);
-    const values = computeHmaSeries(renderContext.data, length, inputs.source ?? "close");
+    const values = withCachedSeries(
+      `hma|${length}|${inputs.source ?? "close"}`,
+      renderContext.data,
+      () => computeHmaSeries(renderContext.data, length, inputs.source ?? "close")
+    );
     drawOverlaySeries(ctx, renderContext, values, inputs.color ?? "#14b8a6", Number(inputs.width) || 2);
   }
 };
@@ -573,7 +633,11 @@ var BUILTIN_STDDEV_INDICATOR = {
   defaultInputs: { length: 20, source: "close", color: "#f97316", width: 2 },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 20);
-    const values = computeStdDevSeries(renderContext.data, length, inputs.source ?? "close");
+    const values = withCachedSeries(
+      `stddev|${length}|${inputs.source ?? "close"}`,
+      renderContext.data,
+      () => computeStdDevSeries(renderContext.data, length, inputs.source ?? "close")
+    );
     drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#f97316", Number(inputs.width) || 2);
   }
 };
@@ -585,7 +649,7 @@ var BUILTIN_ATR_INDICATOR = {
   defaultInputs: { length: 14, color: "#eab308", width: 2 },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 14);
-    const values = computeAtrSeries(renderContext.data, length);
+    const values = withCachedSeries(`atr|${length}`, renderContext.data, () => computeAtrSeries(renderContext.data, length));
     drawSeparateSeries(ctx, renderContext, values, inputs.color ?? "#eab308", Number(inputs.width) || 2);
   }
 };
@@ -597,7 +661,7 @@ var BUILTIN_RSI_INDICATOR = {
   defaultInputs: { length: 14, color: "#3b82f6", width: 2 },
   draw: (ctx, renderContext, inputs) => {
     const length = clampIndicatorLength(inputs.length, 14);
-    const values = computeRsiSeries(renderContext.data, length);
+    const values = withCachedSeries(`rsi|${length}`, renderContext.data, () => computeRsiSeries(renderContext.data, length));
     drawSeparateSeries(
       ctx,
       renderContext,
@@ -631,6 +695,18 @@ function createChart(element, options = {}) {
       ...options.axis ?? {},
       ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {}
     },
+    xAxis: {
+      ...DEFAULT_AXIS_OPTIONS,
+      ...options.axis ?? {},
+      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
+      ...options.xAxis ?? {}
+    },
+    yAxis: {
+      ...DEFAULT_AXIS_OPTIONS,
+      ...options.axis ?? {},
+      ...options.axisColor ? { lineColor: options.axisColor, textColor: options.axisColor } : {},
+      ...options.yAxis ?? {}
+    },
     crosshair: {
       ...DEFAULT_CROSSHAIR_OPTIONS,
       ...options.crosshair ?? {}
@@ -686,6 +762,9 @@ function createChart(element, options = {}) {
       visible: indicator.visible ?? true,
       pane: indicator.pane ?? plugin?.pane ?? "overlay",
       ...indicator.paneHeightRatio === void 0 ? {} : { paneHeightRatio: indicator.paneHeightRatio },
+      zIndex: Math.round(Number(indicator.zIndex) || 0),
+      excludeFromAutoscale: indicator.excludeFromAutoscale ?? true,
+      overlayScaleWeight: Math.min(1, Math.max(0, Number(indicator.overlayScaleWeight) || 0.25)),
       inputs: {
         ...defaults,
         ...indicator.inputs ?? {}
@@ -841,20 +920,56 @@ function createChart(element, options = {}) {
     }
     return { min: nextMin, max: nextMax };
   };
+  const getConfiguredPriceDecimals = () => clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+  const getConfiguredTickSize = () => {
+    const step = Number(mergedOptions.tickSize);
+    return Number.isFinite(step) && step > 0 ? step : 0;
+  };
+  const getTickSizeDecimals = () => {
+    const tickSize = getConfiguredTickSize();
+    if (tickSize <= 0) {
+      return 0;
+    }
+    let scaled = tickSize;
+    let decimals = 0;
+    while (decimals < 8 && Math.abs(Math.round(scaled) - scaled) > 1e-10) {
+      scaled *= 10;
+      decimals += 1;
+    }
+    return decimals;
+  };
+  const getDisplayPriceDecimals = () => {
+    const configured = getConfiguredPriceDecimals();
+    const tickDecimals = getTickSizeDecimals();
+    return Math.max(configured, tickDecimals);
+  };
+  const quantizeToTickSize = (price) => {
+    const tickSize = getConfiguredTickSize();
+    if (tickSize <= 0 || !Number.isFinite(price)) {
+      return price;
+    }
+    return Math.round(price / tickSize) * tickSize;
+  };
   const formatPrice = (price) => {
-    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
-    return price.toFixed(decimals);
+    const rounded = quantizeToTickSize(price);
+    const decimals = getDisplayPriceDecimals();
+    return rounded.toFixed(decimals);
   };
   const roundToPricePrecision = (price) => {
-    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
-    return Number(price.toFixed(decimals));
+    const rounded = quantizeToTickSize(price);
+    const decimals = getDisplayPriceDecimals();
+    return Number(rounded.toFixed(decimals));
   };
   const getResolvedCandleColorEpsilon = () => {
     const configured = mergedOptions.candleColorEpsilon;
     if (configured >= 0) {
       return configured;
     }
-    const decimals = clamp(Math.round(mergedOptions.priceDecimals), 0, 8);
+    const tickSize = getConfiguredTickSize();
+    if (tickSize > 0) {
+      return tickSize / 2;
+    }
+    const decimals = getDisplayPriceDecimals();
     return decimals > 0 ? 0.5 / 10 ** decimals : 0;
   };
   const getDirectionFromDelta = (delta) => {
@@ -1386,6 +1501,10 @@ function createChart(element, options = {}) {
     canvas.height = Math.floor(height * pixelRatio);
     ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
     const axis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.axis ?? {} };
+    const xAxis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.xAxis ?? {} };
+    const yAxis = { ...DEFAULT_AXIS_OPTIONS, ...mergedOptions.yAxis ?? {} };
+    const xAxisFontSize = Math.max(8, xAxis.fontSize);
+    const yAxisFontSize = Math.max(8, yAxis.fontSize);
     ctx.font = `${Math.max(8, axis.fontSize)}px ${mergedOptions.fontFamily}`;
     ctx.fillStyle = mergedOptions.backgroundColor;
     ctx.fillRect(0, 0, width, height);
@@ -1400,6 +1519,9 @@ function createChart(element, options = {}) {
     const separatePaneSpacing = 6;
     const activeSeparateIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "separate"
+    ).sort((a, b) => a.indicator.zIndex - b.indicator.zIndex);
+    const overlayIndicatorsForScale = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
+      (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "overlay"
     );
     const separatePaneHeightDefaults = activeSeparateIndicators.map(({ indicator, plugin }) => {
       const ratio = Math.min(0.45, Math.max(0.08, indicator.paneHeightRatio ?? plugin.paneHeightRatio ?? 0.22));
@@ -1451,8 +1573,47 @@ function createChart(element, options = {}) {
         }
       }
     }
-    const minPrice = Math.min(...priceSource.map((point) => point.l));
-    const maxPrice = Math.max(...priceSource.map((point) => point.h));
+    let minPrice = Math.min(...priceSource.map((point) => point.l));
+    let maxPrice = Math.max(...priceSource.map((point) => point.h));
+    if (overlayIndicatorsForScale.length > 0) {
+      for (const { indicator } of overlayIndicatorsForScale) {
+        if (indicator.excludeFromAutoscale) {
+          continue;
+        }
+        const type = indicator.type;
+        const inputs = indicator.inputs;
+        const source = inputs.source ?? "close";
+        const length = clampIndicatorLength(inputs.length ?? 14, 14);
+        let series = null;
+        if (type === "sma") series = withCachedSeries(`sma|${length}|${source}`, data, () => computeSmaSeries(data, length, source));
+        if (type === "ema") series = withCachedSeries(`ema|${length}|${source}`, data, () => computeEmaSeries(data, length, source));
+        if (type === "wma") series = withCachedSeries(`wma|${length}|${source}`, data, () => computeWmaSeries(data, length, source));
+        if (type === "vwma") series = withCachedSeries(`vwma|${length}|${source}`, data, () => computeVwmaSeries(data, length, source));
+        if (type === "rma") series = withCachedSeries(`rma|${length}|${source}`, data, () => computeRmaSeries(data, length, source));
+        if (type === "hma") series = withCachedSeries(`hma|${length}|${source}`, data, () => computeHmaSeries(data, length, source));
+        if (!series) {
+          continue;
+        }
+        const visibleValues = [];
+        for (let idx = startIndex; idx <= endIndex; idx += 1) {
+          const value = series[idx];
+          if (Number.isFinite(value ?? Number.NaN)) {
+            visibleValues.push(value);
+          }
+        }
+        if (visibleValues.length === 0) {
+          continue;
+        }
+        const seriesMin = Math.min(...visibleValues);
+        const seriesMax = Math.max(...visibleValues);
+        const weight = Math.min(1, Math.max(0, indicator.overlayScaleWeight));
+        const currentMid = (minPrice + maxPrice) / 2;
+        const weightedMin = currentMid + (seriesMin - currentMid) * weight;
+        const weightedMax = currentMid + (seriesMax - currentMid) * weight;
+        minPrice = Math.min(minPrice, weightedMin);
+        maxPrice = Math.max(maxPrice, weightedMax);
+      }
+    }
     const priceRange = maxPrice - minPrice || 1;
     const autoMin = minPrice - priceRange * 0.08;
     const autoMax = maxPrice + priceRange * 0.08;
@@ -1612,7 +1773,7 @@ function createChart(element, options = {}) {
     }
     const activeOverlayIndicators = indicators.filter((indicator) => indicator.visible).map((indicator) => ({ indicator, plugin: indicatorRegistry.get(indicator.type) })).filter(
       (value) => value.plugin !== void 0 && (value.indicator.pane ?? value.plugin.pane ?? "overlay") === "overlay"
-    );
+    ).sort((a, b) => a.indicator.zIndex - b.indicator.zIndex);
     if (activeOverlayIndicators.length > 0) {
       const xFromIndex = (index) => chartLeft + (index + 0.5 - xStart) / xSpan * chartWidth;
       activeOverlayIndicators.forEach(({ indicator, plugin }) => {
@@ -1722,7 +1883,10 @@ function createChart(element, options = {}) {
       const ratio = tick / yTicks;
       const price = yMin + yRange * ratio;
       const y = yFromPrice(price);
-      drawText(formatPrice(price), chartRight + 6, y, "left", "middle", axis.textColor);
+      const prevFont = ctx.font;
+      ctx.font = `${yAxisFontSize}px ${mergedOptions.fontFamily}`;
+      drawText(formatPrice(price), chartRight + 6, y, "left", "middle", yAxis.textColor);
+      ctx.font = prevFont;
     }
     const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
     const lastPoint = data[data.length - 1];
@@ -1779,7 +1943,10 @@ function createChart(element, options = {}) {
         month: "short",
         day: "numeric"
       });
-      drawText(timeLabel, x, fullChartBottom + 8, "center", "top", axis.textColor);
+      const prevFont = ctx.font;
+      ctx.font = `${xAxisFontSize}px ${mergedOptions.fontFamily}`;
+      drawText(timeLabel, x, fullChartBottom + 8, "center", "top", xAxis.textColor);
+      ctx.font = prevFont;
     }
     if (crosshair.visible && crosshairPoint) {
       const cx = clamp(crosshairPoint.x, chartLeft, chartRight);
@@ -2550,6 +2717,27 @@ function createChart(element, options = {}) {
     indicators = indicators.filter((indicator) => indicator.type !== type);
     draw();
   };
+  const listBuiltInIndicators = () => {
+    return BUILTIN_INDICATORS.map((indicator) => ({
+      id: indicator.id,
+      name: indicator.name,
+      pane: indicator.pane ?? "overlay",
+      ...indicator.paneHeightRatio === void 0 ? {} : { paneHeightRatio: indicator.paneHeightRatio }
+    }));
+  };
+  const getIndicators = () => {
+    return indicators.map((indicator) => ({
+      id: indicator.id,
+      type: indicator.type,
+      visible: indicator.visible,
+      pane: indicator.pane,
+      ...indicator.paneHeightRatio === void 0 ? {} : { paneHeightRatio: indicator.paneHeightRatio },
+      zIndex: indicator.zIndex,
+      excludeFromAutoscale: indicator.excludeFromAutoscale,
+      overlayScaleWeight: indicator.overlayScaleWeight,
+      inputs: { ...indicator.inputs }
+    }));
+  };
   const setIndicators = (nextIndicators) => {
     indicators = nextIndicators.map((indicator) => normalizeIndicatorState(indicator));
     draw();
@@ -2579,6 +2767,9 @@ function createChart(element, options = {}) {
         visible: patch.visible ?? indicator.visible,
         pane: patch.pane ?? indicator.pane ?? plugin?.pane ?? "overlay",
         ...patch.paneHeightRatio !== void 0 || indicator.paneHeightRatio !== void 0 ? { paneHeightRatio: patch.paneHeightRatio ?? indicator.paneHeightRatio } : {},
+        zIndex: patch.zIndex === void 0 ? indicator.zIndex : Math.round(Number(patch.zIndex) || 0),
+        excludeFromAutoscale: patch.excludeFromAutoscale ?? indicator.excludeFromAutoscale,
+        overlayScaleWeight: patch.overlayScaleWeight === void 0 ? indicator.overlayScaleWeight : Math.min(1, Math.max(0, Number(patch.overlayScaleWeight) || 0)),
         type: patch.type ?? indicator.type,
         inputs: {
           ...indicator.inputs,
@@ -2628,6 +2819,8 @@ function createChart(element, options = {}) {
     setDoubleClickAction,
     registerIndicator,
     unregisterIndicator,
+    listBuiltInIndicators,
+    getIndicators,
     addIndicator,
     updateIndicator,
     removeIndicator,