Merge pull request #2157 from influxdata/bugfix/logscale-single-point

Logscale single point

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## v1.3.11.0 [unreleased]
 ### Bug Fixes
+1. [#2157](https://github.com/influxdata/chronograf/pull/2157): Fix logscale producing console errors when only one point in graph
 1. [#2158](https://github.com/influxdata/chronograf/pull/2158): Fix 'Cannot connect to source' false error flag on Dashboard page
 1. [#2167](https://github.com/influxdata/chronograf/pull/2167): Add fractions of seconds to time field in csv export
 

ui/src/dashboards/components/AxesOptions.js

@@ -6,6 +6,7 @@ import {Tabber, Tab} from 'src/dashboards/components/Tabber'
 import {DISPLAY_OPTIONS, TOOLTIP_CONTENT} from 'src/dashboards/constants'
 
 const {LINEAR, LOG, BASE_2, BASE_10} = DISPLAY_OPTIONS
+const getInputMin = scale => (scale === LOG ? '0' : null)
 
 const AxesOptions = ({
   axes: {y: {bounds, label, prefix, suffix, base, scale, defaultYLabel}},
@@ -38,6 +39,7 @@ const AxesOptions = ({
             customValue={min}
             onSetValue={onSetYAxisBoundMin}
             type="number"
+            min={getInputMin(scale)}
           />
         </div>
         <div className="form-group col-sm-6">
@@ -47,6 +49,7 @@ const AxesOptions = ({
             customValue={max}
             onSetValue={onSetYAxisBoundMax}
             type="number"
+            min={getInputMin(scale)}
           />
         </div>
         <Input

ui/src/shared/components/ClickOutsideInput.js

@@ -14,6 +14,7 @@ class ClickOutsideInput extends Component {
   render() {
     const {
       id,
+      min,
       type,
       onFocus,
       onChange,
@@ -27,6 +28,7 @@ class ClickOutsideInput extends Component {
       <input
         className="form-control input-sm"
         id={id}
+        min={min}
         type={type}
         name={customPlaceholder}
         ref={onGetRef}
@@ -43,6 +45,7 @@ class ClickOutsideInput extends Component {
 const {func, string} = PropTypes
 
 ClickOutsideInput.propTypes = {
+  min: string,
   id: string.isRequired,
   type: string.isRequired,
   customPlaceholder: string.isRequired,

ui/src/shared/components/Dygraph.js

@@ -43,7 +43,6 @@ export default class Dygraph extends Component {
   componentDidMount() {
     const {
       axes: {y, y2},
-      ruleValues,
       isGraphFilled: fillGraph,
       isBarGraph,
       options,
@@ -63,9 +62,7 @@ export default class Dygraph extends Component {
       plugins: [new Dygraphs.Plugins.Crosshair({direction: 'vertical'})],
       axes: {
         y: {
-          valueRange: options.stackedGraph
-            ? getStackedRange(y.bounds)
-            : getRange(timeSeries, y.bounds, ruleValues),
+          valueRange: this.getYRange(timeSeries),
           axisLabelFormatter: (yval, __, opts) =>
             numberValueFormatter(yval, opts, y.prefix, y.suffix),
           axisLabelWidth: this.getLabelWidth(),
@@ -130,7 +127,7 @@ export default class Dygraph extends Component {
   }
 
   componentDidUpdate() {
-    const {labels, axes: {y, y2}, options, ruleValues, isBarGraph} = this.props
+    const {labels, axes: {y, y2}, options, isBarGraph} = this.props
 
     const dygraph = this.dygraph
     if (!dygraph) {
@@ -149,9 +146,7 @@ export default class Dygraph extends Component {
       ylabel: this.getLabel('y'),
       axes: {
         y: {
-          valueRange: options.stackedGraph
-            ? getStackedRange(y.bounds)
-            : getRange(timeSeries, y.bounds, ruleValues),
+          valueRange: this.getYRange(timeSeries),
           axisLabelFormatter: (yval, __, opts) =>
             numberValueFormatter(yval, opts, y.prefix, y.suffix),
           axisLabelWidth: this.getLabelWidth(),
@@ -175,6 +170,24 @@ export default class Dygraph extends Component {
     this.resize()
   }
 
+  getYRange = timeSeries => {
+    const {options, axes: {y}, ruleValues} = this.props
+
+    if (options.stackedGraph) {
+      return getStackedRange(y.bounds)
+    }
+
+    const range = getRange(timeSeries, y.bounds, ruleValues)
+    const [min, max] = range
+
+    // Bug in Dygraph calculates a negative range for logscale when min range is 0
+    if (y.scale === LOG && timeSeries.length === 1 && min <= 0) {
+      return [0.1, max]
+    }
+
+    return range
+  }
+
   handleZoom = (lower, upper) => {
     const {onZoom} = this.props
 

ui/src/shared/components/OptIn.js

@@ -99,7 +99,7 @@ class OptIn extends Component {
   handleInputRef = el => (this.customValueInput = el)
 
   render() {
-    const {fixedPlaceholder, customPlaceholder, type} = this.props
+    const {fixedPlaceholder, customPlaceholder, type, min} = this.props
     const {useCustomValue, customValue} = this.state
 
     return (
@@ -110,6 +110,7 @@ class OptIn extends Component {
       >
         <ClickOutsideInput
           id={this.id}
+          min={min}
           type={type}
           customValue={customValue}
           onGetRef={this.handleInputRef}
@@ -119,7 +120,6 @@ class OptIn extends Component {
           onKeyDown={this.handleKeyDownCustomValueInput}
           handleClickOutsideInput={this.handleClickOutsideInput}
         />
-
         <div
           className="opt-in--groove-knob-container"
           id={this.id}
@@ -141,15 +141,16 @@ class OptIn extends Component {
 }
 
 OptIn.defaultProps = {
-  fixedPlaceholder: 'auto',
   fixedValue: '',
   customPlaceholder: 'Custom Value',
+  fixedPlaceholder: 'auto',
   customValue: '',
 }
 
 const {func, oneOf, string} = PropTypes
 
 OptIn.propTypes = {
+  min: string,
   fixedPlaceholder: string,
   fixedValue: string,
   customPlaceholder: string,