From 62c651796993af348851951836010dace5910e1d Mon Sep 17 00:00:00 2001
From: eatyourpeas <simon@eatyourpeas.co.uk>
Date: Sat, 14 Dec 2024 13:03:34 +0000
Subject: [PATCH] fix the things i broke in the merge

---
 project/npda/templates/dashboard.html         | 132 ++++++++----------
 .../components/cards/imd_map_card.html        |  17 ++-
 project/npda/views/dashboard.py               |   1 +
 3 files changed, 74 insertions(+), 76 deletions(-)

diff --git a/project/npda/templates/dashboard.html b/project/npda/templates/dashboard.html
index 01e5f2fe..1cedb754 100644
--- a/project/npda/templates/dashboard.html
+++ b/project/npda/templates/dashboard.html
@@ -2,78 +2,68 @@
 {% load static %}
 {% load npda_tags %}
 {% block content %}
-{% url 'dashboard' as hx_get %}
-
-{% comment %} ADDS KONVA FOR WAFFLE PLOTS JUST WHEN THIS TEMPLATE IS RENDERED {% endcomment %}
-<script src="https://unpkg.com/konva@9/konva.min.js"></script>
-
-<div class="container mx-auto p-4 font-montserrat text-rcpch_dark_blue">
-  <div class="my-6">
-    <h1 class="text-5xl text-center">PDU Dashboard for {{pdu_lead_organisation.name}} ({{pdu_object.pz_code}})</h1>
-    <p class="text-center text-gray-500 mt-2">Calculated at {{ kpi_calculations_object.calculation_datetime }}</p>
-    <p class="text-center">This data has not been validated by the NPDA team.</p>
-  </div>
-  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-    <!-- PDU Information Card -->
-    {% include 'dashboard/components/cards/pdu_card.html' %}
-
-
-    <!-- Audit Details Card -->
-    {% include 'dashboard/components/cards/audit_details_card.html' %}
-
-    <!-- Total Eligible Patients Card -->
-    {% include 'dashboard/components/cards/total_eligible_patients_card.html' %}
-  </div>
-
-  <!-- UNIT REPORT -->
-  <h1 class="text-5xl text-center my-6">Unit Report</h1>
-
-  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
-    <!-- PATIENT CHARACTERISTICS CARD -->
-    {% include 'dashboard/components/cards/patient_characteristics_card.html' %}
-    <!-- TREATMENT REGIMEN CARD -->
-    {% include 'dashboard/components/cards/treatment_regimen_card.html' %}
-    <div class="flex flex-col gap-3">
-      <!-- HCL CARD -->
-      {% include 'dashboard/components/cards/hcl_use_card.html' %}
-      <!-- care at diagnosis CARD -->
-      {% include 'dashboard/components/cards/care_at_diagnosis_card.html' %}
+  {% url 'dashboard' as hx_get %}
+  {% comment %} ADDS KONVA FOR WAFFLE PLOTS JUST WHEN THIS TEMPLATE IS RENDERED {% endcomment %}
+  <script src="https://unpkg.com/konva@9/konva.min.js"></script>
+  <div class="container mx-auto p-4 font-montserrat text-rcpch_dark_blue">
+    <div class="my-6">
+      <h1 class="text-5xl text-center">
+        PDU Dashboard for {{ pdu_lead_organisation.name }} ({{ pdu_object.pz_code }})
+      </h1>
+      <p class="text-center text-gray-500 mt-2">
+        Calculated at {{ kpi_calculations_object.calculation_datetime }}
+      </p>
+      <p class="text-center">This data has not been validated by the NPDA team.</p>
     </div>
-  </div>
-  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 my-4">
-    <!-- HEALTH CHECKS COMPLETION RATE CARD -->
-    {% include 'dashboard/components/cards/health_checks_completion_rate_card.html' %}
-    <!-- ADDITIONAL CARE PROCESSES CARD -->
-    {% include 'dashboard/components/cards/additional_care_processes_card.html' %}
-    <div class="flex flex-col gap-3">
-      <!-- HBa1c CARD -->
-      {% include 'dashboard/components/cards/hba1c_card.html' %}
-      <!-- ADMISSIONS CARD -->
-      {% include 'dashboard/components/cards/admissions_card.html' %}
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <!-- PDU Information Card -->
+      {% include 'dashboard/components/cards/pdu_card.html' %}
+      <!-- Audit Details Card -->
+      {% include 'dashboard/components/cards/audit_details_card.html' %}
+      <!-- Total Eligible Patients Card -->
+      {% include 'dashboard/components/cards/total_eligible_patients_card.html' %}
     </div>
