向Django Admin添加图表-昊天SEO

介绍

Django 提供功能管理 UI 开箱即用的 CRUD 界面用于 db 管理。这包括基本内容和用户管理系统的大多数用例。但是，它没有显示摘要或历史趋势的探索性视图，这是您期望从管理仪表板获得的内容。

幸运的是，django管理应用程序是可扩展的，通过一些调整，我们可以添加交互式Javascript图表到管理员。

问题

我想在findwork.dev上获取电子邮件订阅者随时间的图表概览。就电子邮件订阅者而言，网站是增长还是停滞？上个月我们有多少订户？我们获得大多数订阅者的星期是哪一周？是否所有订阅者都在验证其电子邮件？

使用探索性图表，我们可以获得网站性能的历史概述。

我最初探索了现成的Django管理应用程序和仪表板的土地。要求是，它包括图表能力，有详细的记录，看起来不错。虽然我尝试的所有应用程序看起来都比默认管理员在样式方面更好，但它们要么缺少文档，要么没有维护。

xadmin - 没有英文文档
django-jet - 未经维护，因为核心团队正在研究SaaS 替代方案
django-grapinelli - 无制图能力

这时，一个想法突然浮现在脑海：为什么不扩展默认管理应用呢？

扩展 django 管理员

django管理应用程序是由模型管理类组成。这些表示在管理界面中的模型的可视视图。默认情况下，ModelAdmin 类附带 5 个默认视图：

更改列表 - 模型集合的列表视图
添加 - 允许您添加新模型实例的视图
更改 - 用于更新模型实例的视图
删除 - 用于确认删除模型实例的视图
历史记录 - 对模型实例执行的操作的历史记录

当您要查看特定模型时，"更改列表"视图是默认管理员视图。我想在这里添加一个图表，以便每当我打开电子邮件订阅者页面时，都会显示随着时间的推移添加的订阅者。

假设我们有一个电子邮件订阅者模型，如下所示：

# web/models.py
from django.db import models

class EmailSubscriber(models.Model):
    email = models.EmailField()
    created_at = models.DateTimeField()

# web/models.py

from django.db import models

class EmailSubscriber(models.Model):

email = models.EmailField()

created_at = models.DateTimeField()

为了在管理应用中呈现电子邮件订阅者，我们需要创建一个从扩展的类。django.contrib.admin.ModelAdmin

基本模型管理员如下所示：

# web/admin.py
from django.contrib import admin
from .models import EmailSubscriber

@admin.register(EmailSubscriber)
class EmailSubscriberAdmin(admin.ModelAdmin):
    list_display = ("id", "email", "created_at") # display these table columns in the list view
    ordering = ("-created_at",)                  # sort by most recent subscriber

# web/admin.py

from django.contrib import admin

from .models import EmailSubscriber

@admin.register(EmailSubscriber)

class EmailSubscriberAdmin(admin.ModelAdmin):

list_display = ("id", "email", "created_at") # display these table columns in the list view

ordering = ("-created_at",) # sort by most recent subscriber

让我们添加一些订阅者，以便我们有一个初始数据集：

$ ./manage.py shell
Python 3.7.3 (default, Apr  9 2019, 04:56:51)
[GCC 8.3.0] on linux
Type "help", "copyright", "credits" or "license" for more information.
(InteractiveConsole)
from web.models import EmailSubscriber
from django.utils import timezone
from datetime import timedelta
import random
for i in range(0, 100):
    EmailSubscriber.objects.create(email=f"user_{i}@email.com", created_at=timezone.now() - timedelta(days=random.randint(0, 100)))
...
<EmailSubscriber: EmailSubscriber object (1)>
<EmailSubscriber: EmailSubscriber object (2)>
<EmailSubscriber: EmailSubscriber object (3)>
...

$ ./manage.py shell

Python 3.7.3 (default, Apr 9 2019, 04:56:51)

[GCC 8.3.0] on linux

Type "help", "copyright", "credits" or "license" for more information.

(InteractiveConsole)

from web.models import EmailSubscriber

from django.utils import timezone

from datetime import timedelta

import random

for i in range(0, 100):

EmailSubscriber.objects.create(email=f"user_{i}@email.com", created_at=timezone.now() - timedelta(days=random.randint(0, 100)))

...

<EmailSubscriber: EmailSubscriber object (1)>

