Merge branch 'feature/apex_charts' into develop

demo_proj/demo_app/helpers.py

@@ -39,7 +39,10 @@
     ("crosstab-report-with-time-series", reports.CrossTabWithTimeSeries),
 ]
 OTHER = [
+    ("highcharts-examples", reports.HighChartExample),
     ("chartjs-examples", reports.ChartJSExample),
+    ("apexcharts-examples", reports.ProductSalesApexChart),
+    ("custom-export", reports.CustomExportReport),
 ]
 
 

demo_proj/demo_app/reports.py

@@ -1,6 +1,7 @@
 import datetime
 
 from django.db.models import Sum, Q
+from django.http import HttpResponse
 from django.utils.translation import gettext_lazy as _
 
 from slick_reporting.fields import ComputationField
@@ -607,3 +608,67 @@ class ChartJSExample(TimeSeriesReport):
             # plot_total=True,
         ),
     ]
+
+
+class HighChartExample(ChartJSExample):
+    chart_engine = "highcharts"
+
+
+class ProductSalesApexChart(ReportView):
+    report_title = _("Product Sales Apex Charts")
+    report_model = SalesTransaction
+    date_field = "date"
+    group_by = "product"
+    chart_engine = "apexcharts"
+    template_name = "demo/apex_report.html"
+
+    columns = [
+        "name",
+        ComputationField.create(
+            method=Sum,
+            field="value",
+            name="value__sum",
+            verbose_name="Total sold $",
+            is_summable=True,
+        ),
+    ]
+
+    # Charts
+    chart_settings = [
+        Chart(
+            "Total sold $",
+            type="pie",
+            data_source=["value__sum"],
+            title_source=["name"],
+        ),
+        Chart(
+            "Total sold $",
+            type="bar",
+            data_source=["value__sum"],
+            title_source=["name"],
+        ),
+        Chart(
+            "A custom Entry Point $",
+            type="bar",
+            data_source=["value__sum"],
+            title_source=["name"],
+            entryPoint="displayChartCustomEntryPoint",
+        ),
+    ]
+
+
+class CustomExportReport(GroupByReport):
+    report_title = _("Custom Export Report")
+    export_actions = ["export_pdf"]
+
+    def export_pdf(self, report_data):
+        return HttpResponse(f"Dummy PDF Exported \n {report_data}")
+
+    export_pdf.title = _("Export PDF")
+    export_pdf.css_class = "btn btn-secondary"
+
+    def export_csv(self, report_data):
+        return super().export_csv(report_data)
+
+    export_csv.title = _("My Custom CSV export Title")
+    export_csv.css_class = "btn btn-primary"

demo_proj/demo_proj/settings.py

@@ -37,7 +37,6 @@
     "django.contrib.sessions",
     "django.contrib.messages",
     "django.contrib.staticfiles",
-
     "demo_app",
     "crispy_forms",
     "crispy_bootstrap5",
@@ -130,3 +129,13 @@
 
 CRISPY_TEMPLATE_PACK = "bootstrap5"
 CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap5"
+
+SLICK_REPORTING_SETTINGS = {
+    "CHARTS": {
+        "apexcharts": {
+            "entryPoint": "DisplayApexPieChart",
+            "js": ("https://cdn.jsdelivr.net/npm/apexcharts", "slick_reporting/slick_reporting.chartsjs.js"),
+            "css": {"all": ("https://cdn.jsdelivr.net/npm/apexcharts/dist/apexcharts.min.css",)},
+        },
+    },
+}

demo_proj/templates/dashboard.html

@@ -3,22 +3,7 @@
 {% block page_title %} Dashboard {% endblock %}
 {% block meta_page_title %} Dashboard {% endblock %}
 
