Refactoring and fixes for PR #880

src/app/directives/grafanaGraph.js

@@ -21,20 +21,27 @@ function (angular, $, kbn, moment, _, graphTooltip) {
         var legendSideLastValue = null;
         scope.crosshairEmiter = false;
 
-        scope.$on('setCrosshair',function(event,pos) {
-          console.log('setCrosshair'+ pos);
-          if(dashboard.sharedCrosshair && !scope.crosshairEmiter) {
+        scope.onAppEvent('setCrosshair', function(event, info) {
+          // do not need to to this if event is from this panel
+          if (info.scope === scope) {
+            return;
+          }
+
+          if(dashboard.sharedCrosshair) {
+            console.log("setCrosshair");
             var plot = elem.data().plot;
-            plot.setCrosshair({ x: pos.x, y: pos.y });
+            if (plot) {
+              plot.setCrosshair({ x: info.pos.x, y: info.pos.y });
+            }
           }
         });
 
-        scope.$on('clearCrosshair',function() {
+        scope.onAppEvent('clearCrosshair', function() {
           var plot = elem.data().plot;
           plot.clearCrosshair();
         });
 
-        scope.$on('refresh',function() {
+        scope.$on('refresh', function() {
           scope.get_data();
         });
 

src/app/directives/grafanaGraph.tooltip.js

@@ -5,17 +5,18 @@ define([
 function ($, kbn) {
   'use strict';
 
-  function registerTooltipFeatures(elem, dashboard, scope, $rootScope) {
+  function registerTooltipFeatures(elem, dashboard, scope) {
 
     var $tooltip = $('<div id="tooltip">');
 
     elem.mouseleave(function () {
-      if(scope.panel.tooltip.shared) {
+      if (scope.panel.tooltip.shared || dashboard.sharedCrosshair) {
         var plot = elem.data().plot;
-        $tooltip.detach();
-        $rootScope.$broadcast('clearCrosshair');
-        //plot.clearCrosshair();
-        plot.unhighlight();
+        if (plot) {
+          $tooltip.detach();
+          plot.unhighlight();
+          scope.appEvent('clearCrosshair');
+        }
       }
     });
 
@@ -33,11 +34,10 @@ function ($, kbn) {
       var data = plot.getData();
       var group, value, timestamp, seriesInfo, format, i, series, hoverIndex, seriesHtml;
 
-      scope.crosshairEmiter = true;
       if(dashboard.sharedCrosshair){
-        $rootScope.$broadcast('setCrosshair',pos);
+        scope.appEvent('setCrosshair',  { pos: pos, scope: scope });
       }
-      scope.crosshairEmiter = false;
+
       if (scope.panel.tooltip.shared) {
         plot.unhighlight();
 

src/app/panels/graph/styleEditor.html

@@ -33,11 +33,7 @@
 		<editor-opt-bool text="Stack" model="panel.stack" change="render()"></editor-opt-bool>
 		<editor-opt-bool text="Percent" model="panel.percentage" change="render()" tip="Stack as a percentage of total"></editor-opt-bool>
 
-    <div class="editor-option" ng-show="panel.stack">
-      <label class="small">Stacked Values <tip>How should the values in stacked charts to be calculated?</tip></label>
-      <select class="input-small" ng-model="panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="render()"></select>
-    </div>
-  </div>
+	</div>
 
 
   <div class="section">
@@ -55,7 +51,12 @@
   <div class="section">
     <h5>Tooltip</h5>
     <div class="editor-option">
-      <label class="small">shared <tip> Show all series values on the same time in the same tooltip and a x croshair to help follow all series</tip> </label><input type="checkbox" ng-model="panel.tooltip.shared" ng-checked="panel.tooltip.shared" ng-change="render()">
+			<label class="small">shared <tip> Show all series values on the same time in the same tooltip and a x croshair to help follow all series</tip></label>
+			<input type="checkbox" ng-model="panel.tooltip.shared" ng-checked="panel.tooltip.shared" ng-change="render()">
+    </div>
+		<div class="editor-option" ng-show="panel.stack">
+      <label class="small">Stacked Values <tip>How should the values in stacked charts to be calculated?</tip></label>
+      <select class="input-small" ng-model="panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="render()"></select>
     </div>
   </div>
 </div>

src/app/partials/dasheditor.html

@@ -29,7 +29,6 @@
 						<select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
 					</div>
 					<editor-opt-bool text="Hide controls (CTRL+H)" model="dashboard.hideControls"></editor-opt-bool>
-          <editor-opt-bool text="Shared Crosshair (CTRL+O)" model="dashboard.sharedCrosshair"></editor-opt-bool>
 				</div>
 			</div>
 			<div class="editor-row">
@@ -75,6 +74,7 @@
 						<input class="cr1" id="pulldown{{pulldown.type}}" type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
 						<label for="pulldown{{pulldown.type}}" class="cr1"></label>
 					</div>
+          <editor-opt-bool text="Shared Crosshair (CTRL+O)" model="dashboard.sharedCrosshair"></editor-opt-bool>
 				</div>
 			</div>
 		</div>

src/app/services/dashboard/dashboardKeyBindings.js

@@ -29,6 +29,7 @@ function(angular, $) {
       keyboardManager.bind('ctrl+o', function() {
         var current = scope.dashboard.sharedCrosshair;
         scope.dashboard.sharedCrosshair = !current;
+        scope.dashboard.emit_refresh('refresh');
       }, { inputDisabled: true });
 
       keyboardManager.bind('ctrl+h', function() {

src/app/services/dashboard/dashboardSrv.js

@@ -27,7 +27,7 @@ function (angular, $, kbn, _, moment) {
       this.timezone = data.timezone || 'browser';
       this.editable = data.editable === false ? false : true;
       this.hideControls = data.hideControls || false;
-      this.sharedCrosshair = data.sharedCrosshair || true;
+      this.sharedCrosshair = data.sharedCrosshair || false;
       this.rows = data.rows || [];
       this.nav = data.nav || [];
       this.time = data.time || { from: 'now-6h', to: 'now' };