TakeProfit: виджеты, логика, код, дизайн

TakeProfit — браузерный торговый терминал на единой WebGL-сцене. Ни один кусок не «обычный сайт»: график, стакан и пузыри — это GPU/Canvas-движки, а данные идут бинарным Protobuf через воркеры.

Рабочее пространство — мозаика виджетов на Lumino DockPanel (быв. PhosphorJS; подтверждено CSS lm-DockPanel-*, MIME application/vnd.lumino.widget-factory, GOLDEN_RATIO=.618, BoxEngine.adjust). Поверх — кастомный LayoutManager TakeProfit.

Логика работы

• Дерево виджетов = нативный конфиг Lumino: узлы split-area (orientation, sizes — относительные доли, children) и tab-area (widgets[{ID}], currentIndex). Рекурсивные сплиты + табы.
• Drop-зоны (findDropTarget): у краёв — root-зоны по порогам DEFAULT_EDGES={top:12,right:40,bottom:40,left:40}px; внутри виджета центральная треть → вкладка (widget-all), иначе ближайшая грань (left/top/right/bottom).
• Геометрия оверлея: root-направления занимают 0.618 (золотое сечение) высоты/ширины; грань виджета — половину; вкладка — полосу tabBar. Скрытие оверлея — overlay.hide(100) (100 мс).
• Resize сплиттером (moveHandle+BoxEngine.adjust): zero-sum между соседями с учётом min/max — рост слева компенсируется сжатием справа. Дефолтный spacing=4px.
• relativeSizes нормализуются: при нулевой сумме поровну 1/n, иначе доля; новый сплит даёт первому ребёнку sizeHint=1, остальным 0.618.
• Табы: перетаскивание при ≥DRAG_THRESHOLD=5px, отрыв (tear-off) за пределами contentRect±DETACH_THRESHOLD=20px.
• TakeProfit-надстройка: createFakeBottom/Left/RightSideEvent — программный дроп к краям без курсора; helper avoid-zone «прилипает» к нужной стороне.

Код (verbatim)

DEFAULT_EDGES={top:12,right:40,bottom:40,left:40}

case"root-top":...l=h.height*F.GOLDEN_RATIO;break;

moveHandle(e,t){...for(let r of this._sizers)r.size>0&&(r.sizeHint=r.size);j.adjust(this._sizers,e,n),this.parent&&this.parent.update()}

s.DRAG_THRESHOLD=5,s.DETACH_THRESHOLD=20

Хаб «Add Widgets» (правый drawer с превью-карточками и «+»). Полный список типов виджетов, найденный в коде и хабе:

Главное открытие: график — форк TradingView Lightweight Charts (scene-модель, оси, API addCandlestickSeries/coordinateToPrice, crosshair) с рендером, заменённым на кастомный PixiJS v7 / WebGL2. Каждый тип серии — свой GLSL-шейдер; цена/лог/процент считаются прямо в вершинном шейдере. Это и есть «первые WebGL-графики».

Рендереры серий (GPU-инстансинг)

• Свечи — instanced: одна геометрия, instanceCount=баров. Полный инстанс = 17 float (68 байт): time + OHLC + body/border/wick цвета; упрощённый = 9 float. Тело/границы/фитиль — во фрагментном шейдере, субпиксельный AA через subpixelLine(). Ширина uWidth=.6.
• Бары OHLC — stride 9 float; вертикаль + тики open(слева)/close(справа) (uDrawOpen/uDrawBar).
• Гистограмма/объём — instanced, 7 float (28 байт): pos + volume + цвет.
• Линия / Area / Baseline — polyline: расширение сегментов (aPoint1/aPoint2) в толстую линию; area — заливка до базовой.
• Y инвертирован: в буфер пишутся отрицательные OHLC (экранная ось вниз); цвета premultiplied alpha. Минимальная высота дожи гарантируется шейдером.
• Hit-test на GPU: второй проход рендерит серию уникальным uidColor (picking).

Прайс-скейлы и crosshair

