Add user instructions for how to use display options

ui/src/dashboards/components/Ranger.js

@@ -47,6 +47,9 @@ const Ranger = ({onSetRange, onSetLabel, axes}) => {
             placeholder="auto"
           />
         </div>
+        <p className="display-options--footnote">
+          Values left blank will be set automatically
+        </p>
         {/* <div className="form-group col-sm-6">
           <label htmlFor="prefix">Labels Prefix</label>
           <input

ui/src/shared/parsing/getRangeForDygraph.js

@@ -66,11 +66,14 @@ const getRange = (
   )
 
   // If time series is such that min and max are equal use Dygraph defaults
-  if (range[0] === range[1]) {
+  const [min, max] = range
+  if (min === max) {
     return [null, null]
   }
 
-  const [min, max] = range
+  if (userMin === userMax) {
+    return [min, max]
+  }
 
   return [considerZero(userMin, min), considerZero(userMax, max)]
 }

ui/src/style/components/ceo-display-options.scss

@@ -114,8 +114,7 @@
   opacity: 0.035;
   transition: opacity 0.5s ease;
 
-  &.graphic-fill-a {fill: $g11-sidewalk;}
-  &.graphic-fill-b {fill: $g9-mountain;}
+  &.graphic-fill-a {fill: $g11-sidewalk;}  &.graphic-fill-b {fill: $g9-mountain;}
   &.graphic-fill-c {fill: $g7-graphite;}
 }
 .viz-type-selector--option.active .viz-type-selector--graphic {
@@ -141,3 +140,14 @@
     justify-content: center;
   }
 }
+
+.display-options--footnote {
+  color: $g11-sidewalk;
+  margin: 0;
+  margin-top: 8px;
+  font-style: italic;
+  display: inline-block;
+  width: 100%;
+  padding-left: 6px;
+  @include no-user-select();
+}