heatmap: add show legend option

public/app/plugins/panel/heatmap/color_legend.ts

@@ -46,7 +46,12 @@ module.directive('heatmapLegend', function() {
       let ctrl = scope.ctrl;
       let ctrl = scope.ctrl;
       let panel = scope.ctrl.panel;
       let panel = scope.ctrl.panel;
 
 
+      render();
       ctrl.events.on('render', function() {
       ctrl.events.on('render', function() {
+        render();
+      });
+
+      function render() {
         if (!_.isEmpty(ctrl.data)) {
         if (!_.isEmpty(ctrl.data)) {
           let legendElem = $(elem).find('svg');
           let legendElem = $(elem).find('svg');
           let legendWidth = Math.floor(legendElem.outerWidth());
           let legendWidth = Math.floor(legendElem.outerWidth());
@@ -66,7 +71,7 @@ module.directive('heatmapLegend', function() {
             drawOpacityLegend(elem, colorOptions, rangeFrom, rangeTo, maxValue, minValue);
             drawOpacityLegend(elem, colorOptions, rangeFrom, rangeTo, maxValue, minValue);
           }
           }
         }
         }
-      });
+      }
     }
     }
   };
   };
 });
 });
@@ -241,7 +246,12 @@ function getOpacityScale(options, maxValue, minValue = 0) {
 }
 }
 
 
 function getSvgElemX(elem) {
 function getSvgElemX(elem) {
+  let svgElem = elem.get(0);
+  if (svgElem && svgElem.x && svgElem.x.baseVal) {
     return elem.get(0).x.baseVal.value;
     return elem.get(0).x.baseVal.value;
+  } else {
+    return 0;
+  }
 }
 }
 
 
 function buildLegendTicks(rangeFrom, rangeTo, maxValue, minValue) {
 function buildLegendTicks(rangeFrom, rangeTo, maxValue, minValue) {

public/app/plugins/panel/heatmap/heatmap_ctrl.ts

@@ -26,6 +26,9 @@ let panelDefaults = {
     exponent: 0.5,
     exponent: 0.5,
     colorScheme: 'interpolateOranges',
     colorScheme: 'interpolateOranges',
   },
   },
+  legend: {
+    show: false
+  },
   dataFormat: 'timeseries',
   dataFormat: 'timeseries',
   xAxis: {
   xAxis: {
     show: true,
     show: true,

public/app/plugins/panel/heatmap/module.html

@@ -8,7 +8,7 @@
 		<div class="heatmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
 		<div class="heatmap-panel" ng-dblclick="ctrl.zoomOut()"></div>
 	</div>
 	</div>
 	<div class="heatmap-legend-wrapper">
 	<div class="heatmap-legend-wrapper">
-		<heatmap-legend></heatmap-legend>
+		<heatmap-legend ng-if="ctrl.panel.legend.show"></heatmap-legend>
 	</div>
 	</div>
 </div>
 </div>
 <div class="clearfix"></div>
 <div class="clearfix"></div>

public/app/plugins/panel/heatmap/partials/display_editor.html

@@ -54,6 +54,14 @@
   </div>
   </div>
 
 
   <div class="section gf-form-group">
   <div class="section gf-form-group">
+    <h5 class="section-heading">Legend</h5>
+    <gf-form-switch class="gf-form" label-class="width-8"
+      label="Show legend"
+      checked="ctrl.panel.legend.show" on-change="ctrl.render()">
+    </gf-form-switch>
+  </div>
+
+  <div class="section gf-form-group">
     <h5 class="section-heading">Buckets</h5>
     <h5 class="section-heading">Buckets</h5>
     <div class="gf-form">
     <div class="gf-form">
       <label class="gf-form-label width-8">Space</label>
       <label class="gf-form-label width-8">Space</label>