diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap b/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap index e7b6cfb8ed9b3..f93ba62f6c04c 100644 --- a/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap +++ b/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap @@ -11,7 +11,7 @@ Object { exports[`explorerChartsContainerService call anomalyChangeListener with actual series config 2`] = ` Object { - "layoutCellsPerChart": 6, + "layoutCellsPerChart": 12, "seriesToPlot": Array [ Object { "bucketSpanSeconds": 900, @@ -71,7 +71,7 @@ Object { exports[`explorerChartsContainerService call anomalyChangeListener with actual series config 3`] = ` Object { - "layoutCellsPerChart": 6, + "layoutCellsPerChart": 12, "seriesToPlot": Array [ Object { "bucketSpanSeconds": 900, @@ -603,8 +603,8 @@ Object { "loading": false, "metricFieldName": "responsetime", "metricFunction": "avg", - "plotEarliest": 1486611900000, - "plotLatest": 1486714500000, + "plotEarliest": 1486560600000, + "plotLatest": 1486765800000, "selectedEarliest": 1486656000000, "selectedLatest": 1486670399999, "timeField": "@timestamp", diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_service.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_service.js index 26aa4abc302bb..a5adebebbe9f6 100644 --- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_service.js +++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_service.js @@ -58,7 +58,10 @@ export function explorerChartsContainerServiceFactory( const allSeriesRecords = processRecordsForDisplay(filteredRecords); // Calculate the number of charts per row, depending on the width available, to a max of 4. const chartsContainerWidth = Math.floor($chartContainer.width()); - const chartsPerRow = Math.min(Math.max(Math.floor(chartsContainerWidth / 550), 1), MAX_CHARTS_PER_ROW); + let chartsPerRow = Math.min(Math.max(Math.floor(chartsContainerWidth / 550), 1), MAX_CHARTS_PER_ROW); + if (allSeriesRecords.length === 1) { + chartsPerRow = 1; + } data.layoutCellsPerChart = DEFAULT_LAYOUT_CELLS_PER_CHART / chartsPerRow; @@ -71,8 +74,15 @@ export function explorerChartsContainerServiceFactory( // Calculate the time range of the charts, which is a function of the chart width and max job bucket span. data.tooManyBuckets = false; - const { chartRange, tooManyBuckets } = calculateChartRange(seriesConfigs, earliestMs, latestMs, - Math.floor(chartsContainerWidth / chartsPerRow), recordsToPlot, data.timeFieldName); + const chartWidth = Math.floor(chartsContainerWidth / chartsPerRow); + const { chartRange, tooManyBuckets } = calculateChartRange( + seriesConfigs, + earliestMs, + latestMs, + chartWidth, + recordsToPlot, + data.timeFieldNam + ); data.tooManyBuckets = tooManyBuckets; // initialize the charts with loading indicators diff --git a/x-pack/plugins/ml/public/explorer/explorer_controller.js b/x-pack/plugins/ml/public/explorer/explorer_controller.js index c4815658e730d..a40a7a979cd31 100644 --- a/x-pack/plugins/ml/public/explorer/explorer_controller.js +++ b/x-pack/plugins/ml/public/explorer/explorer_controller.js @@ -305,6 +305,16 @@ module.controller('MlExplorerController', function ( mlExplorerDashboardService.swimlaneDataChange.changed('overall'); mlExplorerDashboardService.swimlaneDataChange.changed('viewBy'); + + if ( + mlCheckboxShowChartsService.state.get('showCharts') && + $scope.anomalyChartRecords.length > 0 + ) { + const timerange = getSelectionTimeRange($scope.cellData); + mlExplorerDashboardService.anomalyDataChange.changed( + $scope.anomalyChartRecords, timerange.earliestMs, timerange.latestMs + ); + } } // Refresh the data when the dashboard filters are updated.