IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

chore: Replace withSize with AutoSizer in explore/Graph.tsx

Browse Source
This commit is contained in:
Johannes Schill 2019-02-05 09:57:54 +01:00
parent ae0b027d69
commit 097396c517
2 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/app/features/explore/Graph.test.tsx
View File

@ -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,

27
public/app/features/explore/Graph.tsx
View File

@ -1,7 +1,7 @@
import $ from 'jquery';
import React, { PureComponent } from 'react';
import moment from 'moment';
import { withSize } from 'react-sizeme';
import { AutoSizer } from 'react-virtualized';
import 'vendor/flot/jquery.flot';
import 'vendor/flot/jquery.flot.time';
@ -80,12 +80,15 @@ interface GraphProps {
id?: string;
range: RawTimeRange;
split?: boolean;
size?: { width: number; height: number };
userOptions?: any;
onChangeTime?: (range: RawTimeRange) => void;
onToggleSeries?: (alias: string, hiddenSeries: Set<string>) => void;
}
interface SizedGraphProps extends GraphProps {
size: { width: number; height: number };
}
interface GraphState {
/**
* Type parameter refers to the `alias` property of a `TimeSeries`.
@ -95,7 +98,7 @@ interface GraphState {
showAllTimeSeries: boolean;
}
export class Graph extends PureComponent<GraphProps, GraphState> {
export class Graph extends PureComponent<SizedGraphProps, GraphState> {
$el: any;
dynamicOptions = null;
@ -116,7 +119,7 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
this.$el.bind('plotselected', this.onPlotSelected);
}
componentDidUpdate(prevProps: GraphProps, prevState: GraphState) {
componentDidUpdate(prevProps: SizedGraphProps, prevState: GraphState) {
if (
prevProps.data !== this.props.data ||
prevProps.range !== this.props.range ||
@ -261,4 +264,18 @@ export class Graph extends PureComponent<GraphProps, GraphState> {
}
}
export default withSize()(Graph);
export default (props: GraphProps) => (
<AutoSizer>
{({width, height}) => {
return (
<Graph
size={{
width: width,
height: height
}}
{...props}
/>
);
}}
</AutoSizer>
);