Chart improvements

gsa/CMakeLists.txt

@@ -207,7 +207,9 @@ set (GSA_JS_SRC_FILES
      ${GSA_SRC_DIR}/src/web/components/chart/tooltip.js
      ${GSA_SRC_DIR}/src/web/components/chart/topology.js
      ${GSA_SRC_DIR}/src/web/components/chart/utils/arc.js
+     ${GSA_SRC_DIR}/src/web/components/chart/utils/constants.js
      ${GSA_SRC_DIR}/src/web/components/chart/utils/path.js
+     ${GSA_SRC_DIR}/src/web/components/chart/utils/update.js
      ${GSA_SRC_DIR}/src/web/components/chart/wordcloud.js
      ${GSA_SRC_DIR}/src/web/components/comment/comment.js
      ${GSA_SRC_DIR}/src/web/components/dashboard/controls.js
@@ -219,6 +221,7 @@ set (GSA_JS_SRC_FILES
      ${GSA_SRC_DIR}/src/web/components/dashboard/display/cvss/cvsstabledisplay.js
      ${GSA_SRC_DIR}/src/web/components/dashboard/display/cvss/cvsstransform.js
      ${GSA_SRC_DIR}/src/web/components/dashboard/display/datadisplay.js
+     ${GSA_SRC_DIR}/src/web/components/dashboard/display/datadisplayicons.js
      ${GSA_SRC_DIR}/src/web/components/dashboard/display/datatable.js
      ${GSA_SRC_DIR}/src/web/components/dashboard/display/datatabledisplay.js
      ${GSA_SRC_DIR}/src/web/components/dashboard/display/display.js

gsa/src/web/components/chart/bar.js

@@ -29,14 +29,13 @@ import {scaleBand, scaleLinear} from 'd3-scale';
 import {shorten} from 'gmp/utils/string';
 import {isDefined} from 'gmp/utils/identity';
 
-import {
-  MENU_PLACEHOLDER_WIDTH,
-} from 'web/components/dashboard/display/datadisplay';
-
 import Layout from 'web/components/layout/layout';
 
 import PropTypes from 'web/utils/proptypes';
 
+import {MENU_PLACEHOLDER_WIDTH} from './utils/constants';
+import {shouldUpdate} from './utils/update';
+
 import Axis from './axis';
 import Group from './group';
 import Legend from './legend';
@@ -67,16 +66,58 @@ const tickFormat = val => {
 
 class BarChart extends React.Component {
 
-  shouldComponentUpdate(nextProps) {
-    return this.props.width !== nextProps.width ||
-      this.props.height !== nextProps.height ||
-      this.props.data !== nextProps.data;
+  constructor(...args) {
+    super(...args);
+
+    this.legendRef = React.createRef();
+
+    this.state = {
+      width: this.getWidth(),
+    };
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return shouldUpdate(nextProps, this.props) ||
+      nextState.width !== this.state.width;
+  }
+
+  componentDidMount() {
+    this.update();
+  }
+
+  componentDidUpdate() {
+    this.update();
+  }
+
+  update() {
+    const width = this.getWidth();
+    if (width !== this.state.width) {
+      this.setState({width});
+    }
+  }
+
+  getWidth() {
+    let {width} = this.props;
+    const {current: legend} = this.legendRef;
+
+    width = width - MENU_PLACEHOLDER_WIDTH;
+
+    if (legend !== null) {
+      const {width: legendWidth} = legend.getBoundingClientRect();
+      width = width - legendWidth - LEGEND_MARGIN;
+    }
+
+    if (width < MIN_WIDTH) {
+      width = MIN_WIDTH;
+    }
+
+    return width;
   }
 
   render() {
     const {
       data = [],
-      displayLegend = true,
+      showLegend = true,
       height,
       xLabel = '',
       yLabel = '',
@@ -85,16 +126,7 @@ class BarChart extends React.Component {
       onDataClick,
       onLegendItemClick,
     } = this.props;
-    let {width} = this.props;
-
-    if (this.legend) {
-      const {width: legendWidth} = this.legend.getBoundingClientRect();
-      width = width - legendWidth - LEGEND_MARGIN;
-    }
-
-    if (width < MIN_WIDTH) {
-      width = MIN_WIDTH;
-    }
+    const {width} = this.state;
 
     const xValues = data.map(d => d.x);
     const yValues = data.map(d => d.y);
@@ -108,7 +140,7 @@ class BarChart extends React.Component {
     const marginLeft = horizontal ? margin.left +
       Math.min(MAX_LABEL_LENGTH, maxLabelLength) * 4 : margin.left;
 
-    const maxWidth = width - marginLeft - margin.right - MENU_PLACEHOLDER_WIDTH;
+    const maxWidth = width - marginLeft - margin.right;
     let maxHeight = height - margin.top - margin.bottom;
 
     if (isDefined(xLabel)) {
@@ -195,9 +227,9 @@ class BarChart extends React.Component {
             ))}
           </Group>
         </Svg>
-        {displayLegend && data.length > 0 &&
+        {showLegend && data.length > 0 &&
           <Legend
-            innerRef={ref => this.legend = ref}
+            innerRef={this.legendRef}
             data={data}
             onItemClick={onLegendItemClick}
           />
@@ -226,9 +258,9 @@ BarChart.propTypes = {
     color: PropTypes.toString.isRequired,
     toolTip: PropTypes.elementOrString,
   })).isRequired,
-  displayLegend: PropTypes.bool,
   height: PropTypes.number.isRequired,
   horizontal: PropTypes.bool,
+  showLegend: PropTypes.bool,
   svgRef: PropTypes.ref,
   width: PropTypes.number.isRequired,
   xLabel: PropTypes.toString,

gsa/src/web/components/chart/donut.js

@@ -36,10 +36,8 @@ import {setRef} from 'web/utils/render';
 import Theme from 'web/utils/theme';
 
 import arc from './utils/arc';
-
-import {
-  MENU_PLACEHOLDER_WIDTH,
-} from 'web/components/dashboard/display/datadisplay';
+import {MENU_PLACEHOLDER_WIDTH} from './utils/constants';
+import {shouldUpdate} from './utils/update';
 
 import Layout from 'web/components/layout/layout';
 
@@ -152,9 +150,7 @@ class DonutChart extends React.Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    return nextProps.data !== this.props.data ||
-      nextProps.width !== this.props.width ||
-      nextProps.height !== this.props.height ||
+    return shouldUpdate(nextProps, this.props) ||
       nextState.width !== this.state.width ||
       nextProps.show3d !== this.props.show3d;
   }
@@ -165,7 +161,7 @@ class DonutChart extends React.Component {
     if (width !== this.state.width) {
       this.setState({width});
     }
-   this.separateLabels();
+    this.separateLabels();
   }
 
   componentDidUpdate() {
@@ -241,6 +237,7 @@ class DonutChart extends React.Component {
       height,
       svgRef,
       show3d = true,
+      showLegend = true,
       onDataClick,
       onLegendItemClick,
     } = this.props;
@@ -339,7 +336,7 @@ class DonutChart extends React.Component {
             />
           }
         </Svg>
-        {data.length > 0 &&
+        {data.length > 0 && showLegend &&
           <Legend
             data={data}
             innerRef={this.legendRef}
@@ -356,6 +353,7 @@ DonutChart.propTypes = {
   height: PropTypes.number.isRequired,
   innerRadius: PropTypes.number,
   show3d: PropTypes.bool,
+  showLegend: PropTypes.bool,
   svgRef: PropTypes.ref,
   width: PropTypes.number.isRequired,
   onDataClick: PropTypes.func,

gsa/src/web/components/chart/line.js

@@ -38,16 +38,15 @@ import {isDefined} from 'gmp/utils/identity';
 
 import date from 'gmp/models/date';
 
-import {
-  MENU_PLACEHOLDER_WIDTH,
-} from 'web/components/dashboard/display/datadisplay';
-
 import Layout from 'web/components/layout/layout';
 
 import PropTypes from 'web/utils/proptypes';
 import Theme from 'web/utils/theme';
 import {setRef} from 'web/utils/render';
 
+import {MENU_PLACEHOLDER_WIDTH} from './utils/constants';
+import {shouldUpdate} from './utils/update';
+
 import Legend, {Item, Label, Line as LegendLine} from './legend';
 import Axis from './axis';
 import Svg from './svg';
@@ -156,29 +155,6 @@ CrossY2.propTypes = crossPropTypes;
 
 class LineChart extends React.Component {
 
-   static propTypes = {
-    data: PropTypes.arrayOf(PropTypes.shape({
-      x: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.date,
-      ]).isRequired,
-      y: PropTypes.number.isRequired,
-      y2: PropTypes.number.isRequired,
-    })),
-    displayLegend: PropTypes.bool,
-    height: PropTypes.number.isRequired,
-    numTicks: PropTypes.number,
-    svgRef: PropTypes.ref,
-    timeline: PropTypes.bool,
-    width: PropTypes.number.isRequired,
-    xAxisLabel: PropTypes.toString,
-    y2AxisLabel: PropTypes.toString,
-    y2Line: lineDataPropType,
-    yAxisLabel: PropTypes.toString,
-    yLine: lineDataPropType,
-    onRangeSelected: PropTypes.func,
-  };
-
   constructor(...args) {
     super(...args);
 
@@ -194,23 +170,20 @@ class LineChart extends React.Component {
 
     this.state = {
       displayInfo: false,
-      ...this.update(),
+      ...this.stateFromWidth(this.getWidth()),
     };
   }
 
   componentDidUpdate() {
-
-    this.setState(this.update());
+    this.update();
   }
 
   componentDidMount() {
-    this.setState(this.update());
+    this.update();
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    return nextProps.data !== this.props.data ||
-      nextProps.width !== this.props.width ||
-      nextProps.height !== this.props.height ||
+    return shouldUpdate(nextProps, this.props) ||
       nextState.width !== this.state.width ||
       nextState.rangeX !== this.state.rangeX ||
       nextState.infoX !== this.state.infoX ||
@@ -228,6 +201,10 @@ class LineChart extends React.Component {
   }
 
   handleMouseMove(event) {
+    if (!this.svg) {
+      return;
+    }
+
     const box = this.svg.getBoundingClientRect();
     const mouseX = event.clientX - box.left -
       margin.left - 1;
@@ -305,29 +282,37 @@ class LineChart extends React.Component {
   }
 
   getWidth() {
-    const {width} = this.props;
+    let {width} = this.props;
     const {current: legend} = this.legendRef;
 
-    if (legend === null) {
-      return width;
+    width = width - MENU_PLACEHOLDER_WIDTH;
+
+    if (legend !== null) {
+      const {width: legendWidth} = legend.getBoundingClientRect();
+      width = width - legendWidth - LEGEND_MARGIN;
+    }
+
+    if (width < MIN_WIDTH) {
+      width = MIN_WIDTH;
     }
 
-    const {width: legendWidth} = legend.getBoundingClientRect();
-    return width - legendWidth - LEGEND_MARGIN - MENU_PLACEHOLDER_WIDTH;
+    return width;
   }
 
   update() {
+    const width = this.getWidth();
+    if (width !== this.state.width) {
+      this.setState(this.stateFromWidth(width));
+    }
+  }
+
+  stateFromWidth(width) {
     const {
       data = [],
       height,
       timeline = false,
     } = this.props;
 
-    let width = this.getWidth();
-    if (width < MIN_WIDTH) {
-      width = MIN_WIDTH;
-    }
-
     const maxWidth = width - margin.left - margin.right;
     const maxHeight = height - margin.top - margin.bottom;
 
@@ -550,7 +535,7 @@ class LineChart extends React.Component {
     } = this.state;
     const {
       data = [],
-      displayLegend = true,
+      showLegend = true,
       svgRef,
       xAxisLabel,
       yAxisLabel,
@@ -664,7 +649,7 @@ class LineChart extends React.Component {
             {this.renderRange()}
           </Group>
         </Svg>
-        {hasLines && displayLegend &&
+        {hasLines && showLegend &&
           <Legend
             innerRef={this.legendRef}
             data={[yLine, y2Line]}
@@ -688,6 +673,30 @@ class LineChart extends React.Component {
   }
 }
 
+LineChart.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.shape({
+    x: PropTypes.oneOfType([
+      PropTypes.number,
+      PropTypes.date,
+    ]).isRequired,
+    y: PropTypes.number.isRequired,
+    y2: PropTypes.number.isRequired,
+  })),
+  height: PropTypes.number.isRequired,
+  numTicks: PropTypes.number,
+  showLegend: PropTypes.bool,
+  svgRef: PropTypes.ref,
+  timeline: PropTypes.bool,
+  width: PropTypes.number.isRequired,
+  xAxisLabel: PropTypes.toString,
+  y2AxisLabel: PropTypes.toString,
+  y2Line: lineDataPropType,
+  yAxisLabel: PropTypes.toString,
+  yLine: lineDataPropType,
+  onRangeSelected: PropTypes.func,
+};
+
+
 export default LineChart;
 
 // vim: set ts=2 sw=2 tw=80: