So erstellen Sie ein Analyse-Dashboard in einer Django-App

Hallo Leute!

Python , Datenvisualisierung und Programmierung sind die Themen, denen ich mich intensiv widme. Deshalb möchte ich Ihnen meine Ideen und meine Begeisterung mitteilen, neue Wege zu finden, um Daten auf sinnvolle Weise darzustellen.

Der Fall, den ich behandeln werde, ist ziemlich häufig: Sie haben Daten am hinteren Ende Ihrer App und möchten sie am vorderen Ende formen. Wenn Ihnen eine solche Situation bekannt vorkommt, kann dieses Tutorial hilfreich sein.

Nachdem Sie es abgeschlossen haben, haben Sie eine Django-basierte App mit interaktiven Pivot-Tabellen und Diagrammen .

Voraussetzungen

Um sicher durch die Schritte zu gehen, benötigen Sie Grundkenntnisse des Django-Frameworks und ein wenig Kreativität . ✨

Um mitzumachen, können Sie das GitHub-Beispiel herunterladen.

Hier ist eine kurze Liste der Tools, die wir verwenden werden:

  • Python 3.7.4
  • Django
  • Virtualenv
  • Flexmonster Pivot Table & Charts (JavaScript-Bibliothek)
  • SQLite

Wenn Sie bereits ein Django-Projekt eingerichtet haben und sich über den grundlegenden Ablauf beim Erstellen von Apps sicher sind, können Sie direkt zum Abschnitt Verbinden von Daten mit Flexmonster springen, in dem erläutert wird, wie Sie Datenvisualisierungskomponenten hinzufügen.

Lasst uns beginnen!

Erste Schritte mit Django

Stellen Sie zunächst sicher, dass Sie Django auf Ihrem Computer installiert haben. Als Faustregel gilt, dass Sie es in Ihrer zuvor eingerichteten virtuellen Umgebung installieren müssen - ein leistungsstarkes Tool, mit dem Sie Ihre Projekte voneinander isolieren können.

Stellen Sie außerdem sicher, dass Sie in einem neu erstellten Verzeichnis aktiviert haben. Öffnen Sie Ihre Konsole und starten Sie ein Django-Projekt mit dem folgenden Befehl:

django-admin startproject analytics_project

Jetzt gibt es ein neues Verzeichnis namens analytics_project. Lassen Sie uns überprüfen, ob wir alles richtig gemacht haben. Gehen Sie zu analytics_projectund starten Sie den Server mit einem Konsolenbefehl:

python manage.py runserver

Öffnen Sie //127.0.0.1:8000/in Ihrem Browser. Wenn Sie diese fantastische Rakete sehen, ist alles in Ordnung:

Erstellen Sie als Nächstes eine neue App in Ihrem Projekt. Nennen wir es dashboard:

python manage.py startapp dashboard

Hier ein Tipp : Wenn Sie sich über den Unterschied zwischen den Konzepten von Apps und Projekten in Django nicht sicher sind, nehmen Sie sich etwas Zeit, um sich ein Bild davon zu machen, wie Django-Projekte organisiert sind.

Auf geht's. Jetzt sehen wir ein neues Verzeichnis innerhalb des Projekts. Es enthält die folgenden Dateien:

__init__.py damit Python es als Paket behandelt

admin.py - Einstellungen für die Django-Administrationsseiten

apps.py - Einstellungen für die Konfigurationen der App

models.py - Klassen, die vom ORM des Django in Datenbanktabellen konvertiert werden

tests.py - Testklassen

views.py - Funktionen und Klassen, die definieren, wie die Daten in den Vorlagen angezeigt werden

Anschließend muss die App im Projekt registriert werden.

Gehen Sie zu analytics_project/settings.pyund hängen Sie den Namen der App an die INSTALLED_APPSListe an:

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'dashboard', ]

Jetzt ist sich unser Projekt der Existenz der App bewusst.

Ansichten

In der dashboard/views.pyerstellen wir eine Funktion, die einen Benutzer zu den im dashboard/templatesOrdner definierten Vorlagen weiterleitet. Ansichten können auch Klassen enthalten.

So definieren wir es:

from django.http import JsonResponse from django.shortcuts import render from dashboard.models import Order from django.core import serializers def dashboard_with_pivot(request): return render(request, 'dashboard_with_pivot.html', {})

