Данная выпускная квалификационная работа посвящена интеграции Grafana в инженерный портал компании за счет разработки универсальной библиотеки визуализации данных. Причина создания собственного решения – отсутствие инструментов, умеющих работать с разномасштабными данными, отображающимися разными типами диаграмм, в рамках одного холста. В рамках работы проводится обзор существующих React-библиотек, на основе которых будет происходить разработка инструмента. В ходе сравнения формируется список значимых критериев, на основе которых происходит выбор средства, лежащего в основе новой библиотеки. Для реализации средства отрисовки описывается высокоуровневая архитектура инженерного портала, объясняющая принцип получения данных из Grafana. Более того, рассматривается компонентная архитектура реализуемой библиотеки, в основе которой лежат важнейшие React-паттерны. По завершении разработки полученная графическая библиотека служит хорошим помощник в отображении метрик из Grafana, таких как количество задач из Jira, находящихся в разных состояниях в указанные пользователем периоды времени. Поддержка разных масштабов помогает скрестить разноплановые диаграммы на одном холсте, рассматривая их как единое изображение, что помогает сократить трудоемкость работы инженеров компании.

This graduation thesis is dedicated to the integration of Grafana into the companys engineering portal through the development of a universal data visualization library. The reason for creating your own solution is the lack of tools that can work with multi–scale data displayed by different types of diagrams within the same canvas. As part of the work, an overview of existing React libraries is being conducted, on the basis of which the tool will be developed. During the comparison, a list of significant criteria is formed, on the basis of which the selection of the tool underlying the new library takes place. To implement the rendering tool, a high-level architecture of the engineering portal is described, explaining the principle of obtaining data from Grafana. Moreover, the component architecture of the implemented library is considered, which is based on the most important React patterns. Upon completion of development, the resulting graphics library serves as a good assistant in displaying metrics from Grafana, such as the number of tasks from Jira that are in different states during user-specified time periods. Support for different scales helps to combine diverse diagrams on one canvas, treating them as a single image, which helps to reduce the complexity of the work of the companys engineers.

• СПИСОК СОКРАЩЕНИЙ И ОПРЕДЕЛЕНИЙ
• ВВЕДЕНИЕ
• ГЛАВА 1. ОБЗОР СУЩЕСТВУЮЩИХ РЕШЕНИЙ
  • 1.1. Низкоуровневая React-библиотека визуализации данных
  • 1.2. Высокоуровневые React-библиотеки визуализации данных
  • 1.3. Критерии сравнения графических инструментов
  • 1.4. Сравнение React-библиотек для визуализации данных
  • 1.5. Выводы
• ГЛАВА 2. АРХИТЕКТУРА ПРЕДЛАГАЕМОГО ПРОГРАММНОГО СРЕДСТВА ДЛЯ ВИЗУАЛИЗАЦИИ ДАННЫХ
  • 2.1. Архитектура инженерного портала
  • 1.
  • 2.
  • 2.2 . Компонентная архитектура библиотеки для визуализации данных
  • 2.3. Выводы
• ГЛАВА 3. РЕАЛИЗАЦИЯ ПРЕДЛАГАЕМОГО ПРОГРАММНОГО СРЕДСТВА ДЛЯ ВИЗУАЛИЗАЦИИ ДАННЫХ
  • 3.1. Стек технологий и средства разработки
  • 3.2. Алгоритм визуализации данных
  • 3.3. Структура программного средства
  • 3.4. Выводы
• ГЛАВА 4. РЕЗУЛЬТАТЫ
  • 4.1. Отображение графиков на инженерном портале
  • 4.2. Фильтрация данных на графике
  • 4.3. Выводы
• ЗАКЛЮЧЕНИЕ
• СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