Change resolution on graph resize

ui/src/shared/components/AutoRefresh.js

@@ -117,7 +117,7 @@ const AutoRefresh = ComposedComponent => {
       const timeSeriesPromises = queries.map(query => {
         const {host, database, rp} = query
 
-        const templatesWithResolution = templates.map((temp) => {
+        const templatesWithResolution = templates.map(temp => {
           if (temp.tempVar === ':interval:') {
             if (resolution) {
               return {...temp, resolution}
@@ -175,7 +175,13 @@ const AutoRefresh = ComposedComponent => {
         return this.renderNoResults()
       }
 
-      return <ComposedComponent {...this.props} data={timeSeries} setResolution={this.setResolution} />
+      return (
+        <ComposedComponent
+          {...this.props}
+          data={timeSeries}
+          setResolution={this.setResolution}
+        />
+      )
     },
 
     /**
@@ -188,6 +194,7 @@ const AutoRefresh = ComposedComponent => {
         <ComposedComponent
           {...this.props}
           data={data}
+          setResolution={this.setResolution}
           isFetchingInitially={isFirstFetch}
           isRefreshing={!isFirstFetch}
         />

ui/src/shared/components/Dygraph.js

@@ -7,7 +7,6 @@ import _ from 'lodash'
 import Dygraphs from 'src/external/dygraph'
 import getRange from 'shared/parsing/getRangeForDygraph'
 
-
 const LINE_COLORS = [
   '#00C9FF',
   '#9394FF',
@@ -309,6 +308,8 @@ export default class Dygraph extends Component {
     // }
 
     dygraph.resize()
+    const {w} = this.dygraph.getArea()
+    this.props.setResolution(w)
   }
 
   sync() {