Вопрос или проблема
Я ищу что-то более настраиваемое, чем Grafana (я должен иметь возможность редактировать код) и менее сложное, чем создание веб-панели с нуля.
Мне нужен какой-то общий способ отображения данных в таблицах и графиках (чтобы показывать данные ордербука и открытых ордеров), который также позволяет мне добавлять свои собственные кнопки, которые выполняют исходящие API-запросы. В конечном итоге результат должен быть чем-то похожим на торговый интерфейс BitMEX:
Я готов пойти на компромисс в настраиваемости внешнего вида и мелких деталях компонентов JS и рендеринга.
В идеале, я просто напишу код, чтобы адаптировать формат, который предоставляет мой WebSocket, к формату, который может использовать фреймворк / программное обеспечение, чтобы понять, какую таблицу / график обновить, и сделать минимальную кастомизацию вокруг чисел, названий, типов и макета компонентов.
В резюме, мои “обязательные требования” следующие:
- Слушать данные, приходящие по соединению WebSocket, обновлять отображаемые данные соответственно.
- Позволять вставлять ссылки, кнопки и поля ввода, которые я контролирую (с целью отправки API-запросов через сокет-соединение).
- Предоставить некоторое преимущество по сравнению с реализацией этого поведения с нуля — возможно, это способ обновления отображения, хорошо продуманный формат данных, простой способ создания и организации визуальных компонентов или их комбинация.
Одной из возможностей, но, возможно, это будет немного больше работы, чем вы бы предпочли, будет ноутбук Jupyter с ipyWidgets и расширением Dashboards.
Ноутбуки Jupyter состоят из серии ячеек, которые могут быть либо текстом Markdown, либо активными ячейками на языке программирования для выбранного ядра — где ядро может быть iPython, R, Scala & много других.
Если взять Python в качестве примера, графики, которые генерируются из данных в реальном времени, могут быть включены встраиваемо, а кнопки могут быть добавлены (или код), чтобы выполнять API-запросы без проблем.
Есть хорошая инструкция по этому поводу на сайте Python for Finance: Stock Portfolio Analyses, вы можете возможно расширить это в веб-панель Dash, которая охвачена во втором статье этой серии.
Ответ или решение
Создание веб-дашборда для обобщения данных, поступающих через сокетное соединение и выполняющих API-запросы, может быть вызовом. Ниже представлен детальный подход к решению этой задачи, который понимает ваши потребности и ограничения.
Понимание требований
Вы ищете более кастомизируемый инструмент по сравнению с Grafana и хотите иметь возможность писать собственный код для настройки, но не хотите заниматься созданием дашборда с нуля. Ваши ключевые требования:
- Работа с данными от WebSocket и обновление графиков и таблиц в реальном времени.
- Возможность интеграции собственных кнопок и полей ввода для выполнения API-запросов.
- Преимущество по сравнению с реализацией с нуля: наличие продуманного формата данных и упрощенной организацией визуальных компонентов.
Рекомендуемое решение
Одним из идеальных решений для вашего случая является использование Dash — фреймворка от Plotly, который позволяет быстро создавать веб-приложения для визуализации данных на языке Python. Это решение соответствует вашим требованиям по кастомизации и не требует значительного времени на реализацию.
Почему Dash?
-
Интерфейс: Dash позволяет легко создать интерактивный веб-интерфейс, используя Python и библиотеки визуализации, такие как Plotly и Matplotlib. Это дает возможность легко кастомизировать визуализацию.
-
Поддержка реального времени: Dash можно легко интегрировать с библиотеками для работы с WebSocket, такими как
websocket-client
, что позволяет обрабатывать поступающие данные и обновлять компоненты интерфейса в реальном времени. -
Кнопки и API-запросы: Вы можете создавать интерактивные элементы, такие как кнопки и поля ввода, с помощью встроенных компонентов Dash. Это позволит вам инициировать API-запросы по заданному сценарию.
Шаги для реализации дашборда
-
Установка необходимых библиотек:
pip install dash pandas websocket-client
-
Создание основного приложения:
Напишите основной скрипт приложения на Python:import dash from dash import dcc, html from dash.dependencies import Input, Output import pandas as pd import websocket import json app = dash.Dash(__name__) app.layout = html.Div([ dcc.Graph(id='live-update-graph'), dcc.Interval(id='interval-component', interval=10*1000, n_intervals=0), html.Button('API Call', id='send-api', n_clicks=0) ]) @app.callback(Output('live-update-graph', 'figure'), Input('interval-component', 'n_intervals')) def update_graph(n): # Получите данные из WebSocket # После получения данных обновите график return {'data': [...]} @app.callback(Output('dummy', 'children'), Input('send-api', 'n_clicks')) def api_trigger(n): if n > 0: # Выполните API-запрос pass return '' if __name__ == '__main__': app.run_server(debug=True)
-
Подключение к WebSocket:
Интегрируйте прослушивание WebSocket для получения данных в реальном времени. С помощью модуляwebsocket-client
вы можете настраивать поток данных и обновлять отображение:def on_message(ws, message): data = json.loads(message) # Обновите отображение данных ws = websocket.WebSocketApp("ws://your.websocket.server", on_message=on_message) ws.run_forever()
Завершение
Dash предоставляет гибкий, но достаточно структурированный способ для создания вашего дашборда, который будет включать интеграцию с WebSocket и возможность инициирования API-запросов. Используя Dash, вы сможете развивать и кастомизировать ваше приложение, включая компоненты, которые наиболее важны для вашего проекта.
Этот подход сбережет ваше время и усилия, позволив сосредоточиться на логике и функциональности, нежели на базовых составляющих веб-разработки.