hyperprop-charting-library 0.1.130 → 0.1.132

package/dist/index.js

@@ -1468,6 +1468,195 @@ var drawSeparateMultiSeries = (ctx, renderContext, seriesList, options = {}) =>
   }
   return paneInfo;
 };
+var scriptRollingExtreme = (values, length, mode) => {
+  const fallback = mode === "max" ? Number.NEGATIVE_INFINITY : Number.POSITIVE_INFINITY;
+  const filled = new Array(values.length);
+  for (let i = 0; i < values.length; i += 1) {
+    const value = values[i];
+    filled[i] = value != null && Number.isFinite(value) ? value : fallback;
+  }
+  const raw = rollingExtremeSeries(filled, Math.max(1, Math.floor(length)), mode);
+  return raw.map((value) => value != null && Number.isFinite(value) ? value : null);
+};
+var scriptStdevSeries = (values, length) => {
+  const window2 = Math.max(1, Math.floor(length));
+  const result = new Array(values.length).fill(null);
+  let sum = 0;
+  let sumSq = 0;
+  let valid = 0;
+  for (let i = 0; i < values.length; i += 1) {
+    const value = values[i];
+    if (value == null || !Number.isFinite(value)) {
+      sum = 0;
+      sumSq = 0;
+      valid = 0;
+      continue;
+    }
+    sum += value;
+    sumSq += value * value;
+    valid += 1;
+    if (valid > window2) {
+      const old = values[i - window2];
+      sum -= old;
+      sumSq -= old * old;
+      valid -= 1;
+    }
+    if (valid === window2) {
+      const mean = sum / window2;
+      result[i] = Math.sqrt(Math.max(0, sumSq / window2 - mean * mean));
+    }
+  }
+  return result;
+};
+var scriptAtrSeries = (bars, length) => {
+  const tr = new Array(bars.length).fill(null);
+  for (let i = 0; i < bars.length; i += 1) {
+    const bar = bars[i];
+    if (i === 0) {
+      tr[i] = bar.h - bar.l;
+      continue;
+    }
+    const prevClose = bars[i - 1].c;
+    tr[i] = Math.max(bar.h - bar.l, Math.abs(bar.h - prevClose), Math.abs(bar.l - prevClose));
+  }
+  return rmaFromValues(tr, Math.max(1, Math.floor(length)));
+};
+var SCRIPT_HELPERS = Object.freeze({
+  sma: (values, length) => smaFromValues(values, Math.max(1, Math.floor(length))),
+  ema: (values, length) => emaFromValues(values, Math.max(1, Math.floor(length))),
+  rma: (values, length) => rmaFromValues(values, Math.max(1, Math.floor(length))),
+  highest: (values, length) => scriptRollingExtreme(values, length, "max"),
+  lowest: (values, length) => scriptRollingExtreme(values, length, "min"),
+  change: (values, length = 1) => values.map((value, index) => {
+    const prev = values[index - Math.max(1, Math.floor(length))];
+    return value != null && prev != null ? value - prev : null;
+  }),
+  stdev: scriptStdevSeries,
+  atr: scriptAtrSeries
+});
+var SCRIPT_PLOT_PALETTE = ["#2962ff", "#ff6d00", "#26a69a", "#ab47bc", "#ef5350", "#fdd835"];
+var hashScriptSource = (source) => {
+  let hash = 5381;
+  for (let i = 0; i < source.length; i += 1) {
+    hash = (hash << 5) + hash + source.charCodeAt(i) | 0;
+  }
+  return (hash >>> 0).toString(36);
+};
+var compileScriptCompute = (source) => {
+  const factory = new Function(
+    `"use strict";
+${source}
+;if (typeof compute !== "function") { throw new Error("Script must define function compute(bars, inputs, hp)"); }
+return compute;`
+  );
+  return factory();
+};
+var drawScriptError = (ctx, renderContext, name, message) => {
+  ctx.save();
+  ctx.font = "11px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif";
+  ctx.textAlign = "left";
+  ctx.textBaseline = "top";
+  ctx.fillStyle = "#ef5350";
+  const text = `${name}: ${message}`.slice(0, 160);
+  ctx.fillText(text, renderContext.chartLeft + 10, renderContext.chartTop + 24);
+  ctx.restore();
+};
+var compileScriptIndicator = (definition) => {
+  const pane = definition.pane ?? "separate";
+  const defaultInputs = { showValueLine: true };
+  for (const input of definition.inputs ?? []) {
+    defaultInputs[input.key] = input.default;
+  }
+  let compiled = null;
+  let compileError = null;
+  try {
+    compiled = compileScriptCompute(definition.source);
+  } catch (error) {
+    compileError = error instanceof Error ? error.message : String(error);
+  }
+  const sourceKey = hashScriptSource(definition.source);
+  const runCompute = (data, inputs) => {
+    if (!compiled) {
+      return { error: compileError ?? "Script failed to compile" };
+    }
+    try {
+      const result = compiled(data, inputs, SCRIPT_HELPERS);
+      if (!result || !Array.isArray(result.plots)) {
+        return { error: "compute() must return { plots: [...] }" };
+      }
+      for (const plot of result.plots) {
+        if (!plot || !Array.isArray(plot.values)) {
+          return { error: "Every plot needs a `values` array" };
+        }
+      }
+      return { result };
+    } catch (error) {
+      return { error: error instanceof Error ? error.message : String(error) };
+    }
+  };
+  const cachedCompute = (data, inputs) => withCachedComputation(
+    `script|${definition.id}|${sourceKey}|${JSON.stringify(inputs)}`,
+    data,
+    () => runCompute(data, inputs)
+  );
+  const plugin = {
+    id: definition.id,
+    name: definition.name,
+    pane,
+    defaultInputs,
+    draw: (ctx, renderContext, inputs) => {
+      const outcome = cachedCompute(renderContext.data, inputs);
+      if (!outcome.result) {
+        drawScriptError(ctx, renderContext, definition.name, outcome.error ?? "Unknown script error");
+        return pane === "separate" ? { title: `${definition.name} (script error)` } : void 0;
+      }
+      const { plots, range, guides, decimals } = outcome.result;
+      if (pane === "separate") {
+        const seriesList = plots.map((plot, index) => ({
+          values: plot.values,
+          color: plot.color ?? SCRIPT_PLOT_PALETTE[index % SCRIPT_PLOT_PALETTE.length],
+          ...plot.width !== void 0 ? { width: plot.width } : {},
+          ...plot.title ? { label: plot.title } : {},
+          ...plot.style === "histogram" ? { histogram: true } : {},
+          ...plot.negativeColor ? { negativeColor: plot.negativeColor } : {}
+        }));
+        return drawSeparateMultiSeries(ctx, renderContext, seriesList, {
+          title: definition.name,
+          ...range?.min !== void 0 ? { minOverride: range.min } : {},
+          ...range?.max !== void 0 ? { maxOverride: range.max } : {},
+          ...guides && guides.length > 0 ? { guideLines: guides } : {},
+          ...decimals !== void 0 ? { decimals } : {},
+          valueLines: inputs.showValueLine !== false
+        });
+      }
+      for (let index = 0; index < plots.length; index += 1) {
+        const plot = plots[index];
+        if (plot.style === "histogram") continue;
+        drawOverlaySeries(
+          ctx,
+          renderContext,
+          plot.values,
+          plot.color ?? SCRIPT_PLOT_PALETTE[index % SCRIPT_PLOT_PALETTE.length],
+          plot.width ?? 2
+        );
+      }
+      return void 0;
+    },
+    ...pane === "overlay" ? {
+      getAutoscaleRange: (data, startIndex, endIndex, inputs, skipIndex) => {
+        const outcome = cachedCompute(data, inputs);
+        if (!outcome.result) return null;
+        const lineSeries = outcome.result.plots.filter((plot) => plot.style !== "histogram").map((plot) => plot.values);
+        if (lineSeries.length === 0) return null;
+        return rangeOfSeries(lineSeries, startIndex, endIndex, skipIndex);
+      }
+    } : {}
+  };
+  if (definition.paneHeightRatio !== void 0) {
+    plugin.paneHeightRatio = definition.paneHeightRatio;
+  }
+  return plugin;
+};
 var computeMacd = (data, fast, slow, signalLength) => {
   const fastEma = computeEmaSeries(data, fast, "close");
   const slowEma = computeEmaSeries(data, slow, "close");
@@ -2519,7 +2708,7 @@ function createChart(element, options = {}) {
       return;
     }
     const tickerOpts = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
-    const speed = clamp(tickerOpts.smoothingSpeed ?? 4, 1, 60);
+    const speed = clamp(tickerOpts.smoothingSpeed ?? 16, 1, 60);
     const dt = 1 / 60;
     const lerp = 1 - Math.exp(-speed * dt);
     smoothedTickerPrice += priceDiff * lerp;
@@ -2549,6 +2738,29 @@ function createChart(element, options = {}) {
       smoothingRafId = requestAnimationFrame(tickerSmoothingLoop);
     }
   };
