Статьи Веб-разработка 5 мин

Кастомные виджеты дашборда за 5 минут

person
Редакция Django-Admin.ru
Редакция • Опубликовано 2 ноября 2024 г.
Дашборд Chart.js Кастомизация Admin

Стандартная главная страница Django Admin функциональна, но неинтересна. Она просто перечисляет модели и последние действия. Для команд, которые работают в админке ежедневно, превращение её в операционный дашборд может кардинально повысить продуктивность.

Переопределение шаблона индексной страницы

Система загрузки шаблонов Django делает это просто. Создайте файл templates/admin/index.html:

# admin.py
class CustomAdminSite(admin.AdminSite):
    index_template = 'admin/custom_index.html'

    def index(self, request, extra_context=None):
        extra_context = extra_context or {}
        extra_context['recent_orders'] = Order.objects.filter(
            created__gte=timezone.now() - timedelta(days=7)
        ).count()
        return super().index(request, extra_context=extra_context)

Добавление Chart.js

Внедрите Chart.js через класс Media или кастомный блок шаблона:

{% extends "admin/index.html" %} {% block content %}
<div style="max-width: 600px; margin: 20px auto;">
  <canvas id="ordersChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  new Chart(document.getElementById('ordersChart'), {
    type: 'line',
    data: {
      labels: {{ chart_labels|safe }},
      datasets: [{
        label: 'Заказов в день',
        data: {{ chart_data|safe }},
        borderColor: '#092E20',
        tension: 0.3
      }]
    }
  });
</script>
{% endblock %}

Лучшие практики

  • Кешируйте тяжёлые запросы — виджеты дашборда выполняются при каждой загрузке страницы
  • Только чтение — индексная страница должна отображать, а не изменять данные
  • Адаптивная вёрстка — используйте CSS Grid для размещения виджетов

forum Обсуждение

Комментарии скоро будут доступны. Следите за обновлениями!