Django, Pandas и для быстрой панели инструментов

Django, Pandas и для быстрой панели инструментов

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

Почему Pandas ? Все задачи можно выполнить изнутри Django непосредственно из БД, т. к. правильные запросы к базе всегда будут выгоднее для продакшена.

Почему Django? Это отличный выбор для проекта, где необходимо экспортировать данные в одну таблицу. Использование Flask будет более выигрышным вариантом, если не нужна аутентификация и доступ к данным из существующей базы.

Почему Chart.js? Если вы хотите развернуть кучу различных интерактивных диаграмм, изменив несколько переменных – Chart.js сделает это быстрее других.

Исходные тексты и простой набор данных из туториала вы найдете по ссылкам.

Все действия в этом проекте будут происходить на сервере с Debian.

Дополнительно можете установить себе palettable – цветовую палитру для Python, однако код будет работать и без нее.

На основе набора данных мы создадим следующую модель, но она должна быть изменена под ваши нужды.

Обязательно обновите БД после ее создания:

С помощью Pandas и Django сделайте загрузку csv в базу данных для Kaggle :

Импортируйте себе всю эту штуку:

Затем создайте пустой файл base/dashboard.html и data/urls.py:

Отредактируйте django_charts/urls.py, чтобы добавить URL для данных:

Обновите список django_charts/settings.py, чтобы включить data в INSTALLED_APPS:

Убедимся, что можем видеть покупку в админке, добавив это в data/admin.py:

Теперь вы можете перейти на страницу дашборда (127.0.0.1:8000/data/), а потом проверить в админке (127.0.0.1:8000/admin/data/purchase/), видны ли все записи. Если вы используете тот же набор данных, их должно быть около 1000.

Есть базовый файл, который мы будем расширять:

Немного модернизируем его:

Это даст возможность добавлять блоки с любой страницы. Обратите внимание, что здесь включен bootstrap CDN, чтобы использовать popper.js (это опционально). Можно выполнить проект совсем без bootstrap, но придется отредактировать dashboard.html.

Все написанные сценарии обернуты в $(document).ready , чтобы не происходило никаких манипуляций до тех пор, пока страница не будет готова.

Далее рассмотрим страницу с графиками – dashboard.html:

Здесь создается контейнер, строка и колонка, внутри которой лежит «колода карт», создающая карты одинакового размера.

Колода карт будет пытаться втиснуть все в одну строку. Счетчики forloop.counters используются для определения размера экрана и соответствующего обертывания колоды карт, однако на практике вы обнаружите, что Chart.js зачастую игнорирует настройки размера холста.

Чтобы лучше понять происходящее, посмотрим на views.py:

Будем использовать TemplateView. Это очень простое view, к которому можно что-то добавить. Единственный метод, который необходимо расширить – get_context_data, использующийся в Django для получения данных.

Мы вытаскиваем нужные объекты и создаем фрейм данных. Известно, что C hart.js не очень хорошо работает с датами – конвертируем их в строки после создания фрейма. Затем добавляем каждый график в контекст C hart. Это позволяет перебирать графики в коде HTML, т. к. каждая диаграмма представляет собой словарь, содержащий гипертекст и js-запись.

И наконец файл data/charts.py. Весь код легко переносится в другой проект, и вы можете просто поместить его в свой view. Пробежимся по некоторым функциям, а затем перейдем к классу Chart.

Эта функция принимает модель Django и возвращает все записи. Можно включить некоторые фильтры после всех аргументов имени. Например:

Результат будет ограничен городом Мандалай. Поля i nclude и exclude работают аналогично Django. Если вы ничего не включаете, будут выведены все поля из модели. Важно отметить, что exclude обрабатываются после i nclude. Таким образом, если включить и исключить столбец, он не будет отображаться.

Этот код устанавливает параметры по умолчанию для всех графиков.

Если вы не хотите утруждать себя маркировкой каждого из них, данная функция устанавливает случайный ID , используемый JS для изменения элемента HTML. Этот идентификатор также используется для именования функции JS и переменной, чтобы облегчить отладку.

get_colors применяется для установки начальных цветов. Если ее передать в палитру, она будет использоваться в качестве основной. Если ничего не передавать и не импортировать из palletable, то цвета будут генерироваться случайным образом.

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

По функциям все. Ниже приведен класс Chart.

Здесь использовался dataclass – это относительно недавнее дополнение Python и для быстрых классов оно будет хорошим выбором. Установка начальных значений помогает гарантировать, что вы не используете изменяемый объект для экземпляра.