Увеличивайте, уменьшайте, раздвигайте, добавляйте, в общем делайте то, что хотите.

От ценных бумаг до криптовалюты и индексов.

• Неограниченное колличество графиков на одном экране
• 25 индикаторов на одном графике
• 7 основных видов графиков

Мы расмотрим общую архитектуру (backend+frontend) и архитектуру самого фронтенда

Для работы терминала необходимо WebSocket-API, а также Http Rest API. Вам необходимо реализовать backend самостоятельно. Спецификация API доступна тут. Для получения часто изменяющихся данных, используется WebSocket API. Через него передаются такие данные как, например, котировки, сделки, заявки, изменения позиций, средние цены, риск-параметры и так далее. Для данных которые не подразумевают частое изменение, таких как: данные об инструменте, данные о клиенте, справка, авторизация и так далее используется Http API. Авторизация реализована через редирект на SSO и обратно и jwt/refresh токены. В случае если у вас реализована другая система авторизации, вам необходимо отредактировать сервис auth.service. Если ваша схема авторизации такая же, то нужно поменять настройку ssoUrl.

Терминал использует следующие инструменты.

• ant-design - дизайн от Ant
• ng-zorro - библиотека компонентов
• angular-gridster2 - библиотека для показа виджетов
• karma + jasmine - тестирование
• ng2-charts (chart.js) + lightweight-charts + d3 + tradingview(charting_library) - графики и прочая визуализация
• ngx-markdown - для отображение некоторого контента, типо справки по виджету.
• ngrx - для управления глобальным состоянием
• ngx-device-info - для получения информации об устройстве, на котором запущено приложение
• ngx-joyride - для ознакомления пользователя с ключевым функционалом
• less - css препроцессор
• transloco - локализация UI
• yarn - менеджер пакетов

Чтобы запустить проект, необходимо установить пакеты

yarn install

Запустить

yarn start

И пройти по ссылке http://localhost:4200/dashboard

Проект разбит на модули. Каждый виджет выделен в отдельный модуль. Функционал, который может быть использован в разных виджетах, находится в модуле Shared. Через него же осуществляется импорт общих зависимостей. Модуль shared импортируется почти во все виджеты.

Внутри каждого модуля есть 4 основных папки.

• components - компоненты, которые используются в этом виджете. Они НЕ экспортируются наружу;
• widgets - компоненты, которые используются из других виджетов. Они экспортируются и используют компоненты из /components как строительные блоки;
• services - сервисы, которые используются только в этом модуле;
• models - модели, которые используются только в этом модуле.

Так же есть дополнительные

• utils - вспомогательный код, который используется только в этом модуле;
• pages - если наш модуль не является виджетом, а является полноценной страницей со своим роутингом.

Поподробней расмотрим структуру shared модуля. Если вам необходимо добавить какую-либо angular сущность, то скорее всего это лучше сделать именно в shared модуле. Пример: interceptors, guards, pipes. Если вам нужно добавить какой-либо визуальный компонент, импорт скорее всего лучше сделать из shared модуля, ведь вряд ли этот компонент будет использоваться только в одном единственном модуле.

Отдельно выделен store модуль. Он содержит определения частей (feature) глобального состояния в терминах ngrx. Модуль store уже импортирован в shared. Для каждой части глобального состояния необходимо создавать свою папку, которая содержит файлы с определениями actions, reducers, effects и selectors.

Другим важным модулем является dashboard. Это основной модуль, который клиенты видят. Именно тут они работают с терминалом. Именно тут они торгуют, смотрят графики, добавляют новые виджеты и так далее. В нём мы используем все остальные компоненты и именно на него прописан основной маршрут. Данный модуль адаптирован для работы на desktop и mobile устройствах.

Также проект содержит папку build-specifics с файлами ext-modules.ts и ext-modules.prod.ts. Данные файлы позволяют подключать функционал, наличие которого зависит от текущей конфигурации, используемой при сборке (development или production). Так в ext-modules.ts следует перечислять модули, которые должны быть доступны только в development конфирурации, например, dev tools. А в ext-modules.prod.ts - модули, доступные только в production. Обратите внимание, что содержимое данных файлов заменяется одно на другое, а не мержится.

На данный момент существует только один основной маршрут /dashboard. В зависимости от типа устройства, на котором запускается приложение, данный маршрут автоматически будет изменен на /dashboard/mobile для загрузки версии, адаптированной для mobile устройств.

Опишем сервисы, которые считаем ключевыми в приложении. Все они находятся в модуле shared в папке services

