working on the docs

demo_proj/templates/demo/apex_report.html

@@ -1,5 +1,5 @@
 {% extends "slick_reporting/report.html" %}
-{% load i18n slick_reporting_tags %}
+{% load  slick_reporting_tags %}
 
 {% block content %}
     {{ block.super }}
@@ -12,13 +12,13 @@
     <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);
-
+            console.log("data:", data);
+            console.log("$elem:", $elem);
+            console.log("chartOptions:", chartOptions);
         }
 
         function DisplayApexPieChart(data, $elem, chartOptions) {

docs/source/howto/customize_frontend.rst

@@ -1,23 +1,6 @@
 Charting and Front End Customization
 =====================================
 
-Charts Configuration
----------------------
-
-Charts settings is a list of objects which each object represent a chart configurations.
-
-* type: what kind of chart it is: Possible options are bar, pie, line and others subject of the underlying charting engine.
-  Hats off to : `Charts.js <https://www.chartjs.org/>`_.
-* engine_name: String, default to ``SLICK_REPORTING_DEFAULT_CHARTS_ENGINE``. Passed to front end in order to use the appropriate chart engine.
-  By default supports `highcharts` & `chartsjs`.
-* data_source: Field name containing the numbers we want to plot.
-* title_source: Field name containing labels of the data_source
-* title: the Chart title. Defaults to the `report_title`.
-* plot_total if True the chart will plot the total of the columns. Useful with time series and crosstab reports.
-
-On front end, for each chart needed we pass the whole response to the relevant chart helper function and it handles the rest.
-
-
 
 
 The ajax response structure

docs/source/ref/settings.rst

@@ -1,4 +1,5 @@
-.. _ settings:
+.. _settings:
+
 
 Settings
 ========

docs/source/topics/custom_chart_engine.rst → docs/source/topics/charts.rst

@@ -1,10 +1,73 @@
-Custom Charting Engine
-======================
+Charts Customization
+====================
 
-In this guide we will add some Apex charts to the demo app.
-to demonstrate how you can add your own charting engine to slick reporting.
+Charts Configuration
+---------------------
 
-#. We need to add the new chart Engine to the settings
+ReportView ``charts_settings`` is a list of objects which each object represent a chart configurations.
+The chart configurations are:
+
+* title: the Chart title. Defaults to the `report_title`.
+* type: A string. Examples are pie, bar, line, etc ...
+* engine_name: A string, default to the ReportView ``chart_engine`` attribute, then to the ``SLICK_REPORTING_SETTINGS.DEFAULT_CHARTS_ENGINE``.
+* data_source: string, the field name containing the numbers we want to plot.
+* title_source: string, the field name containing labels of the data_source
+* plot_total: if True the chart will plot the total of the columns. Useful with time series and crosstab reports.
+* entryPoint: the javascript entry point to display the chart, the entryPoint function accepts the data, $elem and the chartSettings parameters.
+
+On front end, for each chart needed we pass the whole response to the relevant chart helper function and it handles the rest.
+
+
+
+Customizing the entryPoint for a chart
+--------------------------------------
+
+Sometimes you want to display the chart differently, in this case, you can just change the entryPoint function.
+
+Example:
+
+.. code-block:: python
+
+    class ProductSalesApexChart(ReportView):
+        # ..
+        template_name = "product_sales_report.html"
+        chart_settings = [
+            # ..
+            Chart(
+                "Total sold $",
+                type="bar",
+                data_source=["value__sum"],
+                title_source=["name"],
+                entryPoint="displayChartCustomEntryPoint",  # this is the new entryPoint
+            ),
+        ]
+
+
+Then in your template `product_sales_report.html` add the javascript function specified as the new entryPoint.
+
+.. code-block:: html+django
+
+            {% extends "slick_reporting/report.html" %}
+            {% load  slick_reporting_tags %}
+            {% block extra_js %}
+                {{ block.super }}
+                <script>
+                    function displayChartCustomEntryPoint(data, $elem, chartSettings) {
+                        // data: is the ajax response coming from server
+                        // $elem: is the jquery element where the chart should be rendered
+                        // chartSettings: is the relevant chart dictionary/object in your ReportView chart_settings
+                        // do your custom logic here
+                    }
+                </script>
+
+            {% endblock %}
+
+Adding a new charting engine
+----------------------------
+
+In the following part we will add some Apex charts to the demo app to demonstrate how you can add your own charting engine to slick reporting.
+
+#. We need to add the new chart Engine to the settings. Note that the css and js are specified and handled like Django's ``Form.Media``
 
 .. code-block:: python
 
@@ -24,7 +87,7 @@ to demonstrate how you can add your own charting engine to slick reporting.
         },
     }
 
-#. and then you add the entry point function to the javascript file `js_file_for_apex_chart.js` in this example.
+#. Add the entry point function to the javascript file `js_file_for_apex_chart.js` in this example.
 
 It can look something like this:
 
@@ -76,28 +139,3 @@ It can look something like this:
             chart.render();
     }
 
-
-Customizing the entryPoint for a chart
---------------------------------------
-
-Sometimes you want just to display the chart differently, in this case, you can just change the entryPoint function
-
-Example:
-
-.. code-block:: python
-
-    class ProductSalesApexChart(ReportView):
-        # ..
-        chart_settings = [
-            # ..
-            Chart(
-                "Total sold $",
-                type="bar",
-                data_source=["value__sum"],
-                title_source=["name"],
-                entryPoint="displayChartCustomEntryPoint",  # this is the new entryPoint
-            ),
-        ]
-
-
-

docs/source/topics/index.rst

@@ -33,4 +33,5 @@ You saw how to use the ReportView class in the tutorial and you identified the t
    filter_form
    widgets
    integrating_slick_reporting
+   charts
    exporting