Adding ability to configure grid for TSVB

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')}/>
             </div>
+            <div className="vis_editor__label">Display Grid</div>
+            <YesNo
+              value={model.show_grid}
+              name="show_grid"
+              onChange={this.props.onChange}/>
           </div>
           <div className="vis_editor__vis_config-row">
             <div className="vis_editor__label">Panel Filter</div>

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);

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,
 };
 

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
 };
 

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
 };