Clean up dygraph positioning styles

- More intuitive names
- Less repetition

ui/src/shared/components/Dygraph.js

@@ -303,7 +303,7 @@ class Dygraph extends Component {
     const hideLegend = mode === EDITING || mode === ADDING ? true : isHidden
 
     return (
-      <div className="dygraph-child" onMouseLeave={this.deselectCrosshair}>
+      <div className="dygraph-container" onMouseLeave={this.deselectCrosshair}>
         {this.dygraph &&
           <Annotations
             dygraph={this.dygraph}
@@ -321,7 +321,7 @@ class Dygraph extends Component {
             this.graphRef = r
             this.props.dygraphRef(r)
           }}
-          className="dygraph-child-container"
+          className="dygraph"
           style={{...this.props.containerStyle, zIndex: '2'}}
         />
       </div>

ui/src/shared/components/LineGraph.js

@@ -89,6 +89,7 @@ class LineGraph extends Component {
       width: 'calc(100% - 32px)',
       height: 'calc(100% - 16px)',
       position: 'absolute',
+      left: '16px',
       top: '8px',
     }
 
@@ -101,7 +102,10 @@ class LineGraph extends Component {
     }
 
     return (
-      <div className="dygraph graph--hasYLabel" style={{height: '100%'}}>
+      <div
+        className="line-graph line-graph__hasYLabel"
+        style={{height: '100%'}}
+      >
         {isRefreshing ? <GraphLoadingDots /> : null}
         <Dygraph
           cell={cell}

ui/src/style/components/dygraphs.scss

@@ -1,9 +1,9 @@
 // Overrides default Dygraphs styles
 
-.dygraph {
-  &:hover {
-    cursor: default;
-  }
+.dygraph-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
 }
 
 .graph-vertical-marker {
@@ -38,7 +38,6 @@
   text-align: right !important;
   user-select: none;
 }
-.graph-container > div > div > div > div {}
 
 /* Vertical Axis Labels */
 .dygraph-ylabel,
@@ -61,7 +60,7 @@
   transform: rotate(90deg);
 }
 
-.graph--hasYLabel {
+.line-graph__hasYLabel {
 
   .dygraph-axis-label-y {
     padding: 0 1px 0 16px !important;
@@ -141,7 +140,7 @@
   Legend Styles
   ------------------------------------------------------------------------------
 */
-.dygraph-child-container .dygraph-legend {
+.dygraph .dygraph-legend {
   display: none !important; // hide default legend
 }
 .dygraph-legend {

ui/src/style/components/graph.scss

@@ -5,6 +5,18 @@
 $graph-heading-height: 44px;
 $graph-gutter: 16px;
 
+.line-graph {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  &:hover {
+    cursor: default;
+  }
+}
+
 /*
   Graph Styles
   ---------------------------------------------
@@ -108,18 +120,6 @@ $graph-gutter: 16px;
 }
 .graph-container {
   @include no-user-select();
-
-  & > .dygraph {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-  & > .dygraph > .dygraph-child {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    padding: 8px 16px;
-  }
 }
 
 .graph-empty {

ui/src/style/pages/dashboards.scss

@@ -122,19 +122,6 @@ $dash-graph-options-arrow: 8px;
   left: 0;
   padding: 0;
 
-  .dygraph {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-  }
-  .dygraph .dygraph-child {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    padding: 8px 16px;
-  }
   .graph-panel__refreshing {
     top: (-$dash-graph-heading + 5px) !important;
   }

ui/src/style/pages/kapacitor.scss

@@ -256,19 +256,13 @@ $rule-builder--radius-lg: 5px;
 .rule-builder--graph {
   padding: 0 $rule-builder--padding-sm;
 
-  > div.dygraph {
+  > div.line-graph {
     position: absolute;
     top: ($rule-builder--padding-lg * 2);
     left: $rule-builder--padding-sm;
     width: calc(100% - #{$rule-builder--padding-sm * 2});
     height: calc(100% - #{$rule-builder--padding-lg * 2}) !important;
   }
-  > .dygraph > .dygraph-child {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    padding: 8px 16px;
-  }
 }
 .rule-builder--graph-empty {
   display: flex;