mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Refactoring react graph
This commit is contained in:
parent
1ac81c3ad0
commit
0fd92ef6fb
54
public/app/plugins/panel/graph2/GraphOptions.tsx
Normal file
54
public/app/plugins/panel/graph2/GraphOptions.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
//// Libraries
|
||||
import _ from 'lodash';
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
// Components
|
||||
import { Switch } from 'app/core/components/Switch/Switch';
|
||||
|
||||
// Types
|
||||
import { PanelOptionsProps } from 'app/types';
|
||||
import { Options } from './types';
|
||||
|
||||
export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
|
||||
onToggleLines = () => {
|
||||
this.props.onChange({ ...this.props.options, showLines: !this.props.options.showLines });
|
||||
};
|
||||
|
||||
onToggleBars = () => {
|
||||
this.props.onChange({ ...this.props.options, showBars: !this.props.options.showBars });
|
||||
};
|
||||
|
||||
onTogglePoints = () => {
|
||||
this.props.onChange({ ...this.props.options, showPoints: !this.props.options.showPoints });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { showBars, showPoints, showLines } = this.props.options;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="form-option-box">
|
||||
<div className="form-option-box__header">Display Options</div>
|
||||
<div className="section gf-form-group">
|
||||
<h5 className="section-heading">Draw Modes</h5>
|
||||
<Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
|
||||
<Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
|
||||
<Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
|
||||
</div>
|
||||
<div className="section gf-form-group">
|
||||
<h5 className="section-heading">Test Options</h5>
|
||||
<Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
|
||||
<Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
|
||||
<Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-option-box">
|
||||
<div className="form-option-box__header">Axes</div>
|
||||
</div>
|
||||
<div className="form-option-box">
|
||||
<div className="form-option-box__header">Thresholds</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
43
public/app/plugins/panel/graph2/GraphPanel.tsx
Normal file
43
public/app/plugins/panel/graph2/GraphPanel.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
// Libraries
|
||||
import _ from 'lodash';
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
// Components
|
||||
import Graph from 'app/viz/Graph';
|
||||
|
||||
// Services & Utils
|
||||
import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
|
||||
|
||||
// Types
|
||||
import { PanelProps, NullValueMode } from 'app/types';
|
||||
import { Options } from './types';
|
||||
|
||||
interface Props extends PanelProps<Options> {}
|
||||
|
||||
export class GraphPanel extends PureComponent<Props> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { timeSeries, timeRange, width, height } = this.props;
|
||||
const { showLines, showBars, showPoints } = this.props.options;
|
||||
|
||||
const vmSeries = getTimeSeriesVMs({
|
||||
timeSeries: timeSeries,
|
||||
nullValueMode: NullValueMode.Ignore,
|
||||
});
|
||||
|
||||
return (
|
||||
<Graph
|
||||
timeSeries={vmSeries}
|
||||
timeRange={timeRange}
|
||||
showLines={showLines}
|
||||
showPoints={showPoints}
|
||||
showBars={showBars}
|
||||
width={width}
|
||||
height={height}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
@ -1,90 +1,4 @@
|
||||
import _ from 'lodash';
|
||||
import React, { PureComponent } from 'react';
|
||||
import { GraphPanel } from './GraphPanel';
|
||||
import { GraphOptions } from './GraphOptions';
|
||||
|
||||
import Graph from 'app/viz/Graph';
|
||||
import { Switch } from 'app/core/components/Switch/Switch';
|
||||
|
||||
import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
|
||||
import { PanelProps, PanelOptionsProps, NullValueMode } from 'app/types';
|
||||
|
||||
interface Options {
|
||||
showBars: boolean;
|
||||
showLines: boolean;
|
||||
showPoints: boolean;
|
||||
}
|
||||
|
||||
interface Props extends PanelProps<Options> {}
|
||||
|
||||
export class Graph2 extends PureComponent<Props> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { timeSeries, timeRange, width, height } = this.props;
|
||||
const { showLines, showBars, showPoints } = this.props.options;
|
||||
|
||||
const vmSeries = getTimeSeriesVMs({
|
||||
timeSeries: timeSeries,
|
||||
nullValueMode: NullValueMode.Ignore,
|
||||
});
|
||||
|
||||
return (
|
||||
<Graph
|
||||
timeSeries={vmSeries}
|
||||
timeRange={timeRange}
|
||||
showLines={showLines}
|
||||
showPoints={showPoints}
|
||||
showBars={showBars}
|
||||
width={width}
|
||||
height={height}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class GraphOptions extends PureComponent<PanelOptionsProps<Options>> {
|
||||
onToggleLines = () => {
|
||||
this.props.onChange({ ...this.props.options, showLines: !this.props.options.showLines });
|
||||
};
|
||||
|
||||
onToggleBars = () => {
|
||||
this.props.onChange({ ...this.props.options, showBars: !this.props.options.showBars });
|
||||
};
|
||||
|
||||
onTogglePoints = () => {
|
||||
this.props.onChange({ ...this.props.options, showPoints: !this.props.options.showPoints });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { showBars, showPoints, showLines } = this.props.options;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="form-option-box">
|
||||
<div className="form-option-box__header">Display Options</div>
|
||||
<div className="section gf-form-group">
|
||||
<h5 className="section-heading">Draw Modes</h5>
|
||||
<Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
|
||||
<Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
|
||||
<Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
|
||||
</div>
|
||||
<div className="section gf-form-group">
|
||||
<h5 className="section-heading">Test Options</h5>
|
||||
<Switch label="Lines" labelClass="width-5" checked={showLines} onChange={this.onToggleLines} />
|
||||
<Switch label="Bars" labelClass="width-5" checked={showBars} onChange={this.onToggleBars} />
|
||||
<Switch label="Points" labelClass="width-5" checked={showPoints} onChange={this.onTogglePoints} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="form-option-box">
|
||||
<div className="form-option-box__header">Axes</div>
|
||||
</div>
|
||||
<div className="form-option-box">
|
||||
<div className="form-option-box__header">Thresholds</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export { Graph2 as Panel, GraphOptions as PanelOptions };
|
||||
export { GraphPanel as Panel, GraphOptions as PanelOptions };
|
||||
|
5
public/app/plugins/panel/graph2/types.ts
Normal file
5
public/app/plugins/panel/graph2/types.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export interface Options {
|
||||
showBars: boolean;
|
||||
showLines: boolean;
|
||||
showPoints: boolean;
|
||||
}
|
Loading…
Reference in New Issue
Block a user