Живой разбор · в продукте

TakeProfit: UX графиков, индикаторов и виджетов

Зашёл в реальный терминал (демо-workspace без логина), прокликал график, индикаторы и виджеты, замерил рендеринг. Всё ниже — живые скриншоты и измерения.

📅 12 июня 2026 🖥 Playwright в живом терминале 📐 viewport 1680×1020 🎯 символ META · NASDAQ · 1h
measured замерено вживуюgated под триалом/логином
01

Как я попал внутрь

Терминал формально за авторизацией (Stytch). Но /platform грузит полноценный демо-workspace, а окно логина — просто оверлей: закрывается по Esc, и под ним живой продукт с реальными котировками (BTC 63 649, ETH, TSLA, AAPL, META…). Всё, что ниже, снято в этом режиме. Рисование (drawing tools) и часть фич — под кнопкой «Start Free Trial».

Демо-workspace сразу после Esc: 5 виджетов бок о бок — Indie-редактор, Watchlist, ордер-панель, График, Screener
Демо-workspace сразу после Esc: 5 виджетов бок о бок — Indie-редактор, Watchlist, ордер-панель, График, Screener
02

Workspace и виджеты measured

Рабочее пространство — мозаика виджетов с докингом. Под капотом — Lumino DockPanel (тот же движок тайлинга, что в JupyterLab): в DOM нашлись lm-DockPanel-handle — это перетаскиваемые разделители между виджетами. Каждый виджет — <section class="widget"> поверх единого canvas.

Добавление виджетов — через Widget Hub (кнопка «Add Widgets»): правый drawer с карточками-превью и кнопкой «+» на каждой.

Widget Hub: карточки с живыми превью — Chart, Watchlist, Indie® Code Editor, Strategy/Backtesting, Market Depth…
Widget Hub: карточки с живыми превью — Chart, Watchlist, Indie® Code Editor, Strategy/Backtesting, Market Depth…

Полный список типов виджетов, найденный в хабе:

03

График: тулбар и панель measured

Хедер графика (слева направо): символ + биржа → таймфрейм → типы графика → ƒ Add IndicatorsVS Compare Symbol → Alert (⌥A) → Object Tree (слои) → undo/redo. Слева инлайн-кнопки Buy/Sell и живой OHLC-ридаут. Справа — ценовая шкала с last-price пилюлей, снизу — ось времени и объёмы.

График META 1h на весь экран: свечи, объёмы, ценовая шкала, last-price линия 568.39, полный тулбар сверху
График META 1h на весь экран: свечи, объёмы, ценовая шкала, last-price линия 568.39, полный тулбар сверху
04

Crosshair и ридаут measured

При наведении — перекрестие с ценовой пилюлей на правой шкале и временной пилюлей на оси (напр. «04 Jun'26, 15:30»), плюс OHLC обновляется в хедере. Классический TradingView-style, отрисовка моментальная.

Crosshair: пунктирное перекрестие, ценовой пилл 613.00, временной пилл на оси, OHLC в шапке, объёмы снизу
Crosshair: пунктирное перекрестие, ценовой пилл 613.00, временной пилл на оси, OHLC в шапке, объёмы снизу
05

Таймфреймы: тики/секунды/кастом measured

Меню интервалов — их фишка. Есть Ticks (1/5/10/25 тиков), Seconds (1/5/10/15/45 сек), Minutes, Hours, Days, и блок CUSTOM TIMEFRAME — любой интервал на лету. Свечи строятся из сырых котировок, поэтому пресеты не ограничивают.

Меню «Change Timeframe»: разделы Ticks, Seconds, Minutes + CUSTOM TIMEFRAME внизу
Меню «Change Timeframe»: разделы Ticks, Seconds, Minutes + CUSTOM TIMEFRAME внизу
06

Типы графика measured

Основные типы: Candles · Line · Bars. Дополнительные стили серий (area, baseline, histogram) используются индикаторами и сравнением символов.

Меню «Change Chart Types»: Candles / Line / Bars
Меню «Change Chart Types»: Candles / Line / Bars
07

Индикаторы measured

Кнопка ƒ открывает пикер: поиск «Find scripts…», фильтр Built-in, большая библиотека (Accumulation/Distribution, ALMA, Aroon, ADX, ATR, Awesome Oscillator, Bollinger Bands, RSI…). Внизу Explore — маркетплейс комьюнити-индикаторов, и + — создать свой на Indie.

Пикер индикаторов: поиск, фильтр Built-in, сетка карточек, Explore (маркетплейс) и + (создать)
Пикер индикаторов: поиск, фильтр Built-in, сетка карточек, Explore (маркетплейс) и + (создать)

Добавил Bollinger Bands (оверлей) и RSI (отдельный пейн). Индикатор считается асинхронно (мелькает «Loading…» — вычисление идёт через бэкенд-пайплайн свечей), затем рисуется на GPU. Результат — мультипейновый layout: цена+BB / объёмы / RSI.

Bollinger Bands вблизи: синие полосы, розовая средняя SMA, полупрозрачная заливка, легенда «BB (20, Close, 2, 0)» с тоглом видимости
Bollinger Bands вблизи: синие полосы, розовая средняя SMA, полупрозрачная заливка, легенда «BB (20, Close, 2, 0)» с тоглом видимости
Мультипейн: цена+BB сверху, объёмы в середине, RSI (осциллятор) в отдельном нижнем пейне
Мультипейн: цена+BB сверху, объёмы в середине, RSI (осциллятор) в отдельном нижнем пейне
08

Плавность и анимации measured

Главное измерение. Весь workspace рисуется в один WebGL2-canvas на весь вьюпорт (а не по canvas на виджет) — единый GPU-рендер-луп, как в игровом движке.

1
canvas на весь экран (1680×1020)
120
Гц rAF (дисплей 120Hz)
0
draw-call в покое (on-demand)
WebGL2
ANGLE Metal · Apple GPU

On-demand рендеринг. Когда ничего не меняется — 0 draw-call'ов: движок не крутит впустую кадры, перерисовывает только при изменении (тик данных, движение crosshair, пан, зум). При этом rAF готов выдавать 120 fps. Это и есть «плавно и без фризов» + экономия батареи.

Панорамирование (drag) — живое: график прокручивается во времени, Bollinger Bands пересчитываются и перерисовываются для нового диапазона в реальном времени. До/после одного жеста:

До пана: текущий видимый диапазон META с BB
До пана: текущий видимый диапазон META с BB
После пана влево: показаны более поздние свечи, BB перестроились под новый диапазон
После пана влево: показаны более поздние свечи, BB перестроились под новый диапазон
09

Resize и перекомпоновка виджетов measured

Перетаскивание разделителя DockPanel меняет размеры виджетов вживую: потянул границу между Графиком и Screener — чарт расширился 362 → 618 px, скринер сжался 566 → 310 px, и график мгновенно перерисовался под новую ширину.

До: чарт-виджет 362px, скринер 566px
До: чарт-виджет 362px, скринер 566px
После перетаскивания сплиттера: чарт 618px, скринер 310px — live-перелейаут
После перетаскивания сплиттера: чарт 618px, скринер 310px — live-перелейаут
10

Как это сделано (свод) measured

⚠️

Что под триалом / не снято: drawing tools (рисование) в демо-режиме не раскрылись — вероятно, под «Start Free Trial». Зум колесом синтетическими событиями не триггерился (кастомный обработчик), но drag-пан подтвердил живую интерактивность. FPS под нагрузкой точно не измерить из-за кэширования GL-методов движком — приведены rAF-частота и on-demand поведение.