Merge branch 'release/v1.3.1'

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.3.1] - 2024-06-16
+- Fix issue with Line Chart on highcharts engine
+- Reintroduce the stacking option on highcharts engine.
+- Fix issue with having different version of the same chart on the same page.
+- Enhanced the demo dashboard to show more capabilities regarding the charts.
+
 ## [1.3.0] - 2023-11-08
 - Implement Slick reporting media override feature + docs
 - Add `Integrating reports into your Admin site` section to the docs

demo_proj/demo_app/reports.py

@@ -601,20 +601,83 @@ class ChartJSExample(TimeSeriesReport):
             title_source=["name"],
             plot_total=True,
         ),
+        # Chart(
+        #     "Total Sales [Line details]",
+        #     Chart.LINE,
+        #     data_source=["sum__value"],
+        #     title_source=["name"],
+        #     # plot_total=True,
+        # ),
+    ]
+
+
+class HighChartExample(TimeSeriesReport):
+    chart_engine = "highcharts"
+    report_title = _("Highcharts Examples ")
+
+    chart_settings = [
+        Chart("Client Sales [Column]", Chart.COLUMN, data_source=["sum__value"], title_source=["name"]),
+        Chart(
+            "Stacking Client Sales [Column]",
+            Chart.COLUMN,
+            data_source=["sum__value"],
+            title_source=["name"],
+            stacking=True,
+        ),
+        Chart(
+            "Total Client Sales[Column]",
+            Chart.COLUMN,
+            data_source=["sum__value"],
+            title_source=["name"],
+            plot_total=True,
+        ),
         Chart(
-            "Total Sales [Line details]",
+            "Stacking Total Client Sales [Column]",
+            Chart.COLUMN,
+            data_source=["sum__value"],
+            title_source=["name"],
+            plot_total=True,
+            stacking=True,
+        ),
+        Chart(
+            "Client Sales [Bar]",
+            Chart.BAR,
+            data_source=["sum__value"],
+            title_source=["name"],
+        ),
+        Chart(
+            "Total Client Sales [Bar]", Chart.BAR, data_source=["sum__value"], title_source=["name"], plot_total=True
+        ),
+        Chart(
+            "Client Sales [Line]",
             Chart.LINE,
             data_source=["sum__value"],
             title_source=["name"],
             # plot_total=True,
         ),
+        Chart(
+            "Total Client Sales [Line]",
+            Chart.LINE,
+            data_source=["sum__value"],
+            title_source=["name"],
+            plot_total=True,
+        ),
+        Chart(
+            "Total Sales [Pie]",
+            Chart.PIE,
+            data_source=["sum__value"],
+            title_source=["name"],
+            plot_total=True,
+        ),
+        Chart(
+            "Client Sales [Area]",
+            Chart.AREA,
+            data_source=["sum__value"],
+            title_source=["name"],
+        ),
     ]
 
 
-class HighChartExample(ChartJSExample):
-    chart_engine = "highcharts"
-
-
 class ProductSalesApexChart(ReportView):
     report_title = _("Product Sales Apex Charts")
     report_model = SalesTransaction

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">

demo_proj/templates/menu.html

@@ -173,7 +173,7 @@
                             d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"/></svg>
                   </span>
             <span class="nav-link-title">
-                    HighCharts
+                    HighCharts Charts Demo
                   </span>
         </a>
     </li>
@@ -188,7 +188,7 @@
                             d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"/></svg>
                   </span>
             <span class="nav-link-title">
-                    ChartsJS
+                    Charts.js Charts
                   </span>
         </a>
     </li>
@@ -202,7 +202,7 @@
                             d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"/></svg>
                   </span>
             <span class="nav-link-title">
-                    Apex Chart Demo
+                    Apex Charts
                   </span>
         </a>
     </li>

setup.cfg

@@ -49,7 +49,7 @@ install_requires =
     pytz
     simplejson
     django-crispy-forms
-    crispy-bootstrap4
+
 
 
 

slick_reporting/__init__.py

@@ -1,5 +1,5 @@
 default_app_config = "slick_reporting.apps.ReportAppConfig"
 
-VERSION = (1, 3, 0)
+VERSION = (1, 3, 1)
 
-__version__ = "1.3.0"
+__version__ = "1.3.1"

slick_reporting/generator.py

@@ -22,6 +22,7 @@ class Chart:
     data_source: list
     title_source: list
     plot_total: bool = False
+    stacking: bool = False  # only for highcharts
     engine: str = ""
     entryPoint: str = ""
     COLUMN = "column"
