Merge pull request #587

feat(dca): add chart zoom navigation

app/templates/dca/fragments/strategy/details.html

@@ -331,6 +331,8 @@
                                 },
                                 scales: {
                                     x: {
+                                        min: Math.max(0, priceData.labels.length - 20),
+                                        max: Math.max(0, priceData.labels.length - 1),
                                         grid: {
                                             display: false
                                         },
@@ -369,6 +371,29 @@
                                     }
                                 },
                                 plugins: {
+                                    zoom: {
+                                        limits: {
+                                            x: {
+                                                min: 0,
+                                                max: Math.max(0, priceData.labels.length - 1),
+                                                minRange: 5
+                                            }
+                                        },
+                                        pan: {
+                                            enabled: true,
+                                            mode: 'x'
+                                        },
+                                        zoom: {
+                                            wheel: {
+                                                enabled: true,
+                                                modifierKey: 'ctrl'
+                                            },
+                                            pinch: {
+                                                enabled: true
+                                            },
+                                            mode: 'x'
+                                        }
+                                    },
                                     legend: {
                                         position: 'top'
                                     },

frontend/package-lock.json

@@ -23,6 +23,7 @@
         "bootstrap": "^5.3.8",
         "chart.js": "^4.5.1",
         "chartjs-chart-sankey": "^0.14.3",
+        "chartjs-plugin-zoom": "^2.2.0",
         "cuelume": "^0.1.2",
         "daisyui": "5.5.20",
         "htmx.org": "^2.0.10",
@@ -1077,6 +1078,12 @@
       "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
       "license": "MIT"
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.46",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.46.tgz",
+      "integrity": "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==",
+      "license": "MIT"
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz",
@@ -1254,6 +1261,19 @@
         "chart.js": ">=3.3.0"
       }
     },
+    "node_modules/chartjs-plugin-zoom": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-2.2.0.tgz",
+      "integrity": "sha512-in6kcdiTlP6npIVLMd4zXZ08PDUXC52gZ4FAy5oyjk1zX3gKarXMAof7B9eFiisf9WOC3bh2saHg+J5WtLXZeA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hammerjs": "^2.0.45",
+        "hammerjs": "^2.0.8"
+      },
+      "peerDependencies": {
+        "chart.js": ">=3.2.0"
+      }
+    },
     "node_modules/chokidar": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
@@ -1408,6 +1428,15 @@
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
       "license": "ISC"
     },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/htmx.org": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.10.tgz",

frontend/package.json

@@ -30,6 +30,7 @@
     "bootstrap": "^5.3.8",
     "chart.js": "^4.5.1",
     "chartjs-chart-sankey": "^0.14.3",
+    "chartjs-plugin-zoom": "^2.2.0",
     "cuelume": "^0.1.2",
     "daisyui": "5.5.20",
     "htmx.org": "^2.0.10",

frontend/src/js/charts.js

@@ -1,5 +1,6 @@
 import Chart from 'chart.js/auto';
 import {SankeyController, Flow} from 'chartjs-chart-sankey';
+import zoomPlugin from 'chartjs-plugin-zoom';
 
-Chart.register(SankeyController, Flow);
+Chart.register(SankeyController, Flow, zoomPlugin);
 window.Chart = Chart;