Разработка визуализации order flow

Разработка Footprint Chart

Footprint Chart — это свеча с внутренней структурой: на каждом ценовом уровне показано сколько контрактов было куплено и продано. Это не просто OHLCV — это delta анализ, который показывает реальное взаимодействие покупателей и продавцов внутри каждой свечи.

Что такое Footprint и зачем он нужен

Обычная свеча показывает: открылось на $42,000, закрылось на $42,150, объём 120 BTC. Footprint показывает что происходило внутри: на уровне $42,050 было 8.5 BTC покупок и 2.1 BTC продаж, на $42,100 — 3.2 покупок и 12.4 продаж. Это "footprint" — след рынка.

Ключевые концепции:

• Ask volume: агрессивные покупки (trades executed at ask price)
• Bid volume: агрессивные продажи (trades executed at bid price)
• Delta: ask volume - bid volume. Положительный — dominance покупателей
• Imbalance: уровень, где один тип значительно превалирует (обычно 300%+ threshold)
• Point of Control (POC): ценовой уровень с максимальным объёмом внутри свечи

Сбор данных: классификация сделок

Footprint строится из tick data — каждой отдельной сделки. Нужно классифицировать каждую сделку как buy (aggressive) или sell (aggressive):

type Trade struct {
    Price     decimal.Decimal
    Quantity  decimal.Decimal
    Timestamp int64
    IsBuy     bool  // true = aggressive buy (executed at ask)
}

// Классификация по tick rule или quote rule
type TradeClassifier struct {
    lastPrice decimal.Decimal
    lastBid   decimal.Decimal
    lastAsk   decimal.Decimal
}

// Quote rule: более точный метод (требует bid/ask в момент сделки)
func (tc *TradeClassifier) ClassifyByQuote(trade RawTrade) bool {
    midPrice := tc.lastBid.Add(tc.lastAsk).Div(decimal.New(2, 0))
    return trade.Price.GreaterThanOrEqual(midPrice) // >= mid = buy
}

// Tick rule: fallback когда bid/ask недоступны
func (tc *TradeClassifier) ClassifyByTick(trade RawTrade) bool {
    if trade.Price.GreaterThan(tc.lastPrice) {
        return true  // uptick = buy
    }
    if trade.Price.LessThan(tc.lastPrice) {
        return false // downtick = sell
    }
    // Zero tick — используем предыдущую классификацию
    return tc.lastWasBuy
}

Biржи часто предоставляют направление сделки напрямую в trade data. Binance: поле isBuyerMaker — если true, то maker был buyer (значит taker был seller). Логика инвертированная:

# Binance aggTrades: isBuyerMaker=True → maker на bid стороне → агрессивная ПРОДАЖА
# isBuyerMaker=False → maker на ask стороне → агрессивная ПОКУПКА
def classify_binance_trade(trade: dict) -> bool:
    return not trade['isBuyerMaker']  # True = aggressive buy

Агрегация Footprint свечи

type FootprintLevel struct {
    Price     decimal.Decimal
    BidVol    decimal.Decimal  // агрессивные продажи
    AskVol    decimal.Decimal  // агрессивные покупки
    Delta     decimal.Decimal  // AskVol - BidVol
}

type FootprintCandle struct {
    Timestamp  int64
    Open       decimal.Decimal
    High       decimal.Decimal
    Low        decimal.Decimal
    Close      decimal.Decimal
    Volume     decimal.Decimal
    Delta      decimal.Decimal  // суммарная delta свечи
    Levels     map[string]*FootprintLevel  // price -> level data
    POC        decimal.Decimal  // уровень с макс. объёмом
    BuyPOC     decimal.Decimal  // уровень с макс. ask volume
    SellPOC    decimal.Decimal  // уровень с макс. bid volume
}

type FootprintBuilder struct {
    tickSize  decimal.Decimal  // шаг цены для группировки (например 10 USD для BTC)
    candles   map[int64]*FootprintCandle  // timestamp -> candle
    mu        sync.Mutex
}

