feat(graph): allow zoom and pan

Author: Kl0ven

commitlint.config.js

@@ -7,7 +7,8 @@ const scope = [
   "validator",
   "metrics",
   "panic",
-  "sentry-api"
+  "sentry-api",
+  "graph"
 ];
 
 module.exports = {

controller/sentry/admin.py

@@ -82,17 +82,7 @@ def get_chart_data(self, sentry_id):
 
         threshold = project.detection_param["threshold"]
 
-        options = {
-            "aspectRatio": 4,
-            "scales": {
-                "xAxis": {"type": "timeseries"},
-                "series": {"position": "left"},
-                "signal": {"position": "right", "min": 0, "max": 2},
-            },
-            "plugins": {"legend": {"position": "bottom"}, "title": {"display": True, "text": "Detection Result"}},
-            "elements": {"line": {"stepped": True}, "point": {"radius": 0}},
-            "interaction": {"mode": "index", "intersect": False},
-        }
+        options = settings.DEFAULT_GRAPH_OPTION
         data = {
             "datasets": [
                 {

controller/sentry/templates/admin/chart_change_form.html

@@ -5,8 +5,10 @@
 {% block extrahead %}
 {{ block.super }}
 {{ media }}
+{% vendor 'hammerjs' %}
 {% vendor 'chartjs' %}
 {% vendor 'chartjs-date' %}
+{% vendor 'chartjs-zoom' %}
 <script src="{% static 'admin/chart/js/adminchart.js' %}"></script>
 {{ adminchart_chartjs_config|json_script:"adminchart-chartjs-config" }}
 {% endblock %}

controller/sentry/tests/test_admin.py

@@ -440,17 +440,7 @@ def test_project_chart(super_call: Mock, admin_with_user):
                 ],
                 "labels": ["a", "b"],
             },
-            "options": {
-                "aspectRatio": 4,
-                "scales": {
-                    "xAxis": {"type": "timeseries"},
-                    "series": {"position": "left"},
-                    "signal": {"position": "right", "min": 0, "max": 2},
-                },
-                "plugins": {"legend": {"position": "bottom"}, "title": {"display": True, "text": "Detection Result"}},
-                "elements": {"line": {"stepped": True}, "point": {"radius": 0}},
-                "interaction": {"mode": "index", "intersect": False},
-            },
+            "options": settings.DEFAULT_GRAPH_OPTION,
         }
     }
 

controller/settings.py

@@ -56,6 +56,24 @@
             }
         ],
     },
+    "chartjs-zoom": {
+        "url": "https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.0/dist/",
+        "js": [
+            {
+                "path": "chartjs-plugin-zoom.min.js",
+                "sri": "sha384-AC/SQgflSDa6sFR0rk5chlHjSLMS9fHmSE50vY7uoBiqrCWtDUXoOBCKaoQQFBrl",
+            }
+        ],
+    },
+    "hammerjs": {
+        "url": "https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/",
+        "js": [
+            {
+                "path": "hammer.min.js",
+                "sri": "sha384-Cs3dgUx6+jDxxuqHvVH8Onpyj2LF1gKZurLDlhqzuJmUqVYMJ0THTWpxK5Z086Zm",
+            }
+        ],
+    },
 }
 
 
@@ -328,3 +346,29 @@
 
     # hook sentry_dynamic_sampling_lib into sentry
     init_wrapper()
+
+
+# Graph
+DEFAULT_GRAPH_OPTION = {
+    "aspectRatio": 4,
+    "scales": {
+        "xAxis": {"type": "timeseries"},
+        "series": {"position": "left", "min": 0},
+        "signal": {"position": "right", "min": 0, "max": 2},
+    },
+    "plugins": {
+        "legend": {"position": "bottom"},
+        "title": {"display": True, "text": "Detection Result"},
+        "zoom": {
+            "zoom": {
+                "wheel": {"enabled": True, "modifierKey": "ctrl"},
+                "pinch": {"enabled": True},
+                "mode": "x",
+            },
+            "limits": {"xAxis": {"min": "original", "max": "original"}},
+            "pan": {"enabled": True, "mode": "x", "modifierKey": "ctrl"},
+        },
+    },
+    "elements": {"line": {"stepped": True}, "point": {"radius": 0}},
+    "interaction": {"mode": "index", "intersect": False},
+}