From 957005ce6e590a3b108bc8c6c1a06aa0c54ab442 Mon Sep 17 00:00:00 2001
From: Andrew Watkins <watts@influxdb.com>
Date: Tue, 22 Aug 2017 11:04:18 -0700
Subject: [PATCH] Allow set base state on cell

---
 ui/src/dashboards/components/AxesOptions.js    | 17 +++++++++++++++--
 ui/src/dashboards/components/DisplayOptions.js |  3 +++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/ui/src/dashboards/components/AxesOptions.js b/ui/src/dashboards/components/AxesOptions.js
index 6cfc1cbed8..38618bf82a 100644
--- a/ui/src/dashboards/components/AxesOptions.js
+++ b/ui/src/dashboards/components/AxesOptions.js
@@ -5,6 +5,7 @@ import OptIn from 'shared/components/OptIn'
 
 const AxesOptions = ({
   axes,
+  onSetBase,
   onSetLabel,
   onSetPrefixSuffix,
   onSetYAxisBoundMin,
@@ -16,6 +17,7 @@ const AxesOptions = ({
   const defaultYLabel = _.get(axes, ['y', 'defaultYLabel'], '')
   const prefix = _.get(axes, ['y', 'prefix'], '')
   const suffix = _.get(axes, ['y', 'suffix'], '')
+  const base = _.get(axes, ['y', 'base'], '10')
 
   return (
     <div className="display-options--cell">
@@ -73,8 +75,18 @@ const AxesOptions = ({
         <div className="form-group col-sm-6">
           <label>Labels Format</label>
           <ul className="nav nav-tablist nav-tablist-sm">
-            <li className="active">K/M/B</li>
-            <li>K/M/G</li>
+            <li
+              className={base === '10' ? 'active' : ''}
+              onClick={onSetBase('10')}
+            >
+              K/M/B
+            </li>
+            <li
+              className={base === '2' ? 'active' : ''}
+              onClick={onSetBase('2')}
+            >
+              K/M/G
+            </li>
           </ul>
         </div>
         <div className="form-group col-sm-6">
@@ -96,6 +108,7 @@ AxesOptions.propTypes = {
   onSetYAxisBoundMin: func.isRequired,
   onSetYAxisBoundMax: func.isRequired,
   onSetLabel: func.isRequired,
+  onSetBase: func.isRequired,
   axes: shape({
     y: shape({
       bounds: arrayOf(string),
diff --git a/ui/src/dashboards/components/DisplayOptions.js b/ui/src/dashboards/components/DisplayOptions.js
index 6be6dca76f..b00865c89a 100644
--- a/ui/src/dashboards/components/DisplayOptions.js
+++ b/ui/src/dashboards/components/DisplayOptions.js
@@ -33,6 +33,7 @@ class DisplayOptions extends Component {
 
   render() {
     const {
+      onSetBase,
       onSetLabel,
       selectedGraphType,
       onSelectGraphType,
@@ -46,6 +47,7 @@ class DisplayOptions extends Component {
       <div className="display-options">
         <AxesOptions
           axes={axes}
+          onSetBase={onSetBase}
           onSetLabel={onSetLabel}
           onSetPrefixSuffix={onSetPrefixSuffix}
           onSetYAxisBoundMin={onSetYAxisBoundMin}
@@ -68,6 +70,7 @@ DisplayOptions.propTypes = {
   onSetYAxisBoundMin: func.isRequired,
   onSetYAxisBoundMax: func.isRequired,
   onSetLabel: func.isRequired,
+  onSetBase: func.isRequired,
   axes: shape({}).isRequired,
   queryConfigs: arrayOf(shape()).isRequired,
 }