func (fb *FootprintBuilder) AddTrade(trade Trade, timeframe time.Duration) {
    fb.mu.Lock()
    defer fb.mu.Unlock()
    
    // Вычисляем bucket для временного таймфрейма
    bucket := (trade.Timestamp / int64(timeframe)) * int64(timeframe)
    
    candle := fb.getOrCreateCandle(bucket, trade.Price)
    
    // Группируем цену по тик-размеру
    priceBucket := trade.Price.Div(fb.tickSize).Floor().Mul(fb.tickSize)
    
    level := fb.getOrCreateLevel(candle, priceBucket)
    
    if trade.IsBuy {
        level.AskVol = level.AskVol.Add(trade.Quantity)
    } else {
        level.BidVol = level.BidVol.Add(trade.Quantity)
    }
    level.Delta = level.AskVol.Sub(level.BidVol)
    
    // Обновляем OHLCV
    candle.Volume = candle.Volume.Add(trade.Quantity)
    candle.Delta = candle.Delta.Add(trade.IsBuyDelta(trade.Quantity))
    
    if trade.Price.GreaterThan(candle.High) { candle.High = trade.Price }
    if trade.Price.LessThan(candle.Low)     { candle.Low  = trade.Price }
    candle.Close = trade.Price
    
    // Обновляем POC
    candle.POC = fb.findPOC(candle)
}

func (fb *FootprintBuilder) findPOC(candle *FootprintCandle) decimal.Decimal {
    var maxVol decimal.Decimal
    var poc decimal.Decimal
    for price, level := range candle.Levels {
        total := level.AskVol.Add(level.BidVol)
        if total.GreaterThan(maxVol) {
            maxVol = total
            poc, _ = decimal.NewFromString(price)
        }
    }
    return poc
}

Обнаружение имбалансов

Imbalance — ключевой паттерн footprint. Уровень с ask volume в 3× больше bid volume — стеклянный пол (покупатели доминировали). Уровень с bid в 3× больше ask — стеклянный потолок.

type ImbalanceDetector struct {
    threshold decimal.Decimal  // обычно 300% (3x)
}

type Imbalance struct {
    Price     decimal.Decimal
    Type      string          // "bid" или "ask"
    Ratio     decimal.Decimal
    Volume    decimal.Decimal
}

func (id *ImbalanceDetector) FindImbalances(candle *FootprintCandle) []Imbalance {
    var imbalances []Imbalance
    
    sortedLevels := candle.SortedLevels() // по цене ascending
    
    for i, level := range sortedLevels {
        if i == 0 { continue }
        below := sortedLevels[i-1]
        
        // Сравниваем ask текущего уровня с bid уровня ниже
        // "Stacked imbalance" — несколько подряд
        if level.AskVol.IsPositive() && below.BidVol.IsPositive() {
            ratio := level.AskVol.Div(below.BidVol).Mul(decimal.New(100, 0))
            if ratio.GreaterThan(id.threshold) {
                imbalances = append(imbalances, Imbalance{
                    Price:  level.Price,
                    Type:   "ask",
                    Ratio:  ratio,
                    Volume: level.AskVol,
                })
            }
        }
    }
    
    return imbalances
}

Frontend рендеринг Footprint

Footprint сложнее обычной свечи: каждый ценовой уровень содержит числа. На 1-минутной свече с тиком $10 для BTC это может быть 20–30 уровней.

Canvas rendering

HTML Canvas — единственный вариант для производительного рендеринга сотен свечей с детализацией.

class FootprintRenderer {
  private canvas: HTMLCanvasElement;
  private ctx: CanvasRenderingContext2D;
  