Nach dem Aufruf wird diese Funktion gerendert dashboard_with_pivot.html- eine Vorlage, die wir bald definieren werden. Es enthält die Komponenten Pivot-Tabelle und Pivot-Diagramme.

Noch ein paar Worte zu dieser Funktion. Das requestArgument, eine Instanz von HttpRequestObject, enthält Informationen zur Anforderung, z. B. die verwendete HTTP-Methode (GET oder POST). Die Methode rendersucht nach HTML-Vorlagen in einem templatesVerzeichnis im Verzeichnis der App.

Wir müssen auch eine Hilfsmethode erstellen, die die Antwort mit Daten an die Pivot-Tabelle im Front-End der App sendet. Nennen wir es pivot_data:

def pivot_data(request): dataset = Order.objects.all() data = serializers.serialize('json', dataset) return JsonResponse(data, safe=False)

Wahrscheinlich Ihre IDE wird Ihnen sagen , dass es keinen Hinweis finden Orderin models.py. Kein Problem - wir werden uns später darum kümmern.

Vorlagen

Im Moment werden wir das Django-Vorlagensystem nutzen.

Lassen Sie uns ein neues Verzeichnis templatesinnerhalb dashboardund erstellen Sie die erste HTML - Vorlage aufgerufen dashboard_with_pivot.html. Es wird dem Benutzer auf Anfrage angezeigt. Hier fügen wir auch die Skripte und Container für Datenvisualisierungskomponenten hinzu:

  Dashboard with Flexmonster 

Zuordnen von Ansichtsfunktionen zu URLs

Um die Ansichten aufzurufen und dem Benutzer gerenderte HTML-Vorlagen anzuzeigen, müssen die Ansichten den entsprechenden URLs zugeordnet werden.

Hier ist ein Tipp: Eines der URL-Designprinzipien von Django besagt, dass wir keine URLs mit denselben Namen wie Python-Funktionen erstellen sollten.

Go to analytics_app/urls.py and add relevant configurations for the dashboard app at the project's level.

from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('dashboard/', include('dashboard.urls')), ] 

Now the URLs from the dashboard app can be accessed but only if they are prefixed by dashboard.

After, go to dashboard/urls.py (create this file if it doesn’t exist) and add a list of URL patterns that are mapped to the view functions:

from django.urls import path from . import views urlpatterns = [ path('', views.dashboard_with_pivot, name="dashboard_with_pivot"), path('data', views.pivot_data, name="pivot_data"), ]

Model

And, at last, we've gotten to data modeling. This is my favorite part.

As you might know, a data model is a conceptual representation of the data stored in a database.

Since the purpose of this tutorial is to show how to build interactive data visualization inside the app, we won’t be worrying much about the database choice. We’ll be using SQLite - a lightweight database that ships with the Django web development server.

But keep in mind that this database is not the appropriate choice for production development. With the Django ORM, you can use other databases that use the SQL language, such as PostgreSQL or MySQL.

For the sake of simplicity, our model will consist of one class. You can create more classes and define relationships between them, complex or simple ones.

Imagine we're designing a dashboard for the sales department. So, let's create an Order class and define its attributes in dashboard/models.py:

from django.db import models class Order(models.Model): product_category = models.CharField(max_length=20) payment_method = models.CharField(max_length=50) shipping_cost = models.CharField(max_length=50) unit_price = models.DecimalField(max_digits=5, decimal_places=2)

Working with a database

Now we need to create a database and populate it with records.

But how can we translate our model class into a database table?

This is where the concept of migration comes in handy. Migration is simply a file that describes which changes must be applied to the database. Every time we need to create a database based on the model described by Python classes, we use migration.

The data may come as Python objects, dictionaries, or lists. This time we'll represent the entities from the database using Python classes that are located in the models directory.

Create migration for the app with one command:

python manage.py makemigrations dashboard

Here we specified that the app should tell Django to apply migrations for the dashboard app's models.

After creating a migration file, apply migrations described in it and create a database:

python manage.py migrate dashboard

If you see a new file db.sqlite3 in the project's directory, we are ready to work with the database.

Let's create instances of our Order class. For this, we'll use the Django shell - it's similar to the Python shell but allows accessing the database and creating new entries.

So, start the Django shell:

python manage.py shell

