@forgecharts/sdk 1.1.27 → 1.1.28

package/src/react/workspace/toolbars/TopToolbar.tsx

@@ -1,431 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import type { ChartTheme, IndicatorConfig } from '@forgecharts/types';
-import { LayoutMenu } from '../LayoutMenu';
-import { SymbolSearchDialog } from '../SymbolSearchDialog';
-import type { ISymbolResolver } from '@forgecharts/types';
-import { IndicatorsDialog } from '../IndicatorsDialog';
-
-// ─── Timeframe data ───────────────────────────────────────────────────────────
-
-export const DEFAULT_FAVORITES: string[] = ['1m', '5m', '15m', '30m', '1h', '4h', '1d', '1w'];
-
-const TF_LABELS: Record<string, string> = {
-  '1m': '1 minute',  '2m': '2 minutes',   '3m': '3 minutes',    '4m': '4 minutes',
-  '5m': '5 minutes', '10m': '10 minutes', '15m': '15 minutes',  '20m': '20 minutes',
-  '30m': '30 minutes', '45m': '45 minutes',
-  '1h': '1 hour',    '2h': '2 hours',     '3h': '3 hours',      '4h': '4 hours',
-  '6h': '6 hours',   '8h': '8 hours',     '12h': '12 hours',
-  '1d': '1 day',     '2d': '2 days',      '3d': '3 days',       '1w': '1 week',
-  '2w': '2 weeks',   '1M': '1 month',     '3M': '3 months',     '6M': '6 months',  '12M': '12 months',
-};
-
-const TF_GROUPS_ALL: { label: string; items: string[] }[] = [
-  { label: 'Minutes', items: ['1m', '2m', '3m', '4m', '5m', '10m', '15m', '20m', '30m', '45m'] },
-  { label: 'Hours',   items: ['1h', '2h', '3h', '4h', '6h', '8h', '12h'] },
-  { label: 'Days',    items: ['1d', '2d', '3d', '1w', '2w', '1M', '3M', '6M', '12M'] },
-];
-
-// ─── Timeframe dropdown ───────────────────────────────────────────────────────
-
-function TimeframeDropdown({
-  timeframe,
-  customTimeframes,
-  favorites,
-  onSelect,
-  onToggleFavorite,
-  onAddCustom,
-  onClose,
-}: {
-  timeframe: string;
-  customTimeframes: string[];
-  favorites: string[];
-  onSelect: (tf: string) => void;
-  onToggleFavorite: (tf: string) => void;
-  onAddCustom: (tf: string) => void;
-  onClose: () => void;
-}) {
-  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
-  const [addingCustom, setAddingCustom] = useState(false);
-  const [input, setInput] = useState('');
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (ref.current && !ref.current.contains(e.target as Node)) onClose();
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [onClose]);
-
-  const commit = () => {
-    const val = input.trim();
-    if (!val) return;
-    onAddCustom(val);
-    onSelect(val);
-    setInput('');
-    onClose();
-  };
-
-  const toggleGroup = (label: string) =>
-    setCollapsed((prev) => ({ ...prev, [label]: !prev[label] }));
-
-  return (
-    <div ref={ref} className="tf-dropdown">
-      <button
-        className="tf-dropdown-add-custom"
-        onClick={() => setAddingCustom((a) => !a)}
-      >
-        + Add custom interval...
-      </button>
-
-      {addingCustom && (
-        <div className="tf-dropdown-add-row">
-          <input
-            className="tf-dropdown-input"
-            type="text"
-            value={input}
-            placeholder="e.g. 2h, 45m"
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={(e) => { if (e.key === 'Enter') commit(); }}
-            autoFocus
-          />
-          <button
-            className="tf-dropdown-add-btn"
-            disabled={!input.trim()}
-            onClick={commit}
-          >
-            Add
-          </button>
-        </div>
-      )}
-
-      {TF_GROUPS_ALL.map((group) => (
-        <div key={group.label}>
-          <button
-            className="tf-dropdown-group-hdr"
-            onClick={() => toggleGroup(group.label)}
-          >
-            <span>{group.label}</span>
-            <span className={`tf-dropdown-chevron${collapsed[group.label] ? ' collapsed' : ''}`}>∧</span>
-          </button>
-          {!collapsed[group.label] && group.items.map((tf) => (
-            <button
-              key={tf}
-              className="tf-dropdown-row"
-              onClick={() => { onSelect(tf); onClose(); }}
-            >
-              <span>{TF_LABELS[tf] ?? tf}</span>
-              <button
-                className="tf-star-btn"
-                title={favorites.includes(tf) ? 'Remove from toolbar' : 'Add to toolbar'}
-                onClick={(e) => { e.stopPropagation(); onToggleFavorite(tf); }}
-              >
-                <span className={`tf-star${favorites.includes(tf) ? ' favorited' : ''}`}>★</span>
-              </button>
-            </button>
-          ))}
-        </div>
-      ))}
-
-      {customTimeframes.length > 0 && (
-        <div>
-          <button
-            className="tf-dropdown-group-hdr"
-            onClick={() => toggleGroup('Custom')}
-          >
-            <span>Custom</span>
-            <span className={`tf-dropdown-chevron${collapsed['Custom'] ? ' collapsed' : ''}`}>∧</span>
-          </button>
-          {!collapsed['Custom'] && customTimeframes.map((tf) => (
-            <button
-              key={tf}
-              className="tf-dropdown-row"
-              onClick={() => { onSelect(tf); onClose(); }}
-            >
-              <span>{tf}</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── TopToolbar ─────────────────────────────────────────────────────────────
-
-type Props = {
-  symbol: string;
-  timeframe: string;
-  theme: ChartTheme;
-  customTimeframes: string[];
-  favorites: string[];
-  onSymbolChange: (s: string) => void;
-  onTimeframeChange: (tf: string) => void;
-  onAddCustomTimeframe: (tf: string) => void;
-  onFavoritesChange: (favs: string[]) => void;
-  onAddIndicator: (config: IndicatorConfig) => void;
-  onToggleTheme: () => void;
-  onCopyScreenshot: () => void;
-  onDownloadScreenshot: () => void;
-  onFullscreen: () => void;
-  isFullscreen: boolean;
-  currentLayoutName?: string | undefined;
-  currentLayoutId?: string | undefined;
-  autoSave: boolean;
-  onSaveLayout: (name: string) => Promise<void>;
-  onLoadLayout: (layoutId: string) => Promise<void>;
-  onRenameLayout: (newName: string) => Promise<void>;
-  onCopyLayout: (newName: string) => Promise<void>;
-  onToggleAutoSave: (enabled: boolean) => void;
-  onDeleteLayout: (id: string) => Promise<void>;
-  onOpenLayoutInNewTab: (id: string) => Promise<void>;
-  /** Called to fetch current saved layouts. Passed through to LayoutMenu. */
-  onFetchLayouts: () => Promise<import('../LayoutMenu').LayoutRecord[]>;
-  /** Resolver used by the symbol search dialog. */
-  symbolResolver: ISymbolResolver;
-  /** Only rendered when a managed license is active */
-  showTradeButton?: boolean;
-  tradeDrawerOpen?: boolean;
-  onToggleTradeDrawer?: () => void;
-};
-
-export function TopToolbar({
-  symbol, timeframe, theme, customTimeframes, favorites,
-  onSymbolChange, onTimeframeChange, onAddCustomTimeframe, onFavoritesChange,
-  onAddIndicator,
-  onToggleTheme,
-  onCopyScreenshot, onDownloadScreenshot, onFullscreen, isFullscreen,
-  currentLayoutName, currentLayoutId, autoSave,
-  onSaveLayout, onLoadLayout, onRenameLayout, onCopyLayout, onToggleAutoSave,
-  onDeleteLayout, onOpenLayoutInNewTab, onFetchLayouts, symbolResolver,
-  showTradeButton, tradeDrawerOpen, onToggleTradeDrawer,
-}: Props) {
-  const [tfOpen, setTfOpen] = useState(false);
-  const [symOpen, setSymOpen] = useState(false);
-  const [indOpen, setIndOpen] = useState(false);
-  const [ssOpen, setSsOpen] = useState(false);
-  const ssRef = useRef<HTMLDivElement>(null);
-  const tfRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!ssOpen) return;
-    const handler = (e: MouseEvent) => {
-      if (ssRef.current && !ssRef.current.contains(e.target as Node)) setSsOpen(false);
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, [ssOpen]);
-
-  // Close dropdown on outside click is handled inside TimeframeDropdown itself.
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 8,
-        padding: '6px 12px',
-        background: 'var(--toolbar-bg)',
-        borderRadius: 8,
-        flexShrink: 0,
-      }}
-    >
-      {/* Logo */}
-      <span style={{ fontWeight: 700, letterSpacing: '-0.5px', color: 'var(--accent)' }}>
-        ForgeCharts
-      </span>
-
-      <div className="toolbar-sep" />
-
-      {/* Symbol picker */}
-      <button
-        className="sym-trigger"
-        onClick={() => setSymOpen(true)}
-        title="Search symbols"
-      >
-        <svg viewBox="0 0 14 14" width="12" height="12" stroke="currentColor"
-          fill="none" strokeWidth="1.8" strokeLinecap="round">
-          <circle cx="5.5" cy="5.5" r="4" />
-          <line x1="9" y1="9" x2="13" y2="13" />
-        </svg>
-        <span>{symbol}</span>
-        <svg viewBox="0 0 10 6" width="8" height="6" fill="currentColor">
-          <path d="M0 0l5 6 5-6z" />
-        </svg>
-      </button>
-
-      {symOpen && (
-        <SymbolSearchDialog
-          current={symbol}
-          onSelect={onSymbolChange}
-          onClose={() => setSymOpen(false)}
-          symbolResolver={symbolResolver}
-        />
-      )}
-
-      <div className="toolbar-sep" />
-
-      {/* Timeframe buttons + dropdown */}
-      <div ref={tfRef} style={{ display: 'flex', gap: 2, position: 'relative' }}>
-        {favorites.map((tf) => (
-          <button
-            key={tf}
-            className={tf === timeframe ? 'active' : undefined}
-            onClick={() => onTimeframeChange(tf)}
-          >
-            {tf}
-          </button>
-        ))}
-
-        {/* Extra button for active non-favorited timeframe */}
-        {!favorites.includes(timeframe) && timeframe && (
-          <button className="active" style={{ fontStyle: 'italic' }}>
-            {timeframe}
-          </button>
-        )}
-
-        {/* More timeframes trigger */}
-        <button
-          className={tfOpen ? 'active' : undefined}
-          onClick={() => setTfOpen((o) => !o)}
-          title="More timeframes"
-          style={{ fontSize: 11, padding: '4px 7px' }}
-        >
-          ▾
-        </button>
-
-        {tfOpen && (
-          <TimeframeDropdown
-            timeframe={timeframe}
-            customTimeframes={customTimeframes}
-            favorites={favorites}
-            onSelect={onTimeframeChange}
-            onToggleFavorite={(tf) => {
-              const next = favorites.includes(tf)
-                ? favorites.filter((f) => f !== tf)
-                : [...favorites, tf];
-              onFavoritesChange(next);
-            }}
-            onAddCustom={onAddCustomTimeframe}
-            onClose={() => setTfOpen(false)}
-          />
-        )}
-      </div>
-
-      <div className="toolbar-sep" />
-
-      {/* Indicators button */}
-      <button
-        className={`ind-trigger${indOpen ? ' active' : ''}`}
-        onClick={() => setIndOpen((o) => !o)}
-        title="Indicators"
-      >
-        <svg viewBox="0 0 16 16" width="13" height="13" stroke="currentColor" fill="none" strokeWidth="1.6" strokeLinecap="round">
-          <polyline points="2,12 6,7 9,10 14,4" />
-          <line x1="11" y1="2" x2="14" y2="2" />
-          <line x1="14" y1="2" x2="14" y2="5" />
-        </svg>
-        Indicators
-      </button>
-
-      {indOpen && (
-        <IndicatorsDialog
-          onAdd={(config: IndicatorConfig) => { onAddIndicator(config); }}
-          onClose={() => setIndOpen(false)}
-        />
-      )}
-
-      {/* Layout + theme toggle — pinned to right edge */}
-      <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4 }}>
-        {showTradeButton && (
-          <>
-            <button
-              className={`top-trade-btn${tradeDrawerOpen ? ' active' : ''}`}
-              onClick={onToggleTradeDrawer}
-              title="Trade — Connect your broker"
-              style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 8px', fontSize: 12 }}
-            >
-              <svg viewBox="0 0 16 16" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="1.6">
-                <rect x="1.5" y="3" width="13" height="10" rx="1.5" />
-                <line x1="5" y1="8" x2="11" y2="8" />
-                <line x1="8" y1="5" x2="8" y2="11" />
-              </svg>
-              Trade
-            </button>
-            <div className="toolbar-sep" />
-          </>
-        )}
-        <LayoutMenu
-          currentName={currentLayoutName}
-          currentLayoutId={currentLayoutId}
-          autoSave={autoSave}
-          onFetchLayouts={onFetchLayouts}
-          onSave={onSaveLayout}
-          onLoad={onLoadLayout}
-          onRename={onRenameLayout}
-          onCopy={onCopyLayout}
-          onToggleAutoSave={onToggleAutoSave}
-          onDelete={onDeleteLayout}
-          onOpenInNewTab={onOpenLayoutInNewTab}
-        />
-        <button
-          onClick={onToggleTheme}
-          title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
-          style={{ fontSize: 14, padding: '4px 8px' }}
-        >
-          {theme === 'dark' ? '☀' : '☾'}
-        </button>
-        {/* Screenshot */}
-        <div ref={ssRef} style={{ position: 'relative' }}>
-          <button
-            className={ssOpen ? 'active' : undefined}
-            onClick={() => setSsOpen((o) => !o)}
-            title="Screenshot"
-            style={{ display: 'inline-flex', alignItems: 'center', padding: '4px 7px' }}
-          >
-            <svg viewBox="0 0 16 16" width="14" height="14" stroke="currentColor" fill="none" strokeWidth="1.5">
-              <rect x="2" y="4" width="12" height="9" rx="1" />
-              <circle cx="8" cy="8.5" r="2.5" />
-              <path d="M6 4l1-2h2l1 2" />
-            </svg>
-          </button>
-          {ssOpen && (
-            <div className="ss-dropdown">
-              <button className="ss-dropdown-item" onClick={() => { setSsOpen(false); onCopyScreenshot(); }}>
-                <svg viewBox="0 0 16 16" width="13" height="13" stroke="currentColor" fill="none" strokeWidth="1.5">
-                  <rect x="5" y="5" width="9" height="9" rx="1" />
-                  <path d="M3 11H2a1 1 0 01-1-1V2a1 1 0 011-1h8a1 1 0 011 1v1" />
-                </svg>
-                Copy to Clipboard
-              </button>
-              <button className="ss-dropdown-item" onClick={() => { setSsOpen(false); onDownloadScreenshot(); }}>
-                <svg viewBox="0 0 16 16" width="13" height="13" stroke="currentColor" fill="none" strokeWidth="1.5" strokeLinecap="round">
-                  <line x1="8" y1="2" x2="8" y2="11" />
-                  <polyline points="4,7 8,11 12,7" />
-                  <line x1="2" y1="14" x2="14" y2="14" />
-                </svg>
-                Download PNG
-              </button>
-            </div>
-          )}
-        </div>
-        {/* Fullscreen */}
-        <button
-          onClick={onFullscreen}
-          title={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
-          style={{ display: 'inline-flex', alignItems: 'center', padding: '4px 7px' }}
-        >
-          {isFullscreen ? (
-            <svg viewBox="0 0 16 16" width="14" height="14" stroke="currentColor" fill="none" strokeWidth="1.5">
-              <path d="M6 2v4H2M10 2v4h4M10 14v-4h4M6 14v-4H2" />
-            </svg>
-          ) : (
-            <svg viewBox="0 0 16 16" width="14" height="14" stroke="currentColor" fill="none" strokeWidth="1.5">
-              <path d="M2 6V2h4M10 2h4v4M14 10v4h-4M6 14H2v-4" />
-            </svg>
-          )}
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/renderers/CandlestickRenderer.ts

@@ -1,130 +0,0 @@
-import type { OHLCV, SeriesOptions, Viewport, Rect, ChartColors } from '@forgecharts/types';
-import type { IRenderer } from '../types/IRenderer';
-import { mapRange } from '@forgecharts/utils';
-
-/**
- * CandlestickRenderer — draws OHLCV data as Japanese candlesticks.
- * All rendering is pure Canvas 2D; no third-party dependencies.
- */
-export class CandlestickRenderer implements IRenderer {
-  private readonly _colors: ChartColors;
-
-  constructor(colors: ChartColors) {
-    this._colors = colors;
-  }
-
-  draw(
-    ctx: CanvasRenderingContext2D,
-    bars: readonly OHLCV[],
-    viewport: Viewport,
-    rect: Rect,
-    options: SeriesOptions,
-  ): void {
-    if (options.type !== 'candlestick' && options.type !== 'heikinashi' && options.type !== 'bar') {
-      return;
-    }
-    const plotData = options.type === 'heikinashi' ? this._toHeikinAshi(bars) : bars;
-
-    const upColor = 'upColor' in options ? (options.upColor ?? '#26a641') : '#26a641';
-    const downColor = 'downColor' in options ? (options.downColor ?? '#f85149') : '#f85149';
-    const wickUpColor = 'wickUpColor' in options ? (options.wickUpColor ?? upColor) : upColor;
-    const wickDownColor =
-      'wickDownColor' in options ? (options.wickDownColor ?? downColor) : downColor;
-    const borderVisible = 'borderVisible' in options ? (options.borderVisible ?? false) : false;
-
-    const plotW = rect.width - 70; // price axis reserved
-    const plotH = rect.height - 30; // time axis reserved
-
-    // ── Bar pitch: pixels per candle ─────────────────────────────────────────
-    // IMPORTANT: must be derived from the visible time range + candle interval,
-    // NOT from total bar count.  Using bar count means pitch shrinks as you pan
-    // into history (more bars → narrower candles) and widens as you pan forward
-    // (fewer bars visible → wider candles with gaps), which is wrong.
-
-    // Infer candle interval from the median gap between consecutive bars.
-    let candleInterval = 0;
-    if (plotData.length >= 2) {
-      const deltas: number[] = [];
-      for (let i = 1; i < Math.min(plotData.length, 20); i++) {
-        const d = plotData[i]!.time - plotData[i - 1]!.time;
-        if (d > 0) deltas.push(d);
-      }
-      if (deltas.length > 0) {
-        deltas.sort((a, b) => a - b);
-        candleInterval = deltas[Math.floor(deltas.length / 2)]!;
-      }
-    }
-
-    const visibleSpan = viewport.timeRange.to - viewport.timeRange.from;
-    const pixelsPerSecond = visibleSpan > 0 ? plotW / visibleSpan : 1;
-    const barPitch = candleInterval > 0
-      ? candleInterval * pixelsPerSecond            // correct: interval-based
-      : plotW / Math.max(1, plotData.length);       // fallback for edge cases
-
-    const minBarWidth = 1;
-    const maxBarWidth = 20;
-    const gap = Math.max(1, Math.round(barPitch * 0.15));
-    const barWidth = Math.min(
-      maxBarWidth,
-      Math.max(minBarWidth, Math.floor(barPitch) - gap),
-    );
-    const halfBar = Math.max(0.5, barWidth / 2);
-
-    for (const bar of plotData) {
-      const x = mapRange(
-        bar.time,
-        viewport.timeRange.from,
-        viewport.timeRange.to,
-        0,
-        plotW,
-      );
-
-      if (x < -barWidth || x > plotW + barWidth) continue;
-
-      const yOpen = mapRange(bar.open, viewport.priceRange.max, viewport.priceRange.min, 0, plotH);
-      const yClose = mapRange(bar.close, viewport.priceRange.max, viewport.priceRange.min, 0, plotH);
-      const yHigh = mapRange(bar.high, viewport.priceRange.max, viewport.priceRange.min, 0, plotH);
-      const yLow = mapRange(bar.low, viewport.priceRange.max, viewport.priceRange.min, 0, plotH);
-
-      const bullish = bar.close >= bar.open;
-      const bodyColor = bullish ? upColor : downColor;
-      const bodyTop = Math.min(yOpen, yClose);
-      const bodyBottom = Math.max(yOpen, yClose);
-      const bodyH = Math.max(1, bodyBottom - bodyTop);
-
-      // Wick
-      ctx.beginPath();
-      ctx.strokeStyle = bullish ? wickUpColor : wickDownColor;
-      ctx.lineWidth = 1;
-      ctx.moveTo(x, yHigh);
-      ctx.lineTo(x, bodyTop);
-      ctx.moveTo(x, bodyBottom);
-      ctx.lineTo(x, yLow);
-      ctx.stroke();
-
-      // Body
-      ctx.fillStyle = bodyColor;
-      ctx.fillRect(x - halfBar, bodyTop, barWidth, bodyH);
-
-      if (borderVisible) {
-        ctx.strokeStyle = bodyColor;
-        ctx.lineWidth = 1;
-        ctx.strokeRect(x - halfBar, bodyTop, barWidth, bodyH);
-      }
-    }
-  }
-
-  private _toHeikinAshi(bars: readonly OHLCV[]): OHLCV[] {
-    const result: OHLCV[] = [];
-    for (let i = 0; i < bars.length; i++) {
-      const bar = bars[i]!;
-      const prev = result[i - 1] ?? bar;
-      const haClose = (bar.open + bar.high + bar.low + bar.close) / 4;
-      const haOpen = (prev.open + prev.close) / 2;
-      const haHigh = Math.max(bar.high, haOpen, haClose);
-      const haLow = Math.min(bar.low, haOpen, haClose);
-      result.push({ time: bar.time, open: haOpen, high: haHigh, low: haLow, close: haClose, volume: bar.volume });
-    }
-    return result;
-  }
-}

package/src/renderers/HistogramRenderer.ts

@@ -1,63 +0,0 @@
-import type { OHLCV, SeriesOptions, Viewport, Rect, ChartColors } from '@forgecharts/types';
-import type { IRenderer } from '../types/IRenderer';
-import { mapRange } from '@forgecharts/utils';
-
-/**
- * HistogramRenderer — draws volume or indicator values as vertical bars.
- */
-export class HistogramRenderer implements IRenderer {
-  private readonly _colors: ChartColors;
-
-  constructor(colors: ChartColors) {
-    this._colors = colors;
-  }
-
-  draw(
-    ctx: CanvasRenderingContext2D,
-    bars: readonly OHLCV[],
-    viewport: Viewport,
-    rect: Rect,
-    options: SeriesOptions,
-  ): void {
-    if (options.type !== 'histogram') return;
-
-    const color = options.color ?? '#8b949e';
-    const plotW = rect.width - 70;
-    const plotH = rect.height - 30;
-
-    // Derive pitch from candle interval × pixels-per-second (same fix as CandlestickRenderer)
-    let candleInterval = 0;
-    if (bars.length >= 2) {
-      const deltas: number[] = [];
-      for (let i = 1; i < Math.min(bars.length, 20); i++) {
-        const d = bars[i]!.time - bars[i - 1]!.time;
-        if (d > 0) deltas.push(d);
-      }
-      if (deltas.length > 0) {
-        deltas.sort((a, b) => a - b);
-        candleInterval = deltas[Math.floor(deltas.length / 2)]!;
-      }
-    }
-    const visibleSpan = viewport.timeRange.to - viewport.timeRange.from;
-    const pixelsPerSecond = visibleSpan > 0 ? plotW / visibleSpan : 1;
-    const barPitch = candleInterval > 0
-      ? candleInterval * pixelsPerSecond
-      : plotW / Math.max(1, bars.length);
-    const barWidth = Math.max(1, Math.floor(barPitch) - 1);
-    const halfBar = barWidth / 2;
-    const baseline = plotH; // draws from bottom up
-
-    for (const bar of bars) {
-      const x = mapRange(bar.time, viewport.timeRange.from, viewport.timeRange.to, 0, plotW);
-      if (x < -barWidth || x > plotW + barWidth) continue;
-
-      const y = mapRange(bar.volume, viewport.priceRange.max, viewport.priceRange.min, 0, plotH);
-      const barH = Math.max(1, baseline - y);
-
-      ctx.fillStyle = bar.close >= bar.open ? '#26a641' : '#f85149';
-      ctx.fillRect(x - halfBar, y, barWidth, barH);
-    }
-
-    void color; // unused when per-bar coloring is active
-  }
-}