Remove zoom plugin (#1104)

bower.json

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

panels/history/ha-panel-history.html

@@ -84,8 +84,7 @@
           history-data="[[stateHistory]]"
           is-loading-data="[[isLoadingData]]"
           end-time="[[endTime]]"
-          no-single
-          is-zoomable>
+          no-single>
         </state-history-charts>
       </div>
     </app-header-layout>

src/cards/ha-history_graph-card.html

@@ -48,8 +48,7 @@
            history-data="[[stateHistory]]"
            is-loading-data="[[stateHistoryLoading]]"
            up-to-now
-           no-single
-           is-zoomable="[[inDialog]]">
+           no-single>
          </state-history-charts>
       </div>
     </paper-card>

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

@@ -102,14 +102,6 @@
             </template>
           </ul>
         </div>
-        <template is="dom-if" if="[[isZoomable]]">
-          <div class="chartZoomInline">
-            <paper-icon-button
-              icon='mdi:image-filter-center-focus'
-              on-click='resetZoom'
-            ></paper-icon-button>
-          </div>
-        </template>
       </div>
     </template>
     <div id="chartTarget" style="height:40px; width:100%">
@@ -130,7 +122,7 @@
 </dom-module>
 <script>
 // eslint-disable-next-line no-unused-vars
-/* global Chart moment Color Hammer */
+/* global Chart moment Color */
 {
   let SCRIPT_LOADED = false;
 
@@ -145,7 +137,6 @@
       return {
         data: Object,
         identifier: String,
-        isZoomable: Boolean,
         rendered: {
           type: Boolean,
           notify: true,
@@ -170,10 +161,6 @@
       };
     }
 
-    static get observers() {
-      return ['onPropsChange(data, isZoomable)'];
-    }
-
     connectedCallback() {
       super.connectedCallback();
       this._isAttached = true;
@@ -349,7 +336,6 @@
           this._drawLegend();
         }
         this.resizeChart();
-        this.updateZoomlimits();
       } else {
         if (!data.datasets) {
           return;
@@ -387,27 +373,6 @@
         };
         options = Chart.helpers.merge(options, this.data.options);
         options.scales.xAxes[0].ticks.callback = this._formatTickValue;
-        if (this.data.type === 'timeline') {
-          // timeline is not zoomable, so dont capture mouse
-          options = Chart.helpers.merge(options, {
-            pan: { enabled: false },
-            zoom: { enabled: false },
-          });
-        } else {
-          // allow free zooming&moving around
-          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) {
@@ -441,48 +406,9 @@
           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: {
-          enabled: !!this.isZoomable,
-          rangeMin: { x: buffer.x.min, y: buffer.y.min },
-          rangeMax: { x: buffer.x.max, y: buffer.y.max }
-        },
-        zoom: {
-          enabled: !!this.isZoomable,
-          // 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
@@ -539,14 +465,6 @@
       }
     }
 
-    // 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/components/state-history-chart-line.html

@@ -15,7 +15,6 @@
       <ha-chart-base
         id='chart'
         data="[[chartData]]"
-        is-zoomable="[[isZoomable]]"
         identifier="[[identifier]]"
         rendered="{{rendered}}"
       ></ha-chart-base>
@@ -30,7 +29,6 @@ class StateHistoryChartLine extends Polymer.Element {
       data: Object,
       unit: String,
       identifier: String,
-      isZoomable: Boolean,
 
       isSingleDevice: {
         type: Boolean,

src/components/state-history-charts.html

@@ -40,7 +40,6 @@
         data='[[item.data]]'
         identifier='[[item.identifier]]'
         is-single-device='[[_computeIsSingleLineChart(item.data, noSingle)]]'
-        is-zoomable='[[isZoomable]]'
         end-time='[[_computeEndTime(endTime, upToNow, historyData)]]'>
       </state-history-chart-line>
     </template>
@@ -66,7 +65,6 @@ class StateHistoryCharts extends Polymer.Element {
 
       upToNow: Boolean,
       noSingle: Boolean,
-      isZoomable: Boolean,
     };
   }
 

src/dialogs/more-info/more-info-controls.html

@@ -77,7 +77,6 @@
           is-loading-data="[[_stateHistoryLoading]]"
           up-to-now
           no-single=[[large]]
-          is-zoomable=[[large]]
         ></state-history-charts>
       </template>
       <more-info-content

src/resources/ha-chart-scripts.html

@@ -1,12 +1,10 @@
 <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 Color Hammer */
+/* global Chart moment Color */
 
 // This function add a new interaction mode to Chart.js that
 // returns one point for every dataset.