<EmailSubscriber: EmailSubscriber object (2)>

<EmailSubscriber: EmailSubscriber object (3)>

...

如果我们输入 ChangeList 视图，我们将看到我们添加了 100 个新订阅者，随机创建时间http://localhost:8000/admin/web/emailsubscriber/。

向Django Admin添加图表-新乡seo|网站优化,网站建设_微信公众号:zeropython—昊天博客

假设我们要添加一个图表，该图表汇总了一段时间内条形图中的订阅者数量。我们希望将其放在订阅者列表的上方，这样，您一进入网站即可见。

下面的红色区域勾勒出我想直观地放置图表的位置。

如果我们创建一个新文件，我们可以强制 django 管理员加载我们的模板，而不是默认模板。让我们在

web/templates/admin/web/emailsubscriber/change_list.html.

重写管理模板时的命名方案是

{{app}}/templates/admin/{{app}}/{{model}}/change_list.html.

默认的 ChangeList 视图是可扩展的，并且有多个块可以覆盖以满足您的需要。检查默认管理模板时，我们可以看到它包含可以重写的块。我们需要重写内容块，以更改模型表之前呈现的内容。

让我们扩展默认的"更改列表"视图并添加自定义文本：

# web/templates/admin/web/emailsubscriber/change_list.html

{% extends "admin/change_list.html" %}
{% load static %}
{% block content %}

<h1>Custom message!</h1>

<!-- Render the rest of the ChangeList view by calling block.super -->
{{ block.super }}
{% endblock %}

# web/templates/admin/web/emailsubscriber/change_list.html

{% extends "admin/change_list.html" %}

{% load static %}

{% block content %}

<h1>Custom message!</h1>

{% endblock %}

酷，我们现在已经设法自定义管理用户界面。让我们更进一步，使用Chart.js添加 Javascript 图表。我们需要重写外头块来添加脚本和样式元素来在标头中加载 Chart.js。

Chart.js代码基于此处找到的演示条形图。我稍微修改了它，以读取 X 轴上的时间序列数据。

# web/templates/admin/web/emailsubscriber/change_list.html

{% extends "admin/change_list.html" %}
{% load static %}

<!-- Override extrahead to add Chart.js -->
{% block extrahead %}
{{ block.super }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
  const ctx = document.getElementById('myChart').getContext('2d');

  // Sample data
  const chartData = [
    {"date": "2019-08-08T00:00:00Z", "y": 3},
    {"date": "2019-08-07T00:00:00Z", "y": 10},
    {"date": "2019-08-06T00:00:00Z", "y": 15},
    {"date": "2019-08-05T00:00:00Z", "y": 4},
    {"date": "2019-08-03T00:00:00Z", "y": 2},
    {"date": "2019-08-04T00:00:00Z", "y": 11},
    {"date": "2019-08-02T00:00:00Z", "y": 3},
    {"date": "2019-08-01T00:00:00Z", "y": 2},
  ];

  // Parse the dates to JS
  chartData.forEach((d) => {
    d.x = new Date(d.date);
  });

  // Render the chart
  const chart = new Chart(ctx, {
    type: 'bar',
    data: {
      datasets: [
        {
          label: 'new subscribers',
          data: chartData,
          backgroundColor: 'rgba(220,20,20,0.5)',
        },
      ],
    },
    options: {
      responsive: true,
      scales: {
        xAxes: [
          {
            type: 'time',
            time: {
              unit: 'day',
              round: 'day',
              displayFormats: {
                day: 'MMM D',
              },
            },
          },
        ],
        yAxes: [
          {
            ticks: {
              beginAtZero: true,
            },
          },
        ],
      },
    },
  });
});
</script>
{% endblock %}

{% block content %}
<!-- Render our chart -->
<div style="width: 80%;">
  <canvas style="margin-bottom: 30px; width: 60%; height: 50%;" id="myChart"></canvas>
</div>
<!-- Render the rest of the ChangeList view -->
{{ block.super }}
{% endblock %}

# web/templates/admin/web/emailsubscriber/change_list.html

{% extends "admin/change_list.html" %}

{% load static %}

{% block extrahead %}

