From 6f4a2c92299785e049366f538cc27a9bc37c20fb Mon Sep 17 00:00:00 2001 From: Chris Cowan Date: Fri, 16 Jun 2017 15:51:29 -0700 Subject: [PATCH] Adding ability to configure grid for TSVB --- .../components/panel_config/timeseries.js | 8 ++- .../components/vis_types/timeseries/vis.js | 1 + .../visualizations/components/flot_chart.js | 50 ++++++++++++++----- .../visualizations/components/timeseries.js | 5 +- .../components/timeseries_chart.js | 6 +++ 5 files changed, 55 insertions(+), 15 deletions(-) diff --git a/src/core_plugins/metrics/public/components/panel_config/timeseries.js b/src/core_plugins/metrics/public/components/panel_config/timeseries.js index 2cf14e197ce8..6ff74610c560 100644 --- a/src/core_plugins/metrics/public/components/panel_config/timeseries.js +++ b/src/core_plugins/metrics/public/components/panel_config/timeseries.js @@ -24,7 +24,8 @@ class TimeseriesPanelConfig extends Component { filter: '', axis_max: '', axis_min: '', - legend_position: 'right' + legend_position: 'right', + show_grid: 1 }; const model = { ...defaults, ...this.props.model }; const { selectedTab } = this.state; @@ -105,6 +106,11 @@ class TimeseriesPanelConfig extends Component { value={model.legend_position} onChange={handleSelectChange('legend_position')}/> +
Display Grid
+
Panel Filter
diff --git a/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js b/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js index 83d4420294e5..30c1ab449f56 100644 --- a/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js +++ b/src/core_plugins/metrics/public/components/vis_types/timeseries/vis.js @@ -120,6 +120,7 @@ function TimeseriesVisualization(props) { annotations, yaxes, reversed: props.reversed, + showGrid: Boolean(model.show_grid), legend: Boolean(model.show_legend), onBrush: (ranges) => { if (props.onBrush) props.onBrush(ranges); diff --git a/src/core_plugins/metrics/public/visualizations/components/flot_chart.js b/src/core_plugins/metrics/public/visualizations/components/flot_chart.js index 3b4b81602a12..37bf8a60d4bb 100644 --- a/src/core_plugins/metrics/public/visualizations/components/flot_chart.js +++ b/src/core_plugins/metrics/public/visualizations/components/flot_chart.js @@ -19,6 +19,10 @@ class FlotChart extends Component { if (props.reversed !== this.props.reversed) { return true; } + + // if the grid changes we need to re-render + if (props.showGrid !== this.props.showGrid) return true; + if (props.yaxes && this.props.yaxes) { // We need to rerender if the axis change const valuesChanged = props.yaxes.some((axis, i) => { @@ -103,21 +107,36 @@ class FlotChart extends Component { if (this.props.onDraw) this.props.onDraw(plot); } - getOptions() { - const yaxes = this.props.yaxes || [{}]; + getOptions(props) { + const yaxes = props.yaxes || [{}]; + + const lineColor = props.reversed ? colors.lineColorReversed : colors.lineColor; + const textColor = props.reversed ? colors.textColorReversed : colors.textColor; - const lineColor = this.props.reversed ? colors.lineColorReversed : colors.lineColor; - const textColor = this.props.reversed ? colors.textColorReversed : colors.textColor; + const borderWidth = { bottom: 1, top: 0, left: 0, right: 0 }; + + if (yaxes.some(y => y.position === 'left')) borderWidth.left = 1; + if (yaxes.some(y => y.position === 'right')) borderWidth.right = 1; + + if (props.showGrid) { + borderWidth.top = 1; + borderWidth.left = 1; + borderWidth.right = 1; + } const opts = { legend: { show: false }, - yaxes: yaxes, + yaxes: yaxes.map(axis => { + axis.tickLength = props.showGrid ? null : 0; + return axis; + }), yaxis: { color: lineColor, font: { color: textColor }, - tickFormatter: this.props.tickFormatter + tickFormatter: props.tickFormatter }, xaxis: { + tickLength: props.showGrid ? null : 0, color: lineColor, timezone: 'browser', mode: 'time', @@ -128,26 +147,26 @@ class FlotChart extends Component { }, grid: { margin: 0, - borderWidth: 1, + borderWidth, borderColor: lineColor, hoverable: true, mouseActiveRadius: 200, } }; - if (this.props.crosshair) { + if (props.crosshair) { _.set(opts, 'crosshair', { mode: 'x', - color: this.props.reversed ? '#FFF' : '#000', + color: props.reversed ? '#FFF' : '#000', lineWidth: 1 }); } - if (this.props.onBrush) { + if (props.onBrush) { _.set(opts, 'selection', { mode: 'x', color: textColor }); } - _.set(opts, 'series.bars.barWidth', calculateBarWidth(this.props.series)); - return _.assign(opts, this.props.options); + _.set(opts, 'series.bars.barWidth', calculateBarWidth(props.series)); + return _.assign(opts, props.options); } handleResize() { @@ -174,7 +193,7 @@ class FlotChart extends Component { const { series } = this.props; const data = this.calculateData(series, this.props.show); - this.plot = $.plot(this.target, data, this.getOptions()); + this.plot = $.plot(this.target, data, this.getOptions(this.props)); this.handleDraw(this.plot); _.defer(() => this.handleResize()); @@ -248,6 +267,10 @@ class FlotChart extends Component { } +FlotChart.defaultProps = { + showGrid: true +}; + FlotChart.propTypes = { crosshair: PropTypes.bool, onBrush: PropTypes.func, @@ -260,6 +283,7 @@ FlotChart.propTypes = { series: PropTypes.array, show: PropTypes.array, tickFormatter: PropTypes.func, + showGrid: PropTypes.bool, yaxes: PropTypes.array, }; diff --git a/src/core_plugins/metrics/public/visualizations/components/timeseries.js b/src/core_plugins/metrics/public/visualizations/components/timeseries.js index a2267fc0bb1e..b2c0ac3e3a70 100644 --- a/src/core_plugins/metrics/public/visualizations/components/timeseries.js +++ b/src/core_plugins/metrics/public/visualizations/components/timeseries.js @@ -128,6 +128,7 @@ class Timeseries extends Component { series={this.props.series} annotations={this.props.annotations} show={ this.state.show } + showGrid={ this.props.showGrid } tickFormatter={this.props.tickFormatter} options={this.props.options} xaxisLabel={this.props.xaxisLabel} @@ -152,7 +153,8 @@ class Timeseries extends Component { } Timeseries.defaultProps = { - legned: true + legned: true, + showGrid: true }; Timeseries.propTypes = { @@ -164,6 +166,7 @@ Timeseries.propTypes = { reversed: PropTypes.bool, options: PropTypes.object, tickFormatter: PropTypes.func, + showGrid: PropTypes.bool, xaxisLabel: PropTypes.string }; diff --git a/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js b/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js index 52fc688a4157..f1cd6237d754 100644 --- a/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js +++ b/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js @@ -191,6 +191,7 @@ class TimeseriesChart extends Component { reversed: this.props.reversed, series: this.props.series, annotations: this.props.annotations, + showGrid: this.props.showGrid, show: this.props.show, tickFormatter: this.props.tickFormatter, yaxes: this.props.yaxes @@ -215,6 +216,10 @@ class TimeseriesChart extends Component { } +TimeseriesChart.defaultProps = { + showGrid: true +}; + TimeseriesChart.propTypes = { crosshair: PropTypes.bool, onBrush: PropTypes.func, @@ -226,6 +231,7 @@ TimeseriesChart.propTypes = { show: PropTypes.array, tickFormatter: PropTypes.func, yaxes: PropTypes.array, + showGrid: PropTypes.bool, xaxisLabel: PropTypes.string };