• 4 режима скейла прямо в GLSL: SCALE_NORMAL/LOG/PERCENT/INDEXED. Лог: toLog(p)=0.4342944819·log(|p|+off)+… (0.434=log10 e). Процент: 100·(p−base)/base.
• Crosshair magnet: дефолт mode:"magnet", magnetThreshold:16px; weakMagnet притягивает к OHLC только в пределах порога; percent/indexed-скейл отключают snap.

Код (verbatim)

e[r+n++]=i.time,e[r+n++]=-i.open,e[r+n++]=-i.high,e[r+n++]=-i.low,e[r+n++]=-i.close,e[r+n++]=i.color.r/255,...

#define SCALE_NORMAL 0  #define SCALE_LOG 1  #define SCALE_PERCENT 2  #define SCALE_INDEXED 3\nfloat toLog(float p){...return 0.4342944819*log(m+coordOffset)+logicalOffset;}

outColor=isRenderInteractive?vec4(uidColor,1.0)*step(0.0,mask):vColor*mask;

Pan / Zoom (Lightweight Charts interaction)

• Wheel-зум по времени: deltaY/100, учёт deltaMode (×120 page / ×32 line), zoomTime(x,r) якорится к курсору; шаг barSpacing 10%/единицу.
• Wheel-скролл: горизонталь/Shift → scrollChart(-80·t). Wheel по оси цены: zoomPrice, 10%/щелчок.
• Drag-pan: режим navigate только после порога 20px (клик ≠ драг).
• Инерция (kinetic) — по дефолту только touch: KineticAnimation(.2, 7, .997, 15), экспоненциальное затухание на rAF. Анимации видимого диапазона — без изинга (setVisibleRange/fitContent/autoscale мгновенны).
• Лимиты bar spacing: min .5 … 0.5·width, дефолт 6.

Анимации (3 слоя)

• PixiJS Ticker — кадровый таймер рендера; kinetic — инерция пана; Svelte 5 transitions (fly/fade/slide, дефолт 400мс, easing cubicInOut/cubicOut) — UI.
• Константы: DefaultAnimationDuration=400мс (timescale), AnimationDurationMs=1000мс (price/last-price). Spring-физики и cubic-bezier нет. Drag-n-drop — CSS transition: transform Nms ease.
• Корректировка: «ease*»-семьи (easeNumber/easeCapture…) не существует — это были подстроки increase/release.

On-demand рендер-планировщик

• Штатный автотикер Pixi выключен (ticker.autoStart=false; ticker.stop()); свой rAF зовёт ticker.update() только если scenes.some(isNeedRedraw()).
• Dirty-флаги с consume-on-read; в покое — 0 draw-call (замерено), rAF готов на 120Гц. FPS-cap штатный Pixi, по дефолту выкл.

Код (verbatim)

_onMousewheel=e=>{let t=e.deltaX/100,i=-e.deltaY/100;...this.model().zoomTime(n,r)...this.model().scrollChart(-80*t)}

getPosition(e){...return t.position+this._speedPxPerMsec*(Math.pow(this._dumpingCoeff,i)-1)/Math.log(this._dumpingCoeff)}

r.ticker.autoStart=!1,r.ticker.stop();const n=()=>{r?.scenes.some(a=>a.isNeedRedraw())&&r.ticker.update(),requestAnimationFrame(n)}

Собственный Python-подобный язык скриптов. Редактор = CodeMirror 6 + грамматика Lezer-Python (язык name:"indie") + тема oneDark. Компиляция/исполнение — на сервере (gRPC-стрим), на клиенте только парсинг для автокомплита/линтинга. # indie:lang_version = 5.

Стандартная библиотека (каталог символов)