-{% block extrajs %}
-    {% include "slick_reporting/js_resources.html" %}
-    {#  make sure to have the js_resources added to the dashboard page  #}
 
-    <script>
-        function custom_js_callback(data, $elem) {
-            // data is the json response from the server
-            // $elem is the jquery object of the element `[data-report-widget]` that the report is attached to.
-
-            console.info(data);
-            console.info($elem);
-            $('#responsePre').text(JSON.stringify(data, null, 4));
-        }
-
-    </script>
-{% endblock %}
 {% block content %}
     <div class="row row-deck row-cards">
         <div class="col-lg-6">
@@ -51,4 +36,26 @@
 
     </div>
 
+{% endblock %}
+
+{% block extrajs %}
+    {% include "slick_reporting/js_resources.html" %}
+    {#  make sure to have the js_resources added to the dashboard page  #}
+
+    {% get_charts_media "all" %}
+    {# make sure to add all charts needed media, here the "all" arguments add all charts media to the page,   #}
+    {#  You can skip it and add needed media by hand  #}
+
+
+    <script>
+        function custom_js_callback(data, $elem) {
+            // data is the json response from the server
+            // $elem is the jquery object of the element `[data-report-widget]` that the report is attached to.
+
+            console.info(data);
+            console.info($elem);
+            $('#responsePre').text(JSON.stringify(data, null, 4));
+        }
+
+    </script>
 {% endblock %}

demo_proj/templates/demo/apex_report.html

@@ -0,0 +1,64 @@
+{% extends "slick_reporting/report.html" %}
+{% load i18n slick_reporting_tags %}
+
+{% block content %}
+    {{ block.super }}
+
+{% endblock %}
+
+{% block extrajs %}
+    {{ block.super }}
+
+    <script>
+
+        let chart = null;
+        function displayChartCustomEntryPoint(data, $elem, chartOptions) {
+            alert("This is a custom entry point for displaying charts. " +
+                "Check the console for the sent arguments")
+            console.log("data:",  data);
+            console.log("$elem:",  $elem);
+            console.log("chartOptions:",  chartOptions);
+
+        }
+
+        function DisplayApexPieChart(data, $elem, chartOptions) {
+            let legendAndSeries = $.slick_reporting.chartsjs.getGroupByLabelAndSeries(data, chartOptions);
+            let options = {}
+            if (chartOptions.type === "pie") {
+                options = {
+                    series: legendAndSeries.series,
+                    chart: {
+                        type: "pie",
+                        height: 350
+                    },
+                    labels: legendAndSeries.labels,
+                };
+            } else {
+                options = {
+                    chart: {
+                        type: 'bar'
+                    },
+                    series: [{
+                        name: 'Sales',
+                        data: legendAndSeries.series
+                    }],
+                    xaxis: {
+                        categories: legendAndSeries.labels,
+                    }
+                }
+            }
+
+            try {
+                // destroy old chart, if any
+                chart.destroy();
+            } catch (e) {
+                // do nothing
+            }
+
+            chart = new ApexCharts($elem[0], options);
+            chart.render();
+
+        }
+    </script>
+
+{% endblock %}

demo_proj/templates/menu.html

@@ -163,6 +163,21 @@
         </div>
     </li>
 
+    <li class="nav-item">
+        <a class="nav-link" href="{% url "highcharts-examples" %}">
+                  <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
+                         stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                         stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path
+                            d="M5 12l-2 0l9 -9l9 9l-2 0"/><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"/><path
+                            d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"/></svg>
+                  </span>
+            <span class="nav-link-title">
+                    HighCharts
+                  </span>
+        </a>
+    </li>
+
     <li class="nav-item">
         <a class="nav-link" href="{% url "chartjs-examples" %}">
                   <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
@@ -177,5 +192,33 @@
                   </span>
         </a>
     </li>
+    <li class="nav-item">
+        <a class="nav-link" href="{% url "apexcharts-examples" %}">
+                  <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
+                         stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                         stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path
+                            d="M5 12l-2 0l9 -9l9 9l-2 0"/><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"/><path
+                            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
+                  </span>
+        </a>
+    </li>
+    <li class="nav-item">
+        <a class="nav-link" href="{% url "custom-export" %}">
+                  <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
+                         stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                         stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path
+                            d="M5 12l-2 0l9 -9l9 9l-2 0"/><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"/><path
+                            d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"/></svg>
+                  </span>
+            <span class="nav-link-title">
+                    Custom Export
+                  </span>
+        </a>
+    </li>
 
 </ul>

docs/source/howto/customize_frontend.rst

@@ -112,3 +112,26 @@ Let's have a look
     }
 
 
+The ajax response structure
+---------------------------
+
+Understanding how the response is structured is imperative in order to customize how the report is displayed on the front end
+
+Let's have a look
+
+.. code-block:: python
+
+
+    # Ajax response or `report_results` template context variable.
+    response = {
+        "report_slug": "",  # the report slug, defaults to the class name all lower
+        "data": [],  # a list of objects representing the actual results of the report
+        "columns": [],  # A list explaining the columns/keys in the data results.
+        # ie: len(response.columns) == len(response.data[i].keys())
+        # A List of objects. each object contain field needed information like verbose name , if summable and hints about the data type.
+        "metadata": {},  # Contains information about the report as whole if it's time series or a a crosstab
+        # And what's the actual and verbose names of the time series or crosstab specific columns.
+        "chart_settings": [],  # a list of objects  mirror of the set charts_settings
+    }
+
+