Begin implementing charts

app/settings.py

@@ -40,6 +40,7 @@ INSTALLED_APPS = [
     "django.contrib.staticfiles",
     "crispy_forms",
     "crispy_bulma",
+    "chartjs",
 ]
 CRISPY_TEMPLATE_PACK = "bulma"
 CRISPY_ALLOWED_TEMPLATE_PACKS = ("bulma",)

app/urls.py

@@ -20,7 +20,8 @@ from django.urls import include, path
 from django.views.generic import TemplateView
 
 from core.ui.views.drilldown import Drilldown
-from core.views import Billing, Callback, Home, Order, Portal, Signup
+from core.views import (Billing, Callback, Home, Order, Portal,
+                        SentimentChartJSONView, Signup, VolumeChartJSONView)
 
 urlpatterns = [
     path("", Home.as_view(), name="home"),
@@ -36,4 +37,14 @@ urlpatterns = [
     path("accounts/", include("django.contrib.auth.urls")),
     path("accounts/signup/", Signup.as_view(), name="signup"),
     path("ui/drilldown/", Drilldown.as_view(), name="drilldown"),
+    path(
+        "ui/drilldown/chart/volume/json/",
+        VolumeChartJSONView.as_view(),
+        name="chart_volume_json",
+    ),
+    path(
+        "ui/drilldown/chart/sentiment/json/",
+        SentimentChartJSONView.as_view(),
+        name="chart_sentiment_json",
+    ),
 ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

core/templates/ui/drilldown.html

@@ -1,7 +1,8 @@
 {% extends "base.html" %}
 {% load static %}
 {% block content %}
-
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
   <div class="box">
     <form method="POST">
       {% csrf_token %}
@@ -139,6 +140,41 @@
         </div>
       </div>
     </div>
+
+    <div class="columns">
+      <div class="column is-half">
+        <div class="box">
+          <label class="label">Volume</label>
+          <canvas id="volumeChart"></canvas>
+          
+          <script type="text/javascript">
+            $.post('{% url "chart_volume_json" %}', { name: "John", time: "2pm" }, function(data) {
+                var ctx = $("#volumeChart").get(0).getContext("2d");
+                new Chart(ctx, {
+                  type: 'line', data: data
+                });
+            });
+          </script>
+          
+        </div>
+      </div>
+      <div class="column">
+        <div class="box">
+          <label class="label">Sentiment</label>
+          <canvas id="sentimentChart"></canvas>
+          <script type="text/javascript">
+            $.post('{% url "chart_sentiment_json" %}', { name: "John", time: "2pm" }, function(data) {
+                var ctx = $("#sentimentChart").get(0).getContext("2d");
+                new Chart(ctx, {
+                  type: 'line', data: data
+                });
+            });
+          </script>
+          
+        </div>
+      </div>
+    </div>
+
   {% endif %}
 
 {% endblock %}

core/views.py

@@ -2,11 +2,13 @@ import pprint
 from datetime import datetime
 
 import stripe
+from chartjs.views.lines import BaseLineChartView
 from django.conf import settings
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.http import HttpResponse, JsonResponse
 from django.shortcuts import redirect, render
 from django.urls import reverse, reverse_lazy
+from django.utils.decorators import method_decorator
 from django.views import View
 from django.views.decorators.csrf import csrf_exempt
 from django.views.generic.edit import CreateView
@@ -164,3 +166,70 @@ class Callback(APIView):
         else:
             return JsonResponse({"success": False}, status=500)
         return JsonResponse({"success": True})
+
+
+class CSRFExemptMixin(object):
+    @method_decorator(csrf_exempt)
+    def dispatch(self, *args, **kwargs):
+        return super(CSRFExemptMixin, self).dispatch(*args, **kwargs)
+
+
+class VolumeChartJSONView(CSRFExemptMixin, LoginRequiredMixin, BaseLineChartView):
+    def post(self, request, *args, **kwargs):
+        print("POST")
+        context = self.get_context_data(**kwargs)
+        return self.render_to_response(context)
+
+    def get_context_data(self, **kwargs):
+        data = super(VolumeChartJSONView, self).get_context_data(**kwargs)
+        # data["colors"] = islice(next_color(), 0, 50)
+        print("KWARGS", kwargs)
+        return data
+
+    def get_labels(self):
+        """Return 7 labels for the x-axis."""
+        return ["January", "February", "March", "April", "May", "June", "July"]
+
+    def get_providers(self):
+        """Return names of datasets."""
+        return ["Central", "Eastside", "Westside"]
+
+    def get_data(self):
+        """Return 3 datasets to plot."""
+
+        return [
+            [75, 44, 92, 11, 44, 95, 35],
+            [41, 92, 18, 3, 73, 87, 92],
+            [87, 21, 94, 3, 90, 13, 65],
+        ]
+
+
+class SentimentChartJSONView(CSRFExemptMixin, LoginRequiredMixin, BaseLineChartView):
+    def post(self, request, *args, **kwargs):
+        print("POST")
+        print(request.POST)
+        context = self.get_context_data(**kwargs)
+        return self.render_to_response(context)
+
+    def get_context_data(self, **kwargs):
+        data = super(SentimentChartJSONView, self).get_context_data(**kwargs)
+        # data["colors"] = islice(next_color(), 0, 50)
+        print("KWARGS", kwargs)
+        return data
+
+    def get_labels(self):
+        """Return 7 labels for the x-axis."""
+        return ["January", "February", "March", "April", "May", "June", "July"]
+
+    def get_providers(self):
+        """Return names of datasets."""
+        return ["Central", "Eastside", "Westside"]
+
+    def get_data(self):
+        """Return 3 datasets to plot."""
+
+        return [
+            [75, 44, 92, 11, 44, 95, 35],
+            [41, 92, 18, 3, 73, 87, 92],
+            [87, 21, 94, 3, 90, 13, 65],
+        ]

requirements.txt

@@ -5,3 +5,4 @@ crispy-bulma
 opensearch-py
 stripe
 django-rest-framework
+django-chartjs