+    <!-- UNIT REPORT -->
+    <h1 class="text-5xl text-center my-6">Unit Report</h1>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+      <!-- PATIENT CHARACTERISTICS CARD -->
+      {% include 'dashboard/components/cards/patient_characteristics_card.html' %}
+      <!-- TREATMENT REGIMEN CARD -->
+      {% include 'dashboard/components/cards/treatment_regimen_card.html' %}
+      <div class="flex flex-col gap-3">
+        <!-- HCL CARD -->
+        {% include 'dashboard/components/cards/hcl_use_card.html' %}
+        <!-- care at diagnosis CARD -->
+        {% include 'dashboard/components/cards/care_at_diagnosis_card.html' %}
+      </div>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 my-4">
+      <!-- HEALTH CHECKS COMPLETION RATE CARD -->
+      {% include 'dashboard/components/cards/health_checks_completion_rate_card.html' %}
+      <!-- ADDITIONAL CARE PROCESSES CARD -->
+      {% include 'dashboard/components/cards/additional_care_processes_card.html' %}
+      <div class="flex flex-col gap-3">
+        <!-- HBa1c CARD -->
+        {% include 'dashboard/components/cards/hba1c_card.html' %}
+        <!-- ADMISSIONS CARD -->
+        {% include 'dashboard/components/cards/admissions_card.html' %}
+      </div>
+    </div>
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 my-4">
+      <!-- SEX CARD -->
+      {% include 'dashboard/components/cards/sex_card.html' %}
+      <!-- ETHNICITY CARD -->
+      {% include 'dashboard/components/cards/ethnicity_card.html' %}
+      <!-- IMD CARD -->
+      {% include 'dashboard/components/cards/imd_card.html' %}
+    </div>
+    <!-- IMD MAP CARD -->
+    <div class="grid grid-cols-1 min-h-80">
+      {% include 'dashboard/components/cards/imd_map_card.html' with scatterplot_of_cases_for_selected_organisation=charts.scatterplot_of_cases_for_selected_organisation pdu_lead_organisation=pdu_lead_organisation pdu_object=pdu_object %}
+    </div>
+    <!-- PATIENT LEVEL REPORT -->
+    <h1 class="text-5xl text-center my-6">Patient-Level Report</h1>
+    <!-- SELECT TABS & TABLE -->
+    {% include 'dashboard/pt_level_report_table_partial.html' with text=default_pt_level_menu_text selected=default_pt_level_menu_tab_selected highlight=default_highlight %}
   </div>
-  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 my-4">
-    <!-- SEX CARD -->
-    {% include 'dashboard/components/cards/sex_card.html' %}
-    <!-- ETHNICITY CARD -->
-    {% include 'dashboard/components/cards/ethnicity_card.html' %}
-    <!-- IMD CARD -->
-    {% include 'dashboard/components/cards/imd_card.html' %}
-  </div>
-
-  <!-- IMD MAP CARD -->
-  <div class="grid grid-cols-1 min-h-80">
-  {% include 'dashboard/components/cards/imd_map_card.html' with scatterplot_of_cases_for_selected_organisation=charts.scatterplot_of_cases_for_selected_organisation pdu_lead_organisation=pdu_lead_organisation pdu_object=pdu_object %}
-  </div>
-
-  <!-- PATIENT LEVEL REPORT -->
-  <h1 class="text-5xl text-center my-6">Patient-Level Report</h1>
-
-  <!-- SELECT TABS & TABLE -->
-  {% include 'dashboard/pt_level_report_table_partial.html' with text=default_pt_level_menu_text selected=default_pt_level_menu_tab_selected highlight=default_highlight%}
-
-
-
-</div>
 {% endblock content %}
-
diff --git a/project/npda/templates/dashboard/components/cards/imd_map_card.html b/project/npda/templates/dashboard/components/cards/imd_map_card.html
index d82185ab..80071fce 100644
--- a/project/npda/templates/dashboard/components/cards/imd_map_card.html
+++ b/project/npda/templates/dashboard/components/cards/imd_map_card.html
@@ -3,11 +3,18 @@
   Distribution of patients ({{ pdu_object.lead_organisation_name }} {{ pdu_object.pz_code }})
 {% endblock card_title %}
 {% block card_body %}
-  <figure>
-    <div id="organisation_cases_map" style="width: 100%"></div>
-  </figure>
-  {% comment %} <div hx-get="{% url 'get_map_chart_partial' %}" hx-vals='{{ charts.map }}' hx-trigger="load" hx-swap="innerHTML" hx-indicator="#loading-spinner">
-  </div> {% endcomment %}
+  <div hx-get="{% url 'get_map_chart_partial' %}"
+       hx-trigger="load"
+       hx-swap="innerHTML"
+       hx-target="#organisation_cases_map"
+       hx-indicator="#loading-spinner"
+       _="on htmx:afterSwap remove #loading-spinner">
+    <figure>
+      <div id="organisation_cases_map" style="width: 100%">
+        {% include 'dashboard/map_chart_partial.html' with chart_html=chart_html %}
+      </div>
+    </figure>
+  </div>
   <div id="loading-spinner"
        class="loading loading-spinner text-rcpch_dark_blue flex-grow-1 w-1/5 mx-auto">
   </div>
diff --git a/project/npda/views/dashboard.py b/project/npda/views/dashboard.py
index 468f09f7..8a51696c 100644
--- a/project/npda/views/dashboard.py
+++ b/project/npda/views/dashboard.py
@@ -7,6 +7,7 @@
 from typing import Literal
 
 import plotly.graph_objects as go
+import plotly.io as pio
 
 # Django imports
 from django.apps import apps