Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Update range and labels for new layout shape

pull/10616/head
Will Piers 2016-11-30 13:36:38 -08:00
parent 5afad83d8b
commit a7f3d394da
2 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/src/shared/components/LayoutRenderer.js
View File

@ -17,6 +17,11 @@ export const LayoutRenderer = React.createClass({
PropTypes.shape({ PropTypes.shape({
queries: PropTypes.arrayOf( queries: PropTypes.arrayOf(
PropTypes.shape({ PropTypes.shape({
label: PropTypes.string,
range: PropTypes.shape({
upper: PropTypes.number,
lower: PropTypes.number,
}),
rp: PropTypes.string, rp: PropTypes.string,
text: PropTypes.string.isRequired, text: PropTypes.string.isRequired,
database: PropTypes.string.isRequired, database: PropTypes.string.isRequired,
@ -24,7 +29,6 @@ export const LayoutRenderer = React.createClass({
wheres: PropTypes.arrayOf(PropTypes.string), wheres: PropTypes.arrayOf(PropTypes.string),
}).isRequired }).isRequired
).isRequired, ).isRequired,
ylabels: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
x: PropTypes.number.isRequired, x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired, y: PropTypes.number.isRequired,
w: PropTypes.number.isRequired, w: PropTypes.number.isRequired,
@ -92,7 +96,6 @@ export const LayoutRenderer = React.createClass({
<RefreshingLineGraph <RefreshingLineGraph
queries={qs} queries={qs}
autoRefresh={autoRefreshMs} autoRefresh={autoRefreshMs}
ylabels={cell.ylabels || []}
/> />
</div> </div>
</div> </div>

34
ui/src/shared/components/LineGraph.js
View File

@ -1,24 +1,23 @@
import React, {PropTypes} from 'react'; import React, {PropTypes} from 'react';
import Dygraph from './Dygraph'; import Dygraph from './Dygraph';
import shallowCompare from 'react-addons-shallow-compare'; import shallowCompare from 'react-addons-shallow-compare';
import _ from 'lodash';
import timeSeriesToDygraph from 'utils/timeSeriesToDygraph'; import timeSeriesToDygraph from 'utils/timeSeriesToDygraph';
const {array, string, arrayOf, number, bool, shape} = PropTypes; const {array, string, arrayOf, bool, shape} = PropTypes;
export default React.createClass({ export default React.createClass({
displayName: 'LineGraph', displayName: 'LineGraph',
propTypes: { propTypes: {
data: array.isRequired, // eslint-disable-line react/forbid-prop-types data: arrayOf(shape({}).isRequired).isRequired,
title: string, title: string,
isFetchingInitially: PropTypes.bool, isFetchingInitially: PropTypes.bool,
isRefreshing: PropTypes.bool, isRefreshing: PropTypes.bool,
yRange: arrayOf(number.isRequired),
ylabels: arrayOf(string.isRequired),
underlayCallback: PropTypes.func, underlayCallback: PropTypes.func,
isGraphFilled: bool, isGraphFilled: bool,
overrideLineColors: array, overrideLineColors: array,
queries: arrayOf(shape({}).isRequired), queries: arrayOf(shape({}).isRequired).isRequired,
}, },
getDefaultProps() { getDefaultProps() {
@ -44,7 +43,7 @@ export default React.createClass({
}, },
render() { render() {
const {isFetchingInitially, title, underlayCallback, ylabels} = this.props; const {isFetchingInitially, title, underlayCallback, queries} = this.props;
const {labels, timeSeries, dygraphSeries} = this._timeSeries; const {labels, timeSeries, dygraphSeries} = this._timeSeries;
// If data for this graph is being fetched for the first time, show a graph-wide spinner. // If data for this graph is being fetched for the first time, show a graph-wide spinner.
if (isFetchingInitially) { if (isFetchingInitially) {
@ -67,7 +66,8 @@ export default React.createClass({
yRangePad: 10, yRangePad: 10,
drawAxesAtZero: true, drawAxesAtZero: true,
underlayCallback, underlayCallback,
ylabel: ylabels && ylabels[0], ylabel: _.get(queries, ['0', 'label'], ''),
y2label: _.get(queries, ['1', 'label'], ''),
}; };
return ( return (
@ -89,18 +89,20 @@ export default React.createClass({
getRanges() { getRanges() {
const {queries} = this.props; const {queries} = this.props;
if (!queries) {
return {};
}
const ranges = {}; const ranges = {};
const q0 = queries[0];
const q1 = queries[1];
if (queries) { if (q0 && q0.range) {
queries.forEach((q, i) => { ranges.y = [q0.range.lower, q0.range.upper];
if (i === 0 && q.range) { }
ranges.y = q.range;
}
if (i === 1 && q.range) { if (q1 && q1.range) {
ranges.y2 = q.range; ranges.y2 = [q1.range.lower, q1.range.upper];
}
});
} }
return ranges; return ranges;