[APM] Make number of x ticks responsive to the plot width (#44870) (#…

…44992)

* [APM] Make number of x ticks responsive to the plot width

* Fix snapshots

x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/StaticPlot.js

@@ -27,8 +27,6 @@ import { isValidCoordinateValue } from '../../../../utils/isValidCoordinateValue
 // see https://github.com/uber/react-vis/issues/1214
 const getNull = d => isValidCoordinateValue(d.y) && !isNaN(d.y);
 
-const X_TICK_TOTAL = 7;
-
 class StaticPlot extends PureComponent {
   getVisSeries(series, plotValues) {
     return series
@@ -141,12 +139,23 @@ class StaticPlot extends PureComponent {
   }
 
   render() {
-    const { series, tickFormatX, tickFormatY, plotValues, noHits } = this.props;
+    const {
+      width,
+      series,
+      tickFormatX,
+      tickFormatY,
+      plotValues,
+      noHits
+    } = this.props;
     const { yTickValues } = plotValues;
 
+    // approximate number of x-axis ticks based on the width of the plot. There should by approx 1 tick per 100px
+    // d3 will determine the exact number of ticks based on the selected range
+    const xTickTotal = Math.floor(width / 100);
+
     return (
       <SharedPlot plotValues={plotValues}>
-        <XAxis tickSize={0} tickTotal={X_TICK_TOTAL} tickFormat={tickFormatX} />
+        <XAxis tickSize={0} tickTotal={xTickTotal} tickFormat={tickFormatX} />
         {noHits ? (
           <StatusText
             marginLeft={30}
@@ -181,5 +190,6 @@ StaticPlot.propTypes = {
   series: PropTypes.array.isRequired,
   plotValues: PropTypes.object.isRequired,
   tickFormatX: PropTypes.func,
-  tickFormatY: PropTypes.func.isRequired
+  tickFormatY: PropTypes.func.isRequired,
+  width: PropTypes.number.isRequired
 };

x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/index.js

@@ -158,6 +158,7 @@ export class InnerCustomPlot extends PureComponent {
       <Fragment>
         <div style={{ position: 'relative', height: plotValues.XY_HEIGHT }}>
           <StaticPlot
+            width={width}
             noHits={noHits}
             plotValues={plotValues}
             series={enabledSeries}

x-pack/legacy/plugins/apm/public/components/shared/charts/CustomPlot/test/CustomPlot.test.js

@@ -293,7 +293,7 @@ describe('when response has no data', () => {
         onHover={onHover}
         onMouseLeave={onMouseLeave}
         onSelectionEnd={onSelectionEnd}
-        width={100}
+        width={800}
         tickFormatX={x => x.getTime()} // Avoid timezone issues in snapshots
       />
     );