Add data-shared-item to Time Series Visual Builder editor (#10945)

* Adding attributes and prefixer to visualization elements for reporting - adding data-shared-item attribute to visualization element - Adding render-counter attribute - Moving inline to reactcss for prefixing; moving inline to less files where applicable * Fixing reactcss calls
elastic · Apr 14, 2017 · 76c9e0c · 76c9e0c
1 parent cb1aeaf
commit 76c9e0c
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 69 deletions.
diff --git a/src/core_plugins/metrics/public/components/vis_editor_visualization.js b/src/core_plugins/metrics/public/components/vis_editor_visualization.js
@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import { findDOMNode } from 'react-dom';
 import Visualization from './visualization';
 
 class VisEditorVisualization extends Component {
@@ -40,6 +41,11 @@ class VisEditorVisualization extends Component {
     window.removeEventListener('mouseup', this.handleMouseUp);
   }
 
+  componentDidMount() {
+    const el = findDOMNode(this.visDiv);
+    el.setAttribute('render-counter', 'disabled');
+  }
+
   render() {
     const style = { height: this.state.height };
     if (this.state.dragging) {
@@ -48,7 +54,11 @@ class VisEditorVisualization extends Component {
     const visBackgroundColor = '#FFF';
     return (
       <div>
-        <div style={style} className="vis_editor__visualization">
+        <div
+          style={style}
+          data-shared-item={true}
+          ref={(el) => this.visDiv = el}
+          className="vis_editor__visualization">
           <Visualization
             backgroundColor={visBackgroundColor}
             className="dashboard__visualization"

diff --git a/src/core_plugins/metrics/public/visualizations/components/annotation.js b/src/core_plugins/metrics/public/visualizations/components/annotation.js
@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import moment from 'moment';
+import reactcss from 'reactcss';
 class Annotation extends Component {
 
   constructor(props) {
@@ -43,16 +44,28 @@ class Annotation extends Component {
   render() {
     const { color, plot, icon, series } = this.props;
     const offset = plot.pointOffset({ x: series[0], y: 0 });
-    const style = { left: offset.left - 6, bottom: 0, top: 5 };
     const tooltip = this.renderTooltip();
+    const style = reactcss({
+      default: {
+        container: {
+          left: offset.left - 6,
+          bottom: 0,
+          top: 5
+        },
+        line: {
+          backgroundColor: color
+        },
+        icon: { color }
+      }
+    });
     return(
-      <div className="annotation" style={style}>
-        <div className="annotation__line" style={{ width: 2, backgroundColor: color }}></div>
+      <div className="annotation" style={style.container}>
+        <div className="annotation__line" style={style.line}></div>
         <div
           onMouseOver={this.handleMouseOver}
           onMouseOut={this.handleMouseOut}
           className="annotation__icon">
-          <i className={`fa ${icon}`} style={{ color }}></i>
+          <i className={`fa ${icon}`} style={style.icon}></i>
           { tooltip }
         </div>
       </div>

diff --git a/src/core_plugins/metrics/public/visualizations/components/flot_chart.js b/src/core_plugins/metrics/public/visualizations/components/flot_chart.js
@@ -228,19 +228,16 @@ class FlotChart extends Component {
   }
 
   render() {
-    const style = {
-      position: 'relative',
-      display: 'flex',
-      rowDirection: 'column',
-      flex: '1 0 auto',
-    };
     return (
       <Resize
         onResize={this.handleResize}
         ref={(el) => this.resize = el}
-        style={style}>
-        <div ref={(el) => this.target = el} style={style}/>
-      </Resize>);
+        className="rhythm_chart__timeseries-container">
+        <div
+          ref={(el) => this.target = el}
+          className="rhythm_chart__timeseries-container" />
+      </Resize>
+    );
   }
 
 }

diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge.js b/src/core_plugins/metrics/public/visualizations/components/gauge.js
@@ -67,6 +67,11 @@ class Gauge extends Component {
           left: this.state.left || 0,
           transform: `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`
         }
+      },
+      valueColor: {
+        value: {
+          color: this.props.valueColor
+        }
       }
     }, this.props);
 
@@ -80,10 +85,6 @@ class Gauge extends Component {
       color: metric && metric.color || '#8ac336',
       type
     };
-    const valueStyle = {};
-    if (this.props.valueColor) {
-      valueStyle.color = this.props.valueColor;
-    }
 
     let metrics;
     if (type === 'half') {
@@ -97,7 +98,7 @@ class Gauge extends Component {
             ref="title">{ title }</div>
           <div
             className="thorHalfGauge__value"
-            style={valueStyle}
+            style={styles.value}
             ref="label">{ formatter(value) }</div>
         </div>
       );
@@ -109,7 +110,7 @@ class Gauge extends Component {
           style={styles.inner}>
           <div
             className="thorCircleGauge__value"
-            style={valueStyle}
+            style={styles.value}
             ref="label">{ formatter(value) }</div>
           <div
             className="thorCircleGauge__label"

diff --git a/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js b/src/core_plugins/metrics/public/visualizations/components/gauge_vis.js
@@ -72,9 +72,20 @@ class GaugeVis extends Component {
           top: this.state.top,
           left: this.state.left,
           transform: `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`
+        },
+        innerLine: {
+          strokeWidth: this.props.innerLine
+        },
+        gaugeLine: {
+          strokeWidth: this.props.gaugeLine
+        }
+      },
+      half: {
+        svg: {
+          transform: `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`
         }
       }
-    }, this.props);
+    }, { half: type === 'half' });
 
     const props = {
       circle: {
@@ -99,7 +110,6 @@ class GaugeVis extends Component {
     };
 
     if (type === 'half') {
-      styles.svg.transform = `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`;
       props.circle.transform = 'rotate(-197.8 60 60)';
       props.circleBackground.transform = 'rotate(162 60 60)';
     }
@@ -112,8 +122,8 @@ class GaugeVis extends Component {
     if (type === 'half') {
       svg = (
         <svg width={120.72} height={78.72}>
-          <circle {...props.circleBackground} style={{ strokeWidth: this.props.innerLine }}/>
-          <circle {...props.circle} style={{ strokeWidth: this.props.gaugeLine }}/>
+          <circle {...props.circleBackground} style={styles.innerLine}/>
+          <circle {...props.circle} style={styles.gaugeLine}/>
         </svg>
       );
     } else {

diff --git a/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js b/src/core_plugins/metrics/public/visualizations/components/horizontal_legend.js
@@ -1,20 +1,26 @@
 import React, { PropTypes } from 'react';
 import createLegendSeries from '../lib/create_legend_series';
+import reactcss from 'reactcss';
 
 function HorizontalLegend(props) {
   const rows = props.series.map(createLegendSeries(props));
-  const legendStyle = { };
+  const styles = reactcss({
+    hideLegned: {
+      legend: {
+        display: 'none'
+      }
+    }
+  }, { hideLegned: !props.showLegend });
   let legendControlClass = 'fa fa-chevron-down';
   if (!props.showLegend) {
-    legendStyle.display = 'none';
     legendControlClass = 'fa fa-chevron-up';
   }
   return (
     <div className="rhythm_chart__legend-horizontal">
       <div className="rhythm_chart__legend-control">
         <i className={legendControlClass} onClick={props.onClick}/>
       </div>
-      <div className="rhythm_chart__legend-series" style={legendStyle}>
+      <div className="rhythm_chart__legend-series" style={styles.legend}>
         { rows }
       </div>
     </div>

diff --git a/src/core_plugins/metrics/public/visualizations/components/timeseries.js b/src/core_plugins/metrics/public/visualizations/components/timeseries.js
@@ -4,6 +4,7 @@ import getLastValue from '../lib/get_last_value';
 import TimeseriesChart from './timeseries_chart';
 import Legend from './legend';
 import eventBus from '../lib/events';
+import reactcss from 'reactcss';
 
 class Timeseries extends Component {
 
@@ -108,13 +109,16 @@ class Timeseries extends Component {
     if (this.props.reversed) {
       className += ' reversed';
     }
-    const style = {};
-    if (this.props.legendPosition === 'bottom') {
-      style.flexDirection = 'column';
-    }
+    const styles = reactcss({
+      bottomLegend: {
+        content: {
+          flexDirection: 'column'
+        }
+      }
+    }, { bottomLegend: this.props.legendPosition === 'bottom' });
     return (
       <div className={className}>
-        <div style={style} className="rhythm_chart__content">
+        <div style={styles.content} className="rhythm_chart__content">
           <div className="rhythm_chart__visualization">
             <TimeseriesChart
               crosshair={this.props.crosshair}

diff --git a/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js b/src/core_plugins/metrics/public/visualizations/components/timeseries_chart.js
@@ -179,14 +179,6 @@ class TimeseriesChart extends Component {
       );
     }
 
-    const container = {
-      display: 'flex',
-      rowDirection: 'column',
-      flex: '1 0 auto',
-      position: 'relative'
-    };
-
-
     const params = {
       crosshair: this.props.crosshair,
       onPlotCreate: this.handlePlotCreate,
@@ -207,7 +199,7 @@ class TimeseriesChart extends Component {
     const annotations = this.state.annotations.map(this.renderAnnotations);
 
     return (
-      <div ref={(el) => this.container = el} style={container}>
+      <div ref={(el) => this.container = el} className="rhythm_chart__timeseries-container">
         { tooltip }
         { annotations }
         <FlotChart {...params}/>

diff --git a/src/core_plugins/metrics/public/visualizations/components/top_n.js b/src/core_plugins/metrics/public/visualizations/components/top_n.js
@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import _ from 'lodash';
 import getLastValue from '../lib/get_last_value';
+import reactcss from 'reactcss';
 
 class TopN extends Component {
 
@@ -20,18 +21,27 @@ class TopN extends Component {
       const value = formatter(lastValue);
       const width = `${100 * (lastValue / maxValue)}%`;
       const backgroundColor = item.color;
-      const style = {};
-      if (this.props.onClick) {
-        style.cursor = 'pointer';
-      }
+      const styles = reactcss({
+        default: {
+          innerBar: {
+            width,
+            backgroundColor
+          }
+        },
+        onClick: {
+          row: {
+            cursor: 'pointer'
+          }
+        }
+      }, this.props);
       return (
         <tr key={key}
           onClick={this.handleClick({ lastValue, ...item })}
-          style={style}>
+          style={styles.row}>
           <td width="1*" className="rhythm_top_n__label">{ item.label }</td>
           <td width="100%" className="rhythm_top_n__bar">
             <div className="rhythm_top_n__inner-bar"
-              style={{ width, backgroundColor }}/>
+              style={styles.innerBar}/>
           </td>
           <td width="1*" className="rhythm_top_n__value">{ value }</td>
         </tr>
@@ -40,7 +50,7 @@ class TopN extends Component {
   }
 
   render() {
-    if (!this.props.series) return (<div style={{ display: 'none' }}/>);
+    if (!this.props.series) return null;
     const maxValue = this.props.series.reduce((max, series) => {
       const lastValue = getLastValue(series.data, series.data.length);
       return lastValue > max ? lastValue : max;

diff --git a/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js b/src/core_plugins/metrics/public/visualizations/components/vertical_legend.js
@@ -1,32 +1,36 @@
 import React, { PropTypes } from 'react';
 import createLegendSeries from '../lib/create_legend_series';
+import reactcss from 'reactcss';
 
 function VerticalLegend(props) {
   const rows = props.series.map(createLegendSeries(props));
-  const seriesStyle = {};
-  const legendStyle = {};
-  const controlStyle = {};
-  let openClass = 'fa-chevron-left';
-  let closeClass = 'fa-chevron-right';
-  if (props.legendPosition === 'left') {
-    openClass = 'fa-chevron-right';
-    closeClass = 'fa-chevron-left';
-    legendStyle.order = '-1';
-    controlStyle.order = '2';
-  }
-  let legendControlClass = `fa ${closeClass}`;
-  legendStyle.width = 200;
-  if (!props.showLegend) {
-    legendStyle.width = 12;
-    seriesStyle.display = 'none';
-    legendControlClass = `fa ${openClass}`;
-  }
+  const hideLegend = !props.showLegend;
+  const leftLegend = props.legendPosition === 'left';
+
+  const styles = reactcss({
+    default: {
+      legend: { width: 200 }
+    },
+    leftLegend: {
+      legend: { order: '-1' },
+      control: { order: '2' }
+    },
+    hideLegend: {
+      legend: { width: 12 },
+      series: { display: 'none' },
+    }
+  }, { hideLegend, leftLegend });
+
+  const openClass = leftLegend ? 'fa-chevron-right' : 'fa-chevron-left';
+  const closeClass = leftLegend ? 'fa-chevron-left' : 'fa-chevron-right';
+  const legendControlClass = hideLegend ? `fa ${openClass}` : `fa ${closeClass}`;
+
   return (
-    <div className="rhythm_chart__legend" style={legendStyle}>
-      <div className="rhythm_chart__legend-control" style={controlStyle}>
+    <div className="rhythm_chart__legend" style={styles.legend}>
+      <div className="rhythm_chart__legend-control" style={styles.control}>
         <i className={legendControlClass} onClick={props.onClick}/>
       </div>
-      <div className="rhythm_chart__legend-series" style={seriesStyle}>
+      <div className="rhythm_chart__legend-series" style={styles.series}>
         { rows }
       </div>
     </div>

diff --git a/src/core_plugins/metrics/public/visualizations/less/includes/chart.less b/src/core_plugins/metrics/public/visualizations/less/includes/chart.less
@@ -115,6 +115,13 @@
   }
 }
 
+.rhythm_chart__timeseries-container {
+  position: relative;
+  display: flex;
+  row-direction: column;
+  flex: 1 0 auto;
+}
+
 .annotation {
   position: absolute;
   display: flex;
@@ -124,6 +131,7 @@
 }
 .annotation__line {
   flex: 1 0 auto;
+  width: 2px;
 }
 .annotation__icon {
   position: relative;