reverse-engineering · design teardown

TakeProfit — разбор технологии графиков

Полный реверс-инжиниринг чарт-платформы takeprofit.com: архитектура, движок рендеринга, индикаторы и инструменты вживую, дизайн-система и конкурентный анализ. Все страницы самодостаточны.

80индикаторов — живой скрин каждого
25инструментов рисования вживую
931дизайн-токен
WebGL2PixiJS + форк TV Lightweight
📜

Открыть весь ресёрч одной лентой →

Всё на одной длинной странице, без перехода по под-страницам (one-pager).

рекомендуется для чтения подряд
🍎

TakeProfit, каким бы его собрал Apple →

Дизайн-концепт: как Apple переосмыслил бы терминал и сшил мобильный+десктопный интерфейс — принципы, «что бы изменили», мокапы телефон+Mac.

design concept · mobile + desktop
🧱

Layout на НАСТОЯЩЕМ движке (Lumino) →

Не имитация: тот же @lumino/widgets DockPanel + @lumino/dragdrop, что у TakeProfit (забандлен esbuild). Рекурсивное дерево, родной drag-dock overlay, табы, ресайз.

real @lumino engine
🧩

Layout Editing — честная демка докинга →

Реконструкция их dock-manager: Widget Hub + drag-to-dock с magenta-зонами (край=сплит, центр=вкладка), ресайз сплиттерами, табы, закрытие. Снято с живого TakeProfit.

faithful dock-manager
🕹️

Живая демка — DnD Playground →

Мини-терминал: перетаскивай watchlist (reorder + загрузка на график), магнит-точка, drop индикаторов в сабпейн, докинг панели. Работает мышью и пальцем.

interactive sandbox
🖐️

Drag & Drop — глубокий разбор →

Вся механика перетаскивания по коду (Lumino-докинг, объекты графика, магнит) + 4 интерактивных демо + как сделал бы Apple.

deep dive · интерактив

Главное

📊

Каталог: индикаторы + инструменты

80 встроенных индикаторов — живой скриншот рендера КАЖДОГО на DOGE/USD + полный Indie-исходник у 56 + дизайн-чипы. Плюс 44 алгоритма и 25 инструментов рисования вживую.

~8 МБ · флагман
🎨

Дизайн-система

931 токен вытащен вживую: цвета (display-P3), типографика (IBM Plex / Nib Pro), spacing, радиусы, тени, анимации, UX-паттерны. Страница свёрстана на их же токенах.

токены · P3 · motion

Архитектура и разбор

⚙️

Chart Teardown

Движок рендеринга: форк TradingView Lightweight + кастомный PixiJS WebGL2, on-demand rAF, single full-viewport canvas.
🧩

Code Architecture

Бандлы, воркеры, gRPC/protobuf, Lumino DockPanel, SharedWorkers, Indie® DSL, потоки данных.
🗺️

Site / 36 подсистем

Полная карта продукта: все подсистемы и как они связаны.
📋

Board

Краткий обзор всей структуры исследования одним экраном.

UX и продукт

✨

UX (15 разделов)

Как устроена работа с виджетами, анимации, плавность, паттерны взаимодействия.
🎬

UX Walkthrough

Пошаговый прогон интерфейса со скринами живого терминала.
🔍

Architecture Review

Что не так с архитектурой, как выжать перформанс/стабильность: 42 проблемы, роадмап, тикеты.
⚔️

VS TradingView

Конкурентное сравнение: что есть/чего нет, Canvas2D vs WebGL2.

Всё вместе

🧭

Master — всё на одной странице

Сводная мастер-страница: вся структура исследования с навигацией по разделам.

~3 МБ
📄

Complete — PDF

Полный набор исследования одним PDF-файлом (для оффлайна и шаринга).

~18 МБ · PDF

Reverse-engineering / реконструкция в исследовательских целях. Источники: код-бандлы takeprofit.com, официальная документация, живой залогиненный терминал (скриншоты сняты автоматизированно). Цвета показаны как нативный color(display-p3) + sRGB-приближение. Не аффилировано с TakeProfit.