Аудит и миграция legacy

Аналитические дашборды переписали на React

Крупная RPA-платформа · 2025–2026 · React + Drupal + PostgreSQL

Суть: Заменили 157 устаревших Drupal-параграфов на 41 React-компонент с JSONB-хранением. Бизнес-пользователи получили drag-and-drop дашборды без участия разработчика.

Контекст и проблема

Крупная платформа автоматизации (RPA) столкнулась с проблемой: бизнес-пользователи нуждались в гибкой визуальной аналитике, но существующее решение было построено на устаревшей архитектуре Drupal Paragraphs. Каждый дашборд был набором параграфов в Drupal-ноде, связанных со сложной системой формул.

157 параграфов в 3 legacy-дашбордах — жёсткая связка данных и представления
75+ формул размазаны по параграфам, нет единого источника истины
75% дашбордов требовали участия разработчика для любого изменения
Отсутствие drag-and-drop — любое перемещение виджета = задача в бэклог
Невозможность для бизнес-пользователя самостоятельно настроить аналитику

Техническое решение

Архитектура построена на принципе разделения данных и представления. Бэкенд возвращает только сырые числа, клиент форматирует.

Компонент	Технология	Назначение
Frontend	React 19, TypeScript (strict), Vite 8	UI дашбордов
Grid layout	React-Grid-Layout	Drag-and-drop виджетов (как в Grafana)
Графики	Chart.js + react-chartjs-2	9 типов графиков
Хранение	PostgreSQL JSONB	Гибкое хранение без миграций
Формулы	ExpressionLanguage (DSL)	Вычисления на сервере
Переводы	i18next + key-based JSON	Интернационализация
Backend	PHP 8.2, Drupal 10	API + бизнес-логика

Ключевые архитектурные решения

Raw Data Principle — бэкенд возвращает только сырые числа, клиент форматирует. data.values никогда не сохраняются в БД.
JSONB-хранение — один столбец data JSONB NOT NULL вместо 20+ Drupal-полей. Схема расширяется без миграций.
SourceKey иерархия — generic и specific дашборды. Один шаблон на 100+ сущностей.
Widget Plugin System — Drupal-плагины с единым контрактом через WidgetPluginInterface.
9 Chart-трансформеров в цепочке ответственности (Chain of Responsibility), конвертирующие любые DSL-данные в Chart.js-формат.

Масштаб реализации

React-компонентов

TypeScript-типов

Тестов (Vitest)

Строк кода (React)

около 25 тысяч

PHP-файлов backend

API-эндпоинтов

Типов графиков (Chart.js)

Widget-плагинов

Результаты

Метрика	До (Legacy)	После (V2)	Эффект
Связь данных и UI	Жёсткая (Paragraphs)	Разделение (data/config)	Чистая архитектура
Изменение дашборда	Задача разработчику	Drag-and-drop бизнес-пользователем	~90% быстрее
Добавление индикатора	SQL + формула	Выбор из available-fields	~95% быстрее
Хранение схемы	Drupal Entity (20+ полей)	1 столбец JSONB	~80% меньше кода
Расширяемость	Новая entity type	Новый WidgetPlugin	Дни → часы

«Мы заменили 157 параграфов и 75+ формул на 41 React-компонент в одной JSONB-таблице. Время добавления нового индикатора сократилось с 2 дней до 15 минут.»

Стек технологий

React 19 TypeScript Vite 8 Chart.js react-chartjs-2 React-Grid-Layout i18next PHP 8.2 Drupal 10 PostgreSQL JSONB ExpressionLanguage PHPUnit Vitest Playwright Docker

Хотите обсудить похожую задачу? Свяжитесь с нами →