LLCAXCHZF-57/Implement Zoom and Pan Functionality for Chart.js

ckanext/charts/assets/js/charts-render-chartjs.js

@@ -18,8 +18,56 @@ ckan.module("charts-render-chartjs", function ($, _) {
                 return;
             }
 
-            var chart = new Chart(this.el[0].getContext("2d"), this.options.config);
-            window.charts_chartjs = chart;
+            const unsupportedTypes = ['pie', 'doughnut', 'radar'];
+            const isZoomSupported = !unsupportedTypes.includes(this.options.config.type);
+
+            if (isZoomSupported) {
+                const zoomOptions =  this.options.config.options.plugins.zoom;
+
+                this.options.config.options.plugins.title.text = () => {
+                    return 'Zoom: ' + this.zoomStatus(zoomOptions) + ', Pan: ' + this.panStatus(zoomOptions);
+                };
+
+                $('#resetZoom').on('click', this.resetZoom);
+                $('#toggleZoom').on('click', (e) => this.toggleZoom(e, zoomOptions));
+                $('#togglePan').on('click', (e) => this.togglePan(e, zoomOptions));
+            }
+
+            $(".zoom-control").toggle(isZoomSupported);
+
+            window.charts_chartjs = new Chart(this.el[0].getContext("2d"), this.options.config);
+        },
+
+        resetZoom: function(event) {
+            event.preventDefault();
+            window.charts_chartjs.resetZoom();
+        },
+
+        zoomStatus: function(zoomOptions) {
+            return zoomOptions.zoom.drag.enabled ? 'enabled' : 'disabled';
+        },
+
+        panStatus: function(zoomOptions) {
+            return zoomOptions.pan.enabled ? 'enabled' : 'disabled';
+        },
+
+        toggleZoom: function (event, zoomOptions) {
+            event.preventDefault();
+
+            const zoomEnabled = zoomOptions.zoom.wheel.enabled;
+
+            zoomOptions.zoom.wheel.enabled = !zoomEnabled;
+            zoomOptions.zoom.pinch.enabled = !zoomEnabled;
+            zoomOptions.zoom.drag.enabled = !zoomEnabled;
+
+            window.charts_chartjs.update();
+        },
+
+        togglePan: function(event, zoomOptions) {
+            event.preventDefault();
+
+            zoomOptions.pan.enabled = !zoomOptions.pan.enabled;
+            window.charts_chartjs.update();
         }
     };
 });

ckanext/charts/assets/webassets.yml

@@ -5,6 +5,8 @@ chartjs:
     - js/vendor/chartjs.min.js
     - js/vendor/chartjs-adapter-moment.js
     - js/charts-render-chartjs.js
+    - js/vendor/hammerjs.min.js
+    - js/vendor/chartjs-plugin-zoom.min.js
   extra:
     preload:
       - base/main

ckanext/charts/chart_builders/base.py

@@ -661,3 +661,14 @@ def filter_field(self, choices: list[dict[str, str]]) -> dict[str, Any]:
             ],
             "group": "Filter",
         }
+
+    def engine_details_field(self) -> dict[str, Any]:
+        """
+        Provides details about zoom functionality support in various charting libraries.
+        """
+        return {
+            "field_name": "engine_details",
+            "label": "Engine details",
+            "form_snippet": "chart_engine_details.html",
+            "group": "Structure",
+        }

ckanext/charts/chart_builders/chartjs.py

@@ -24,6 +24,36 @@ def get_supported_forms(cls) -> list[type[Any]]:
             ChartJSRadarForm,
         ]
 
+    def create_zoom_and_title_options(self, options: str[dict, Any]) -> dict[str, Any]:
+        """Add zoom and title plugin options to the provided options dictionary"""
+        zoom_options = {
+            "zoom": {
+                "wheel": {"enabled": True},
+                "pinch": {"enabled": True},
+                "drag": {"enabled": True},
+                "mode": "xy",
+            },
+            "pan": {
+                "enabled": True,
+                "modifierKey": "shift",
+                "mode": "xy",
+            },
+        }
+
+        if "plugins" not in options:
+            options["plugins"] = {}
+
+        options["plugins"].update(
+            {
+                "zoom": zoom_options,
+                "title": {
+                    "display": True,
+                    "position": "bottom",
+                },
+            }
+        )
+        return options
+
 
 class ChartJSBarBuilder(ChartJsBuilder):
     def _prepare_data(self) -> dict[str, Any]:
@@ -65,6 +95,7 @@ def _prepare_data(self) -> dict[str, Any]:
             )
 
         data["data"]["datasets"] = datasets
+        data["options"] = self.create_zoom_and_title_options(data["options"])
 
         return data
 
@@ -88,6 +119,7 @@ def get_form_fields(self):
             self.description_field(),
             self.engine_field(),
             self.type_field(chart_types),
+            self.engine_details_field(),
             self.x_axis_field(columns),
             self.y_multi_axis_field(columns),
             self.more_info_button_field(),
@@ -135,6 +167,7 @@ def to_json(self) -> str:
                 "reverse": self.settings.get("invert_y", False),
             },
         }
+        data["options"] = self.create_zoom_and_title_options(data["options"])
         return json.dumps(data)
 
 
@@ -154,6 +187,7 @@ def get_form_fields(self):
             self.description_field(),
             self.engine_field(),
             self.type_field(chart_types),
+            self.engine_details_field(),
             self.x_axis_field(columns),
             self.y_multi_axis_field(columns),
             self.more_info_button_field(),
@@ -213,6 +247,7 @@ def get_form_fields(self):
             self.description_field(),
             self.engine_field(),
             self.type_field(chart_types),
+            self.engine_details_field(),
             self.values_field(columns),
             self.names_field(columns),
             self.more_info_button_field(),
@@ -257,6 +292,7 @@ def to_json(self) -> str:
                 "data": dataset_data,
             }
         ]
+        data["options"] = self.create_zoom_and_title_options(data["options"])
         return json.dumps(self._configure_date_axis(data))
 
     def _configure_date_axis(self, data: dict[str, Any]) -> dict[str, Any]:
@@ -302,6 +338,7 @@ def get_form_fields(self):
             self.description_field(),
             self.engine_field(),
             self.type_field(chart_types),
+            self.engine_details_field(),
             self.x_axis_field(columns),
             self.y_axis_field(columns),
             self.more_info_button_field(),
@@ -340,6 +377,8 @@ def to_json(self) -> str:
         data["data"]["datasets"] = [
             {"label": self.settings["y"], "data": dataset_data},
         ]
+        data["options"] = self.create_zoom_and_title_options(data["options"])
+
         return json.dumps(self._configure_date_axis(data))
 
     def _calculate_bubble_radius(self, data_series: pd.Series, max_size: int) -> int:
@@ -425,6 +464,7 @@ def get_form_fields(self):
             self.description_field(),
             self.engine_field(),
             self.type_field(chart_types),
+            self.engine_details_field(),
             self.names_field(columns),
             self.values_multi_field(
                 columns,