• AuthService - сервис, специфичный для каждого проекта. Реализует логику авторизации и получения токена для последующей работы с бэкендом;
• DashboardContextService - сервис, который позволяет получать информацию о текущем активном дашборде, выбранных на нем портфеле и инструментах;
• ErrorHandlerService - глобальный обработчик ошибок (ErrorHandler). Перехватывая ошибки, данный сервис делегирует их обработку зарегистрированным обработчикам: HttpErrorHandler и LogErrorHandler;
• LoggerService - сервис логгирования. Используется в компонентах и сервисах. Делегирует запись логов зарегистрированным логгерам. На текущий момент логи записываются в консоль браузера (ConsoleLogger) и на сервер Elasticsearch (RemoteLogger);
• ManageDashboardsService - сервис для управления коллекцией дашбордов, а также виджетами текущего дашборда;
• SubscriptionsDataFeedService - сервис через который проходит работа с Websocket AP;
• WidgetSettingsService - сервис для управления настройками виджетов;
• AuthInterceptor - сервис который подставляет свежий токен во все http запросы.

В проекте используется less. Глобальные стили добавляются в styles.less.

В проекте реализованы две цветовые схемы: dark и light. Переменные и стили, специфичные для цветовой схемы, следует добавлять в файлы dark.less и default.less, расположенные в папке /src/styles/themes. При необходимости получить variables цветовой схемы или variables/mixins из библиотеки компонентов ng-zorro, например @primary-color и другие, нужно использовать themeMixin.

Общие стили, используемые разными компонентами, следует оформлять в виде mixins. Mixin должен быть расположен в папке styles/mixins.

Общие вспомогательные стили (utils) или кастомные стили для компонентов ng-zorro следует оформлять в виде отдельных файлов в папках /src/styles/utils и /src/styles/components соответственно. Все такие файлы должны быть импортированы в styles.less.

• apiUrl: - API для торгового API, пример 'https://api.alor.ru',
• wsUrl: - Websocket URL, пример 'wss://api.alor.ru/ws',
• clientDataUrl: - Api для получения данных по клиенту, 'https://lk-api.alor.ru',
• ssoUrl: - адрес редиректа для sso 'https://login.alor.ru',
• warpUrl: - Api для получения данных о релизах 'https://warp.alor.dev',
• remoteSettingsStorageUrl: - Api для хранения настроек пользователя 'https://astras-dev.alor.ru/identity/v5/UserSettings',
• logging: настройки логгирования (опциональные)
  • console: настройки логов, записываемых в консоль браузера (опциональные - если данная секция отсутствует, то логи в консоль не записываются)
    • minLevel: минимальный уровень записываемых логов (доступные значения в порядке повышения уровня: 'trace', 'info', 'warn', 'error')
  • remote: настройки логов, записываемых в elastic (опциональные - если данная секция отсутствует, то логи в Elasticsearch не записываются)
    • minLevel: минимальный уровень записываемых логов (доступные значения в порядке повышения уровня: 'trace', 'info', 'warn', 'error')
    • environment: метка окружения, на котором развернуто приложение ('prod' - боевое окружение, 'dev' - dev-контур, 'local' - локальное окружение)
    • loggingServerUrl: адрес сервера elastic 'https://astras-dev.alor.ru/eslogs'
    • authorization: настройки авторизации Elasticsearch (заполняются CI/CD)
      • name: имя пользователя
      • password: пароль
• firebase: настройки сервера push-уведомлений,
• externalLinks: список статических ссылок на вшешние ресурсы.

Файл assets/marketSettings.json позволяет настроить список бирж, с которыми работает приложение, а также указать некоторые аспекты, необходимые при отображении информации и формировании запросов к API. В данном файле должно быть отмечено какая из бирж является биржей по умолчанию и какой инструмент должен быть выбран при первом запуске (сбросе настроек) приложения пользователем.

Файл assets/widgets-meta.json содержит список всех доступных в приложении виджетов. Для каждого виджета в данном списке указана служебная информация (typeId и definition), которая не должна изменяться, и настройки отображения (widgetName, icons).

При удалении виджета из данного списка он перестанет отображаться в меню виджетов, а также на дашборде (даже если был добавлен ранее).

Чтобы скрыть виджет только в меню виджетов desktop версии, нужно указать значение false для параметра desktopMeta.enabled.

Чтобы скрыть виджет только в mobile версии, нужно указать значение false для параметра mobileMeta.enabled. Отсутсвие секции mobileMeta говорит о том, что виджет для mobile версии не применяется. Аналогично осутствие секции desktopMeta означает, что виджет не применим для desktop.

ВАЖНО: при добавлении нового виджета в приложение он должен быть описан в данном файле.

Дашборд по умолчанию отображается:

• при первом запуске
• при нажатии на кнопку Виджеты->Стандартный вид
• при сбросе настроек терминала
• в мобильной версии

Набор, расположение и порядок следования (в мобильной версии) виджетов определяется в файле assets/default-dashboard-config.json. Данный файл содержит раздельные настройки для desktop и mobile версий.

ВАЖНО: если какой-либо виджет отключен на desktop версии (см. предыдущую секцию), то его следует также убрать из конфигурации desktop дашборда, иначе при сбросе он будет появляться у пользователя.

Самый мимимум, который должен быть в каждом компоненте и сервисе, это тест на успешное создание компонента. Он создается ng generate по умочанию, но необходимо поддерживать, добавлять моки и стабы для input и используемых сервисов. В ключевых сервисах, покрытие тестами выше. Ну ладно, будет. В планах это есть, точно =)