acttrader-charts 1.0.0

package/dist/chunk-X6OSI4P2.js

@@ -0,0 +1,2523 @@
+// src/indicators/sourceField.ts
+function getSource(bar, source) {
+  return bar[source];
+}
+
+// src/indicators/SMA.ts
+var SMA = class {
+  constructor(period, color = "#F5A623", name = "MA", source = "close") {
+    this.period = period;
+    this.source = source;
+    this.name = name;
+    this.color = color;
+  }
+  compute(data) {
+    return data.map((_, i) => {
+      if (i < this.period - 1) return { index: i, value: null };
+      let sum = 0;
+      for (let j = i - this.period + 1; j <= i; j++) sum += getSource(data[j], this.source);
+      return { index: i, value: sum / this.period };
+    });
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const priceRange = getPriceRangeFromCtx(ctx);
+    if (!priceRange) return;
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    for (const r of results) {
+      if (r.value === null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, priceRange, chartHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+function getPriceRangeFromCtx(ctx) {
+  const canvas = ctx.canvas;
+  return canvas._priceRange ?? null;
+}
+
+// src/indicators/EMA.ts
+var EMA = class {
+  constructor(period, color = "#9B59B6", name = "EMA", source = "close") {
+    this.period = period;
+    this.source = source;
+    this.name = name;
+    this.color = color;
+  }
+  compute(data) {
+    const k = 2 / (this.period + 1);
+    const results = [];
+    let ema = null;
+    for (let i = 0; i < data.length; i++) {
+      if (i < this.period - 1) {
+        results.push({ index: i, value: null });
+        continue;
+      }
+      if (ema === null) {
+        let sum = 0;
+        for (let j = 0; j < this.period; j++) sum += getSource(data[i - j], this.source);
+        ema = sum / this.period;
+      } else {
+        ema = getSource(data[i], this.source) * k + ema * (1 - k);
+      }
+      results.push({ index: i, value: ema });
+    }
+    return results;
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    for (const r of results) {
+      if (r.value === null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, priceRange, chartHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/WMA.ts
+var WMA = class {
+  constructor(period = 20, color = "#e91e63", name = "WMA", source = "close") {
+    this.period = period;
+    this.source = source;
+    this.name = name;
+    this.color = color;
+  }
+  compute(data) {
+    const denominator = this.period * (this.period + 1) / 2;
+    const results = [];
+    for (let i = 0; i < data.length; i++) {
+      if (i < this.period - 1) {
+        results.push({ index: i, value: null });
+        continue;
+      }
+      let wma = 0;
+      for (let j = 0; j < this.period; j++) {
+        wma += getSource(data[i - (this.period - 1 - j)], this.source) * (j + 1);
+      }
+      results.push({ index: i, value: wma / denominator });
+    }
+    return results;
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    const chartWidth = canvas._chartWidth ?? ctx.canvas.width;
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value === null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, priceRange, chartHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/HMA.ts
+function computeWMA(data, period) {
+  const denominator = period * (period + 1) / 2;
+  const results = [];
+  for (let i = 0; i < data.length; i++) {
+    if (i < period - 1) {
+      results.push(null);
+      continue;
+    }
+    let wma = 0;
+    for (let j = 0; j < period; j++) {
+      wma += data[i - (period - 1 - j)] * (j + 1);
+    }
+    results.push(wma / denominator);
+  }
+  return results;
+}
+var HMA = class {
+  constructor(period = 20, color = "#00bcd4", name = "HMA", source = "close") {
+    this.period = period;
+    this.source = source;
+    this.name = name;
+    this.color = color;
+  }
+  compute(data) {
+    const closes = data.map((b) => getSource(b, this.source));
+    const halfPeriod = Math.floor(this.period / 2);
+    const sqrtPeriod = Math.floor(Math.sqrt(this.period));
+    const wmaHalf = computeWMA(closes, halfPeriod);
+    const wmaFull = computeWMA(closes, this.period);
+    const diff = wmaHalf.map((half, i) => {
+      const full = wmaFull[i];
+      if (half === null || full === null) return null;
+      return 2 * half - full;
+    });
+    const diffForWma = diff.map((v) => v === null ? 0 : v);
+    const hmaRaw = computeWMA(diffForWma, sqrtPeriod);
+    return data.map((_, i) => {
+      const windowStart = i - sqrtPeriod + 1;
+      if (windowStart < 0) return { index: i, value: null };
+      const allDiffValid = diff[windowStart] !== null && diff[i] !== null;
+      if (!allDiffValid || hmaRaw[i] === null) return { index: i, value: null };
+      return { index: i, value: hmaRaw[i] };
+    });
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    const chartWidth = canvas._chartWidth ?? ctx.canvas.width;
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value === null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, priceRange, chartHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/MARibbon.ts
+var RIBBON_PERIODS = [5, 10, 20, 50, 100];
+var RIBBON_COLORS = ["#ff6b6b", "#ffd93d", "#6bcb77", "#4d96ff", "#c77dff"];
+var MARibbon = class {
+  constructor(color = "#ffcc80", source = "close") {
+    this.source = source;
+    this.name = "MARibbon";
+    this.color = color;
+  }
+  compute(data) {
+    const sma = (endIndex, period) => {
+      if (endIndex < period - 1) return null;
+      let sum = 0;
+      for (let j = endIndex - period + 1; j <= endIndex; j++) sum += getSource(data[j], this.source);
+      return sum / period;
+    };
+    return data.map((_, i) => ({
+      index: i,
+      value: sma(i, 5),
+      // SMA5
+      upper: sma(i, 10),
+      // SMA10
+      lower: sma(i, 20),
+      // SMA20
+      signal: sma(i, 50),
+      // SMA50
+      histogram: sma(i, 100)
+      // SMA100
+    }));
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    const chartWidth = canvas._chartWidth ?? ctx.canvas.width;
+    ctx.lineWidth = 1;
+    ctx.lineJoin = "round";
+    const keys = ["value", "upper", "lower", "signal", "histogram"];
+    for (let li = 0; li < RIBBON_PERIODS.length; li++) {
+      const key = keys[li];
+      const lineColor = RIBBON_COLORS[li];
+      ctx.beginPath();
+      ctx.strokeStyle = lineColor;
+      let started = false;
+      for (const r of results) {
+        const val = r[key];
+        if (val == null) {
+          started = false;
+          continue;
+        }
+        const x = scale.xToPixel(r.index, viewport, chartWidth);
+        const y = scale.yToPixel(val, priceRange, chartHeight);
+        started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+      }
+      ctx.stroke();
+    }
+  }
+};
+
+// src/indicators/BollingerBands.ts
+var BollingerBands = class {
+  constructor(period = 20, stdDevMultiplier = 2, color = "#3B82F6", name = "BB", source = "close") {
+    this.period = period;
+    this.stdDevMultiplier = stdDevMultiplier;
+    this.source = source;
+    this.name = name;
+    this.color = color;
+  }
+  compute(data) {
+    return data.map((_, i) => {
+      if (i < this.period - 1) return { index: i, value: null, upper: null, lower: null };
+      const slice = data.slice(i - this.period + 1, i + 1).map((b) => getSource(b, this.source));
+      const mean = slice.reduce((s, v) => s + v, 0) / this.period;
+      const variance = slice.reduce((s, v) => s + (v - mean) ** 2, 0) / this.period;
+      const std = Math.sqrt(variance);
+      return {
+        index: i,
+        value: mean,
+        upper: mean + std * this.stdDevMultiplier,
+        lower: mean - std * this.stdDevMultiplier
+      };
+    });
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    ctx.lineWidth = 1;
+    ctx.lineJoin = "round";
+    const drawLine = (getValue, dash = false) => {
+      if (dash) ctx.setLineDash([4, 3]);
+      ctx.beginPath();
+      let started = false;
+      for (const r of results) {
+        const val = getValue(r);
+        if (val == null) {
+          started = false;
+          continue;
+        }
+        const x = scale.xToPixel(r.index, viewport, chartWidth);
+        const y = scale.yToPixel(val, priceRange, chartHeight);
+        started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+      }
+      ctx.stroke();
+      if (dash) ctx.setLineDash([]);
+    };
+    ctx.strokeStyle = this.color;
+    drawLine((r) => r.value);
+    ctx.strokeStyle = `${this.color}99`;
+    drawLine((r) => r.upper, true);
+    drawLine((r) => r.lower, true);
+    const upperPoints = [];
+    const lowerPoints = [];
+    for (const r of results) {
+      if (r.upper == null || r.lower == null) continue;
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      upperPoints.push([x, scale.yToPixel(r.upper, priceRange, chartHeight)]);
+      lowerPoints.push([x, scale.yToPixel(r.lower, priceRange, chartHeight)]);
+    }
+    if (upperPoints.length < 2) return;
+    ctx.beginPath();
+    upperPoints.forEach(([x, y], i) => i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y));
+    lowerPoints.reverse().forEach(([x, y]) => ctx.lineTo(x, y));
+    ctx.closePath();
+    ctx.fillStyle = `${this.color}12`;
+    ctx.fill();
+  }
+};
+
+// src/indicators/KeltnerChannels.ts
+var KeltnerChannels = class {
+  constructor(period = 20, mult = 2, atrPeriod = 10, color = "#4caf50", name = "KC") {
+    this.period = period;
+    this.mult = mult;
+    this.atrPeriod = atrPeriod;
+    this.name = name;
+    this.color = color;
+  }
+  compute(data) {
+    const results = [];
+    const emaK = 2 / (this.period + 1);
+    let ema = null;
+    let atr = null;
+    for (let i = 0; i < data.length; i++) {
+      const bar = data[i];
+      if (i < this.period - 1) {
+        results.push({ index: i, value: null, upper: null, lower: null });
+        continue;
+      }
+      if (ema === null) {
+        let sum = 0;
+        for (let j = 0; j < this.period; j++) sum += data[i - j].close;
+        ema = sum / this.period;
+      } else {
+        ema = bar.close * emaK + ema * (1 - emaK);
+      }
+      const tr = i === 0 ? bar.high - bar.low : Math.max(
+        bar.high - bar.low,
+        Math.abs(bar.high - data[i - 1].close),
+        Math.abs(bar.low - data[i - 1].close)
+      );
+      if (atr === null) {
+        if (i < this.atrPeriod) {
+          results.pop();
+          results.push({ index: i, value: null, upper: null, lower: null });
+          if (i === this.atrPeriod - 1) {
+            let trSum = 0;
+            for (let j = 0; j < this.atrPeriod; j++) {
+              const b = data[i - j];
+              const prev = data[i - j - 1];
+              const trj = j === i ? b.high - b.low : Math.max(
+                b.high - b.low,
+                Math.abs(b.high - prev.close),
+                Math.abs(b.low - prev.close)
+              );
+              trSum += trj;
+            }
+            atr = trSum / this.atrPeriod;
+          }
+          continue;
+        }
+      } else {
+        atr = (atr * (this.atrPeriod - 1) + tr) / this.atrPeriod;
+      }
+      if (atr === null) {
+        results.push({ index: i, value: null, upper: null, lower: null });
+        continue;
+      }
+      const upper = ema + this.mult * atr;
+      const lower = ema - this.mult * atr;
+      results.push({ index: i, value: ema, upper, lower });
+    }
+    return results;
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    const chartWidth = canvas._chartWidth ?? ctx.canvas.width;
+    ctx.lineWidth = 1;
+    ctx.lineJoin = "round";
+    const drawLine = (getValue, dash = false) => {
+      if (dash) ctx.setLineDash([4, 3]);
+      ctx.beginPath();
+      let started = false;
+      for (const r of results) {
+        const val = getValue(r);
+        if (val == null) {
+          started = false;
+          continue;
+        }
+        const x = scale.xToPixel(r.index, viewport, chartWidth);
+        const y = scale.yToPixel(val, priceRange, chartHeight);
+        started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+      }
+      ctx.stroke();
+      if (dash) ctx.setLineDash([]);
+    };
+    ctx.strokeStyle = this.color;
+    drawLine((r) => r.value);
+    ctx.strokeStyle = `${this.color}99`;
+    drawLine((r) => r.upper, true);
+    drawLine((r) => r.lower, true);
+    const upperPoints = [];
+    const lowerPoints = [];
+    for (const r of results) {
+      if (r.upper == null || r.lower == null) continue;
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      upperPoints.push([x, scale.yToPixel(r.upper, priceRange, chartHeight)]);
+      lowerPoints.push([x, scale.yToPixel(r.lower, priceRange, chartHeight)]);
+    }
+    if (upperPoints.length < 2) return;
+    ctx.beginPath();
+    upperPoints.forEach(([x, y], i) => i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y));
+    lowerPoints.reverse().forEach(([x, y]) => ctx.lineTo(x, y));
+    ctx.closePath();
+    ctx.fillStyle = `${this.color}12`;
+    ctx.fill();
+  }
+};
+
+// src/indicators/DonchianChannels.ts
+var DonchianChannels = class {
+  constructor(period = 20, color = "#26c6da") {
+    this.period = period;
+    this.name = "DC";
+    this.color = color;
+  }
+  compute(data) {
+    return data.map((_, i) => {
+      if (i < this.period - 1) return { index: i, value: null, upper: null, lower: null };
+      let highest = -Infinity;
+      let lowest = Infinity;
+      for (let j = i - this.period + 1; j <= i; j++) {
+        if (data[j].high > highest) highest = data[j].high;
+        if (data[j].low < lowest) lowest = data[j].low;
+      }
+      const middle = (highest + lowest) / 2;
+      return { index: i, value: middle, upper: highest, lower: lowest };
+    });
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    const chartWidth = canvas._chartWidth ?? ctx.canvas.width;
+    ctx.lineWidth = 1;
+    ctx.lineJoin = "round";
+    const drawLine = (getValue, dash = false) => {
+      if (dash) ctx.setLineDash([4, 3]);
+      ctx.beginPath();
+      let started = false;
+      for (const r of results) {
+        const val = getValue(r);
+        if (val == null) {
+          started = false;
+          continue;
+        }
+        const x = scale.xToPixel(r.index, viewport, chartWidth);
+        const y = scale.yToPixel(val, priceRange, chartHeight);
+        started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+      }
+      ctx.stroke();
+      if (dash) ctx.setLineDash([]);
+    };
+    ctx.strokeStyle = this.color;
+    drawLine((r) => r.value, true);
+    ctx.strokeStyle = `${this.color}99`;
+    drawLine((r) => r.upper);
+    drawLine((r) => r.lower);
+    const upperPoints = [];
+    const lowerPoints = [];
+    for (const r of results) {
+      if (r.upper == null || r.lower == null) continue;
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      upperPoints.push([x, scale.yToPixel(r.upper, priceRange, chartHeight)]);
+      lowerPoints.push([x, scale.yToPixel(r.lower, priceRange, chartHeight)]);
+    }
+    if (upperPoints.length < 2) return;
+    ctx.beginPath();
+    upperPoints.forEach(([x, y], i) => i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y));
+    lowerPoints.slice().reverse().forEach(([x, y]) => ctx.lineTo(x, y));
+    ctx.closePath();
+    ctx.fillStyle = `${this.color}14`;
+    ctx.fill();
+  }
+};
+
+// src/indicators/ATR.ts
+var ATR = class {
+  constructor(period = 14, color = "#ff5722", name = "ATR") {
+    this.period = period;
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.name = name;
+    this.color = color;
+  }
+  compute(data) {
+    const results = [];
+    if (data.length === 0) return results;
+    const tr = [];
+    for (let i = 0; i < data.length; i++) {
+      if (i === 0) {
+        tr.push(data[i].high - data[i].low);
+      } else {
+        const prevClose = data[i - 1].close;
+        tr.push(Math.max(
+          data[i].high - data[i].low,
+          Math.abs(data[i].high - prevClose),
+          Math.abs(data[i].low - prevClose)
+        ));
+      }
+    }
+    if (data.length < this.period) {
+      return data.map((_, i) => ({ index: i, value: null }));
+    }
+    let atr = 0;
+    for (let i = 0; i < this.period; i++) {
+      atr += tr[i];
+    }
+    atr /= this.period;
+    for (let i = 0; i < this.period - 1; i++) {
+      results.push({ index: i, value: null });
+    }
+    results.push({ index: this.period - 1, value: atr });
+    for (let i = this.period; i < data.length; i++) {
+      atr = (atr * (this.period - 1) + tr[i]) / this.period;
+      results.push({ index: i, value: atr });
+    }
+    return results;
+  }
+  getValueRange(results) {
+    let maxVal = 1e-4;
+    for (const r of results) {
+      if (r.value != null) maxVal = Math.max(maxVal, r.value);
+    }
+    return { min: 0, max: maxVal * 1.2 };
+  }
+  render(ctx, results, scale, viewport, paneHeight, rangeOverride) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    let maxVal = 1e-4;
+    for (const r of results) {
+      if (r.value != null) maxVal = Math.max(maxVal, r.value);
+    }
+    const range = rangeOverride ?? { min: 0, max: maxVal * 1.2 };
+    const points = [];
+    for (const r of results) {
+      if (r.value == null) continue;
+      points.push({
+        x: scale.xToPixel(r.index, viewport, chartWidth),
+        y: scale.yToPixel(r.value, range, paneHeight)
+      });
+    }
+    if (points.length === 0) return;
+    const baseY = scale.yToPixel(0, range, paneHeight);
+    ctx.beginPath();
+    ctx.moveTo(points[0].x, baseY);
+    for (const p of points) ctx.lineTo(p.x, p.y);
+    ctx.lineTo(points[points.length - 1].x, baseY);
+    ctx.closePath();
+    ctx.fillStyle = this.color + "33";
+    ctx.fill();
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value == null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/RSI.ts
+var RSI = class {
+  constructor(period = 14, color = "#e8b84b", name = "RSI", source = "close") {
+    this.period = period;
+    this.source = source;
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.name = name;
+    this.color = color;
+  }
+  compute(data) {
+    const results = [];
+    if (data.length < this.period + 1) {
+      return data.map((_, i) => ({ index: i, value: null }));
+    }
+    let avgGain = 0;
+    let avgLoss = 0;
+    for (let i = 1; i <= this.period; i++) {
+      const delta = getSource(data[i], this.source) - getSource(data[i - 1], this.source);
+      if (delta > 0) avgGain += delta;
+      else avgLoss += Math.abs(delta);
+    }
+    avgGain /= this.period;
+    avgLoss /= this.period;
+    for (let i = 0; i < this.period; i++) {
+      results.push({ index: i, value: null });
+    }
+    const rs0 = avgLoss === 0 ? Infinity : avgGain / avgLoss;
+    results.push({ index: this.period, value: avgLoss === 0 ? 100 : 100 - 100 / (1 + rs0) });
+    for (let i = this.period + 1; i < data.length; i++) {
+      const delta = getSource(data[i], this.source) - getSource(data[i - 1], this.source);
+      const gain = delta > 0 ? delta : 0;
+      const loss = delta < 0 ? Math.abs(delta) : 0;
+      avgGain = (avgGain * (this.period - 1) + gain) / this.period;
+      avgLoss = (avgLoss * (this.period - 1) + loss) / this.period;
+      const rs = avgLoss === 0 ? Infinity : avgGain / avgLoss;
+      results.push({ index: i, value: avgLoss === 0 ? 100 : 100 - 100 / (1 + rs) });
+    }
+    return results;
+  }
+  getValueRange(_results) {
+    return { min: 0, max: 100 };
+  }
+  render(ctx, results, scale, viewport, paneHeight, rangeOverride) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    const range = rangeOverride ?? { min: 0, max: 100 };
+    const y70 = scale.yToPixel(70, range, paneHeight);
+    const y30 = scale.yToPixel(30, range, paneHeight);
+    ctx.fillStyle = "rgba(239,83,80,0.06)";
+    ctx.fillRect(0, 0, chartWidth, y70);
+    ctx.fillStyle = "rgba(38,166,154,0.06)";
+    ctx.fillRect(0, y30, chartWidth, paneHeight - y30);
+    ctx.save();
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = "rgba(150,150,150,0.35)";
+    ctx.lineWidth = 1;
+    for (const level of [70, 50, 30]) {
+      const y = scale.yToPixel(level, range, paneHeight);
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(chartWidth, y);
+      ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    ctx.restore();
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value === null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/Stochastic.ts
+var Stochastic = class {
+  constructor(kPeriod = 14, dPeriod = 3, color = "#e040fb") {
+    this.kPeriod = kPeriod;
+    this.dPeriod = dPeriod;
+    this.name = "Stoch";
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.color = color;
+  }
+  compute(data) {
+    const results = [];
+    const kValues = [];
+    for (let i = 0; i < data.length; i++) {
+      if (i < this.kPeriod - 1) {
+        kValues.push(null);
+        results.push({ index: i, value: null, upper: null });
+        continue;
+      }
+      let lowestLow = Infinity;
+      let highestHigh = -Infinity;
+      for (let j = i - this.kPeriod + 1; j <= i; j++) {
+        if (data[j].low < lowestLow) lowestLow = data[j].low;
+        if (data[j].high > highestHigh) highestHigh = data[j].high;
+      }
+      const denom = highestHigh - lowestLow;
+      const k = denom === 0 ? 50 : (data[i].close - lowestLow) / denom * 100;
+      kValues.push(k);
+      results.push({ index: i, value: k, upper: null });
+    }
+    for (let i = 0; i < data.length; i++) {
+      const kVal = kValues[i];
+      if (kVal === null) continue;
+      let count = 0;
+      let sum = 0;
+      for (let j = i; j >= 0 && count < this.dPeriod; j--) {
+        if (kValues[j] === null) break;
+        sum += kValues[j];
+        count++;
+      }
+      if (count === this.dPeriod) {
+        results[i].upper = sum / this.dPeriod;
+      }
+    }
+    return results;
+  }
+  getValueRange(_results) {
+    return { min: 0, max: 100 };
+  }
+  render(ctx, results, scale, viewport, paneHeight, rangeOverride) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    const range = rangeOverride ?? { min: 0, max: 100 };
+    const y80 = scale.yToPixel(80, range, paneHeight);
+    const y20 = scale.yToPixel(20, range, paneHeight);
+    ctx.fillStyle = "rgba(239,83,80,0.06)";
+    ctx.fillRect(0, 0, chartWidth, y80);
+    ctx.fillStyle = "rgba(38,166,154,0.06)";
+    ctx.fillRect(0, y20, chartWidth, paneHeight - y20);
+    ctx.save();
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = "rgba(150,150,150,0.35)";
+    ctx.lineWidth = 1;
+    for (const level of [80, 50, 20]) {
+      const y = scale.yToPixel(level, range, paneHeight);
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(chartWidth, y);
+      ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    ctx.restore();
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value === null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.strokeStyle = "#ff9800";
+    ctx.lineWidth = 1;
+    ctx.lineJoin = "round";
+    started = false;
+    for (const r of results) {
+      if (r.upper == null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.upper, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/StochRSI.ts
+function computeSMA(values, period) {
+  const result = [];
+  for (let i = 0; i < values.length; i++) {
+    if (i < period - 1) {
+      result.push(null);
+      continue;
+    }
+    let sum = 0;
+    let valid = true;
+    for (let j = i - period + 1; j <= i; j++) {
+      if (values[j] === null) {
+        valid = false;
+        break;
+      }
+      sum += values[j];
+    }
+    result.push(valid ? sum / period : null);
+  }
+  return result;
+}
+var StochRSI = class {
+  constructor(rsiPeriod = 14, stochPeriod = 14, kPeriod = 3, dPeriod = 3, color = "#00e5ff") {
+    this.rsiPeriod = rsiPeriod;
+    this.stochPeriod = stochPeriod;
+    this.kPeriod = kPeriod;
+    this.dPeriod = dPeriod;
+    this.name = "StochRSI";
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.color = color;
+  }
+  compute(data) {
+    const rsiValues = [];
+    if (data.length < this.rsiPeriod + 1) {
+      return data.map((_, i) => ({ index: i, value: null, upper: null }));
+    }
+    let avgGain = 0;
+    let avgLoss = 0;
+    for (let i = 1; i <= this.rsiPeriod; i++) {
+      const delta = data[i].close - data[i - 1].close;
+      if (delta > 0) avgGain += delta;
+      else avgLoss += Math.abs(delta);
+    }
+    avgGain /= this.rsiPeriod;
+    avgLoss /= this.rsiPeriod;
+    for (let i = 0; i < this.rsiPeriod; i++) rsiValues.push(null);
+    const rs0 = avgLoss === 0 ? Infinity : avgGain / avgLoss;
+    rsiValues.push(avgLoss === 0 ? 100 : 100 - 100 / (1 + rs0));
+    for (let i = this.rsiPeriod + 1; i < data.length; i++) {
+      const delta = data[i].close - data[i - 1].close;
+      const gain = delta > 0 ? delta : 0;
+      const loss = delta < 0 ? Math.abs(delta) : 0;
+      avgGain = (avgGain * (this.rsiPeriod - 1) + gain) / this.rsiPeriod;
+      avgLoss = (avgLoss * (this.rsiPeriod - 1) + loss) / this.rsiPeriod;
+      const rs = avgLoss === 0 ? Infinity : avgGain / avgLoss;
+      rsiValues.push(avgLoss === 0 ? 100 : 100 - 100 / (1 + rs));
+    }
+    const stochRsiValues = [];
+    for (let i = 0; i < data.length; i++) {
+      if (rsiValues[i] === null) {
+        stochRsiValues.push(null);
+        continue;
+      }
+      if (i < this.rsiPeriod + this.stochPeriod - 1) {
+        stochRsiValues.push(null);
+        continue;
+      }
+      let minRsi = Infinity;
+      let maxRsi = -Infinity;
+      let valid = true;
+      for (let j = i - this.stochPeriod + 1; j <= i; j++) {
+        if (rsiValues[j] === null) {
+          valid = false;
+          break;
+        }
+        const v = rsiValues[j];
+        if (v < minRsi) minRsi = v;
+        if (v > maxRsi) maxRsi = v;
+      }
+      if (!valid) {
+        stochRsiValues.push(null);
+        continue;
+      }
+      const denom = maxRsi - minRsi;
+      const stoch = denom === 0 ? 50 : (rsiValues[i] - minRsi) / denom * 100;
+      stochRsiValues.push(stoch);
+    }
+    const kLine = computeSMA(stochRsiValues, this.kPeriod);
+    const dLine = computeSMA(kLine, this.dPeriod);
+    return data.map((_, i) => ({
+      index: i,
+      value: kLine[i] ?? null,
+      upper: dLine[i] ?? null
+    }));
+  }
+  getValueRange(_results) {
+    return { min: 0, max: 100 };
+  }
+  render(ctx, results, scale, viewport, paneHeight, rangeOverride) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    const range = rangeOverride ?? { min: 0, max: 100 };
+    const y80 = scale.yToPixel(80, range, paneHeight);
+    const y20 = scale.yToPixel(20, range, paneHeight);
+    ctx.fillStyle = "rgba(239,83,80,0.06)";
+    ctx.fillRect(0, 0, chartWidth, y80);
+    ctx.fillStyle = "rgba(38,166,154,0.06)";
+    ctx.fillRect(0, y20, chartWidth, paneHeight - y20);
+    ctx.save();
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = "rgba(150,150,150,0.35)";
+    ctx.lineWidth = 1;
+    for (const level of [80, 50, 20]) {
+      const y = scale.yToPixel(level, range, paneHeight);
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(chartWidth, y);
+      ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    ctx.restore();
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value === null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.strokeStyle = "#ff9800";
+    ctx.lineWidth = 1;
+    ctx.lineJoin = "round";
+    started = false;
+    for (const r of results) {
+      if (r.upper == null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.upper, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/MACD.ts
+function computeEMA(data, period) {
+  const k = 2 / (period + 1);
+  const results = [];
+  let ema = null;
+  for (let i = 0; i < data.length; i++) {
+    if (i < period - 1) {
+      results.push(null);
+      continue;
+    }
+    if (ema === null) {
+      let sum = 0;
+      for (let j = 0; j < period; j++) sum += data[i - j];
+      ema = sum / period;
+    } else {
+      ema = data[i] * k + ema * (1 - k);
+    }
+    results.push(ema);
+  }
+  return results;
+}
+var MACD = class {
+  constructor(fast = 12, slow = 26, signal = 9, color = "#2196f3", name = "MACD", source = "close") {
+    this.fast = fast;
+    this.slow = slow;
+    this.signal = signal;
+    this.source = source;
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.name = name;
+    this.color = color;
+  }
+  compute(data) {
+    const closes = data.map((b) => getSource(b, this.source));
+    const fastEMA = computeEMA(closes, this.fast);
+    const slowEMA = computeEMA(closes, this.slow);
+    const macdLine = closes.map((_, i) => {
+      if (fastEMA[i] === null || slowEMA[i] === null) return null;
+      return fastEMA[i] - slowEMA[i];
+    });
+    const macdValues = macdLine.map((v) => v ?? 0);
+    const rawSignal = computeEMA(macdValues, this.signal);
+    return data.map((_, i) => {
+      const macd = macdLine[i];
+      if (macd === null) return { index: i, value: null, upper: null, lower: null, histogram: null };
+      const signalStart = this.slow - 1 + this.signal - 1;
+      const sig = i >= signalStart ? rawSignal[i] : null;
+      const hist = macd !== null && sig !== null ? macd - sig : null;
+      return {
+        index: i,
+        value: macd,
+        // MACD line
+        upper: sig,
+        // Signal line
+        lower: hist
+        // Histogram
+      };
+    });
+  }
+  getValueRange(results) {
+    let maxAbs = 1e-4;
+    for (const r of results) {
+      if (r.value != null) maxAbs = Math.max(maxAbs, Math.abs(r.value));
+      if (r.upper != null) maxAbs = Math.max(maxAbs, Math.abs(r.upper));
+      if (r.lower != null) maxAbs = Math.max(maxAbs, Math.abs(r.lower));
+    }
+    return { min: -maxAbs * 1.3, max: maxAbs * 1.3 };
+  }
+  render(ctx, results, scale, viewport, paneHeight, rangeOverride) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    let maxAbs = 1e-4;
+    for (const r of results) {
+      if (r.value != null) maxAbs = Math.max(maxAbs, Math.abs(r.value));
+      if (r.upper != null) maxAbs = Math.max(maxAbs, Math.abs(r.upper));
+      if (r.lower != null) maxAbs = Math.max(maxAbs, Math.abs(r.lower));
+    }
+    const range = rangeOverride ?? { min: -maxAbs * 1.3, max: maxAbs * 1.3 };
+    const zeroY = scale.yToPixel(0, range, paneHeight);
+    ctx.strokeStyle = "rgba(150,150,150,0.3)";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(0, zeroY);
+    ctx.lineTo(chartWidth, zeroY);
+    ctx.stroke();
+    const bodyW = Math.max(scale.candleBodyWidth(viewport, chartWidth), 1);
+    for (const r of results) {
+      if (r.lower == null) continue;
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const barY = scale.yToPixel(r.lower, range, paneHeight);
+      const h = Math.abs(barY - zeroY);
+      const top = Math.min(barY, zeroY);
+      ctx.fillStyle = r.lower >= 0 ? "rgba(38,166,154,0.55)" : "rgba(239,83,80,0.55)";
+      ctx.fillRect(x - bodyW / 2, top, bodyW, h);
+    }
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value == null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.strokeStyle = "#ff6b35";
+    ctx.lineWidth = 1;
+    ctx.lineJoin = "round";
+    started = false;
+    for (const r of results) {
+      if (r.upper == null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.upper, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/CCI.ts
+var CCI = class {
+  constructor(period = 20, color = "#4db6ac") {
+    this.period = period;
+    this.name = "CCI";
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.color = color;
+  }
+  compute(data) {
+    return data.map((_, i) => {
+      if (i < this.period - 1) return { index: i, value: null };
+      const slice = data.slice(i - this.period + 1, i + 1);
+      const tpSlice = slice.map((b) => (b.high + b.low + b.close) / 3);
+      const tp = tpSlice[tpSlice.length - 1];
+      const sma = tpSlice.reduce((s, v) => s + v, 0) / this.period;
+      const meanDev = tpSlice.reduce((s, v) => s + Math.abs(v - sma), 0) / this.period;
+      if (meanDev === 0) return { index: i, value: 0 };
+      return { index: i, value: (tp - sma) / (0.015 * meanDev) };
+    });
+  }
+  getValueRange(results) {
+    let maxAbs = 1e-4;
+    for (const r of results) {
+      if (r.value != null) maxAbs = Math.max(maxAbs, Math.abs(r.value));
+    }
+    return { min: -maxAbs * 1.3, max: maxAbs * 1.3 };
+  }
+  render(ctx, results, scale, viewport, paneHeight, rangeOverride) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    let maxAbs = 1e-4;
+    for (const r of results) {
+      if (r.value != null) maxAbs = Math.max(maxAbs, Math.abs(r.value));
+    }
+    const range = rangeOverride ?? { min: -maxAbs * 1.3, max: maxAbs * 1.3 };
+    const y100 = scale.yToPixel(100, range, paneHeight);
+    const yNeg100 = scale.yToPixel(-100, range, paneHeight);
+    ctx.fillStyle = "rgba(239,83,80,0.10)";
+    ctx.fillRect(0, 0, chartWidth, y100);
+    ctx.fillStyle = "rgba(38,166,154,0.10)";
+    ctx.fillRect(0, yNeg100, chartWidth, paneHeight - yNeg100);
+    ctx.save();
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = "rgba(150,150,150,0.35)";
+    ctx.lineWidth = 1;
+    for (const level of [100, 0, -100]) {
+      const y = scale.yToPixel(level, range, paneHeight);
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(chartWidth, y);
+      ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    ctx.restore();
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value === null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/WilliamsR.ts
+var WilliamsR = class {
+  constructor(period = 14, color = "#ff7043") {
+    this.period = period;
+    this.name = "%R";
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.color = color;
+  }
+  compute(data) {
+    return data.map((_, i) => {
+      if (i < this.period - 1) return { index: i, value: null };
+      let highestHigh = -Infinity;
+      let lowestLow = Infinity;
+      for (let j = i - this.period + 1; j <= i; j++) {
+        if (data[j].high > highestHigh) highestHigh = data[j].high;
+        if (data[j].low < lowestLow) lowestLow = data[j].low;
+      }
+      const denom = highestHigh - lowestLow;
+      const r = denom === 0 ? -50 : (highestHigh - data[i].close) / denom * -100;
+      return { index: i, value: r };
+    });
+  }
+  getValueRange(_results) {
+    return { min: -100, max: 0 };
+  }
+  render(ctx, results, scale, viewport, paneHeight, rangeOverride) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    const range = rangeOverride ?? { min: -100, max: 0 };
+    const yNeg20 = scale.yToPixel(-20, range, paneHeight);
+    const yNeg80 = scale.yToPixel(-80, range, paneHeight);
+    ctx.fillStyle = "rgba(239,83,80,0.06)";
+    ctx.fillRect(0, 0, chartWidth, yNeg20);
+    ctx.fillStyle = "rgba(38,166,154,0.06)";
+    ctx.fillRect(0, yNeg80, chartWidth, paneHeight - yNeg80);
+    ctx.save();
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = "rgba(150,150,150,0.35)";
+    ctx.lineWidth = 1;
+    for (const level of [-20, -50, -80]) {
+      const y = scale.yToPixel(level, range, paneHeight);
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(chartWidth, y);
+      ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    ctx.restore();
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value === null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/ROC.ts
+var ROC = class {
+  constructor(period = 12, color = "#80cbc4", source = "close") {
+    this.period = period;
+    this.source = source;
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.name = "ROC";
+    this.color = color;
+  }
+  compute(data) {
+    return data.map((_, i) => {
+      if (i < this.period) return { index: i, value: null };
+      const prev = getSource(data[i - this.period], this.source);
+      if (prev === 0) return { index: i, value: null };
+      return { index: i, value: (getSource(data[i], this.source) - prev) / prev * 100 };
+    });
+  }
+  getValueRange(results) {
+    let maxAbs = 1e-4;
+    for (const r of results) {
+      if (r.value != null) maxAbs = Math.max(maxAbs, Math.abs(r.value));
+    }
+    return { min: -maxAbs * 1.3, max: maxAbs * 1.3 };
+  }
+  render(ctx, results, scale, viewport, paneHeight, rangeOverride) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    let maxAbs = 1e-4;
+    for (const r of results) {
+      if (r.value != null) maxAbs = Math.max(maxAbs, Math.abs(r.value));
+    }
+    const range = rangeOverride ?? { min: -maxAbs * 1.3, max: maxAbs * 1.3 };
+    const zeroY = scale.yToPixel(0, range, paneHeight);
+    const points = [];
+    for (const r of results) {
+      if (r.value == null) continue;
+      points.push({
+        x: scale.xToPixel(r.index, viewport, chartWidth),
+        y: scale.yToPixel(r.value, range, paneHeight),
+        value: r.value
+      });
+    }
+    if (points.length >= 2) {
+      ctx.beginPath();
+      ctx.moveTo(points[0].x, zeroY);
+      for (const p of points) {
+        ctx.lineTo(p.x, Math.min(p.y, zeroY));
+      }
+      ctx.lineTo(points[points.length - 1].x, zeroY);
+      ctx.closePath();
+      ctx.fillStyle = "rgba(38,166,154,0.05)";
+      ctx.fill();
+      ctx.beginPath();
+      ctx.moveTo(points[0].x, zeroY);
+      for (const p of points) {
+        ctx.lineTo(p.x, Math.max(p.y, zeroY));
+      }
+      ctx.lineTo(points[points.length - 1].x, zeroY);
+      ctx.closePath();
+      ctx.fillStyle = "rgba(239,83,80,0.05)";
+      ctx.fill();
+    }
+    ctx.save();
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = "rgba(150,150,150,0.35)";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(0, zeroY);
+    ctx.lineTo(chartWidth, zeroY);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.restore();
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value === null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/OBV.ts
+var OBV = class {
+  constructor(color = "#aed581") {
+    this.name = "OBV";
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.color = color;
+  }
+  compute(data) {
+    const results = [];
+    let obv = 0;
+    for (let i = 0; i < data.length; i++) {
+      if (i === 0) {
+        obv = data[i].volume ?? 0;
+      } else {
+        if (data[i].close > data[i - 1].close) {
+          obv += data[i].volume ?? 0;
+        } else if (data[i].close < data[i - 1].close) {
+          obv -= data[i].volume ?? 0;
+        }
+      }
+      results.push({ index: i, value: obv });
+    }
+    return results;
+  }
+  getValueRange(results) {
+    let minVal = Infinity;
+    let maxVal = -Infinity;
+    for (const r of results) {
+      if (r.value != null) {
+        if (r.value < minVal) minVal = r.value;
+        if (r.value > maxVal) maxVal = r.value;
+      }
+    }
+    if (minVal === Infinity) return { min: 0, max: 1 };
+    const padding = (maxVal - minVal) * 0.1 || 1;
+    return { min: minVal - padding, max: maxVal + padding };
+  }
+  render(ctx, results, scale, viewport, paneHeight, rangeOverride) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    let minVal = Infinity;
+    let maxVal = -Infinity;
+    for (const r of results) {
+      if (r.value != null) {
+        if (r.value < minVal) minVal = r.value;
+        if (r.value > maxVal) maxVal = r.value;
+      }
+    }
+    if (minVal === Infinity) return;
+    const padding = (maxVal - minVal) * 0.1 || 1;
+    const range = rangeOverride ?? { min: minVal - padding, max: maxVal + padding };
+    const zeroY = scale.yToPixel(0, range, paneHeight);
+    const points = [];
+    for (const r of results) {
+      if (r.value == null) continue;
+      points.push({
+        x: scale.xToPixel(r.index, viewport, chartWidth),
+        y: scale.yToPixel(r.value, range, paneHeight),
+        value: r.value
+      });
+    }
+    if (points.length === 0) return;
+    ctx.save();
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = "rgba(150,150,150,0.35)";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(0, zeroY);
+    ctx.lineTo(chartWidth, zeroY);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.restore();
+    if (points.length >= 2) {
+      ctx.beginPath();
+      ctx.moveTo(points[0].x, zeroY);
+      for (const p of points) ctx.lineTo(p.x, p.y);
+      ctx.lineTo(points[points.length - 1].x, zeroY);
+      ctx.closePath();
+      const lastVal = points[points.length - 1].value;
+      ctx.fillStyle = lastVal >= 0 ? "rgba(38,166,154,0.12)" : "rgba(239,83,80,0.12)";
+      ctx.fill();
+    }
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value == null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/VWAP.ts
+var VWAP = class {
+  constructor(color = "#9c27b0") {
+    this.name = "VWAP";
+    this.color = color;
+  }
+  compute(data) {
+    const results = [];
+    let cumTPV = 0;
+    let cumVol = 0;
+    for (let i = 0; i < data.length; i++) {
+      const bar = data[i];
+      const typicalPrice = (bar.high + bar.low + bar.close) / 3;
+      cumTPV += typicalPrice * (bar.volume ?? 0);
+      cumVol += bar.volume ?? 0;
+      results.push({
+        index: i,
+        value: cumVol === 0 ? null : cumTPV / cumVol
+      });
+    }
+    return results;
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    const chartWidth = canvas._chartWidth ?? ctx.canvas.width;
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    ctx.setLineDash([4, 3]);
+    let started = false;
+    for (const r of results) {
+      if (r.value === null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, priceRange, chartHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+    ctx.setLineDash([]);
+  }
+};
+
+// src/indicators/AccDistribution.ts
+var AccDistribution = class {
+  constructor(color = "#ce93d8") {
+    this.name = "A/D";
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.color = color;
+  }
+  compute(data) {
+    const results = [];
+    let ad = 0;
+    for (let i = 0; i < data.length; i++) {
+      const { high, low, close, volume } = data[i];
+      const denom = high - low;
+      const mfm = denom === 0 ? 0 : (close - low - (high - close)) / denom;
+      ad += mfm * (volume ?? 0);
+      results.push({ index: i, value: ad });
+    }
+    return results;
+  }
+  getValueRange(results) {
+    let minVal = Infinity;
+    let maxVal = -Infinity;
+    for (const r of results) {
+      if (r.value != null) {
+        if (r.value < minVal) minVal = r.value;
+        if (r.value > maxVal) maxVal = r.value;
+      }
+    }
+    if (minVal === Infinity) return { min: 0, max: 1 };
+    const padding = (maxVal - minVal) * 0.1 || 1;
+    return { min: minVal - padding, max: maxVal + padding };
+  }
+  render(ctx, results, scale, viewport, paneHeight, rangeOverride) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    let minVal = Infinity;
+    let maxVal = -Infinity;
+    for (const r of results) {
+      if (r.value != null) {
+        if (r.value < minVal) minVal = r.value;
+        if (r.value > maxVal) maxVal = r.value;
+      }
+    }
+    if (minVal === Infinity) return;
+    const padding = (maxVal - minVal) * 0.1 || 1;
+    const range = rangeOverride ?? { min: minVal - padding, max: maxVal + padding };
+    const points = [];
+    for (const r of results) {
+      if (r.value == null) continue;
+      points.push({
+        x: scale.xToPixel(r.index, viewport, chartWidth),
+        y: scale.yToPixel(r.value, range, paneHeight)
+      });
+    }
+    if (points.length === 0) return;
+    if (points.length >= 2) {
+      const baseY = paneHeight;
+      ctx.beginPath();
+      ctx.moveTo(points[0].x, baseY);
+      for (const p of points) ctx.lineTo(p.x, p.y);
+      ctx.lineTo(points[points.length - 1].x, baseY);
+      ctx.closePath();
+      ctx.fillStyle = this.color + "20";
+      ctx.fill();
+    }
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value == null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/MFI.ts
+var MFI = class {
+  constructor(period = 14, color = "#ffab40") {
+    this.period = period;
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.name = "MFI";
+    this.color = color;
+  }
+  compute(data) {
+    const results = [];
+    const tp = data.map((b) => (b.high + b.low + b.close) / 3);
+    const rawMF = data.map((b, i) => tp[i] * (b.volume ?? 0));
+    for (let i = 0; i < data.length; i++) {
+      if (i < this.period) {
+        results.push({ index: i, value: null });
+        continue;
+      }
+      let posSum = 0;
+      let negSum = 0;
+      for (let j = i - this.period + 1; j <= i; j++) {
+        if (tp[j] > tp[j - 1]) {
+          posSum += rawMF[j];
+        } else if (tp[j] < tp[j - 1]) {
+          negSum += rawMF[j];
+        }
+      }
+      if (negSum === 0) {
+        results.push({ index: i, value: 100 });
+      } else {
+        const mfRatio = posSum / negSum;
+        results.push({ index: i, value: 100 - 100 / (1 + mfRatio) });
+      }
+    }
+    return results;
+  }
+  getValueRange(_results) {
+    return { min: 0, max: 100 };
+  }
+  render(ctx, results, scale, viewport, paneHeight, rangeOverride) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    const range = rangeOverride ?? { min: 0, max: 100 };
+    const y80 = scale.yToPixel(80, range, paneHeight);
+    const y20 = scale.yToPixel(20, range, paneHeight);
+    ctx.fillStyle = "rgba(239,83,80,0.06)";
+    ctx.fillRect(0, 0, chartWidth, y80);
+    ctx.fillStyle = "rgba(38,166,154,0.06)";
+    ctx.fillRect(0, y20, chartWidth, paneHeight - y20);
+    ctx.save();
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = "rgba(150,150,150,0.35)";
+    ctx.lineWidth = 1;
+    for (const level of [80, 50, 20]) {
+      const y = scale.yToPixel(level, range, paneHeight);
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(chartWidth, y);
+      ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    ctx.restore();
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value === null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/CMF.ts
+var CMF = class {
+  constructor(period = 20, color = "#80deea") {
+    this.period = period;
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.name = "CMF";
+    this.color = color;
+  }
+  compute(data) {
+    const mfv = data.map((b) => {
+      const denom = b.high - b.low;
+      const mfm = denom === 0 ? 0 : (b.close - b.low - (b.high - b.close)) / denom;
+      return mfm * (b.volume ?? 0);
+    });
+    return data.map((b, i) => {
+      if (i < this.period - 1) return { index: i, value: null };
+      let sumMFV = 0;
+      let sumVol = 0;
+      for (let j = i - this.period + 1; j <= i; j++) {
+        sumMFV += mfv[j];
+        sumVol += data[j].volume ?? 0;
+      }
+      const cmf = sumVol === 0 ? 0 : sumMFV / sumVol;
+      return { index: i, value: cmf };
+    });
+  }
+  getValueRange(_results) {
+    return { min: -1, max: 1 };
+  }
+  render(ctx, results, scale, viewport, paneHeight, rangeOverride) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    const range = rangeOverride ?? { min: -1, max: 1 };
+    const zeroY = scale.yToPixel(0, range, paneHeight);
+    const y02 = scale.yToPixel(0.2, range, paneHeight);
+    const yN02 = scale.yToPixel(-0.2, range, paneHeight);
+    ctx.fillStyle = "rgba(38,166,154,0.08)";
+    ctx.fillRect(0, 0, chartWidth, y02);
+    ctx.fillStyle = "rgba(239,83,80,0.08)";
+    ctx.fillRect(0, yN02, chartWidth, paneHeight - yN02);
+    ctx.save();
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = "rgba(150,150,150,0.35)";
+    ctx.lineWidth = 1;
+    for (const level of [0.2, 0, -0.2]) {
+      const y = scale.yToPixel(level, range, paneHeight);
+      ctx.beginPath();
+      ctx.moveTo(0, y);
+      ctx.lineTo(chartWidth, y);
+      ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    ctx.restore();
+    const bodyW = Math.max(1, chartWidth / Math.max(results.length, 1) * 0.6);
+    for (const r of results) {
+      if (r.value == null) continue;
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const barY = scale.yToPixel(r.value, range, paneHeight);
+      const h = Math.abs(barY - zeroY);
+      const top = Math.min(barY, zeroY);
+      ctx.fillStyle = r.value >= 0 ? "rgba(38,166,154,0.45)" : "rgba(239,83,80,0.45)";
+      ctx.fillRect(x - bodyW / 2, top, bodyW, h);
+    }
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value === null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, range, paneHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/PivotPoints.ts
+var PivotPoints = class {
+  constructor(color = "#ffd54f") {
+    this.name = "Pivot";
+    this.color = color;
+  }
+  compute(data) {
+    return data.map((_, i) => {
+      if (i === 0) return { index: i, value: null, upper: null, lower: null, signal: null, histogram: null };
+      const prev = data[i - 1];
+      const pp = (prev.high + prev.low + prev.close) / 3;
+      const r1 = 2 * pp - prev.low;
+      const s1 = 2 * pp - prev.high;
+      const r2 = pp + (prev.high - prev.low);
+      const s2 = pp - (prev.high - prev.low);
+      return {
+        index: i,
+        value: pp,
+        // PP
+        upper: r1,
+        // R1
+        lower: s1,
+        // S1
+        signal: r2,
+        // R2
+        histogram: s2
+        // S2
+      };
+    });
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    const chartWidth = canvas._chartWidth ?? ctx.canvas.width;
+    let lastResult = null;
+    for (let i = results.length - 1; i >= 0; i--) {
+      if (results[i].value !== null) {
+        lastResult = results[i];
+        break;
+      }
+    }
+    if (lastResult === null) return;
+    const levels = [
+      { value: lastResult.signal, label: "R2", color: "#b71c1c" },
+      { value: lastResult.upper, label: "R1", color: "#ef5350" },
+      { value: lastResult.value, label: "PP", color: "#ffd54f" },
+      { value: lastResult.lower, label: "S1", color: "#26a69a" },
+      { value: lastResult.histogram, label: "S2", color: "#1b5e20" }
+    ];
+    ctx.lineWidth = 1;
+    ctx.font = "10px sans-serif";
+    ctx.textBaseline = "middle";
+    for (const level of levels) {
+      if (level.value == null) continue;
+      const y = scale.yToPixel(level.value, priceRange, chartHeight);
+      ctx.beginPath();
+      ctx.setLineDash([6, 4]);
+      ctx.strokeStyle = level.color;
+      ctx.moveTo(0, y);
+      ctx.lineTo(chartWidth, y);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.fillStyle = level.color;
+      ctx.fillText(level.label, chartWidth - 28, y - 6);
+    }
+  }
+};
+
+// src/indicators/FibRetracementIndicator.ts
+var FIB_RATIOS = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1];
+var FIB_LABELS = ["0%", "23.6%", "38.2%", "50%", "61.8%", "78.6%", "100%"];
+var FIB_COLORS = ["#90a4ae", "#4d96ff", "#6bcb77", "#ffd93d", "#ff9800", "#ef5350", "#90a4ae"];
+var FibRetracementIndicator = class {
+  constructor(lookback = 50, color = "#e1bee7") {
+    this.lookback = lookback;
+    this.name = "Fib";
+    this.color = color;
+  }
+  compute(data) {
+    return data.map((_, i) => {
+      const start = Math.max(0, i - this.lookback + 1);
+      let high = -Infinity;
+      let low = Infinity;
+      for (let j = start; j <= i; j++) {
+        if (data[j].high > high) high = data[j].high;
+        if (data[j].low < low) low = data[j].low;
+      }
+      const range = high - low;
+      return {
+        index: i,
+        value: high,
+        // 100% (top of range)
+        upper: low + 0.618 * range,
+        // 61.8%
+        lower: low + 0.382 * range,
+        // 38.2%
+        signal: low + 0.5 * range,
+        // 50%
+        histogram: low
+        // 0% (bottom of range)
+      };
+    });
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    const chartWidth = canvas._chartWidth ?? ctx.canvas.width;
+    let lastResult = null;
+    for (let i = results.length - 1; i >= 0; i--) {
+      if (results[i].value !== null) {
+        lastResult = results[i];
+        break;
+      }
+    }
+    if (lastResult === null) return;
+    const high = lastResult.value;
+    const low = lastResult.histogram;
+    if (high == null || low == null) return;
+    const range = high - low;
+    const fibValues = FIB_RATIOS.map((ratio) => low + ratio * range);
+    ctx.lineWidth = 1;
+    ctx.font = "10px sans-serif";
+    ctx.textBaseline = "middle";
+    for (let fi = 0; fi < FIB_RATIOS.length; fi++) {
+      const price = fibValues[fi];
+      const y = scale.yToPixel(price, priceRange, chartHeight);
+      const color = FIB_COLORS[fi];
+      ctx.beginPath();
+      ctx.setLineDash([6, 4]);
+      ctx.strokeStyle = color;
+      ctx.moveTo(0, y);
+      ctx.lineTo(chartWidth, y);
+      ctx.stroke();
+      ctx.setLineDash([]);
+      ctx.fillStyle = color;
+      ctx.fillText(FIB_LABELS[fi], chartWidth - 38, y - 6);
+    }
+  }
+};
+
+// src/indicators/Supertrend.ts
+var Supertrend = class {
+  constructor(atrPeriod = 10, multiplier = 3, color = "#26a69a") {
+    this.atrPeriod = atrPeriod;
+    this.multiplier = multiplier;
+    this.name = "Supertrend";
+    this.color = color;
+  }
+  compute(data) {
+    const n = data.length;
+    const results = [];
+    if (n === 0) return results;
+    const tr = new Array(n).fill(0);
+    for (let i = 0; i < n; i++) {
+      const high = data[i].high;
+      const low = data[i].low;
+      const prevClose = i > 0 ? data[i - 1].close : data[i].close;
+      tr[i] = Math.max(high - low, Math.abs(high - prevClose), Math.abs(low - prevClose));
+    }
+    const atr = new Array(n).fill(0);
+    if (n < this.atrPeriod) {
+      for (let i = 0; i < n; i++) results.push({ index: i, value: null, upper: null });
+      return results;
+    }
+    let atrSeed = 0;
+    for (let i = 0; i < this.atrPeriod; i++) atrSeed += tr[i];
+    atr[this.atrPeriod - 1] = atrSeed / this.atrPeriod;
+    for (let i = this.atrPeriod; i < n; i++) {
+      atr[i] = (atr[i - 1] * (this.atrPeriod - 1) + tr[i]) / this.atrPeriod;
+    }
+    const finalUpperBand = new Array(n).fill(0);
+    const finalLowerBand = new Array(n).fill(0);
+    const direction = new Array(n).fill(1);
+    for (let i = 0; i < n; i++) {
+      if (i < this.atrPeriod - 1) {
+        results.push({ index: i, value: null, upper: null });
+        continue;
+      }
+      const hl2 = (data[i].high + data[i].low) / 2;
+      const basicUpper = hl2 + this.multiplier * atr[i];
+      const basicLower = hl2 - this.multiplier * atr[i];
+      if (i === this.atrPeriod - 1) {
+        finalUpperBand[i] = basicUpper;
+        finalLowerBand[i] = basicLower;
+        direction[i] = 1;
+        results.push({ index: i, value: finalLowerBand[i], upper: 1 });
+        continue;
+      }
+      const prevClose = data[i - 1].close;
+      finalUpperBand[i] = basicUpper < finalUpperBand[i - 1] || prevClose > finalUpperBand[i - 1] ? basicUpper : finalUpperBand[i - 1];
+      finalLowerBand[i] = basicLower > finalLowerBand[i - 1] || prevClose < finalLowerBand[i - 1] ? basicLower : finalLowerBand[i - 1];
+      if (direction[i - 1] === -1) {
+        direction[i] = data[i].close > finalUpperBand[i] ? 1 : -1;
+      } else {
+        direction[i] = data[i].close < finalLowerBand[i] ? -1 : 1;
+      }
+      const supertrendVal = direction[i] === 1 ? finalLowerBand[i] : finalUpperBand[i];
+      results.push({ index: i, value: supertrendVal, upper: direction[i] });
+    }
+    return results;
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    const chartWidth = canvas._chartWidth ?? ctx.canvas.width;
+    ctx.lineWidth = 2;
+    ctx.lineJoin = "round";
+    const BULLISH_COLOR = "#26a69a";
+    const BEARISH_COLOR = "#ef5350";
+    let prevDirection = null;
+    ctx.beginPath();
+    ctx.strokeStyle = BULLISH_COLOR;
+    let startedBull = false;
+    for (const r of results) {
+      if (r.value == null || r.upper == null) {
+        startedBull = false;
+        continue;
+      }
+      const isBullish = r.upper >= 0;
+      if (!isBullish) {
+        startedBull = false;
+        continue;
+      }
+      if (prevDirection !== 1) startedBull = false;
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, priceRange, chartHeight);
+      startedBull ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), startedBull = true);
+      prevDirection = 1;
+    }
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.strokeStyle = BEARISH_COLOR;
+    let startedBear = false;
+    prevDirection = null;
+    for (const r of results) {
+      if (r.value == null || r.upper == null) {
+        startedBear = false;
+        continue;
+      }
+      const isBearish = r.upper < 0;
+      if (!isBearish) {
+        startedBear = false;
+        continue;
+      }
+      if (prevDirection !== -1) startedBear = false;
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, priceRange, chartHeight);
+      startedBear ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), startedBear = true);
+      prevDirection = -1;
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/ParabolicSAR.ts
+var ParabolicSAR = class {
+  constructor(step = 0.02, maxAF = 0.2, color = "#ff6b9d") {
+    this.step = step;
+    this.maxAF = maxAF;
+    this.name = "PSAR";
+    this.color = color;
+  }
+  compute(data) {
+    const n = data.length;
+    const results = [];
+    if (n < 2) {
+      for (let i = 0; i < n; i++) results.push({ index: i, value: null, upper: null });
+      return results;
+    }
+    let bullish = true;
+    let af = this.step;
+    let ep = data[0].high;
+    let sar = data[0].low;
+    results.push({ index: 0, value: null, upper: null });
+    for (let i = 1; i < n; i++) {
+      let newSar = sar + af * (ep - sar);
+      if (bullish) {
+        const prevLow = data[i - 1].low;
+        const prevPrevLow = i >= 2 ? data[i - 2].low : data[i - 1].low;
+        newSar = Math.min(newSar, prevLow, prevPrevLow);
+        if (newSar > data[i].low) {
+          bullish = false;
+          newSar = ep;
+          ep = data[i].low;
+          af = this.step;
+        } else {
+          if (data[i].high > ep) {
+            ep = data[i].high;
+            af = Math.min(af + this.step, this.maxAF);
+          }
+        }
+      } else {
+        const prevHigh = data[i - 1].high;
+        const prevPrevHigh = i >= 2 ? data[i - 2].high : data[i - 1].high;
+        newSar = Math.max(newSar, prevHigh, prevPrevHigh);
+        if (newSar < data[i].high) {
+          bullish = true;
+          newSar = ep;
+          ep = data[i].high;
+          af = this.step;
+        } else {
+          if (data[i].low < ep) {
+            ep = data[i].low;
+            af = Math.min(af + this.step, this.maxAF);
+          }
+        }
+      }
+      sar = newSar;
+      results.push({ index: i, value: sar, upper: bullish ? 1 : -1 });
+    }
+    return results;
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    const chartWidth = canvas._chartWidth ?? ctx.canvas.width;
+    const BULLISH_COLOR = "#26a69a";
+    const BEARISH_COLOR = "#ef5350";
+    for (const r of results) {
+      if (r.value == null || r.upper == null) continue;
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, priceRange, chartHeight);
+      ctx.beginPath();
+      ctx.arc(x, y, 2, 0, Math.PI * 2);
+      ctx.fillStyle = r.upper >= 0 ? BULLISH_COLOR : BEARISH_COLOR;
+      ctx.fill();
+    }
+  }
+};
+
+// src/indicators/IchimokuCloud.ts
+function periodHighLow(data, index, period) {
+  if (index < period - 1) return null;
+  let high = -Infinity;
+  let low = Infinity;
+  for (let j = index - period + 1; j <= index; j++) {
+    if (data[j].high > high) high = data[j].high;
+    if (data[j].low < low) low = data[j].low;
+  }
+  return { high, low };
+}
+var IchimokuCloud = class {
+  constructor(tenkanPeriod = 9, kijunPeriod = 26, senkouBPeriod = 52, color = "#b0bec5") {
+    this.tenkanPeriod = tenkanPeriod;
+    this.kijunPeriod = kijunPeriod;
+    this.senkouBPeriod = senkouBPeriod;
+    this.name = "Ichimoku";
+    this.color = color;
+  }
+  compute(data) {
+    return data.map((bar, i) => {
+      const tenkanHL = periodHighLow(data, i, this.tenkanPeriod);
+      const tenkan = tenkanHL !== null ? (tenkanHL.high + tenkanHL.low) / 2 : null;
+      const kijunHL = periodHighLow(data, i, this.kijunPeriod);
+      const kijun = kijunHL !== null ? (kijunHL.high + kijunHL.low) / 2 : null;
+      const spanA = tenkan !== null && kijun !== null ? (tenkan + kijun) / 2 : null;
+      const spanBHL = periodHighLow(data, i, this.senkouBPeriod);
+      const spanB = spanBHL !== null ? (spanBHL.high + spanBHL.low) / 2 : null;
+      const chikou = bar.close;
+      return {
+        index: i,
+        value: tenkan,
+        upper: kijun,
+        lower: spanA,
+        signal: spanB,
+        histogram: chikou
+      };
+    });
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    const chartWidth = canvas._chartWidth ?? ctx.canvas.width;
+    ctx.lineWidth = 1;
+    ctx.lineJoin = "round";
+    const drawLine = (getValue, color, dash = false) => {
+      ctx.strokeStyle = color;
+      if (dash) ctx.setLineDash([4, 3]);
+      ctx.beginPath();
+      let started2 = false;
+      for (const r of results) {
+        const val = getValue(r);
+        if (val == null) {
+          started2 = false;
+          continue;
+        }
+        const x = scale.xToPixel(r.index, viewport, chartWidth);
+        const y = scale.yToPixel(val, priceRange, chartHeight);
+        started2 ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started2 = true);
+      }
+      ctx.stroke();
+      if (dash) ctx.setLineDash([]);
+    };
+    const spanAPoints = [];
+    const spanBPoints = [];
+    for (const r of results) {
+      if (r.lower == null || r.signal == null) continue;
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      spanAPoints.push([x, scale.yToPixel(r.lower, priceRange, chartHeight)]);
+      spanBPoints.push([x, scale.yToPixel(r.signal, priceRange, chartHeight)]);
+    }
+    for (let i = 0; i + 1 < spanAPoints.length; i++) {
+      const [x0, a0] = spanAPoints[i];
+      const [x1, a1] = spanAPoints[i + 1];
+      const [, b0] = spanBPoints[i];
+      const [, b1] = spanBPoints[i + 1];
+      const spanAAbove = a0 < b0;
+      ctx.beginPath();
+      ctx.moveTo(x0, a0);
+      ctx.lineTo(x1, a1);
+      ctx.lineTo(x1, b1);
+      ctx.lineTo(x0, b0);
+      ctx.closePath();
+      ctx.fillStyle = spanAAbove ? "rgba(38, 166, 154, 0.15)" : "rgba(239, 83, 80, 0.15)";
+      ctx.fill();
+    }
+    drawLine((r) => r.lower, "#26a69a", true);
+    drawLine((r) => r.signal, "#ef5350", true);
+    drawLine((r) => r.value, "#ef9a9a");
+    drawLine((r) => r.upper, "#90caf9");
+    ctx.strokeStyle = "#b0bec5";
+    ctx.beginPath();
+    let started = false;
+    for (const r of results) {
+      if (r.histogram == null) {
+        started = false;
+        continue;
+      }
+      const shiftedIndex = r.index - this.kijunPeriod;
+      if (shiftedIndex < 0) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(shiftedIndex, viewport, chartWidth);
+      const y = scale.yToPixel(r.histogram, priceRange, chartHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+// src/indicators/ADX.ts
+var ADX = class {
+  constructor(period = 14, color = "#fff176") {
+    this.period = period;
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.name = "ADX";
+    this.color = color;
+  }
+  compute(data) {
+    const n = data.length;
+    if (n < this.period + 1) {
+      return data.map((_, i) => ({ index: i, value: null, upper: null, lower: null }));
+    }
+    const tr = new Array(n).fill(0);
+    const dmP = new Array(n).fill(0);
+    const dmM = new Array(n).fill(0);
+    tr[0] = data[0].high - data[0].low;
+    dmP[0] = 0;
+    dmM[0] = 0;
+    for (let i = 1; i < n; i++) {
+      const prevClose = data[i - 1].close;
+      const prevHigh = data[i - 1].high;
+      const prevLow = data[i - 1].low;
+      const currHigh = data[i].high;
+      const currLow = data[i].low;
+      tr[i] = Math.max(
+        currHigh - currLow,
+        Math.abs(currHigh - prevClose),
+        Math.abs(currLow - prevClose)
+      );
+      const upMove = currHigh - prevHigh;
+      const downMove = prevLow - currLow;
+      dmP[i] = upMove > downMove && upMove > 0 ? upMove : 0;
+      dmM[i] = downMove > upMove && downMove > 0 ? downMove : 0;
+    }
+    let smoothTR = 0;
+    let smoothDP = 0;
+    let smoothDM = 0;
+    for (let i = 0; i < this.period; i++) {
+      smoothTR += tr[i];
+      smoothDP += dmP[i];
+      smoothDM += dmM[i];
+    }
+    const results = [];
+    for (let i = 0; i < this.period; i++) {
+      results.push({ index: i, value: null, upper: null, lower: null });
+    }
+    const diPArr = new Array(n).fill(0);
+    const diMArr = new Array(n).fill(0);
+    const dxArr = new Array(n).fill(0);
+    const diP0 = smoothTR === 0 ? 0 : 100 * smoothDP / smoothTR;
+    const diM0 = smoothTR === 0 ? 0 : 100 * smoothDM / smoothTR;
+    const dx0 = diP0 + diM0 === 0 ? 0 : 100 * Math.abs(diP0 - diM0) / (diP0 + diM0);
+    diPArr[this.period - 1] = diP0;
+    diMArr[this.period - 1] = diM0;
+    dxArr[this.period - 1] = dx0;
+    results[this.period - 1] = {
+      index: this.period - 1,
+      value: null,
+      // ADX not ready yet
+      upper: diP0,
+      lower: diM0
+    };
+    for (let i = this.period; i < n; i++) {
+      smoothTR = smoothTR - smoothTR / this.period + tr[i];
+      smoothDP = smoothDP - smoothDP / this.period + dmP[i];
+      smoothDM = smoothDM - smoothDM / this.period + dmM[i];
+      const diP = smoothTR === 0 ? 0 : 100 * smoothDP / smoothTR;
+      const diM = smoothTR === 0 ? 0 : 100 * smoothDM / smoothTR;
+      const dx = diP + diM === 0 ? 0 : 100 * Math.abs(diP - diM) / (diP + diM);
+      diPArr[i] = diP;
+      diMArr[i] = diM;
+      dxArr[i] = dx;
+      results.push({ index: i, value: null, upper: diP, lower: diM });
+    }
+    const adxStart = 2 * this.period - 2;
+    if (adxStart >= n) return results;
+    let adx = 0;
+    for (let i = this.period - 1; i <= adxStart; i++) {
+      adx += dxArr[i];
+    }
+    adx /= this.period;
+    results[adxStart].value = adx;
+    for (let i = adxStart + 1; i < n; i++) {
+      adx = (adx * (this.period - 1) + dxArr[i]) / this.period;
+      results[i].value = adx;
+    }
+    return results;
+  }
+  getValueRange(_results) {
+    return { min: 0, max: 100 };
+  }
+  render(ctx, results, scale, viewport, paneHeight, rangeOverride) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    const range = rangeOverride ?? { min: 0, max: 100 };
+    ctx.save();
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = "rgba(150,150,150,0.35)";
+    ctx.lineWidth = 1;
+    const y25 = scale.yToPixel(25, range, paneHeight);
+    ctx.beginPath();
+    ctx.moveTo(0, y25);
+    ctx.lineTo(chartWidth, y25);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.restore();
+    const drawLine = (getValue, strokeColor, lineWidth) => {
+      ctx.beginPath();
+      ctx.strokeStyle = strokeColor;
+      ctx.lineWidth = lineWidth;
+      ctx.lineJoin = "round";
+      let started = false;
+      for (const r of results) {
+        const val = getValue(r);
+        if (val == null) {
+          started = false;
+          continue;
+        }
+        const x = scale.xToPixel(r.index, viewport, chartWidth);
+        const y = scale.yToPixel(val, range, paneHeight);
+        started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+      }
+      ctx.stroke();
+    };
+    drawLine((r) => r.upper, "#26a69a", 1);
+    drawLine((r) => r.lower, "#ef5350", 1);
+    drawLine((r) => r.value, this.color, 1.5);
+  }
+};
+
+// src/indicators/AwesomeOscillator.ts
+var AwesomeOscillator = class {
+  constructor(fastPeriod = 5, slowPeriod = 34, color = "#b0bec5") {
+    this.fastPeriod = fastPeriod;
+    this.slowPeriod = slowPeriod;
+    this.name = "AO";
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.color = color;
+  }
+  compute(data) {
+    const mid = data.map((b) => (b.high + b.low) / 2);
+    const sma = (arr, end, period) => {
+      if (end < period - 1) return null;
+      let sum = 0;
+      for (let j = end - period + 1; j <= end; j++) sum += arr[j];
+      return sum / period;
+    };
+    return data.map((_, i) => {
+      const fast = sma(mid, i, this.fastPeriod);
+      const slow = sma(mid, i, this.slowPeriod);
+      if (fast === null || slow === null) return { index: i, value: null };
+      return { index: i, value: fast - slow };
+    });
+  }
+  getValueRange(results) {
+    let maxAbs = 1e-4;
+    for (const r of results) {
+      if (r.value != null) maxAbs = Math.max(maxAbs, Math.abs(r.value));
+    }
+    return { min: -maxAbs * 1.2, max: maxAbs * 1.2 };
+  }
+  render(ctx, results, scale, viewport, paneHeight, rangeOverride) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    let maxAbs = 1e-4;
+    for (const r of results) {
+      if (r.value != null) maxAbs = Math.max(maxAbs, Math.abs(r.value));
+    }
+    const range = rangeOverride ?? { min: -maxAbs * 1.2, max: maxAbs * 1.2 };
+    const zeroY = scale.yToPixel(0, range, paneHeight);
+    ctx.save();
+    ctx.setLineDash([4, 4]);
+    ctx.strokeStyle = "rgba(150,150,150,0.35)";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(0, zeroY);
+    ctx.lineTo(chartWidth, zeroY);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.restore();
+    const bodyW = Math.max(scale.candleBodyWidth(viewport, chartWidth), 1);
+    let prevValue = null;
+    for (const r of results) {
+      if (r.value == null) {
+        prevValue = null;
+        continue;
+      }
+      const isGreen = prevValue === null ? true : r.value >= prevValue;
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const barY = scale.yToPixel(r.value, range, paneHeight);
+      const h = Math.abs(barY - zeroY);
+      const top = Math.min(barY, zeroY);
+      ctx.fillStyle = isGreen ? "rgba(38,166,154,0.70)" : "rgba(239,83,80,0.70)";
+      ctx.fillRect(x - bodyW / 2, top, bodyW, h);
+      prevValue = r.value;
+    }
+  }
+};
+
+// src/indicators/HeikinAshi.ts
+var HeikinAshi = class {
+  constructor(color = "#90a4ae", upColor = "#26a69a", downColor = "#ef5350") {
+    this.name = "HA";
+    this.color = color;
+    this.upColor = upColor;
+    this.downColor = downColor;
+  }
+  compute(data) {
+    const results = [];
+    let prevHAOpen = 0;
+    let prevHAClose = 0;
+    for (let i = 0; i < data.length; i++) {
+      const bar = data[i];
+      const haClose = (bar.open + bar.high + bar.low + bar.close) / 4;
+      let haOpen;
+      if (i === 0) {
+        haOpen = (bar.open + bar.close) / 2;
+      } else {
+        haOpen = (prevHAOpen + prevHAClose) / 2;
+      }
+      const haHigh = Math.max(bar.high, haOpen, haClose);
+      const haLow = Math.min(bar.low, haOpen, haClose);
+      prevHAOpen = haOpen;
+      prevHAClose = haClose;
+      results.push({
+        index: i,
+        value: haClose,
+        // HA-Close
+        upper: haHigh,
+        // HA-High
+        lower: haLow,
+        // HA-Low
+        signal: haOpen
+        // HA-Open
+      });
+    }
+    return results;
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    const chartWidth = canvas._chartWidth ?? ctx.canvas.width;
+    const candleWidth = scale.candleBodyWidth(viewport, chartWidth);
+    const halfBody = candleWidth / 2;
+    for (const r of results) {
+      if (r.value == null || r.upper == null || r.lower == null || r.signal == null) continue;
+      const haClose = r.value;
+      const haHigh = r.upper;
+      const haLow = r.lower;
+      const haOpen = r.signal;
+      const isBullish = haClose >= haOpen;
+      const color = isBullish ? this.upColor : this.downColor;
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const yHigh = scale.yToPixel(haHigh, priceRange, chartHeight);
+      const yLow = scale.yToPixel(haLow, priceRange, chartHeight);
+      const yOpen = scale.yToPixel(haOpen, priceRange, chartHeight);
+      const yClose = scale.yToPixel(haClose, priceRange, chartHeight);
+      const bodyTop = Math.min(yOpen, yClose);
+      const bodyBottom = Math.max(yOpen, yClose);
+      const bodyHeight = Math.max(1, bodyBottom - bodyTop);
+      ctx.beginPath();
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1;
+      ctx.moveTo(x, yHigh);
+      ctx.lineTo(x, yLow);
+      ctx.stroke();
+      ctx.fillStyle = color;
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 1;
+      ctx.fillRect(x - halfBody, bodyTop, candleWidth, bodyHeight);
+      ctx.strokeRect(x - halfBody, bodyTop, candleWidth, bodyHeight);
+    }
+  }
+};
+
+// src/indicators/VOL.ts
+var VOL = class {
+  constructor(upColor = "#26a69a", downColor = "#ef5350") {
+    this.name = "VOL";
+    this.pane = "sub";
+    this.paneHeight = 80;
+    this.upColor = upColor;
+    this.downColor = downColor;
+    this.color = upColor;
+  }
+  compute(data) {
+    return data.map((bar, i) => ({
+      index: i,
+      value: bar.volume ?? 0,
+      // encode direction in signal field for render phase
+      signal: bar.close >= bar.open ? 1 : 0
+    }));
+  }
+  render(ctx, results, scale, viewport, paneHeight) {
+    const chartWidth = ctx.canvas._chartWidth ?? ctx.canvas.width;
+    let maxVol = 0;
+    for (const r of results) {
+      if (r.value != null && r.value > maxVol) maxVol = r.value;
+    }
+    if (maxVol === 0) return;
+    const range = { min: 0, max: maxVol * 1.1 };
+    const baseY = scale.yToPixel(0, range, paneHeight);
+    const bodyW = Math.max(scale.candleBodyWidth(viewport, chartWidth), 1);
+    for (const r of results) {
+      if (r.value == null || r.value === 0) continue;
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const topY = scale.yToPixel(r.value, range, paneHeight);
+      const h = Math.abs(baseY - topY);
+      ctx.fillStyle = r.signal === 1 ? `${this.upColor}99` : `${this.downColor}99`;
+      ctx.fillRect(x - bodyW / 2, topY, bodyW, h);
+    }
+    ctx.fillStyle = this.upColor;
+    ctx.font = "10px 'Inter', system-ui, sans-serif";
+    ctx.fillText(this.name, 4, 11);
+  }
+};
+
+// src/indicators/LinearRegression.ts
+var LinearRegression = class {
+  constructor(period = 14, color = "#ff9800") {
+    this.period = period;
+    this.name = "LinReg";
+    this.color = color;
+  }
+  compute(data) {
+    const n = this.period;
+    const results = [];
+    const sumX = n * (n - 1) / 2;
+    const sumX2 = n * (n - 1) * (2 * n - 1) / 6;
+    const denom = n * sumX2 - sumX * sumX;
+    for (let i = 0; i < data.length; i++) {
+      if (i < n - 1) {
+        results.push({ index: i, value: null });
+        continue;
+      }
+      let sumY = 0;
+      let sumXY = 0;
+      for (let j = 0; j < n; j++) {
+        const close = data[i - (n - 1 - j)].close;
+        sumY += close;
+        sumXY += j * close;
+      }
+      const slope = (n * sumXY - sumX * sumY) / denom;
+      const intercept = (sumY - slope * sumX) / n;
+      const value = intercept + slope * (n - 1);
+      results.push({ index: i, value });
+    }
+    return results;
+  }
+  render(ctx, results, scale, viewport, chartHeight) {
+    const canvas = ctx.canvas;
+    const priceRange = canvas._priceRange;
+    if (!priceRange) return;
+    const chartWidth = canvas._chartWidth ?? ctx.canvas.width;
+    ctx.beginPath();
+    ctx.strokeStyle = this.color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    let started = false;
+    for (const r of results) {
+      if (r.value === null) {
+        started = false;
+        continue;
+      }
+      const x = scale.xToPixel(r.index, viewport, chartWidth);
+      const y = scale.yToPixel(r.value, priceRange, chartHeight);
+      started ? ctx.lineTo(x, y) : (ctx.moveTo(x, y), started = true);
+    }
+    ctx.stroke();
+  }
+};
+
+export { ADX, ATR, AccDistribution, AwesomeOscillator, BollingerBands, CCI, CMF, DonchianChannels, EMA, FibRetracementIndicator, HMA, HeikinAshi, IchimokuCloud, KeltnerChannels, LinearRegression, MACD, MARibbon, MFI, OBV, ParabolicSAR, PivotPoints, ROC, RSI, SMA, StochRSI, Stochastic, Supertrend, VOL, VWAP, WMA, WilliamsR };
+//# sourceMappingURL=chunk-X6OSI4P2.js.map
+//# sourceMappingURL=chunk-X6OSI4P2.js.map