[ML] Fixes unnecessary too many buckets warning on anomaly chart embe…

…ddable
elastic · Jul 9, 2021 · a1e4cff · a1e4cff
1 parent 8dd0852
commit a1e4cff
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 24 deletions.
diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_distribution.js
@@ -270,12 +270,6 @@ export class ExplorerChartDistribution extends React.Component {
       const tickValuesStart = Math.max(config.selectedEarliest, config.plotEarliest);
       // +1 ms to account for the ms that was subtracted for query aggregations.
       const interval = config.selectedLatest - config.selectedEarliest + 1;
-      const tickValues = getTickValues(
-        tickValuesStart,
-        interval,
-        config.plotEarliest,
-        config.plotLatest
-      );
 
       const xAxis = d3.svg
         .axis()
@@ -286,10 +280,18 @@ export class ExplorerChartDistribution extends React.Component {
         .tickPadding(10)
         .tickFormat((d) => moment(d).format(xAxisTickFormat));
 
-      // With tooManyBuckets the chart would end up with no x-axis labels
-      // because the ticks are based on the span of the emphasis section,
-      // and the highlighted area spans the whole chart.
-      if (tooManyBuckets === false) {
+      // With tooManyBuckets, or when the chart is used as an embeddable,
+      // the chart would end up with no x-axis labels because the ticks are based on the span of the
+      // emphasis section, and the selected area spans the whole chart.
+      const useAutoTicks =
+        tooManyBuckets === true || interval >= config.plotLatest - config.plotEarliest;
+      if (useAutoTicks === false) {
+        const tickValues = getTickValues(
+          tickValuesStart,
+          interval,
+          config.plotEarliest,
+          config.plotLatest
+        );
         xAxis.tickValues(tickValues);
       } else {
         xAxis.ticks(numTicksForDateFormat(vizWidth, xAxisTickFormat));
@@ -327,7 +329,7 @@ export class ExplorerChartDistribution extends React.Component {
           });
       }
 
-      if (tooManyBuckets === false) {
+      if (useAutoTicks === false) {
         removeLabelOverlap(gAxis, tickValuesStart, interval, vizWidth);
       }
     }

diff --git a/...ck/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js b/...ck/plugins/ml/public/application/explorer/explorer_charts/explorer_chart_single_metric.js
@@ -196,12 +196,6 @@ export class ExplorerChartSingleMetric extends React.Component {
       const tickValuesStart = Math.max(config.selectedEarliest, config.plotEarliest);
       // +1 ms to account for the ms that was subtracted for query aggregations.
       const interval = config.selectedLatest - config.selectedEarliest + 1;
-      const tickValues = getTickValues(
-        tickValuesStart,
-        interval,
-        config.plotEarliest,
-        config.plotLatest
-      );
 
       const xAxis = d3.svg
         .axis()
@@ -212,10 +206,18 @@ export class ExplorerChartSingleMetric extends React.Component {
         .tickPadding(10)
         .tickFormat((d) => moment(d).format(xAxisTickFormat));
 
-      // With tooManyBuckets the chart would end up with no x-axis labels
-      // because the ticks are based on the span of the emphasis section,
-      // and the highlighted area spans the whole chart.
-      if (tooManyBuckets === false) {
+      // With tooManyBuckets, or when the chart is used as an embeddable,
+      // the chart would end up with no x-axis labels because the ticks are based on the span of the
+      // emphasis section, and the selected area spans the whole chart.
+      const useAutoTicks =
+        tooManyBuckets === true || interval >= config.plotLatest - config.plotEarliest;
+      if (useAutoTicks === false) {
+        const tickValues = getTickValues(
+          tickValuesStart,
+          interval,
+          config.plotEarliest,
+          config.plotLatest
+        );
         xAxis.tickValues(tickValues);
       } else {
         xAxis.ticks(numTicksForDateFormat(vizWidth, xAxisTickFormat));
@@ -243,7 +245,7 @@ export class ExplorerChartSingleMetric extends React.Component {
 
       axes.append('g').attr('class', 'y axis').call(yAxis);
 
-      if (tooManyBuckets === false) {
+      if (useAutoTicks === false) {
         removeLabelOverlap(gAxis, tickValuesStart, interval, vizWidth);
       }
     }

diff --git a/x-pack/plugins/ml/public/application/services/anomaly_explorer_charts_service.ts b/x-pack/plugins/ml/public/application/services/anomaly_explorer_charts_service.ts
@@ -225,13 +225,20 @@ export class AnomalyExplorerChartsService {
       chartRange.min = chartRange.min + maxBucketSpanMs;
     }
 
+    // When used as an embeddable, selectedEarliestMs is the start date on the time picker,
+    // which may be earlier than the time of the first point plotted in the chart (as we plot
+    // the first full bucket with a start date no earlier than the start).
+    const selectedEarliestBucketCeil = boundsMin
+      ? Math.ceil(Math.max(selectedEarliestMs, boundsMin) / maxBucketSpanMs) * maxBucketSpanMs
+      : Math.ceil(selectedEarliestMs / maxBucketSpanMs) * maxBucketSpanMs;
+
     const selectedLatestBucketStart = boundsMax
       ? Math.floor(Math.min(selectedLatestMs, boundsMax) / maxBucketSpanMs) * maxBucketSpanMs
       : Math.floor(selectedLatestMs / maxBucketSpanMs) * maxBucketSpanMs;
 
     if (
-      (chartRange.min > selectedEarliestMs || chartRange.max < selectedLatestBucketStart) &&
-      chartRange.max - chartRange.min < selectedLatestBucketStart - selectedEarliestMs
+      (chartRange.min > selectedEarliestBucketCeil || chartRange.max < selectedLatestBucketStart) &&
+      chartRange.max - chartRange.min < selectedLatestBucketStart - selectedEarliestBucketCeil
     ) {
       tooManyBuckets = true;
     }