From 85bd1861d64d7fbf21e54845019ff614be0788f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 13 Sep 2017 14:38:22 +0200
Subject: [PATCH] fix: improve behavior when switching back and forth between
 x-axis modes, fixes #9229

---
 public/app/plugins/panel/graph/axes_editor.html | 16 ++--------------
 public/app/plugins/panel/graph/axes_editor.ts   | 10 ++++++----
 2 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/public/app/plugins/panel/graph/axes_editor.html b/public/app/plugins/panel/graph/axes_editor.html
index 704f3b550f9..1ce4c3174b4 100644
--- a/public/app/plugins/panel/graph/axes_editor.html
+++ b/public/app/plugins/panel/graph/axes_editor.html
@@ -48,26 +48,14 @@
 		<div class="gf-form">
 			<label class="gf-form-label width-6">Mode</label>
 			<div class="gf-form-select-wrapper max-width-15">
-				<select class="gf-form-input" ng-model="ctrl.panel.xaxis.mode" ng-options="v as k for (k, v) in ctrl.xAxisModes" ng-change="ctrl.xAxisOptionChanged()"> </select>
+				<select class="gf-form-input" ng-model="ctrl.panel.xaxis.mode" ng-options="v as k for (k, v) in ctrl.xAxisModes" ng-change="ctrl.xAxisModeChanged()"> </select>
 			</div>
 		</div>
 
-    <!-- Table mode -->
-		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'field'">
-			<label class="gf-form-label width-6">Name</label>
-      <metric-segment-model property="ctrl.panel.xaxis.name" get-options="ctrl.getDataFieldNames(false)" on-change="ctrl.xAxisOptionChanged()" custom="false" css-class="width-10" select-mode="true"></metric-segment-model>
-		</div>
-
-    <!-- Series mode -->
-		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'field'">
-			<label class="gf-form-label width-6">Value</label>
-      <metric-segment-model property="ctrl.panel.xaxis.values[0]" get-options="ctrl.getDataFieldNames(true)" on-change="ctrl.xAxisOptionChanged()" custom="false" css-class="width-10" select-mode="true"></metric-segment-model>
-		</div>
-
 		<!-- Series mode -->
 		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'series'">
 			<label class="gf-form-label width-6">Value</label>
-      <metric-segment-model property="ctrl.panel.xaxis.values[0]" options="ctrl.xAxisStatOptions" on-change="ctrl.xAxisOptionChanged()" custom="false" css-class="width-10" select-mode="true"></metric-segment-model>
+      <metric-segment-model property="ctrl.panel.xaxis.values[0]" options="ctrl.xAxisStatOptions" on-change="ctrl.xAxisValueChanged()" custom="false" css-class="width-10" select-mode="true"></metric-segment-model>
 		</div>
 
 		<!-- Histogram mode -->
diff --git a/public/app/plugins/panel/graph/axes_editor.ts b/public/app/plugins/panel/graph/axes_editor.ts
index adb3d1d6706..86789db9fce 100644
--- a/public/app/plugins/panel/graph/axes_editor.ts
+++ b/public/app/plugins/panel/graph/axes_editor.ts
@@ -59,10 +59,12 @@ export class AxesEditorCtrl {
     this.panelCtrl.render();
   }
 
-  xAxisOptionChanged()  {
-    if (!this.panel.xaxis.values || !this.panel.xaxis.values[0]){
-      this.panelCtrl.processor.setPanelDefaultsForNewXAxisMode();
-    }
+  xAxisModeChanged()  {
+    this.panelCtrl.processor.setPanelDefaultsForNewXAxisMode();
+    this.panelCtrl.onDataReceived(this.panelCtrl.dataList);
+  }
+
+  xAxisValueChanged() {
     this.panelCtrl.onDataReceived(this.panelCtrl.dataList);
   }