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

Merge pull request #14535 from grafana/react-graph-changes

Browse Source 
React graph changes
This commit is contained in:
Torkel Ödegaard 2018-12-17 16:29:00 +01:00 committed by GitHub
commit c0fc236fcb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 97 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/components/Switch/Switch.tsx
View File

@ -32,7 +32,7 @@ export class Switch extends PureComponent<Props, State> {
const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
return (
<label htmlFor={labelId} className="gf-form-switch-container">
<label htmlFor={labelId} className="gf-form gf-form-switch-container">
{label && <div className={labelClassName}>{label}</div>}
<div className={switchClassName}>
<input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />

45
public/app/plugins/panel/graph2/GraphOptions.tsx Normal file
View File

@ -0,0 +1,45 @@
//// 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="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>
);
}
}

43
public/app/plugins/panel/graph2/GraphPanel.tsx Normal file
View 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}
/>
);
}
}

92
public/app/plugins/panel/graph2/module.tsx
View File

@ -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
View File

@ -0,0 +1,5 @@
export interface Options {
showBars: boolean;
showLines: boolean;
showPoints: boolean;
}