+  let countdownTimerId = null;
+  const countdownRepaintNeeded = () => {
+    if (data.length === 0) {
+      return false;
+    }
+    const ticker = mergedOptions.tickerLine ?? DEFAULT_OPTIONS.tickerLine;
+    const labels = mergedOptions.labels ?? DEFAULT_OPTIONS.labels;
+    return Boolean(ticker.showCountdownInLabel) || Boolean(labels.visible && labels.showCountdownToBarClose);
+  };
+  const armCountdownHeartbeat = () => {
+    if (countdownTimerId !== null || !countdownRepaintNeeded()) {
+      return;
+    }
+    const delay = 1e3 - Date.now() % 1e3 + 15;
+    countdownTimerId = setTimeout(() => {
+      countdownTimerId = null;
+      if (!countdownRepaintNeeded()) {
+        return;
+      }
+      scheduleDraw({ updateAutoScale: false });
+      armCountdownHeartbeat();
+    }, delay);
+  };
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
   if (!ctx) {
@@ -3474,6 +3686,7 @@ function createChart(element, options = {}) {
   let pendingDrawUpdateAutoScale = false;
   let pendingDrawOverlayOnly = true;
   const scheduleDraw = (options2 = {}) => {
+    armCountdownHeartbeat();
     const overlayOnly = options2.overlayOnly ?? false;
     pendingDrawOverlayOnly = pendingDrawOverlayOnly && overlayOnly;
     pendingDrawUpdateAutoScale = pendingDrawUpdateAutoScale || !overlayOnly && (options2.updateAutoScale ?? true);
@@ -5058,18 +5271,17 @@ function createChart(element, options = {}) {
               legendTitle,
               ...legendValues.map((value) => value.text ?? (value.value === void 0 ? "" : formatPaneValue(value.value))).filter(Boolean)
             ].filter(Boolean);
-            const legendText = legendParts.join("  ");
-            if (legendParts.length > 0) {
-              drawText(legendText, chartLeft + 10, paneTop + 8, "left", "top", labels.indicatorTextColor);
-            }
             if (hoveredPaneId === indicator.id) {
+              drawText(legendTitle, chartLeft + 10, paneTop + 8, "left", "top", labels.indicatorTextColor);
               drawPaneButtons(
                 indicator.id,
                 indicator.type,
                 true,
-                chartLeft + 10 + Math.ceil(measureTextWidth(legendText)) + 10,
+                chartLeft + 10 + Math.ceil(measureTextWidth(legendTitle)) + 10,
                 paneTop + 8 + legendFontSize / 2
               );
+            } else if (legendParts.length > 0) {
+              drawText(legendParts.join("  "), chartLeft + 10, paneTop + 8, "left", "top", labels.indicatorTextColor);
             }
             for (const label of paneInfo?.valueLabels ?? []) {
               if (!labels.showIndicatorValueLabels) {
@@ -7732,6 +7944,10 @@ function createChart(element, options = {}) {
       cancelAnimationFrame(smoothingRafId);
       smoothingRafId = null;
     }
+    if (countdownTimerId !== null) {
+      clearTimeout(countdownTimerId);
+      countdownTimerId = null;
+    }
     if (drawRafId !== null) {
       cancelAnimationFrame(drawRafId);
       drawRafId = null;
@@ -7753,6 +7969,7 @@ function createChart(element, options = {}) {
     element.innerHTML = "";
   };
   draw();
+  armCountdownHeartbeat();
   return {
     updateOptions,
     setChartType,
@@ -7822,5 +8039,6 @@ function createChart(element, options = {}) {
 export {
   FIB_DEFAULT_PALETTE,
   POSITION_DEFAULT_COLORS,
+  compileScriptIndicator,
   createChart
 };

package/docs/API.md

@@ -543,3 +543,67 @@ Use `getDrawings()` / `setDrawings()` for persistence.
 - `setIndicators(indicators: IndicatorInstanceOptions[]): void`
 - `resize(width?: number, height?: number): void`
 - `destroy(): void`
+
+---
+
+## Script Indicators (user-authored)
+
+`compileScriptIndicator(definition: ScriptIndicatorDefinition): IndicatorPlugin` — compiles a
+user-authored "Hyperprop Script" into a regular indicator plugin. Register the result with
+`chart.registerIndicator(...)` and add it with `chart.addIndicator(definition.id)`. Separate-pane
+scripts automatically get the shared grid, legend, live values, value lines, drag-resize and the
+hover controls (eye / gear / source / delete). Overlay scripts participate in price autoscale.
+
+```ts
+import { createChart, compileScriptIndicator } from "hyperprop-charting-library";
+
+const plugin = compileScriptIndicator({
+  id: "script:my-rsi",
+  name: "My RSI",
+  pane: "separate", // or "overlay"
+  inputs: [
+    { key: "length", label: "Length", type: "number", default: 14 },
+    { key: "color", label: "Color", type: "color", default: "#ab47bc" }
+  ],
+  source: `
+function compute(bars, inputs, hp) {
+  const closes = bars.map(b => b.c);
+  const gains = closes.map((c, i) => i === 0 ? null : Math.max(0, c - closes[i - 1]));
+  const losses = closes.map((c, i) => i === 0 ? null : Math.max(0, closes[i - 1] - c));
+  const avgGain = hp.rma(gains, inputs.length);
+  const avgLoss = hp.rma(losses, inputs.length);
+  const rsi = avgGain.map((g, i) => {
+    const l = avgLoss[i];
+    if (g == null || l == null) return null;
+    return l === 0 ? 100 : 100 - 100 / (1 + g / l);
+  });
+  return {
+    plots: [{ title: "RSI", values: rsi, color: inputs.color }],
+    range: { min: 0, max: 100 },
+    guides: [30, 70]
+  };
+}`
+});
+
+chart.registerIndicator(plugin);
+chart.addIndicator("script:my-rsi");
+```
+
+Script contract:
+
+- The source must define `function compute(bars, inputs, hp)`.
+- `bars`: `Array<{ time: Date, o, h, l, c, v? }>` — the full series.
+- `inputs`: resolved input values (defaults merged with per-instance overrides). `showValueLine`
+  is injected automatically and honored by separate panes.
+- `hp`: TA helpers, all `(values: Array<number|null>, length) => Array<number|null>` unless noted:
+  `sma`, `ema`, `rma`, `highest`, `lowest`, `stdev`, `change(values, length = 1)`,
+  `atr(bars, length)`.
+- Return `{ plots, range?, guides?, decimals? }`:
+  - `plots`: `Array<{ title?, values, color?, width?, style?: "line" | "histogram", negativeColor? }>`
+  - `range`: `{ min?, max? }` fixes the pane scale (e.g. `0..100` for oscillators).
+  - `guides`: dashed horizontal guide levels (e.g. `[30, 70]`).
+  - `decimals`: axis/legend decimal places.
+
+Errors never break the chart: compile or runtime errors render as an inline red message in the
+pane. Scripts are plain JavaScript executed in the page context — treat them like any other code
+you'd paste into your app (only run scripts you trust).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperprop-charting-library",
-  "version": "0.1.130",
+  "version": "0.1.132",
   "description": "Lightweight TypeScript charting core",
   "type": "module",
   "main": "./dist/hyperprop-charting-library.cjs",