[fix] Fixed dashboard pie charts not showing 0 for no data #301

Fixes #301

Author: nemesifier

openwisp_utils/admin_theme/static/admin/js/ow-dashboard.js

@@ -1,6 +1,20 @@
 (function() {
+
   'use strict';
 
+  function slugify(str) {
+    str = str.replace(/^\s+|\s+$/g, '');
+    // Make the string lowercase
+    str = str.toLowerCase();
+    // Remove invalid chars
+    str = str.replace(/[^a-z0-9 -]/g, '')
+      // Collapse whitespace and replace by -
+      .replace(/\s+/g, '-')
+      // Collapse dashes
+      .replace(/-+/g, '-');
+    return str;
+  }
+
   let elementsParam = Object.values(owDashboardCharts),
       container = document.getElementById('plot-container');
 
@@ -38,10 +52,11 @@
       type: 'pie',
       hole: 0.6,
     },
-    element = document.createElement('div');
+    element = document.createElement('div'),
+    totalValues = 0;
 
     // Show a graph depicting disabled graph when there is insufficient data
-    if (elementsParam[i].query_params.values.length == 0) {
+    if (elementsParam[i].query_params.values.length === 0) {
       data.values = [1];
       data.labels = ['Not enough data'];
       data.marker = {
@@ -71,23 +86,22 @@
       data.filters = elementsParam[i].filters;
 
       // add total to pie chart
-      var total = 0;
       for (var c = 0; c < data.values.length; c++) {
-        total += data.values[c];
+        totalValues += data.values[c];
       }
-      layout.annotations = [
-        {
-          font: {
-            size: 20,
-            weight: 'bold'
-          },
-          showarrow: false,
-          text: `<b>${total}</b>`,
-          x: 0.5,
-          y: 0.5
-        }
-      ];
     }
+    layout.annotations = [
+      {
+        font: {
+          size: 20,
+          weight: 'bold'
+        },
+        showarrow: false,
+        text: `<b>${totalValues}</b>`,
+        x: 0.5,
+        y: 0.5
+      }
+    ];
 
     Plotly.newPlot(element, [data], layout, options);
 
@@ -104,6 +118,28 @@
         window.location = path;
       });
     }
+
+    // Add quick link button
+    if (elementsParam[i].hasOwnProperty('quick_link')) {
+      let quickLinkContainer = document.createElement('div');
+      quickLinkContainer.classList.add('quick-link-container');
+      let quickLink = document.createElement('a');
+      quickLink.href = elementsParam[i].quick_link.url;
+      quickLink.innerHTML = elementsParam[i].quick_link.label;
+      quickLink.title = elementsParam[i].quick_link.title || elementsParam[i].quick_link.label;
+      quickLink.classList.add('button', 'quick-link');
+      // Add custom css classes
+      if (elementsParam[i].quick_link.custom_css_classes) {
+        for(let j=0; j<elementsParam[i].quick_link.custom_css_classes.length; ++j){
+          quickLink.classList.add(elementsParam[i].quick_link.custom_css_classes[j]);
+        }
+      }
+      quickLinkContainer.appendChild(quickLink);
+      element.appendChild(
+        quickLinkContainer
+      );
+    }
+    element.classList.add(slugify(elementsParam[i].name));
     container.appendChild(element);
   }
 

tests/test_project/tests/test_selenium.py

@@ -6,7 +6,7 @@
 from selenium.webdriver.support import expected_conditions as EC
 from selenium.webdriver.support.ui import WebDriverWait
 
-from ..models import Book, Shelf
+from ..models import Book, Operator, Shelf
 from . import CreateMixin
 from .utils import SeleniumTestMixin
 
@@ -643,3 +643,35 @@ def test_input_filters(self):
             self.web_driver.find_element_by_css_selector('.field-clear').click()
             self.web_driver.find_element_by_xpath(admin_xpath)
             self.web_driver.find_element_by_xpath(user_xpath)
+
+
+class TestDashboardCharts(SeleniumTestMixin, CreateMixin, StaticLiveServerTestCase):
+    @classmethod
+    def setUpClass(cls):
+        super().setUpClass()
+
+    def setUp(self):
+        self.admin = self._create_admin()
+        self.web_driver.set_window_size(1600, 768)
+
+    def test_pie_chart_zero_annotation(self):
+        Operator.objects.all().delete()
+        self.login()
+        url = reverse('admin:index')
+        self.open(url)
+        try:
+            WebDriverWait(self.web_driver, 10).until(
+                EC.visibility_of_element_located(
+                    (
+                        By.CSS_SELECTOR,
+                        '.operator-project-distribution .annotation-text tspan',
+                    )
+                )
+            )
+        except TimeoutException:
+            self.fail('Failed to find annotation text element in the chart')
+        else:
+            annotation_text = self.web_driver.find_element_by_css_selector(
+                '.operator-project-distribution .annotation-text tspan'
+            )
+            self.assertEqual(annotation_text.text, '0')