![](https://habrastorage.org/getpro/habr/upload_files/840/e81/833/840e81833659ac2c44a080fe1fa0f492.png)
![](https://habrastorage.org/getpro/habr/upload_files/cdb/373/0f2/cdb3730f255f63f2681a653040925718.png)
Автор статьи: Роман Козлов
Руководитель курса BI-аналитика
С развитием Data-driven подхода к принятию управленческих решений в современных организациях, возросла роль BI-инструментов как основного инструмента внедрения такого подхода. На сегодняшний день выбор BI-продуктов на рынке сводится к трем большим категориям:
Лидеры (Power BI, Tableau, Qlik).
Отечественные BI (Модус, Luxms, Yandex Lens, Visiology).
Open-sourse (Apache Superset, Metabase, Plotly Dash).
Использование BI с открытым исходным кодом имеет ряд преимуществ и в условиях ухода западных игроков с российского рынка, такой выбор дает пользователю свободу и независимость от конкретного вендора.
Plotly Dash ― это платформа с открытым исходным кодом для создания интерфейсов визуализации данных. Это достаточно нетривиальное решение для создания дэшбордов и аналитических витрин. В отличие от остальных продуктов, данное решение предлагает самый высокий уровень гибкости для представления данных, так как весь дэшборд от начала и до конца пишется с помощью Python кода как полноценное веб-приложение. Библиотека создана и поддерживается канадской компанией Plotly и является логичным развитием одноименной популярной среди аналитиков данных и дата-сайентистов Python-библиотеки для построения разнообразных и красивых визуализаций.
В основе библиотеки Dash помимо Plotly, который отвечает за отрисовку графики, также используется знакомый многим Python-разработчикам фреймворк Flask, а также фреймворк React. Flask предоставляет библиотеке функциональность веб-сервера для простого и быстрого создания наших дэшбордов как небольших сайтов, которым не нужен сложный бэкенд. React же отвечает за отображение веб-интерфейса нашего приложения.
На нашем курсе по BI аналитике мы изучим возможности использования Plotly Dash для создания кастомных дэшбордов в виде таких приложений с возможностью «деплоймента» на удаленном сервере.
Для примера, мы поработаем с классическим датасетом Sample Superstore, который является достаточно распространённым на просторах Сети. В данном примере мы будем использовать немного модифицированный набор, в котором также содержатся даты отгрузки товаров за период с 2014 по 2017 года (рис.1).
![Рисунок 1. Описание датасета Sample Superstore Рисунок 1. Описание датасета Sample Superstore](https://habrastorage.org/getpro/habr/upload_files/13d/46f/cac/13d46fcacfbdfdeddc9ae679efaf3c06.png)
Для начала работы необходимо скачать соответствующие модули библиотеки Dash из публичного репозитория. Сделаем это в терминале среды разработки, в которой мы работаем (рис. 2).
![Рисунок 2. Установка модулей Dash Рисунок 2. Установка модулей Dash](https://habrastorage.org/getpro/habr/upload_files/0f0/7ba/65f/0f07ba65fff200315f114e8ef228a48b.png)
Сперва инициализируем приложение и определим внешний вид с помощью макета приложения (layout). В первой строке мы создаем экземпляр класса Dash. Код, приведенный ниже, определяет layout, то есть внешнюю оболочку нашего приложения-дэшборда. Этот вид описывается с помощью древовидной структуры, состоящей из Dash-компонентов (рис. 3).
![Рисунок 3. Создание базового layout’а в Dash Рисунок 3. Создание базового layout’а в Dash](https://habrastorage.org/getpro/habr/upload_files/765/1b7/fa4/7651b7fa46684d00f70dc31365b696b3.png)
Как несложно заметить, древовидная структура класса layout похожа на HTML разметку веб страницы. Мы начинаем с определения родительского компонента html.Div
, затем в качестве дочерних элементов добавляем заголовок html.H1
и абзац html.P
. Эти компоненты эквивалентны HTML-тегам div, h1 и p. Для изменения атрибутов или содержимого тегов используются аргументы компонентов. Например, чтобы указать, что находится внутри тега div
, мы используем в html.Div
аргумент children
.
Если вы уже использовали Flask, то инициализация класса Dash вам уже знакома. Во Flask мы обычно инициализируем WSGI-приложение с помощью Flask(__name__)
. Для приложений Dash мы используем Dash(__name__)
.
После запуска этого кода на localhost’е нашего компьютера на порте 8050 по умолчанию развернется следующая веб страничка (рис. 4).
![Рисунок 4. Базовая веб-страничка Рисунок 4. Базовая веб-страничка](https://habrastorage.org/getpro/habr/upload_files/2f6/23e/2ee/2f623e2ee9d8e8e88984f5a34b9a9741.png)
Для того, чтобы нарисовать на этой страничке простой график, нам нужно для начала поработать с данными. Для этого нам понадобится импортировать в наше приложение библиотеку Pandas (рис 5).
С помощью Pandas мы загрузим датасет, хранящийся в папке с проектом в csv формате, в датафрейм, обозначенный переменной df
. Затем добавим новый показатель ‘order_by_month’
, сгруппировав даты заказов через аксессор dt
.
![Рисунок 5. Добавление графика Рисунок 5. Добавление графика](https://habrastorage.org/getpro/habr/upload_files/364/e3f/8f9/364e3f8f9b6f720ea59e7fd97c44d07f.png)
Как мы уже знаем, под капотом Dash использует для создания графиков Plotly.js
. Компоненты dcc.Graph
ожидают figure object
или словарь Python, содержащий данные графика и layout. Нарисуем обычную гистограмму, которая отразит динамику продаж (Line Total) по месяцам заказов (order_by_month
) (рис 6).
![Рисунок 6 График динамики продаж Рисунок 6 График динамики продаж](https://habrastorage.org/getpro/habr/upload_files/a12/43f/d4e/a1243fd4e41cac8a9ba6bbb74df95b11.png)
Безусловно, получившийся дэшборд не удовлетворяет требованиям интерактивности. Очевидно, что для этого нужно заставить приложение реагировать на действия пользователя. Например, если пользователь взаимодействует с компонентом ввода (с раскрывающимся списком или ползунком), то объект вывода данных (график) должен будет автоматически реагировать на изменения ввода. Для этого мы воспользуемся функциями обратного вызова (callbacks
) (рис 7).
Функции обратного вызова Dash ― это обычные функции Python с декоратором app.callback
. При изменении ввода запускается функция обратного вызова, выполняет заранее определенные операции (например, фильтрация набора данных), и возвращает результат в приложение. По сути, обратные вызовы связывают в приложении входные и выходные данные.
![Рисунок 7. Добавление callback и функции за декоратором Рисунок 7. Добавление callback и функции за декоратором](https://habrastorage.org/getpro/habr/upload_files/294/54e/de2/29454ede2acf4a3c00c91139f1adfd57.png)
Для реализации самого элемента фильтра обратимся к модулю Dash core components
, в котором мы создадим выпадающий список городов покупателей продукции нашего магазина Superstore (рис 8). Обратите внимание на аргумент multi
, с помощью которого мы реализуем возможность выбора двух и более городов в качестве фильтра. Получившемуся объекту Dropdown мы присвоим одноимённую переменную и поместим в layout приложения.
![Рисунок 8. Добавление элемента фильтр в Layout Рисунок 8. Добавление элемента фильтр в Layout](https://habrastorage.org/getpro/habr/upload_files/2d4/fe7/c02/2d4fe7c0296e7bddacf3fe9fca1a6133.png)
Для того, чтобы внести некое разнообразие, добавим в дэшборд еще несколько вариантов фильтров (рис 9). Пусть это будет чеклист с выбором канала поставки наших товаров (Channel) и календарь, который отфильтрует данные по дате поставки. Вообще, вариантов таких элементов для фильтрации Dash предлагает достаточно много. Более подробно об этих вариантах, разумеется, можно почитать в документации.
![Рисунок 9. Дополнительные элементы фильтра Рисунок 9. Дополнительные элементы фильтра](https://habrastorage.org/getpro/habr/upload_files/c07/a1c/ef4/c07a1cef494694e57bb47e06cd8ea8ed.png)
Также не забудем обновить callback с учетом добавления в него новых Input’ов. Логика при этом остается неизменной: аргументы, которые принимает функция под callback’ом динамически обрезают датафрейм, который затем отрисовывается в Plotly (рис. 10).
![Рисунок 10. Обновленный callback Рисунок 10. Обновленный callback](https://habrastorage.org/getpro/habr/upload_files/26e/563/00e/26e56300e7508361886537024c0fbb9a.png)
Запустив отредактированный код, обратим внимание на то, что дэшборд уже начинает становится похожим на современный и качественный продукт (рис. 11).
![Рисунок 11. Отредактированный дэшборд. Рисунок 11. Отредактированный дэшборд.](https://habrastorage.org/getpro/habr/upload_files/856/792/4ad/8567924adbb0d8f2fc97d27e83e30a9a.png)
Однако любая, даже самая глубокая аналитика, требует красивой обёртки. Работая с layout нашего дэшборда-приложения, мы добавляли html-элементы, dash core components
сверху-вниз в общей структуре страницы. Чтобы разместить, скажем, фильтры нашего дэшборда не вертикально, а горизонтально над графиком, необходимо обратиться к еще одному Dash-модулю - dash-bootstrap-components
.
Этот модуль добавляет в структуру layout нашего приложения объекты Row
и Column
, таким образом разделяя страницу дэшборда на условные колонки и строки. Добавляя dash core components
внутрь этих Row’s
и Column’s
, мы можем размещать фильтры, надписи и иные элементы дэшборда как нам угодно по горизонтали и вертикали соответственно (рис. 12).
![Рисунок 12. Размечаем layout с помощью dash-bootstrap-components Рисунок 12. Размечаем layout с помощью dash-bootstrap-components](https://habrastorage.org/getpro/habr/upload_files/1a9/6ea/096/1a96ea0962bf75565a2f12272f8567a6.png)
Кроме этого, добавим стилизацию нашему дэшборду. Стилизовать компоненты можно двумя способами:
Использовать аргумент style отдельных компонентов.
Предоставить внешний CSS-файл.
Если вы хотите включить собственные локальные CSS или JavaScript-файлы, необходимо создать в корневом каталоге проекта папку с именем assets/ и сохранить в ней необходимые файлы.
Создадим в папке assets css
файл, в котором изменим шрифт, цвет и цвет бэкграунда html-элементов дэшборда (рис. 13).
![Рисунок 13. CSS-файл с оформлением дэшборда Рисунок 13. CSS-файл с оформлением дэшборда](https://habrastorage.org/getpro/habr/upload_files/1c7/ce6/d9a/1c7ce6d9ae10f14fe9ecb453da963244.png)
В итоге, мы получили из данных Sample Superstore простой дэшборд (рис. 14), который, конечно же, в дальнейшем можно усовершенствовать: добавить дополнительные элементы, связать фильтры между собой, добавить новую визуализацию, расширить стилизацию отдельных графических элементов и еще многое другое. Благо, помимо документации, Dash дает посмотреть на варианты решений в виде галлереи дэшбордов, которые были реализованы при помощи этой библиотеки (https://dash.gallery/Portal/).
![Рисунок 14. Финальный вариант дэшборда Рисунок 14. Финальный вариант дэшборда](https://habrastorage.org/getpro/habr/upload_files/79b/d66/bce/79bd66bce74a3c8b96742b03ae0df153.png)
На нашем курсе по BI аналитике мы научимся работе с этой библиотекой, а также познакомимся с другими BI продуктами, такими как Tableau и Power BI, посмотрим на отечественные решения, которые получили активное развитие за 2022 год.
По ссылке вы сможете более подробно узнать о курсе, а также зарегистрироваться на бесплатный пробный урок.