Setting it up with django-plotly-dash

djangomain/settings.py

@@ -78,6 +78,7 @@
     "management",
     "crispy_forms",
     "crispy_bootstrap4",
+    "django_plotly_dash.apps.DjangoPlotlyDashConfig",
 ]
 
 MIDDLEWARE = [
@@ -91,6 +92,7 @@
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
+    "django_plotly_dash.middleware.BaseMiddleware",
 ]
 
 ROOT_URLCONF = "djangomain.urls"
@@ -246,3 +248,5 @@
 
 CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap4"
 CRISPY_TEMPLATE_PACK = "bootstrap4"
+
+X_FRAME_OPTIONS = "SAMEORIGIN"

djangomain/urls.py

@@ -67,6 +67,7 @@
         name="schema-swagger-ui",
     ),
     re_path(r"^redoc/$", schema_view.with_ui("redoc"), name="schema-redoc"),
+    path("django_plotly_dash/", include("django_plotly_dash.urls")),
 ]
 
 urlpatterns += [

requirements.txt

@@ -19,6 +19,7 @@ pytz==2023.3.post1
 PyYAML==6.0.1
 uritemplate==4.1.1
 crispy-bootstrap4==2023.1
+django-plotly-dash==2.2.2
 
 ## Legacy dependency versions
 # asgiref==3.3.4

validated/dash_apps/finished_apps/daily_validation.py

@@ -0,0 +1,38 @@
+from datetime import datetime
+from decimal import Decimal
+import plotly.express as px
+from dash import dcc, html
+from django_plotly_dash import DjangoDash
+
+from station.models import Station
+from variable.models import Variable
+from validated.functions import daily_validation
+
+# Create a Dash app
+app = DjangoDash("DailyValidation")
+
+# Filters (in final app this will get data from forms)
+station: Station = Station.objects.order_by("station_code")[7]
+variable: Variable = Variable.objects.order_by("variable_code")[0]
+start_time: datetime = datetime.strptime("2023-03-01", "%Y-%m-%d")
+end_time: datetime = datetime.strptime("2023-03-31", "%Y-%m-%d")
+minimum: Decimal = Decimal(-5)
+maximum: Decimal = Decimal(28)
+
+# Load data
+data: dict = daily_validation(
+    station=station,
+    variable=variable,
+    start_time=start_time,
+    end_time=end_time,
+    minimum=minimum,
+    maximum=maximum,
+)
+
+# Create plot
+x = data["series"]["measurement"]["time"]
+y = data["series"]["measurement"]["average"]
+plot = px.line(x=x, y=y)
+
+# Create layout
+app.layout = html.Div([dcc.Graph(figure=plot)])

validated/static/validated/daily_validation.js

@@ -2133,4 +2133,3 @@ function enable_new(){
 Array.prototype.unique=function(a){
   return function(){return this.filter(a)}}(function(a,b,c){return c.indexOf(a,b+1)<0
 });
-

validated/templates/daily_validation_dash.html

@@ -0,0 +1,3 @@
+{% load plotly_dash %}
+
+{% plotly_app name="DailyValidation" %}

validated/urls.py

@@ -13,6 +13,7 @@
 
 from django.urls import path
 from rest_framework.urlpatterns import format_suffix_patterns
+from .dash_apps.finished_apps import daily_validation
 
 from . import views
 
@@ -67,6 +68,11 @@
         views.view_launch_report_calculations,
         name="launch_report_calculations",
     ),
+    path(
+        "daily_validation_dash/",
+        views.DailyValidationDash.as_view(),
+        name="daily_validation_dash",
+    ),
 ]
 
 urlpatterns = format_suffix_patterns(urlpatterns)

validated/views.py

@@ -20,6 +20,7 @@
 from django.core.serializers.json import DjangoJSONEncoder
 from django.http import HttpResponse, JsonResponse
 from django.shortcuts import render
+from django.views import View
 from django.views.generic import FormView, ListView
 from rest_framework import generics
 
@@ -426,6 +427,11 @@ def post(self, request, *args, **kwargs):
         return render(request, "home/message.html", {"message": form})
 
 
+class DailyValidationDash(View):
+    def get(self, request, *args, **kwargs):
+        return render(request, "daily_validation_dash.html")
+
+
 def view_launch_report_calculations(request):
     """
     Function that receives the signal for calculating reports: hourly, daily, monthly from user interface