Bring back zoom in charts using chartjs-plugin-zoom (#890)

* add chartjs-plugin-zoom + hammerjs

* adds a "unzoom" button for chartjs-plugin-zoom

* limits chartjs zoom and pan area by scanning all axis

bower.json

@@ -58,7 +58,9 @@
     "webcomponentsjs": "^1.0.10",
     "chart.js": "~2.7.1",
     "moment": "^2.20.0",
-    "chartjs-chart-timeline": "fanthos/chartjs-chart-timeline#^0.1.3"
+    "chartjs-chart-timeline": "fanthos/chartjs-chart-timeline#^0.1.3",
+    "chartjs-plugin-zoom": "^0.6.3",
+    "hammerjs": "^2.0.8"
   },
   "devDependencies": {
     "web-component-tester": "^6.3.0"

src/components/entity/ha-chart-base.html

@@ -64,6 +64,9 @@
         margin-right: 6px;
         width: 10px;
       }
+      .chartZoomInline {
+        float: right;
+      }
     </style>
     <template is="dom-if" if="[[unit]]">
       <div class="chartHeader">
@@ -78,6 +81,14 @@
             </template>
           </ul>
         </div>
+        <template is="dom-if" if="[[isZoomable]]">
+          <div class="chartZoomInline">
+            <paper-icon-button
+              icon='mdi:arrow-expand-all'
+              on-tap='resetZoom'
+            ></paper-icon-button>
+          </div>
+        </template>
       </div>
     </template>
     <div id="chartTarget" style="height:40px; width:100%">
@@ -98,7 +109,7 @@
 </dom-module>
 <script>
 // eslint-disable-next-line no-unused-vars
-/* global Chart moment Color */
+/* global Chart moment Color Hammer */
 {
   let SCRIPT_LOADED = false;
 
@@ -270,6 +281,7 @@
           this._drawLegend();
         }
         this.resizeChart();
+        this.updateZoomlimits();
       } else {
         if (!data.datasets) {
           return;
@@ -303,6 +315,29 @@
           }
         };
         options = Chart.helpers.merge(options, this.data.options);
+        if (this.data.type === 'timeline') {
+          // timeline is not zoomable, so dont capture mouse
+          this.set('isZoomable', false);
+          options = Chart.helpers.merge(options, {
+            pan: { enabled: false },
+            zoom: { enabled: false },
+          });
+        } else {
+          // allow free zooming&moving around
+          this.set('isZoomable', true);
+          options = Chart.helpers.merge(options, {
+            pan: {
+              enabled: true,
+              drag: true,
+              mode: 'xy',
+            },
+            zoom: {
+              enabled: true,
+              drag: false,
+              mode: 'xy',
+            }
+          });
+        }
         if (this.data.type === 'timeline') {
           this.set('isTimeline', true);
           if (this.data.colors !== undefined) {
@@ -335,8 +370,45 @@
           this._drawLegend();
         }
         this.resizeChart();
+        this.updateZoomlimits();
       }
     }
+    updateZoomlimits() {
+      if (!this._chart) return;
+      if (this.isTimeline) return;
+
+      const buffer = {
+        x: { min: null, max: null },
+        y: { min: null, max: null }
+      };
+      Object.keys(this._chart.scales).forEach((name) => {
+        var scale = this._chart.scales[name];
+        var axis = name.substr(0, 1);
+        if (!(axis in buffer)) return;
+
+        if (buffer[axis].max === null || buffer[axis].max < scale.max) {
+          // ===null to accept negative-max
+          buffer[axis].max = scale.max;
+        }
+        if (buffer[axis].min === null || buffer[axis].min > scale.min) {
+          // ===null to allow to go "up" on the first value
+          buffer[axis].min = scale.min;
+        }
+      });
+
+      this._chart.options = Chart.helpers.merge(this._chart.options, {
+        pan: {
+          rangeMin: { x: buffer.x.min, y: buffer.y.min },
+          rangeMax: { x: buffer.x.max, y: buffer.y.max }
+        },
+        zoom: {
+          // x is nulled so users are able to "zoom in on time"
+          rangeMin: { x: null /* buffer.x.min */, y: buffer.y.min },
+          rangeMax: { x: null /* buffer.x.max */, y: buffer.y.max }
+        }
+      });
+    }
+
     resizeChart() {
       if (!this._chart) return;
       // Chart not ready
@@ -393,6 +465,14 @@
       }
     }
 
+    // for chartjs-plugin-zoom
+    resetZoom(event = null) {
+      if (event) {
+        event.stopPropagation();
+      }
+      this._chart.resetZoom();
+    }
+
     // Get HSL distributed color list
     static getColorList(count) {
       let processL = false;

src/resources/ha-chart-scripts.html

@@ -1,10 +1,12 @@
 <script src="../../bower_components/moment/moment.js"></script>
 <script src="../../bower_components/chart.js/dist/Chart.min.js"></script>
 <script src="../../bower_components/chartjs-chart-timeline/timeline.js"></script>
+<script src="../../bower_components/hammerjs/hammer.min.js"></script>
+<script src="../../bower_components/chartjs-plugin-zoom/chartjs-plugin-zoom.min.js"></script>
 <script>
 // Use minified(Chart.min.js) version to fix strange color after uglify
 // eslint-disable-next-line no-unused-vars
-/* global Chart moment */
+/* global Chart moment Color Hammer */
 {
   // This function add a new interaction mode to Chart.js that
   // returns one point for every dataset.