• Объём: 110 типов/классов, 291 метод, 135 полей, 32 функции, 22 декоратора, 18 enum.
• indie.algorithms (~46 примитивов): Sma, Ema, Wma, Vwma, Rma, Macd, Rsi, Bb, Atr, Adx, Cci, Stoch, Sar, Supertrend, Vwap, Donchian, ZigZag, Uo, Tsi, Roc, StdDev, LinReg, Corr, Percentile, Median, Highest/Lowest, PivotHighLow, Mfi, Mfv, NetVolume, CumSum, Change…
• indie.strategies: Trading (place_order/amend_order/cancel_order), PlaceOrderBuilder, Order, Position, Stop, Commission; enum order_side/order_status/….
• indie.plot: Line, Histogram, Columns, Steps, Fill, Background, BarColor, Marker (+ DisplayOptions).
• indie.drawings: Label, Line, Rectangle, Triangle, Circle, Channel, Chart.
• indie.math (20): sin/cos/tan, exp/log/pow/sqrt, cross/cross_over/cross_under, isnan, rgba…
• Декораторы: @indicator, @strategy, @algorithm, @plot/@line/@histogram/@fill/@marker, типизированные параметры @int/@float/@bool/@str.

Исполнение — серверное

• Запрос GetIndicatorStream (ServerStreaming) несёт IndicatorKey{indicator_id, time_frame, indicator_args[], indicator_source_code} + runtime — то есть исходник Indie уходит на бэк.
• Два рантайма: enum Runtime = {R_PYTHON, R_WASM}, выбор RuntimeOrAuto = {ROA_AUTO, ROA_PYTHON, ROA_WASM} — сервер исполняет Indie как Python или скомпилированный WASM (auto). На клиенте этого нет.
• Поток: первый ответ IndicatorSnapshot (вся история), далее инкрементальные IndicatorUpdate. Привязка к графику — SeriesDrawItem (oneof: line/fill/histogram/columns/marker/background/bar_color…) 1:1 с indie.plot.*.
• «Loading…» = ожидание первого snapshot из стрима (async серверный расчёт). Миграция версий — CodeMigratorApi/MigrateCode. Маркетплейс — репозиторий TPI («Explore Indicators», «Community», «My Scripts»).

Код (verbatim)

ut=Mt.define({name:"indie",parser:pn.configure({props:[...IfStatement:i=>/^\s*(else:|elif )/.test(i.textAfter)?...]})})

Es=r=>`# indie:lang_version = 5\nfrom indie import indicator\n\n@indicator('My Indie 1', overlay_main_pane=True)\ndef Main(self):\n    return self.close[0]\n`

makeEnum("...indicator.v2.Runtime",[{no:1,name:"R_PYTHON"},{no:2,name:"R_WASM"}])

Проприетарный слой поверх LWC-модели, рендер геометрии — Pixi v7. Точки хранятся в логических координатах {time, indexOffset, price} (устойчивы к скроллу/зуму), не в пикселях.

Каталог (7 групп тулбара)

• Measures/Positions: Long&Short Position, Date&Price, Date, Price, Volume Profile (FRVP).
• Lines: Line, Arrow, Ray, TrendAngle, HRay, HLine, VLine, CrossLine, Parallel Channel.
• Patterns: XABCD, Cypher, Head&Shoulders, ABCD, Triangle, 3 Drives, Elliott Impulse/Correction.
• Shapes: Circle, Rectangle, Triangle, Ellipse, Curve, Arc.
• Drawings/Brushes: Pen, Highlighter, Path, Polygon.
• Fibonacci: Retracement, Extension, Speed-Resistance Fan, Time Zone.
• Texts: Text, Callout, PriceTag. (Pitchfork/Gann/настоящей brush — нет.)

Магнит, слои, персистентность

• Магнит: 3 режима (normal/weakMagnet/magnet), magnetThreshold:16px, snap к OHLC бара под курсором; snap-to-angle округляет к 45°.
• Object Tree (слои): дерево узлов pane/drawing/folder/mainSymbol/indicator/symbol; папки, DnD (dndDrawings), видимость, блокировка, перенос между пейнами, z-order.
• Персистентность по 4 областям (ответ «per channel?» — да): global / workspace / channel / local; рисунки на индикаторах форсятся в local; при смене sync рисунок мигрирует между сторами.

