Актуальные библиотеки визуализации данных для react-разработчиков

Привет, Хабр! Представляю вашему вниманию перевод статьи «Data Visualization Libraries for React Developers in 2019» автора Veronika Rovnik.

Вот уже несколько лет подряд React не сдаёт позиции и входит в тройку самых любимых библиотек профессиональных разработчиков по всему миру, имея на то все основания.

Вы когда-нибудь сталкивались с необходимостью улучшить своё приложение аналитическими и визуальными функциями и получить представление о данных?

Чтобы не потеряться в многообразии инструментов, представляю вам обзор библиотек для React, которые можно легко встроить в ваш веб-сайт или приложение.

Victory


Victory — это платформа многократно используемых компонентов React для создания диаграмм. Сразу бросается в глаза их стильность, интерактивность и плавная анимация.



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

Начать проект визуализации несложно — вам нужно импортировать библиотеку Victory в ваш проект, добавить данные и встроить компонент в веб-страницу, а кроме того, у него есть дополнительная версия для React Native.

React-vis


Uber преуспевает не только в области перевозки пассажиров, но и в разработке систем визуализации. React-vis — это библиотека, которая предлагает большую коллекцию диаграмм для приложений React. Её компоненты работают аналогично обычным компонентам React, к которым мы привыкли. Чтобы создать свою первую визуализацию, установите библиотеку с помощью npm, импортируйте необходимые стили и компоненты CSS, визуализируйте их на странице и вуаля! Среди всех диаграмм, сильная графическая сторона — это то, что меня больше всего поразило.



Инструменты построения диаграмм хороши при самостоятельном использовании, но ещё лучше, если они подключены к агрегированным данным. Судя по моему опыту, диаграммы и сводные таблицы дают крутые результаты, если объединить их в виде панели инструментов.

Итак, теперь перейдем к инструментам, которые помогают создавать отчеты прямо в проекте React.

WebDataRocks Pivot Table


WebDataRocks — это компонент сводной таблицы JavaScript, который совместим с React и другими фреймворками. Он поддерживает подключение к удаленным/ локальным источникам данных JSON и CSV. Особенным его делает то, что он абсолютно бесплатный и настраиваемый. С WebDataRocks можно воспользоваться преимуществами классических функций отчетности: агрегация, фильтрация, сортировка, нарезка и разбиение данных. Чтобы завершить отчет, рекомендую выделить ячейки с помощью условного форматирования, чтобы сделать акцент на наиболее важных значениях.

Для запуска первого проекта создания отчетов требуется несколько шагов: добавление зависимостей в проект React, отображение компонента на веб-странице и заполнение его данными. Всё просто.



Flexmonster Pivot Table & Charts


Flexmonster — это более продвинутый компонент сводной таблицы и расширенная версия WebDataRocks. Он служит встроенным BI (Business intelligence) для стартапов и проектов корпоративного уровня.



Больше привлекает внимание разнообразие доступных источников данных: кубы CSV, JSON, OLAP, данные SQL / NoSQL и Elasticsearch. Функции агрегирования, фильтрации, сортировки, детализации и группировки всегда доступны на панели инструментов. Во время тестирования приятно удивила производительность компонента — он обрабатывал большие объемы данных из базы данных MongoDB и использовал рендеринг сетки. С точки зрения разработчика, процесс интеграции с проектом React достаточно гладкий, как и процесс подключения к базе данных.



Искренне надеюсь, что этот обзор был полезным. Не стесняйтесь делиться своими предложениями в комментариях ниже. Какие ещё библиотеки React вы используете для своего приложения?

Комментарии 5

    0
    Не знаю на сколько это актуально, но я остановился на www.amcharts.com/docs/v4
    Там есть и интеграция с React, хотя это, конечно, не набор компонент.

    Спасибо за статью (в том смысле, что я её не видел)! Есть теперь ещё с чем сравнить :)
      0
      Вот только amcharts в общем случае платный, а эти бесплатные совсем.
        0
        Рада быть полезной! У amchart список интеграций впечатлил)
        0

        React-Vis, к сожалению, пока активно перестал поддерживаться. Надеюсь, что только пока

          0

          Я сначала для себя выбрал Victory, но уткнулся в некоторые проблемы при формировании графиков с "щеткой" Brush. На замену нашел Recharts http://recharts.org/en-US/ с ним у меня все заработало и устроило бизнес заказчика. Вообще как мне кажется с библиотеками графиков нет идеала.

          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

          Самое читаемое