Add ability to toggle between linear and logarithmic scale

ui/src/dashboards/components/AxesOptions.js

@@ -1,11 +1,16 @@
 import React, {PropTypes} from 'react'
 
 import OptIn from 'shared/components/OptIn'
-import Input from 'src/data_explorer/components/DisplayOptionsInput'
+import Input from 'src/dashboards/components/DisplayOptionsInput'
+import {Tabber, Tab} from 'src/dashboards/components/Tabber'
+import {DISPLAY_OPTIONS} from 'src/dashboards/constants'
+
+const {LINEAR, LOG, BASE_2, BASE_10} = DISPLAY_OPTIONS
 
 const AxesOptions = ({
-  axes: {y: {bounds, label, prefix, suffix, base, defaultYLabel}},
+  axes: {y: {bounds, label, prefix, suffix, base, scale, defaultYLabel}},
   onSetBase,
+  onSetScale,
   onSetLabel,
   onSetPrefixSuffix,
   onSetYAxisBoundMin,
@@ -58,30 +63,30 @@ const AxesOptions = ({
           labelText="Y-Value's Suffix"
           onChange={onSetPrefixSuffix}
         />
-        <div className="form-group col-sm-6">
-          <label>Y-Value Format</label>
-          <ul className="nav nav-tablist nav-tablist-sm">
-            <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">
-          <label>Scale</label>
-          <ul className="nav nav-tablist nav-tablist-sm">
-            <li className="active">Linear</li>
-            <li>Logarithmic</li>
-          </ul>
-        </div>
+        <Tabber labelText="Y-Value's Format">
+          <Tab
+            text="K/M/B"
+            isActive={base === BASE_10}
+            onClickTab={onSetBase(BASE_10)}
+          />
+          <Tab
+            text="K/M/G"
+            isActive={base === BASE_2}
+            onClickTab={onSetBase(BASE_2)}
+          />
+        </Tabber>
+        <Tabber labelText="Scale">
+          <Tab
+            text="Linear"
+            isActive={scale === LINEAR}
+            onClickTab={onSetScale(LINEAR)}
+          />
+          <Tab
+            text="Logaritmic"
+            isActive={scale === LOG}
+            onClickTab={onSetScale(LOG)}
+          />
+        </Tabber>
       </form>
     </div>
   )
@@ -95,8 +100,8 @@ AxesOptions.defaultProps = {
       bounds: ['', ''],
       prefix: '',
       suffix: '',
-      base: '10',
-      scale: 'linear',
+      base: BASE_10,
+      scale: LINEAR,
       defaultYLabel: '',
     },
   },
@@ -107,6 +112,7 @@ AxesOptions.propTypes = {
   onSetYAxisBoundMin: func.isRequired,
   onSetYAxisBoundMax: func.isRequired,
   onSetLabel: func.isRequired,
+  onSetScale: func.isRequired,
   onSetBase: func.isRequired,
   axes: shape({
     y: shape({

ui/src/dashboards/components/DisplayOptions.js

@@ -34,6 +34,7 @@ class DisplayOptions extends Component {
   render() {
     const {
       onSetBase,
+      onSetScale,
       onSetLabel,
       selectedGraphType,
       onSelectGraphType,
@@ -49,6 +50,7 @@ class DisplayOptions extends Component {
           axes={axes}
           onSetBase={onSetBase}
           onSetLabel={onSetLabel}
+          onSetScale={onSetScale}
           onSetPrefixSuffix={onSetPrefixSuffix}
           onSetYAxisBoundMin={onSetYAxisBoundMin}
           onSetYAxisBoundMax={onSetYAxisBoundMax}
@@ -69,6 +71,7 @@ DisplayOptions.propTypes = {
   onSetPrefixSuffix: func.isRequired,
   onSetYAxisBoundMin: func.isRequired,
   onSetYAxisBoundMax: func.isRequired,
+  onSetScale: func.isRequired,
   onSetLabel: func.isRequired,
   onSetBase: func.isRequired,
   axes: shape({}).isRequired,

ui/src/dashboards/components/Tabber.js

@@ -0,0 +1,29 @@
+import React, {PropTypes} from 'react'
+
+export const Tabber = ({labelText, children}) =>
+  <div className="form-group col-sm-6">
+    <label>
+      {labelText}
+    </label>
+    <ul className="nav nav-tablist nav-tablist-sm">
+      {children}
+    </ul>
+  </div>
+
+export const Tab = ({isActive, onClickTab, text}) =>
+  <li className={isActive ? 'active' : ''} onClick={onClickTab}>
+    {text}
+  </li>
+
+const {bool, func, node, string} = PropTypes
+
+Tabber.propTypes = {
+  children: node.isRequired,
+  labelText: string,
+}
+
+Tab.propTypes = {
+  onClickTab: func.isRequired,
+  isActive: bool.isRequired,
+  text: string.isRequired,
+}

ui/src/dashboards/constants/index.js

@@ -94,3 +94,10 @@ export const removeUnselectedTemplateValues = templates => {
     return {...template, values: selectedValues}
   })
 }
+
+export const DISPLAY_OPTIONS = {
+  LINEAR: 'linear',
+  LOG: 'log',
+  BASE_2: '2',
+  BASE_10: '10',
+}

ui/src/shared/components/Dygraph.js

@@ -7,11 +7,13 @@ import _ from 'lodash'
 import Dygraphs from 'src/external/dygraph'
 import getRange from 'shared/parsing/getRangeForDygraph'
 
+import {DISPLAY_OPTIONS} from 'src/dashboards/constants'
 import {LINE_COLORS, multiColumnBarPlotter} from 'src/shared/graphs/helpers'
 import DygraphLegend from 'src/shared/components/DygraphLegend'
 import {buildDefaultYLabel} from 'shared/presenters'
 import {numberValueFormatter} from 'src/utils/formatting'
 
+const {LINEAR, LOG, BASE_10} = DISPLAY_OPTIONS
 const hasherino = (str, len) =>
   str
     .split('')
@@ -71,6 +73,7 @@ export default class Dygraph extends Component {
               direction: 'vertical',
             }),
           ],
+      logscale: y.scale === LOG,
       labelsSeparateLines: false,
       labelsKMB: true,
       rightGap: 0,
@@ -253,6 +256,7 @@ export default class Dygraph extends Component {
       labels,
       file: timeSeries,
       ylabel,
+      logscale: y.scale === LOG,
       axes: {
         y: {
           valueRange: getRange(timeSeries, y.bounds, ruleValues),
@@ -417,7 +421,8 @@ Dygraph.defaultProps = {
       bounds: [null, null],
       prefix: '',
       suffix: '',
-      base: '10',
+      base: BASE_10,
+      scale: LINEAR,
     },
     y2: {
       bounds: undefined,