Визуализация данных и веб-отчёты в Angular

Недавно я столкнулась со следующей проблемой: мне нужно было найти полностью настраиваемые веб-компоненты, с которыми несложно взаимодействовать и которые могут использоваться как встроенные BI-инструменты для анализа, отчётов и визуализации в моём приложении.

Из всех таких компонентов я выбрала Angular. Ни один его потенциальный конкурент не может сравниться с ним. Думаю, я не одна столкнулась с такой проблемой, поэтому хочу поделиться своим опытом использования Angular.

Как преданный пользователь Angular, я бы хотела в первую очередь рассказать о его преимуществах. Затем перейду к работе с аналитикой в приложениях Angular и созданию отчётов при помощи сводной сетки JavaScript и библиотеки для построения графиков.

К тому же мы сделаем несложный отчёт, который поможет в дальнейшем анализе.

Для тех, кто не хочет читать: перейдите к секции с полезными ссылками, которые позволят попрактиковаться.

Почему Angular?

Начну с того, почему я считаю фреймворк Angular лучше аналогов и как он помогает упростить и ускорить процесс разработки.

Создание динамических клиентских приложений (как одностраничных, так и многостраничных) с Angular имеет ряд преимуществ:

Взаимодействовать с компонентами приложения легко благодаря модульному дизайну кода. Код более организован и удобен для чтения.
Несвязанные компоненты.
Упрощённая MVC-архитектура.
Статичная типизация TypeScript (на которой был написан фреймворк) обеспечивает безопасность типов. Это упрощает поддержку и перепроектирование кода.
Мощный интерфейс командной строки упрощает создание приложения.
Большое сообщество разработчиков.

Именно эти свойства повышают продуктивность в создании мобильных, десктопных и веб-приложений.

Есть и недостатки: Angular достаточно сложный для изучения, особенно по сравнению с React.

Теперь поговорим о создании веб-отчётов. Я использовала два компонента: Flexmonster и Google Charts. Сейчас я расскажу о них.

Что такое Flexmonster?

Flexmonster —компонент сводной таблицы, написанный на JavaScript. Он хорош в создании веб-отчётов и проведении анализа. Также этот инструмент имеет обёртку Angular, что было немаловажно для моей задачи.

После добавления Flexmonster вы можете использовать все встроенные свойства и функции для создания своего отчёта. В конце работы таблица может быть экспортирована в Excel, PDF, Image и HTML.

Давайте посмотрим на список полезных для создания отчётов свойств.

Аналитические функции

Агрегатные функции (16 встроенных; можно создавать свои).
Сортировка, группирование и фильтрация признаков.
Можно преобразовывать поля из столбцов в строки и наоборот при помощи drag-and-drop.
Возможность разбиения таблиц на меньшие составляющие.

Как интегрировать сводную таблицу в Angular?

Процесс довольно простой. Для начала нужно создать приложение Angular в командной строке:

ng new PROJECT-NAMEcd PROJECT-NAME

Затем добавить пакет Flexmonster и модуль Flexmonster Angular:

npm i ng-flexmonster --save

В файл angular.json добавить следующие строчки:

"styles": [ 
 "styles.css", 
 "/node_modules/flexmonster/flexmonster.min.css" 
],
"scripts": [ "/node_modules/flexmonster/flexmonster.full.js" ]

Включить FlexmonsterPivotModule в app.module.ts. Этот файл находится внутри папки PROJECT-NAME/src/app :

import { FlexmonsterPivotModule } from 'ng-flexmonster';

@NgModule({
  ...
  imports: [FlexmonsterPivotModule],
  ...
})

Добавить директиву fm-pivot туда, где должна быть таблица. licenseKey — лицензионный ключ или ключ пробной версии:

<fm-pivot 
  [licenseKey]="'XXXX-XXXX-XXXX-XXXX-XXXX'"
  [report]="'https://cdn.flexmonster.com/reports/report.json'">
</fm-pivot>

Запустить приложение из командной строки:

ng serve

Подробную инструкцию можно найти здесь.

Панель инструментов и визуализация данных

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

Поэтому перейдём к следующему инструменту, который позволит сохранить ваше время и визуализировать данные.

Что такое Google Charts?

Google Charts — лучший бесплатный веб-сервис для создания графиков и схем. Для взаимодействия с ним не нужно взаимодействовать с DOM-элементами, можно просто использовать API от Google Charts. Для анимации данных нужно включить в приложение Google Loader и добавить объект класса DataTable в JavaScript. Таблице передаются данные и определяется функция для построения графика.

Как передать данные графику?

Для получения данных можно использовать Datasource или сводную таблицу Flexmonster. Первый поддерживает протокол Chart Tools Datasource и позволяет отправлять SQL-запросы сервису для получения таблицы (объекта класса DataTable), заполненной данными. Второй же инструмент можно использовать как провайдер данных для клиентской стороны. Этот компонент использует коннекторы JavaScript, которые избавляют нас от необходимости писать код для обработки данных для создания простых графиков. Но, конечно, при необходимости вы можете применить пользовательскую логику.

Google Charts в приложении Angular

Google Charts совместимы с Angular — обёртку можно найти на npm.

Вот моя информационная панель, в которой я соединила Flexmonster и Google Charts.

Можно увидеть, что вместе таблица и график заиграли новыми красками. Это совмещение позволяет связывать результаты анализа между собой.

Заключение

Я указала преимущества Angular как платформы для создания динамических веб-приложений, но не стоит забывать, что при разработке каждого приложения нужно выбирать именно тот фреймворк, который лучше всего подходит для целей конкретно этого приложения.

Полезные ссылки

Таблица и график на Angular (eng)
Код (eng)
Инструкция по интеграции Flexmonster и Angular (eng)
Галерея Google Charts (eng)
Обёртка Angular для Google Charts (eng)

Перевод статьи

Поделиться статьей:

Вернуться к статьям