  renderCandle(candle: FootprintCandle, x: number, candleWidth: number, 
               priceToY: (price: number) => number) {
    const ctx = this.ctx;
    const levels = candle.getSortedLevels();
    const levelHeight = Math.abs(priceToY(levels[0].price) - priceToY(levels[1]?.price || levels[0].price - candle.tickSize));
    
    for (const level of levels) {
      const y = priceToY(level.price);
      
      // Фоновая плашка — объём визуализируется шириной
      const maxLevelVol = candle.maxLevelVolume;
      const askWidth = (level.askVol / maxLevelVol) * (candleWidth * 0.45);
      const bidWidth = (level.bidVol / maxLevelVol) * (candleWidth * 0.45);
      
      // Ask side (правая)
      ctx.fillStyle = 'rgba(0, 177, 94, 0.3)';
      ctx.fillRect(x + candleWidth/2, y, askWidth, levelHeight - 1);
      
      // Bid side (левая)
      ctx.fillStyle = 'rgba(232, 66, 66, 0.3)';
      ctx.fillRect(x + candleWidth/2 - bidWidth, y, bidWidth, levelHeight - 1);
      
      // POC выделяем
      if (level.price === candle.poc) {
        ctx.strokeStyle = '#FFD700';
        ctx.lineWidth = 1;
        ctx.strokeRect(x, y, candleWidth, levelHeight - 1);
      }
      
      // Числа: bid × ask
      if (levelHeight > 12) {  // рисуем текст только если есть место
        ctx.fillStyle = '#6b7087';
        ctx.font = `${Math.min(levelHeight - 2, 10)}px JetBrains Mono`;
        ctx.textAlign = 'left';
        ctx.fillText(formatVol(level.bidVol), x + 2, y + levelHeight - 3);
        ctx.textAlign = 'right';
        ctx.fillText(formatVol(level.askVol), x + candleWidth - 2, y + levelHeight - 3);
      }
      
      // Imbalance подсветка
      if (level.imbalanceType === 'ask') {
        ctx.fillStyle = 'rgba(0, 177, 94, 0.8)';
        ctx.fillRect(x, y, 3, levelHeight);
      } else if (level.imbalanceType === 'bid') {
        ctx.fillStyle = 'rgba(232, 66, 66, 0.8)';
        ctx.fillRect(x, y, 3, levelHeight);
      }
    }
  }
  
  renderDeltaBar(candle: FootprintCandle, x: number, candleWidth: number, baseY: number) {
    const ctx = this.ctx;
    const delta = candle.delta;
    const maxDelta = this.maxAbsDelta;
    const barWidth = Math.abs(delta / maxDelta) * (candleWidth / 2);
    const color = delta >= 0 ? '#00B15E' : '#E84242';
    
    ctx.fillStyle = color;
    if (delta >= 0) {
      ctx.fillRect(x + candleWidth / 2, baseY, barWidth, 8);
    } else {
      ctx.fillRect(x + candleWidth / 2 - barWidth, baseY, barWidth, 8);
    }
  }
}

Delta профиль свечи

Cumulative delta по внутренним барам свечи показывает ход борьбы покупателей и продавцов:

function calculateCumulativeDelta(trades: Trade[], bucketSize: number): CumDeltaPoint[] {
  const points: CumDeltaPoint[] = [];
  let cumDelta = 0;
  
  for (const trade of trades) {
    cumDelta += trade.isBuy ? trade.quantity : -trade.quantity;
    points.push({ ts: trade.timestamp, price: trade.price, cumDelta });
  }
  
  return points;
}

Хранение Footprint данных

Footprint данные намного объёмнее обычных OHLCV. Для BTC/USDT 1m с тиком $10 — ~15 уровней на свечу. За день = 1440 свечей × 15 уровней × 2 значения = 43,200 записей в день только для одного таймфрейма.

Оптимальное хранение — TimescaleDB с сжатием:

CREATE TABLE footprint_levels (
    candle_ts   TIMESTAMPTZ NOT NULL,
    pair_id     SMALLINT NOT NULL,
    timeframe   VARCHAR(10) NOT NULL,
    price_level NUMERIC(18,2) NOT NULL,
    bid_vol     NUMERIC(18,8) NOT NULL,
    ask_vol     NUMERIC(18,8) NOT NULL,
    PRIMARY KEY (candle_ts, pair_id, timeframe, price_level)
);

SELECT create_hypertable('footprint_levels', 'candle_ts');
SELECT add_compression_policy('footprint_levels', INTERVAL '1 day');

Сжатие TimescaleDB уменьшает размер данных в 5–20× — критично для footprint объёмов.

Типы Footprint визуализаций

Сроки разработки

• Классификатор сделок + footprint builder: 2–3 недели
• TimescaleDB хранение + агрегация: 2–3 недели
• Canvas renderer для footprint: 4–6 недель
• Imbalance detection + POC: 1–2 недели
• WebSocket streaming + real-time: 2–3 недели
• UI controls (timeframe, tick size, display mode): 2–3 недели

Полный Footprint Chart с историческими данными и real-time обновлениями: 3–4 месяца.