changed how size is calcualted and propagated and added proper interval calc to DataPanel

public/app/core/components/Switch/Switch.tsx

@@ -26,6 +26,7 @@ export class Switch extends PureComponent<Props, State> {
 
   render() {
     const { labelClass = '', switchClass = '', label, checked, small } = this.props;
+
     const labelId = `check-${this.state.id}`;
     let labelClassName = `gf-form-label ${labelClass} pointer`;
     let switchClassName = `gf-form-switch ${switchClass}`;

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -176,6 +176,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
 
   renderPanels() {
     const panelElements = [];
+    console.log('render panels');
 
     for (const panel of this.props.dashboard.panels) {
       const panelClasses = classNames({ panel: true, 'panel--fullscreen': panel.fullscreen });

public/app/features/dashboard/dashgrid/DataPanel.tsx

@@ -4,6 +4,9 @@ import React, { Component } from 'react';
 // Services
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 
+// Utils
+import kbn from 'app/core/utils/kbn';
+
 // Types
 import { TimeRange, LoadingState, DataQueryOptions, DataQueryResponse, TimeSeries } from 'app/types';
 
@@ -21,6 +24,8 @@ export interface Props {
   timeRange?: TimeRange;
   widthPixels: number;
   refreshCounter: number;
+  minInterval?: string;
+  maxDataPoints?: number;
   children: (r: RenderProps) => JSX.Element;
 }
 
@@ -52,7 +57,7 @@ export class DataPanel extends Component<Props, State> {
   }
 
   componentDidMount() {
-    console.log('DataPanel mount');
+    this.issueQueries();
   }
 
   async componentDidUpdate(prevProps: Props) {
@@ -64,12 +69,11 @@ export class DataPanel extends Component<Props, State> {
   }
 
   hasPropsChanged(prevProps: Props) {
-    return this.props.refreshCounter !== prevProps.refreshCounter || this.props.isVisible !== prevProps.isVisible;
+    return this.props.refreshCounter !== prevProps.refreshCounter;
   }
 
   issueQueries = async () => {
-    const { isVisible, queries, datasource, panelId, dashboardId, timeRange } = this.props;
+    const { isVisible, queries, datasource, panelId, dashboardId, timeRange, widthPixels, maxDataPoints } = this.props;
-    console.log('issueQueries', this.props);
 
     if (!isVisible) {
       return;
@@ -84,16 +88,21 @@ export class DataPanel extends Component<Props, State> {
 
     try {
       const ds = await this.dataSourceSrv.get(datasource);
+
+      // TODO interpolate variables
+      const minInterval = this.props.minInterval || ds.interval;
+      const intervalRes = kbn.calculateInterval(timeRange, widthPixels, minInterval);
+
       const queryOptions: DataQueryOptions = {
         timezone: 'browser',
         panelId: panelId,
         dashboardId: dashboardId,
         range: timeRange,
         rangeRaw: timeRange.raw,
-        interval: '1s',
+        interval: intervalRes.interval,
-        intervalMs: 60000,
+        intervalMs: intervalRes.intervalMs,
         targets: queries,
-        maxDataPoints: 500,
+        maxDataPoints: maxDataPoints || widthPixels,
         scopedVars: {},
         cacheTimeout: null,
       };
@@ -114,17 +123,10 @@ export class DataPanel extends Component<Props, State> {
   };
 
   render() {
-    const { response, loading, isFirstLoad } = this.state;
+    const { response, loading } = this.state;
-    console.log('data panel render');
     const timeSeries = response.data;
 
-    // if (isFirstLoad && (loading === LoadingState.Loading || loading === LoadingState.NotStarted)) {
+    console.log('data panel render');
-    //   return (
-    //     <div className="loading">
-    //       <p>Loading</p>
-    //     </div>
-    //   );
-    // }
 
     return (
       <>
@@ -142,7 +144,7 @@ export class DataPanel extends Component<Props, State> {
 
     if (loading === LoadingState.Loading) {
       return (
-        <div className="panel__loading">
+        <div className="panel-loading">
           <i className="fa fa-spinner fa-spin" />
         </div>
       );

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -88,16 +88,14 @@ export class PanelChrome extends PureComponent<Props, State> {
 
     console.log('panelChrome render');
     return (
-      <div className="panel-container">
+      <AutoSizer>
-        <AutoSizer>
+        {({ width, height }) => {
-          {({ width, height }) => {
+          if (width === 0) {
-            // console.log('SizeMe', size);
+            return null;
-            console.log('autosizer width', width);
+          }
-            if (width === 0) {
-              return null;
-            }
 
-            return (
+          return (
+            <div className="panel-container panel-container--absolute">
               <DataPanel
                 datasource={datasource}
                 queries={targets}
@@ -125,10 +123,10 @@ export class PanelChrome extends PureComponent<Props, State> {
                   );
                 }}
               </DataPanel>
-            );
+            </div>
-          }}
+          );
-        </AutoSizer>
+        }}
-      </div>
+      </AutoSizer>
     );
   }
 }

public/app/types/series.ts

@@ -89,4 +89,6 @@ export interface DataQueryOptions {
 export interface DataSourceApi {
   query(options: DataQueryOptions): Promise<DataQueryResponse>;
   testDatasource(): Promise<any>;
+
+  interval?: string;
 }

public/app/viz/Graph.tsx

@@ -92,6 +92,7 @@ export class Graph extends PureComponent<GraphProps> {
     };
 
     try {
+      console.log('Graph render');
       $.plot(this.element, timeSeries, flotOptions);
     } catch (err) {
       console.log('Graph rendering error', err, flotOptions, timeSeries);

public/sass/pages/_dashboard.scss

@@ -43,6 +43,7 @@ div.flot-text {
   position: relative;
   border-radius: 3px;
   height: 100%;
+  width: 100%;
 
   &.panel-transparent {
     background-color: transparent;
@@ -60,6 +61,10 @@ div.flot-text {
   &--is-editing {
     height: auto;
   }
+
+  &--absolute {
+    position: absolute;
+  }
 }
 
 .panel-content {