document.addEventListener('DOMContentLoaded', () => {

const ctx = document.getElementById('myChart').getContext('2d');

// Sample data

const chartData = [

{"date": "2019-08-08T00:00:00Z", "y": 3},

{"date": "2019-08-07T00:00:00Z", "y": 10},

{"date": "2019-08-06T00:00:00Z", "y": 15},

{"date": "2019-08-05T00:00:00Z", "y": 4},

{"date": "2019-08-03T00:00:00Z", "y": 2},

{"date": "2019-08-04T00:00:00Z", "y": 11},

{"date": "2019-08-02T00:00:00Z", "y": 3},

{"date": "2019-08-01T00:00:00Z", "y": 2},

];

// Parse the dates to JS

chartData.forEach((d) => {

d.x = new Date(d.date);

});

// Render the chart

const chart = new Chart(ctx, {

type: 'bar',

data: {

datasets: [

{

label: 'new subscribers',

data: chartData,

backgroundColor: 'rgba(220,20,20,0.5)',

options: {

responsive: true,

scales: {

xAxes: [

{

type: 'time',

time: {

unit: 'day',

round: 'day',

displayFormats: {

day: 'MMM D',

yAxes: [

{

ticks: {

beginAtZero: true,

});

</script>

{% endblock %}

{% block content %}

</div>

{% endblock %}

Voil®，我们现在已经呈现了一个图表.js图表到django管理员。唯一的问题是数据是硬编码的，而不是从我们的后端派生的。

将图表数据注入管理模板

ModelAdmin 类具有一个称为更改列表_视图的方法。此方法负责呈现 ChangeList 页。通过重写此方法，我们可以将图表数据注入到模板上下文中。

下面的代码大致执行以下操作：

以每日间隔聚合新订户的总数
将 Django 查询集编码为 JSON
将数据添加到模板上下文
调用 super（）方法来呈现页面

# django_admin_chart_js/web/admin.py
import json

from django.contrib import admin
from django.core.serializers.json import DjangoJSONEncoder
from django.db.models import Count
from django.db.models.functions import TruncDay

from .models import EmailSubscriber


@admin.register(EmailSubscriber)
class EmailSubscriberAdmin(admin.ModelAdmin):
    list_display = ("id", "email", "created_at")
    ordering = ("-created_at",)

    def changelist_view(self, request, extra_context=None):
        # Aggregate new subscribers per day
        chart_data = (
            EmailSubscriber.objects.annotate(date=TruncDay("created_at"))
            .values("date")
            .annotate(y=Count("id"))
            .order_by("-date")
        )

        # Serialize and attach the chart data to the template context
        as_json = json.dumps(list(chart_data), cls=DjangoJSONEncoder)
        extra_context = extra_context or {"chart_data": as_json}

        # Call the superclass changelist_view to render the page
        return super().changelist_view(request, extra_context=extra_context)

# django_admin_chart_js/web/admin.py

import json

from django.contrib import admin

from django.core.serializers.json import DjangoJSONEncoder

from django.db.models import Count

from django.db.models.functions import TruncDay

from .models import EmailSubscriber

@admin.register(EmailSubscriber)

class EmailSubscriberAdmin(admin.ModelAdmin):

list_display = ("id", "email", "created_at")

ordering = ("-created_at",)

def changelist_view(self, request, extra_context=None):

# Aggregate new subscribers per day

chart_data = (

EmailSubscriber.objects.annotate(date=TruncDay("created_at"))

.values("date")

.annotate(y=Count("id"))

.order_by("-date")

)

# Serialize and attach the chart data to the template context

as_json = json.dumps(list(chart_data), cls=DjangoJSONEncoder)

extra_context = extra_context or {"chart_data": as_json}

# Call the superclass changelist_view to render the page

return super().changelist_view(request, extra_context=extra_context)

数据现在应在技术上添加到模板上下文中，但现在我们必须在图表中使用它，而不是硬编码数据。

将图表数据变量中的硬编码数据替换为后端的数据：

// django_admin_chart_js/web/templates/admin/web/emailsubscriber/change_list.html
const chartData = {{ chart_data | safe }};

// django_admin_chart_js/web/templates/admin/web/emailsubscriber/change_list.html

const chartData = {{ chart_data | safe }};

重新加载页面以查看我们美丽的图表。

使用 JS 动态加载数据

在上面的示例中，我们将初始图表数据直接注入 html 模板。在初始页面加载后，我们可以进行更多的交互式和提取数据。为此，我们需要：

向模型管理员添加新终结点，该终结点返回 JSON 数据
添加 JS 逻辑，在按钮单击时进行 AJAX 调用并重新呈现图表

添加新终结点需要我们将get_urls（）方法覆盖到模型管理员之上，并注入我们自己的终结点 URL。

请务必注意，您的自定义 URL 应先于默认 URL。默认的允许性，将匹配任何内容，因此请求永远不会通过我们的自定义方法。

我们的 python 代码现在应该如下所示：

# web/admin.py
import json

from django.contrib import admin
from django.core.serializers.json import DjangoJSONEncoder
from django.db.models import Count
from django.db.models.functions import TruncDay
from django.http import JsonResponse
from django.urls import path

from .models import EmailSubscriber

@admin.register(EmailSubscriber)
class EmailSubscriberAdmin(admin.ModelAdmin):
    list_display = ("id", "email", "created_at")
    ordering = ("-created_at",)

    ...

    def get_urls(self):
        urls = super().get_urls()
        extra_urls = [
            path("chart_data/", self.admin_site.admin_view(self.chart_data_endpoint))
        ]
        # NOTE! Our custom urls have to go before the default urls, because they
        # default ones match anything.
        return extra_urls + urls

    # JSON endpoint for generating chart data that is used for dynamic loading
    # via JS.
    def chart_data_endpoint(self, request):
        chart_data = self.chart_data()
        return JsonResponse(list(chart_data), safe=False)

    def chart_data(self):
        return (
            EmailSubscriber.objects.annotate(date=TruncDay("created_at"))
            .values("date")
            .annotate(y=Count("id"))
            .order_by("-date")
        )

# web/admin.py

import json

from django.contrib import admin

from django.core.serializers.json import DjangoJSONEncoder

from django.db.models import Count

from django.db.models.functions import TruncDay

from django.http import JsonResponse

from django.urls import path

from .models import EmailSubscriber

@admin.register(EmailSubscriber)

class EmailSubscriberAdmin(admin.ModelAdmin):

list_display = ("id", "email", "created_at")

ordering = ("-created_at",)

...

def get_urls(self):

urls = super().get_urls()

extra_urls = [

path("chart_data/", self.admin_site.admin_view(self.chart_data_endpoint))

]

# NOTE! Our custom urls have to go before the default urls, because they

# default ones match anything.

return extra_urls + urls

# JSON endpoint for generating chart data that is used for dynamic loading

# via JS.

def chart_data_endpoint(self, request):

chart_data = self.chart_data()

return JsonResponse(list(chart_data), safe=False)

def chart_data(self):

return (

EmailSubscriber.objects.annotate(date=TruncDay("created_at"))

.values("date")

.annotate(y=Count("id"))

.order_by("-date")

)

我们还需要添加 Javascript 逻辑，以在按钮单击时重新加载图表数据并重新呈现图表。在图表变量的声明下方添加以下行：

  // django_admin_chart_js/web/templates/admin/web/emailsubscriber/change_list.html

  const chart = new Chart...
  ...

  // Reload chart data from the backend on button click
  const btn = document.querySelector('#reload');
  btn.addEventListener('click', async() => {
    const res = await fetch("/admin/web/emailsubscriber/chart_data/");
    const json = await res.json();
    json.forEach((d) => {
      d.x = new Date(d.date);
    });
    chart.data.datasets[0].data = json;
    chart.update();
  });

// django_admin_chart_js/web/templates/admin/web/emailsubscriber/change_list.html

const chart = new Chart...

...

// Reload chart data from the backend on button click

const btn = document.querySelector('#reload');

btn.addEventListener('click', async() => {

const res = await fetch("/admin/web/emailsubscriber/chart_data/");

const json = await res.json();

json.forEach((d) => {

d.x = new Date(d.date);

});

chart.data.datasets[0].data = json;

chart.update();

});

在图表中添加下面的 html 按钮：

{% block content %}
<!-- Render our chart -->
<div style="width: 80%;">
  <canvas style="margin-bottom: 30px; width: 60%; height: 50%;" id="myChart"></canvas>
</div>

<button id="reload" style="margin: 1rem 0">Reload chart data</button>
<!-- Render the rest of the ChangeList view -->
{{ block.super }}
{% endblock %}