From 0fff1f9487c93797c6e4497728f924c84fd0b75e Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Fri, 23 Feb 2018 10:30:47 -0800
Subject: [PATCH] Add prefix to single stat options

---
 .../components/SingleStatOptions.js           | 43 ++++++++++++++-----
 ui/src/shared/components/RefreshingGraph.js   |  5 +--
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/ui/src/dashboards/components/SingleStatOptions.js b/ui/src/dashboards/components/SingleStatOptions.js
index 586ab9ae5..01a38bffa 100644
--- a/ui/src/dashboards/components/SingleStatOptions.js
+++ b/ui/src/dashboards/components/SingleStatOptions.js
@@ -109,6 +109,13 @@ class SingleStatOptions extends Component {
     return !sortedColors.some(color => color.value === targetValue)
   }
 
+  handleUpdatePrefix = e => {
+    const {handleUpdateAxes, axes} = this.props
+    const newAxes = {...axes, y: {...axes.y, prefix: e.target.value}}
+
+    handleUpdateAxes(newAxes)
+  }
+
   handleUpdateSuffix = e => {
     const {handleUpdateAxes, axes} = this.props
     const newAxes = {...axes, y: {...axes.y, suffix: e.target.value}}
@@ -117,7 +124,11 @@ class SingleStatOptions extends Component {
   }
 
   render() {
-    const {singleStatColors, singleStatType, axes: {y: {suffix}}} = this.props
+    const {
+      singleStatColors,
+      singleStatType,
+      axes: {y: {prefix, suffix}},
+    } = this.props
 
     const disableAddThreshold = singleStatColors.length > MAX_THRESHOLDS
 
@@ -162,6 +173,26 @@ class SingleStatOptions extends Component {
             )}
           </div>
           <div className="single-stat-controls">
+            <div className="form-group col-xs-6">
+              <label>Prefix</label>
+              <input
+                className="form-control input-sm"
+                placeholder="%, MPH, etc."
+                defaultValue={prefix}
+                onChange={this.handleUpdatePrefix}
+                maxLength="5"
+              />
+            </div>
+            <div className="form-group col-xs-6">
+              <label>Suffix</label>
+              <input
+                className="form-control input-sm"
+                placeholder="%, MPH, etc."
+                defaultValue={suffix}
+                onChange={this.handleUpdateSuffix}
+                maxLength="5"
+              />
+            </div>
             <div className="form-group col-xs-6">
               <label>Coloring</label>
               <ul className="nav nav-tablist nav-tablist-sm">
@@ -183,16 +214,6 @@ class SingleStatOptions extends Component {
                 </li>
               </ul>
             </div>
-            <div className="form-group col-xs-6">
-              <label>Suffix</label>
-              <input
-                className="form-control input-sm"
-                placeholder="%, MPH, etc."
-                defaultValue={suffix}
-                onChange={this.handleUpdateSuffix}
-                maxLength="5"
-              />
-            </div>
           </div>
         </div>
       </FancyScrollbar>
diff --git a/ui/src/shared/components/RefreshingGraph.js b/ui/src/shared/components/RefreshingGraph.js
index 951f6350b..fe389d4ff 100644
--- a/ui/src/shared/components/RefreshingGraph.js
+++ b/ui/src/shared/components/RefreshingGraph.js
@@ -39,8 +39,6 @@ const RefreshingGraph = ({
   }
 
   if (type === 'single-stat') {
-    const suffix = axes.y.suffix || ''
-
     return (
       <RefreshingSingleStat
         colors={colors}
@@ -49,7 +47,8 @@ const RefreshingGraph = ({
         templates={templates}
         autoRefresh={autoRefresh}
         cellHeight={cellHeight}
-        suffix={suffix}
+        prefix={axes.y.prefix || ''}
+        suffix={axes.y.suffix || ''}
       />
     )
   }