Код (verbatim)

const mm={time:NaN,indexOffset:0,price:NaN},pt={coordinate:mm,name:"Point"}

getDrawingStoreBySyncSetting(t){return t==="global"?this.#t:t==="workspace"?this.#e:t==="channel"?this.#s:this.#r}

N={PANE:"pane",DRAWING:"drawing",FOLDER:"folder",MAIN_SYMBOL:"mainSymbol",INDICATOR:"indicator",SYMBOL:"symbol"}

Стакан и пузыри — собственный движок «TxOrderBook UI lib» на чистом Canvas 2D (НЕ Pixi): пять наложенных <canvas>-слоёв с DPR-масштабированием под Retina. Данные — gRPC-стрим OrderBookApi/GetOrderBookStream в Web Worker.

Логика

• Стрим в воркере; в main-потоке мёрдж дельт: pushMany=SNAPSHOT (пересортировка bids desc/asks asc), pushOne=delta (insert-sorted, vol===0 ⇒ удалить уровень).
• Агрегация в ценовые корзины (computeGroups): округление к levelStep, кумулятив volSummed, volRatio; пресеты шага x1/x2/x5/x10/x25/x50/x100.
• 5 слоёв-канвасов (background/clusters/impulses/orders/global), грязный рендер по битовой маске; resize: canvas.width=w·devicePixelRatio; ctx.scale(dpr,dpr).
• Order Flow Bubbles (внутр. «impulses»): сделки из trade-стрима, склейка подряд идущих одной стороны при разрыве ≤tradeAggregation=300мс; размер пузыря — lerp(halfRow, 3·halfRow) по нормировке объёма на 95-й перцентиль.
• Режимы: tradeView: bar|bubble (дефолт bar), mode: classic|pro, footprint-кластеры (clusterTimeframe дефолт 5 мин), окраска delta зелёный/красный.
• Цвета: buy #1D9169, sell #E84144; пузырь = два ctx.arc() (outline+fill) + опц. градиентный «хвост».

Код (verbatim)

getOrderBookStream:{name:"GetOrderBookStream",I:sE,O:oE,kind:at.ServerStreaming}

i.arc(b,d,m+u,0,2*Math.PI),i.fill(),i.arc(b,d,m,0,2*Math.PI),i.fill()

computeRawR(t,e){const[s]=ri(t,[.95]);return{rRaw:s?De(e/s):1}}

Нативный тикет = Connect-RPC TradingApi (UI на Svelte 5). Брокеры Lime / J2T / Ilotcos — сторонние iframe (бэкенд Finam; J2T через MT5) с протоколом postMessage.

Логика

• Типы: MARKET/LIMIT (+ stop как stop.triggerPrice поверх). TIF: GTC/IOC/FOK.
• TP/SL (каждый market|limit, triggerBy: LAST_PRICE|MARK_PRICE), маржа cross/isolated/portfolio, позиция ONE_WAY/HEDGE, reduceOnly, идемпотентность crypto.randomUUID().
• Размер/риск: quantity, % balance, % buying power, pnl; risk-based entry (SL-цена задаёт объём). Балансы из GetPlaceOrderDataStream.
• Комиссии (дефолты Bybit): maker 0.02%, taker 0.055%. Адаптеры: bybit (live), bybit_testnet (paper).
• Брокер-iframe мост: терминал ↔ виджет через postMessage (requestInitData/requestSecurityChange/widgetUpdate/channelUpdate), синхрон инструмента через channel; URL вида lime.widget.takeprofit.com/order/index.html.

Код (verbatim)

const a={idempotencyToken:crypto.randomUUID(),order:{order:{case:"baseOrder",value:{side:Zi[i.direction],quantity:Ge(i.quantity),orderType:$i(i),stop:ea(i),takeProfit:Xt(...),stopLoss:Xt(...),reduceOnly:i.reduceOnly}}}};await Ji.placeOrder(a)

takerFeeRate:55e-5,makerFeeRate:2e-4

LimeOrder:{production:"https://lime.widget.takeprofit.com/order/index.html",nonProduction:".../takeprofit-widgets-lime.finam.dev/order/"}

Connect-Web (@connectrpc/connect) поверх protobuf-es (@bufbuild/protobuf), два протокола: gRPC-web (application/grpc-web+proto) и Connect (application/connect+proto). Стриминг — Connect server-streaming по HTTP (не WebSocket), мультиплекс в SharedWorker + Comlink.

Полный каталог сервисов (19+1, ★ = server-streaming)

Транспорт, эндпоинты, авторизация

• Два инстанса: marketdata (backend.takeprofit.com, путь /market-data/) и trading (trading.takeprofit.com, /market-data-trading/); env-карты local/dev/stage/prod.
• Auth-интерсептор: перед вызовом checkRefresh(), затем токен в заголовок — для trading authorization: Bearer <accessToken>, для marketdata сырой accessToken. 401 → авто-refresh.
• Свечи на график идут НЕ как OHLCV-сервис, а через ControllerApi/GetIndicatorStream (основная серия = «индикатор»); лёгкий Bar{time,o,h,l,c,volume} (double). Candle-сообщение — decimal-обёртки + buying/selling split + tick_count.

Стриминг-пайплайн (SharedWorker)

• Один SharedWorker (фоллбэк dedicated Worker) держит все Connect-стримы, шарит между вкладками через MessagePort; RPC к воркеру — Comlink. Дедуп локальных стримов по ключу параметров.
• Orderbook: snapshot/delta merge (bids desc/asks asc, vol=0⇒remove). Свечи: SERIES_LAST (live-бар) vs SERIES_HISTORY (бэкфилл) по времени. Trades: ring-buffer cap 1000.
• GC: через 30с после отписки последнего подписчика воркеру шлётся stopStream. Keepalive — на уровне fetch-стрима; завершение по EndStreamResponse.

Код (verbatim)

typeName:"takeprofit.marketdata.external.quote.v1.QuoteApi",methods:{quoteStream:{name:"QuoteStream",I:dee,O:hee,kind:qi.ServerStreaming},listQuotes:{...,kind:qi.Unary}}

m?t=new SharedWorker(e,r):t=new Worker(e,r);...port.postMessage({type:"REGISTER",clientID:this.#s})

pushOne=r=>{...e.bids=n(e.bids,r.bids,"desc"),e.asks=n(e.asks,r.asks,"asc"),e.updateType="UPDATE"...};pushMany=r=>{...e.updateType="SNAPSHOT"...}

Stytch (self-hosted на api.stytch.takeprofit.com) для OAuth-старта + самописный бэкенд /api/auth/*. HTTP-клиент — ky.

• Stytch public token (prod): public-token-live-7c58…e28f; dev на api.stytch.com.
• Проводной только Google OAuth (popup на …/v1/public/oauth/google/start). Apple/SMS/OTP/magic-link — отсутствуют. Отдельный Bybit OAuth — для привязки биржи, не вход.
• Основной метод — email/password (+ setPassword/reset/resend, MFA через /api/auth/mfa/verify).
• Сессия — HTTP-only cookie token (все вызовы credentials:"include"), не localStorage. Refresh: GET /api/auth/token → короткоживущий accessToken → в gRPC/Connect-заголовки. 401 → авто-refresh+повтор.
• localStorage хранит только хинты (last_email/last_username/last_signin_method). Реферралка — window.Rewardful.

const Tt={prod:{host:"https://api.stytch.takeprofit.com",token:"public-token-live-7c583685-…-1eec86c7e28f"}}

const r=await ci.get("api/auth/token",{credentials:"include",headers:t?{cookie:`token=${t}`}:void 0});return{result:i.data.accessToken}

#t=async(e,n,r)=>{if([401].includes(r.status))return await this.requestRefresh(),this.transport(e,n)}

Раскладка и настройки — на сервере (REST /api/settings через ky), НЕ в браузере. localStorage/IndexedDB для layout не используются.

• Корень состояния агрегирует workspaces/watchlists/screeners/financials/indicators/featureFlags/tradingSettings/drawings/settings/search — у каждого свой toJSON(); снимок несёт userID + version.
• Автосейв реактивный: любое изменение → throttled-save (lodash, не чаще 1/5с) + flush на beforeunload.
• Бэкенд = 7 ky-сервисов на prefixUrl:"/api/settings" (retry:3): rootSettings, workspaces, watchlist, settings, financials, search, indicator. Контракт: POST/PUT/GET/DELETE /api/settings[/{{ID}}]?settingType=…; dirty-check перед отправкой.
• Версии схемы для миграций (DASHBOARD_CTX:4, DRAWING_MANAGER:11, CHART_DATA:10…). Dev-инструмент window.injectSave() (localStorage-шим, не прод).
• localStorage в проде — только алерты/onboarding/debug; IndexedDB — только эмодзи-пикер (openDB=0 для прочего).

saveDataTreeThrottled=NL(this.saveDataTree,FBe) // FBe=5000

t=hh.extend({prefixUrl:"/api/settings",retry:3});this.#e={rootSettings:new SettingsObjectService(...),workspaces:new SettingsArrayService(...),...}

Собственная токен-система поверх Tailwind CSS (префикс tw-, 711 утилит). Темы = статический CSS ([data-theme=slug]) для пресетов + рантайм-инъекция CSS-переменных для пользовательских.

• Два канала на токен: --colors-X = hex и --colors-var-X = «R G B» (для alpha через rgb(var(--colors-var-X)/a)).
• 7 «семян» темы (background/text/rise/fall/buy/sell/accent) → деривация в десятки токенов (hover/active осветлением-затемнением по lightness).
• 13 именованных тем: Arctic, Astro Trader, Dawn, Day One, Gold Rush, Platinum, Profit Cowboy, Red Dragon, Sahara, Smoothie, VHS Noir, Wen Moon, Wonderland + system/dark/light. System через matchMedia(prefers-color-scheme).
• Чарт-палитра: 20 именованных цветов --colors-chart-{{rise,fall,red,green,blue,aqua,lime,orange,purple,pink,fuchsia,teal,navy,olive,maroon,brown,grey,silver,black,white}} + фикс-массив 49 hex для дискретных серий. Свечи читают токены напрямую (upColor:"--colors-chart-rise").
• User-темы: user-theme-${{uuid}}, экспорт window.exportTheme, ключ takeprofit.theme.css-variables.

#d(r){...document.documentElement.style.setProperty(`--colors-${s}`,r[s]),document.documentElement.style.setProperty(`--colors-var-${s}`,`${n.red} ${n.green} ${n.blue}`)}

#i(r){document.documentElement.setAttribute("data-theme",r);...meta[theme-color]=…}

• Клиентского WASM нет (подтверждено по всему графу: 0 .wasm). «WASM на C/C++» из маркетинга = серверный рантайм Indie (R_WASM) либо преувеличение.
• Точные версии библиотек (Lumino, Pixi, LWC, Connect, Tailwind) — не извлекаются (version-строки вырезаны минификатором); идентификация по сигнатурам API/CSS/конфигов.
• Воркер-файлы стримов (*.worker-*.js) на диск не скачаны — точный backoff-алгоритм reconnect и worker-side keepalive не вскрыты (клиентская часть стейт-машины — да).
• Точные hex именованных тем (Gold Rush / Wen Moon) — в JS их нет, они в статическом CSS [data-theme=…] (CSS-файлы не качались).
• Эндпоинт сохранения workspace = /api/settings подтверждён; серверная технология за ним — неопределима по бандлу. Обмен Stytch-токен ↔ cookie происходит на сервере (callback-парсер не на клиенте).
• DnD-редок виджета визуально не сняли (Lumino v2 на Pointer Events + setPointerCapture, синтетика Playwright мышью не триггерит) — но механика вытянута из кода.