Merge pull request #15251 from grafana/14822-use-autosizer

Remove react-sizeme and use AutoSizer

public/app/features/explore/Explore.tsx

@@ -211,7 +211,7 @@ export class Explore extends React.PureComponent<ExploreProps> {
                       {showingStartPage && <StartPage onClickExample={this.onClickExample} />}
                       {!showingStartPage && (
                         <>
-                          {supportsGraph && !supportsLogs && <GraphContainer exploreId={exploreId} />}
+                          {supportsGraph && !supportsLogs && <GraphContainer width={width} exploreId={exploreId} />}
                           {supportsTable && <TableContainer exploreId={exploreId} onClickCell={this.onClickLabel} />}
                           {supportsLogs && (
                             <LogsContainer

public/app/features/explore/Graph.test.tsx

@@ -5,6 +5,7 @@ import { mockData } from './__mocks__/mockData';
 
 const setup = (propOverrides?: object) => {
   const props = {
+    size: { width: 10, height: 20 },
     data: mockData().slice(0, 19),
     range: { from: 'now-6h', to: 'now' },
     ...propOverrides,

public/app/features/explore/Graph.tsx

@@ -1,7 +1,6 @@
 import $ from 'jquery';
 import React, { PureComponent } from 'react';
 import moment from 'moment';
-import { withSize } from 'react-sizeme';
 
 import 'vendor/flot/jquery.flot';
 import 'vendor/flot/jquery.flot.time';
@@ -76,11 +75,11 @@ const FLOT_OPTIONS = {
 
 interface GraphProps {
   data: any[];
-  height?: string; // e.g., '200px'
+  height?: number;
+  width?: number;
   id?: string;
   range: RawTimeRange;
   split?: boolean;
-  size?: { width: number; height: number };
   userOptions?: any;
   onChangeTime?: (range: RawTimeRange) => void;
   onToggleSeries?: (alias: string, hiddenSeries: Set<string>) => void;
@@ -122,7 +121,7 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
       prevProps.range !== this.props.range ||
       prevProps.split !== this.props.split ||
       prevProps.height !== this.props.height ||
-      (prevProps.size && prevProps.size.width !== this.props.size.width) ||
+      prevProps.width !== this.props.width ||
       !equal(prevState.hiddenSeries, this.state.hiddenSeries)
     ) {
       this.draw();
@@ -144,8 +143,8 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
   };
 
   getDynamicOptions() {
-    const { range, size } = this.props;
-    const ticks = (size.width || 0) / 100;
+    const { range, width } = this.props;
+    const ticks = (width || 0) / 100;
     let { from, to } = range;
     if (!moment.isMoment(from)) {
       from = dateMath.parse(from, false);
@@ -237,7 +236,7 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
   }
 
   render() {
-    const { height = '100px', id = 'graph' } = this.props;
+    const { height = 100, id = 'graph' } = this.props;
     const { hiddenSeries } = this.state;
     const data = this.getGraphData();
 
@@ -261,4 +260,4 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
   }
 }
 
-export default withSize()(Graph);
+export default Graph;

public/app/features/explore/GraphContainer.tsx

@@ -20,6 +20,7 @@ interface GraphContainerProps {
   split: boolean;
   toggleGraph: typeof toggleGraph;
   changeTime: typeof changeTime;
+  width: number;
 }
 
 export class GraphContainer extends PureComponent<GraphContainerProps> {
@@ -32,8 +33,8 @@ export class GraphContainer extends PureComponent<GraphContainerProps> {
   };
 
   render() {
-    const { exploreId, graphResult, loading, showingGraph, showingTable, range, split } = this.props;
-    const graphHeight = showingGraph && showingTable ? '200px' : '400px';
+    const { exploreId, graphResult, loading, showingGraph, showingTable, range, split, width } = this.props;
+    const graphHeight = showingGraph && showingTable ? 200 : 400;
 
     if (!graphResult) {
       return null;
@@ -48,6 +49,7 @@ export class GraphContainer extends PureComponent<GraphContainerProps> {
           onChangeTime={this.onChangeTime}
           range={range}
           split={split}
+          width={width}
         />
       </Panel>
     );

public/app/features/explore/Logs.tsx

@@ -214,7 +214,7 @@ export default class Logs extends PureComponent<Props, State> {
         <div className="logs-panel-graph">
           <Graph
             data={timeSeries}
-            height="100px"
+            height={100}
             range={range}
             id={`explore-logs-graph-${exploreId}`}
             onChangeTime={this.props.onChangeTime}

public/app/features/explore/__snapshots__/Graph.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`Render should render component 1`] = `
     id="graph"
     style={
       Object {
-        "height": "100px",
+        "height": 100,
       }
     }
   />
@@ -480,7 +480,7 @@ exports[`Render should render component with disclaimer 1`] = `
     id="graph"
     style={
       Object {
-        "height": "100px",
+        "height": 100,
       }
     }
   />
@@ -962,7 +962,7 @@ exports[`Render should show query return no time series 1`] = `
     id="graph"
     style={
       Object {
-        "height": "100px",
+        "height": 100,
       }
     }
   />