Ability to pan & zoom on charts (#926)

* Add ability to pan & zoom on charts

* Added map

* Added rangeMax and zoom speed

Co-authored-by: TimZ99 <TimZ99@users.noreply.github.com>

docs/credits.rst

@@ -196,3 +196,4 @@ The following libraries are being used by PHP Server Monitor:
 * PHP-Pushover - https://github.com/kryap/php-pushover
 * Symfony - https://symfony.com
 * Random_compat - https://github.com/paragonie/random_compat
+* Hammer.js - https://github.com/hammerjs/hammer.js

src/templates/default/module/server/history.tpl.html

@@ -1,5 +1,7 @@
 <script type="text/javascript" src="src/templates/default/static/plugin/momentjs/moment.js"></script>
 <script type="text/javascript" src="src/templates/default/static/plugin/chartjs/chart-2.7.3.min.js"></script>
+<script type="text/javascript" src="src/templates/default/static/plugin/hammer/hammer.min.js"></script>
+<script type="text/javascript" src="src/templates/default/static/plugin/chartjs/plugin-zoom.min.js"></script>
 {% for graph in graphs %}
 <div class="chart-container col-10" style="position: relative;  width:60vw">
 	<canvas id="{{ graph.id }}">Your browser does not support the canvas element.</canvas>
@@ -72,6 +74,25 @@
 						source: 'auto',
 					}
 				}]
+			},
+			plugins: {
+				zoom: {
+					pan: {
+						enabled: true,
+						mode: 'x',
+                        rangeMax: {
+                            x: new Date,
+                        },
+					},
+					zoom: {
+						enabled: true,
+						mode: 'x',
+                        rangeMax: {
+                            x: new Date,
+                        },
+                        speed: 0.05,
+					}
+				}
 			}
 		}
 	});
@@ -133,6 +154,25 @@
 						source: 'auto',
 					}
 				}]
+			},
+			plugins: {
+				zoom: {
+					pan: {
+						enabled: true,
+						mode: 'x',
+                        rangeMax: {
+                            x: new Date,
+                        },
+					},
+					zoom: {
+						enabled: true,
+						mode: 'x',
+                        rangeMax: {
+                            x: new Date,
+                        },
+                        speed: 0.05,
+					}
+				}
 			}
 		}
 	});