Add zoom/pan support to charts

Author: sahinakkaya

package-lock.json

@@ -20,6 +20,7 @@
     "asciinema-player": "3.4.0",
     "chart.js": "4.3.0",
     "chartjs-adapter-dayjs-4": "1.0.4",
+    "chartjs-plugin-zoom": "2.0.1",
     "clippie": "4.0.1",
     "css-loader": "6.8.1",
     "dayjs": "1.11.8",

package.json

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Line :data="mainGraphData" :options="data.options" />
+    <Line :data="mainGraphData" :options="options" />
 
     <div class="ui attached segment two column grid">
       <div
@@ -9,7 +9,7 @@
         class="column stats-table"
       >
         <div class="ui top attached header gt-df gt-f1">
-          <b class="ui right">#{{index + 1}}</b>
+          <b class="ui right">#{{ index + 1 }}</b>
           <a :href="contributor.home_link">
             <img
               height="40"
@@ -34,7 +34,7 @@
           </div>
         </div>
         <div class="ui attached segment">
-          <Line :data="graph(contributor.weeks)" :options="data.options" />
+          <Line :data="graph(contributor.weeks)" :options="options" />
         </div>
       </div>
     </div>
@@ -56,6 +56,7 @@ import {
   LineElement,
   Filler,
 } from "chart.js";
+import zoomPlugin from "chartjs-plugin-zoom";
 import { Bar, Line } from "vue-chartjs";
 import "chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm";
 
@@ -69,23 +70,55 @@ ChartJS.register(
   Legend,
   PointElement,
   LineElement,
-  Filler
+  Filler,
+  zoomPlugin
 );
 
 const sfc = {
   components: { Line },
   data: () => ({
     data: {
-      options: {
+    },
+
+    masterChartData: window.config.pageData.repoContributorsCommitStats || [],
+    type: window.config.pageData.contributionType,
+    individualChartsData:
+      window.config.pageData.repoContributorsCommitStats || [],
+  }),
+  computed: {
+    options() {
+      return {
         responsive: true,
         plugins: {
           legend: {
             display: false,
-          }
+          },
+          zoom: {
+            pan: {
+              enabled: true,
+              mode: "x",
+              threshold: 20,
+            },
+            limits: {
+              x: {
+                min: "original",
+                max: "original",
+                minRange: 1000000000,
+              },
+            },
+            zoom: {
+              wheel: {
+                enabled: true,
+              },
+              pinch: {
+                enabled: true,
+              },
+              mode: "x",
+            },
+          },
         },
         scales: {
           x: {
-            // min: '2021-11-06',
             type: "time",
             time: {
               // unit: 'year'
@@ -94,17 +127,11 @@ const sfc = {
           },
           y: {
             min: 0,
+            max: this.maxMainGraph(),
           },
         },
-      },
+      }
     },
-
-    masterChartData: window.config.pageData.repoContributorsCommitStats || [],
-    type: window.config.pageData.contributionType,
-    individualChartsData:
-      window.config.pageData.repoContributorsCommitStats || [],
-  }),
-  computed: {
     mainGraphData() {
       return {
         datasets: [
@@ -134,6 +161,14 @@ const sfc = {
     },
   },
   methods: {
+    maxMainGraph() {
+      const maxValue = Math.max(...this.masterChartData[""].weeks.map(o => o[this.type]))
+      const [cooefficient, exp] = maxValue.toExponential().split('e')
+      if (Number(cooefficient) % 1 == 0) {
+        return maxValue
+      }
+      return (1 - Number(cooefficient) % 1) * 10 ** Number(exp) + maxValue
+    },
     additions(data) {
       return Object.values(data).reduce((acc, item) => {
         return acc + item.additions;