And write the following code in the interactive console:

from dashboard.models import Order >>> o1 = Order( ... product_category="Books", ... payment_method="Credit Card", ... shipping_cost=39, ... unit_price=59 ... ) >>> o1.save()

Similarly, you can create and save as many objects as you need.

Connecting data to Flexmonster

And here's what I promised to explain.

Let's figure out how to pass the data from your model to the data visualization tool on the front end.

To make the back end and Flexmonster communicate, we can follow two different approaches:

  • Using the request-response cycle. We can use Python and the Django template engine to write JavaScript code directly in the template.
  • Using an async request (AJAX) that returns the data in JSON.

In my mind, the second one is the most convenient because of a number of reasons. First of all, Flexmonster understands JSON. To be precise, it can accept an array of JSON objects as input data. Another benefit of using async requests is the better page loading speed and more maintainable code.

Let's see how it works.

Go to the templates/dashboard_pivot.html.

Here we've created two div containers where the pivot grid and pivot charts will be rendered.

Within the ajax call, we make a request based on the URL contained in the data-URL property. Then we tell the ajax request that we expect a JSON object to be returned (defined by dataType).

Once the request is completed, the JSON response returned by our server is set to the data parameter, and the pivot table, filled with this data, is rendered.

The query result (the instance of JSONResponse) returns a string that contains an array object with extra meta information, so we should add a tiny function for data processing on the front end. It will extract only those nested objects we need and put them into a single array. This is because Flexmonster accepts an array of JSON objects without nested levels.

function processData(dataset) { var result = [] dataset = JSON.parse(dataset); dataset.forEach(item => result.push(item.fields)); return result; }

After processing the data, the component receives it in the right format and performs all the hard work of data visualization. A huge plus is that there’s no need to group or aggregate the values of objects manually.

Here's how the entire script in the template looks:

function processData(dataset) { var result = [] dataset = JSON.parse(dataset); dataset.forEach(item => result.push(item.fields)); return result; } $.ajax({ url: $("#pivot-table-container").attr("data-url"), dataType: 'json', success: function(data) { new Flexmonster({ container: "#pivot-table-container", componentFolder: "//cdn.flexmonster.com/", width: "100%", height: 430, toolbar: true, report: { dataSource: { type: "json", data: processData(data) }, slice: {} } }); new Flexmonster({ container: "#pivot-chart-container", componentFolder: "//cdn.flexmonster.com/", width: "100%", height: 430, //toolbar: true, report: { dataSource: { type: "json", data: processData(data) }, slice: {}, "options": { "viewType": "charts", "chart": { "type": "pie" } } } }); } });

Don't forget to enclose this JavaScript code in tags.

Phew! We’re nearly there with this app.

Fields customization

Flexmonster provides a special property of the data source that allows setting field data types, custom captions, and defining multi-level hierarchies.

This is a nice feature to have - we can elegantly separate data and its presentation right in the report's configuration.

Add it to the dataSource property of the report:

mapping: { "product_category": { "caption": "Product Category", "type": "string" }, "payment_method": { "caption": "Payment Method", "type": "string" }, "shipping_cost": { "caption": "Shipping Cost", "type": "number" }, "unit_price": { "caption": "Unit Price", "type": "number" } }

Dashboard's design

To make the dashboard, we’ve rendered two instances of Flexmonster (you can create as many as you want, depending on the data visualization goals you want to reach). One is for the pivot table with summarized data, and the other is for the pivot charts.

Both instances share the same data source from our model. I encourage you to try making them work in sync: with the reportchange event, you can make one instance react to the changes in another one.

You can also redefine the ‘Export’ button’s functionality on the Toolbar to make it save your reports to the server.

Results

Let’s start the Django development server and open //127.0.0.1:8000/dashboard/ to see the resulting dashboard:

Looks nice, doesn't it?

Feedback

This time we learned how to create a simple Django app and display the data on the client side in the form of an analytics dashboard.

I do hope you enjoyed the tutorial!

Please leave your comments below - any feedback on the code’s improvement is highly appreciated.

References

The source code for the tutorial can be found on GitHub.

And here’s the project with Flexmonster & Django integration that inspired me for this tutorial.

Further, I recommend walking through important concepts in the documentation to master Django:

  • Migrations in Django
  • QuerySets
  • Serializing Django objects