From 8706604c4abb4193e6f8ddb197d6bec8cbfe9a53 Mon Sep 17 00:00:00 2001
From: Alexey <ay.nokhrin@autodrilling.ru>
Date: Fri, 25 Jun 2021 09:18:11 +0500
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=B2=D0=BE=D0=B7=D0=BC=D0=BE=D0=B6=D0=BD=D0=BE?=
 =?UTF-8?q?=D1=81=D1=82=D1=8C=20=D1=82=D0=BE=D0=BB=D1=8C=D0=BA=D0=BE=20?=
 =?UTF-8?q?=D0=B7=D1=83=D0=BC=D0=B0=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA?=
 =?UTF-8?q?=D0=BE=D0=B2=20=D0=BF=D0=BE=20=D0=BE=D1=81=D0=B8=20X?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                         | 33 +++++++++++++++++++++++
 package.json                              |  1 +
 src/components/charts/ChartTimeBase.tsx   | 15 ++++++++++-
 src/components/charts/ChartTimeOnline.tsx |  2 +-
 4 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b1ad6fe..1270fd3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "chart.js": "^3.3.0",
         "chartjs-adapter-moment": "^1.0.0",
         "chartjs-plugin-datalabels": "^2.0.0-rc.1",
+        "chartjs-plugin-zoom": "^1.0.1",
         "craco-less": "^1.17.1",
         "date-fns": "^2.20.0",
         "moment": "^2.29.1",
@@ -4830,6 +4831,17 @@
       "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0-rc.1.tgz",
       "integrity": "sha512-p3JwpvIspZKHB7cRas3xoxa5BYeCOMCuCTp/AS/44RyvO8OuZ/Pz0DWl3WK2L+BMnoK72UUm0XnGLKiMEekaYA=="
     },
+    "node_modules/chartjs-plugin-zoom": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-1.0.1.tgz",
+      "integrity": "sha512-3G2Fjd1yhv+E54l0znz1zDOTA8KuUHNtPIP2s/aprNOwIQc5EQ0UVfvGuwiSXYuZuypIGQm4QOP55DPlv7wOXw==",
+      "dependencies": {
+        "hammerjs": "^2.0.8"
+      },
+      "peerDependencies": {
+        "chart.js": "^3.2.0"
+      }
+    },
     "node_modules/check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -8563,6 +8575,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -25521,6 +25541,14 @@
       "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0-rc.1.tgz",
       "integrity": "sha512-p3JwpvIspZKHB7cRas3xoxa5BYeCOMCuCTp/AS/44RyvO8OuZ/Pz0DWl3WK2L+BMnoK72UUm0XnGLKiMEekaYA=="
     },
+    "chartjs-plugin-zoom": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-zoom/-/chartjs-plugin-zoom-1.0.1.tgz",
+      "integrity": "sha512-3G2Fjd1yhv+E54l0znz1zDOTA8KuUHNtPIP2s/aprNOwIQc5EQ0UVfvGuwiSXYuZuypIGQm4QOP55DPlv7wOXw==",
+      "requires": {
+        "hammerjs": "^2.0.8"
+      }
+    },
     "check-types": {
       "version": "11.1.2",
       "resolved": "https://registry.npmjs.org/check-types/-/check-types-11.1.2.tgz",
@@ -28632,6 +28660,11 @@
         "pify": "^4.0.1"
       }
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
diff --git a/package.json b/package.json
index fcc367b..f978211 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "chart.js": "^3.3.0",
     "chartjs-adapter-moment": "^1.0.0",
     "chartjs-plugin-datalabels": "^2.0.0-rc.1",
+    "chartjs-plugin-zoom": "^1.0.1",
     "craco-less": "^1.17.1",
     "date-fns": "^2.20.0",
     "moment": "^2.29.1",
diff --git a/src/components/charts/ChartTimeBase.tsx b/src/components/charts/ChartTimeBase.tsx
index e56104e..ba2e2ca 100644
--- a/src/components/charts/ChartTimeBase.tsx
+++ b/src/components/charts/ChartTimeBase.tsx
@@ -12,8 +12,9 @@ import {
   ChartOptions} from 'chart.js'
 import 'chartjs-adapter-moment';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
+import zoomPlugin from 'chartjs-plugin-zoom';
 
-Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend, ChartDataLabels );
+Chart.register( TimeScale, LinearScale, LineController, LineElement, PointElement, Legend, ChartDataLabels, zoomPlugin );
 
 const defaultOptions = {
   responsive: true,
@@ -68,6 +69,18 @@ const defaultOptions = {
     datalabels: {
       display: false,
     },
+    zoom: {
+      zoom: {
+        wheel: {
+          enabled: true,
+          modifierKey: 'alt',
+        },
+        pinch: {
+          enabled: true
+        },
+        mode: 'x',
+      }
+    }
   }
 }
 
diff --git a/src/components/charts/ChartTimeOnline.tsx b/src/components/charts/ChartTimeOnline.tsx
index 99ebfff..2faa1e7 100644
--- a/src/components/charts/ChartTimeOnline.tsx
+++ b/src/components/charts/ChartTimeOnline.tsx
@@ -110,7 +110,7 @@ export const ChartTimeOnline: React.FC<ChartTimeProps> = (props) => {
         align: 'left',
         anchor: 'center',
         clip: true
-      }
+      },
     }
   }