Разработка программного модуля для визуализации и аналитики данных

Цель и задачи
РАЗРАБОТКА ПРОГРАММНОГО МОДУЛЯ ДЛЯ ВИЗУАЛИЗАЦИИ И АНАЛИТИКИ ДАННЫХ
Задачи:
Анализ предметной области
Структурирование входных данных
Разработка пользовательского интерфейса
Тестирование программы

Анализ предметной области
Выбор инструментов разработки
VueJS – фреймворк на основе JavaScript
Quasar – фреймворк на основе VueJS
ApexCharts – библиотека графиков
HTML – для разметки страниц
CSS (sass) – для стилей

Анализ предметной области
VS Code - Редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений.
А также Свободная централизованная система управления версиями SVN, официально выпущенная в 2004 году компанией CollabNet.

Структурирование входных данных
Исходные данные берутся из PostgreSQL, методом SQL - запроса, по колонкам, которые заполняются пользователем.
Пользователь выбирает тип графика, нужную таблицу, поля по Х и У, а также выбирает группировку. Если необходимые поля для построения графика не выбраны, интерфейс программы не дает возможности добавить график.
Также, есть возможность удалить все графики.

После нажатия на кнопку добавления графика, происходит запрос и структурирование данных в массив, по которому будет строиться график.
Структурирование входных данных

Результат построений разных типов графиков, также есть возможность расширения функционала. На данном рисунке формируется своеобразная панель инструментов, которая визуализирует данные, выбранные пользователем.

Разработка пользовательского интерфейса
Всего есть два варианта, где отображается раздел «Аналитика».
Стандартный вид
Постраничный

Разработка пользовательского интерфейса
Стандартный вид
Постраничный вид

Разработка пользовательского интерфейса
Диалог создания, диалог изменения уже созданного графика.
Каждый график имеет свою панель инструментов в которой пользователь может изменить данные в графике, открыть график на полный экран, а также удалить график.