Merge branch 'release/v1.2'

RamezIssac · Oct 10, 2023 · b45fb9f · b45fb9f
2 parents f17bf6a + 8a5ec47
commit b45fb9f
Show file tree

Hide file tree

Showing 39 changed files with 1,185 additions and 602 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.2.0] - 2023-10-10
+- Add ``get_slick_reporting_media`` and ``get_charts_media`` templatetags
+- Add `get_group_by_custom_querysets` hook to ReportView
+- Enhance and document adding export options and customizing the builtin export to csv button
+- Enhance and document adding custom buttons to the report page
+- Enhance and document adding a new chart engine
+- Fix in SlickReportingListView
+- Move all css and js resources to be handled by `Media` governed by `settings.SLICK_REPORTING_SETTINGS`
+
+
 ## [1.1.1] - 2023-09-25
 - Change settings to be a dict , adding support JQUERY_URL and FONT AWESOME customization #79 & #81
 - Fix issue with chartjs not being loaded  #80

diff --git a/demo_proj/demo_app/helpers.py b/demo_proj/demo_app/helpers.py
@@ -39,7 +39,11 @@
     ("crosstab-report-with-time-series", reports.CrossTabWithTimeSeries),
 ]
 OTHER = [
+    ("highcharts-examples", reports.HighChartExample),
     ("chartjs-examples", reports.ChartJSExample),
+    ("apexcharts-examples", reports.ProductSalesApexChart),
+    ("custom-export", reports.CustomExportReport),
+    ("form-initial", reports.ReportWithFormInitial),
 ]
 
 

diff --git a/demo_proj/demo_app/reports.py b/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
@@ -170,9 +171,10 @@ class LastTenSales(ListReportView):
     report_model = SalesTransaction
     report_title = "Last 10 sales"
     date_field = "date"
-    filters = ["client"]
+    filters = ["product", "client", "date"]
     columns = [
-        "product",
+        "product__name",
+        "client__name",
         "date",
         "quantity",
         "price",
@@ -607,3 +609,92 @@ 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"
+
+
+class ReportWithFormInitial(ReportView):
+    report_title = _("Report With Form Initial")
+    report_model = SalesTransaction
+    date_field = "date"
+    group_by = "product"
+
+    columns = [
+        "name",
+        ComputationField.create(
+            method=Sum,
+            field="value",
+            name="value__sum",
+            verbose_name="Total sold $",
+            is_summable=True,
+        ),
+    ]
+
+    def get_initial(self):
+        from .models import Client
+
+        initial = super().get_initial()
+        initial["client_id"] = [Client.objects.first().pk, Client.objects.last().pk]
+        return initial
diff --git a/demo_proj/demo_proj/settings.py b/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",)},
+        },
+    },
+}
diff --git a/demo_proj/templates/dashboard.html b/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 %}
diff --git a/demo_proj/templates/demo/apex_report.html b/demo_proj/templates/demo/apex_report.html
@@ -0,0 +1,64 @@
+{% extends "slick_reporting/report.html" %}
+{% load  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 %}
diff --git a/demo_proj/templates/menu.html b/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,47 @@
                   </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>
 
+    <li class="nav-item">
+        <a class="nav-link" href="{% url "form-initial" %}">
+                  <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">
+                    Form initial
+                  </span>
+        </a>
+    </li>
 </ul>