Enhance Dashboard presentation

Fix issue with having the same chart in two locations on page
RamezIssac · Jun 13, 2024 · d782627 · d782627
1 parent 382dab9
commit d782627
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 19 deletions.
diff --git a/demo_proj/templates/dashboard.html b/demo_proj/templates/dashboard.html
@@ -9,16 +9,16 @@
         <div class="col-lg-6">
             {% get_widget_from_url url_name="product-sales" %}
         </div>
-                <div class="col-lg-6">
-            {% get_widget_from_url url_name="total-product-sales" title="Widget custom title" %}
+        <div class="col-lg-6">
+            {% get_widget_from_url url_name="total-product-sales-by-country" title="Widget custom title" %}
         </div>
 
         <div class="col-lg-6">
             {% get_widget_from_url url_name="total-product-sales" chart_id=1 title="Custom default Chart" %}
         </div>
 
         <div class="col-lg-6">
-            {% get_widget_from_url url_name="total-product-sales" display_table=False title="No table, Chart Only" %}
+            {% get_widget_from_url url_name="monthly-product-sales" chart_id=1 display_table=False title="No table, Chart Only" %}
         </div>
 
         <div class="col-lg-6">

diff --git a/slick_reporting/static/slick_reporting/slick_reporting.highchart.js b/slick_reporting/static/slick_reporting/slick_reporting.highchart.js
@@ -380,7 +380,8 @@
             }
 
             let chart = $elem.find("div[data-inner-chart-container]")
-            let cache_key = data.report_slug + ':' + chartOptions.id;
+
+            let cache_key = $.slick_reporting.get_xpath($elem) + ":" + data.report_slug + ':' + chartOptions.id;
             try {
                 let existing_chart = _chart_cache[cache_key];
                 if (typeof (existing_chart) !== 'undefined') {

diff --git a/slick_reporting/static/slick_reporting/slick_reporting.js b/slick_reporting/static/slick_reporting/slick_reporting.js
@@ -1,23 +1,23 @@
 (function ($) {
 
     function executeFunctionByName(functionName, context /*, args */) {
-    let args = Array.prototype.slice.call(arguments, 2);
-    let namespaces = functionName.split(".");
-    let func = namespaces.pop();
-    for (let i = 0; i < namespaces.length; i++) {
-        context = context[namespaces[i]];
-    }
-    try {
-        func = context[func];
-        if (typeof func == 'undefined') {
-            throw `Function ${functionName} is not found in the context ${context}`
+        let args = Array.prototype.slice.call(arguments, 2);
+        let namespaces = functionName.split(".");
+        let func = namespaces.pop();
+        for (let i = 0; i < namespaces.length; i++) {
+            context = context[namespaces[i]];
         }
+        try {
+            func = context[func];
+            if (typeof func == 'undefined') {
+                throw `Function ${functionName} is not found in the context ${context}`
+            }
 
-    } catch (err) {
-        console.error(`Function ${functionName} is not found in the context ${context}`, err)
+        } catch (err) {
+            console.error(`Function ${functionName} is not found in the context ${context}`, err)
+        }
+        return func.apply(context, args);
     }
-    return func.apply(context, args);
-}
 
     function getObjFromArray(objList, obj_key, key_value, failToFirst) {
         failToFirst = typeof (failToFirst) !== 'undefined';
@@ -64,12 +64,42 @@
         return total_container;
     }
 
+    function get_xpath($element, forceTree) {
+        if ($element.length === 0) {
+            return null;
+        }
+
+        let element = $element[0];
+
+        if ($element.attr('id') && ((forceTree === undefined) || !forceTree)) {
+            return '//*[@id="' + $element.attr('id') + '"]';
+        } else {
+            let paths = [];
+            for (; element && element.nodeType === Node.ELEMENT_NODE; element = element.parentNode) {
+                let index = 0;
+                for (var sibling = element.previousSibling; sibling; sibling = sibling.previousSibling) {
+                    if (sibling.nodeType === Node.DOCUMENT_TYPE_NODE)
+                        continue;
+                    if (sibling.nodeName === element.nodeName)
+                        ++index;
+                }
+
+                var tagName = element.nodeName.toLowerCase();
+                var pathIndex = (index ? '[' + (index + 1) + ']' : '');
+                paths.splice(0, 0, tagName + pathIndex);
+            }
+
+            return paths.length ? '/' + paths.join('/') : null;
+        }
+    }
+
 
     $.slick_reporting = {
         'getObjFromArray': getObjFromArray,
         'calculateTotalOnObjectArray': calculateTotalOnObjectArray,
         "executeFunctionByName": executeFunctionByName,
-        defaults:{
+        "get_xpath": get_xpath,
+        defaults: {
             total_label: 'Total',
         }