@@ -39,6 +40,7 @@ def to_dict(self):
             plot_total=self.plot_total,
             engine=self.engine,
             entryPoint=self.entryPoint,
+            stacking=self.stacking,
         )
 
 
@@ -938,7 +940,7 @@ def get_full_response(
     @staticmethod
     def get_chart_settings(chart_settings=None, default_chart_title=None, chart_engine=None):
         """
-        Ensure the sane settings are passed to the front end.
+        Ensure the sane settings are passed to the front end. ?
         """
         chart_engine = chart_engine or SLICK_REPORTING_DEFAULT_CHARTS_ENGINE
         output = []
@@ -959,6 +961,7 @@ def get_chart_settings(chart_settings=None, default_chart_title=None, chart_engi
                 chart.get("entryPoint")
                 or app_settings.SLICK_REPORTING_SETTINGS["CHARTS"][chart["engine_name"]]["entryPoint"]
             )
+            chart["stacking"] = chart.get("stacking", False)
 
             output.append(chart)
         return output

slick_reporting/static/slick_reporting/slick_reporting.chartsjs.js

@@ -10,7 +10,7 @@
 
     function is_time_series(response, chartOptions) {
         if (chartOptions.time_series_support === false) return false;
-        return response['metadata']['time_series_pattern'] !== ""
+        return response['metadata']['time_series_pattern'] == ""
     }
 
     function getTimeSeriesColumnNames(response) {
@@ -83,7 +83,7 @@
                 txt = $(txt).text() || txt; // the title is an <a tag , we want teh text only
                 legendResults.push(txt)
             }
-            datasetData.push(row[dataFieldName])
+            datasetData.push(parseFloat(row[dataFieldName]))
         }
         return {
             'labels': legendResults,

slick_reporting/static/slick_reporting/slick_reporting.highchart.js

@@ -60,7 +60,6 @@
                 });
                 chartOptions.data = response.data;
 
-
                 let is_time_series = is_timeseries_support(response, chartOptions); // response.metadata.time_series_pattern || '';
                 let is_crosstab = is_crosstab_support(response, chartOptions);
 
@@ -183,6 +182,8 @@
                             valueDecimals: 2
                         }
                     }
+
+
                 } else if (chart_type === 'area') {
                     highchart_object.chart.type = 'area';
 
@@ -195,7 +196,8 @@
                         }
                     }
                 } else if (chart_type === 'line') {
-                    var marker_enabled = true;
+                    let marker_enabled = true;
+                    highchart_object.chart.type = 'line';
                     // disable marker when ticks are more then 12 , relying on the hover of the mouse ;
                     try {
                         if (highchart_object.series[0].data.length > 12) marker_enabled = false;
@@ -218,7 +220,11 @@
                 }
 
                 if (is_time_series) {
-                    highchart_object.xAxis.categories = chart_data.titles;
+                    if (chartOptions.plot_total && chartOptions.type !== 'line') {
+                        highchart_object.xAxis.categories = [chartOptions.title]
+                    } else {
+                        highchart_object.xAxis.categories = chart_data.titles;
+                    }
                     highchart_object.xAxis.tickmarkPlacement = 'on';
                     if (chart_type !== 'line')
                         highchart_object.tooltip.shared = false //Option here;
@@ -291,22 +297,32 @@
                 })
             } else {
                 let all_column_to_be_summed = []
+                let data = []
                 Object.keys(data_sources).forEach(function (series_cols, index) {
                     all_column_to_be_summed = all_column_to_be_summed.concat(data_sources[series_cols]);
                 })
                 let totalValues = $.slick_reporting.calculateTotalOnObjectArray(response.data, all_column_to_be_summed)
 
                 Object.keys(data_sources).forEach(function (series_cols, index) {
-                    let data = []
-                    data_sources[series_cols].forEach(function (col, index) {
 
-                        series.push({
-                            'name': response.metadata.time_series_column_verbose_names[index],
-                            data: [totalValues[col]]
-                        })
+                    data_sources[series_cols].forEach(function (col, index) {
+                        data.push(totalValues[col])
+                        if (chartOptions.type !== "line") {
+                            series.push({
+                                'name': response.metadata.time_series_column_verbose_names[index],
+                                data: [totalValues[col]]
+                            })
+                        }
                     })
 
                 })
+                if (chartOptions.type === "line") {
+                    series.push({
+                        'name': chartOptions.title,
+                        data: data
+                    })
+                }
+
             }
             return {
                 'categories': response.metadata.time_series_column_verbose_names,
@@ -380,7 +396,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') {

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 (let 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',
         }