diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap b/x-pack/plugins/ml/public/application/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap index 1c0124b90ae77d..5bea4d94c6d669 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap @@ -594,8 +594,8 @@ Object { "loading": false, "metricFieldName": "responsetime", "metricFunction": "avg", - "plotEarliest": 1486560600000, - "plotLatest": 1486765800000, + "plotEarliest": 1486542600000, + "plotLatest": 1486783800000, "selectedEarliest": 1486656000000, "selectedLatest": 1486670399999, "timeField": "@timestamp", diff --git a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js index 2971f5d4f31c44..041db1fbc74c34 100644 --- a/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js +++ b/x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js @@ -28,6 +28,7 @@ import { mlJobService } from '../../services/job_service'; import { explorerService } from '../explorer_dashboard_service'; import { CHART_TYPE } from '../explorer_constants'; +import { SWIM_LANE_LABEL_WIDTH } from '../swimlane_container'; export function getDefaultChartsData() { return { @@ -57,15 +58,14 @@ export const anomalyDataChange = function ( ) { const data = getDefaultChartsData(); + const containerWith = chartsContainerWidth + SWIM_LANE_LABEL_WIDTH; + const filteredRecords = anomalyRecords.filter((record) => { return Number(record.record_score) >= severity; }); const allSeriesRecords = processRecordsForDisplay(filteredRecords); // Calculate the number of charts per row, depending on the width available, to a max of 4. - let chartsPerRow = Math.min( - Math.max(Math.floor(chartsContainerWidth / 550), 1), - MAX_CHARTS_PER_ROW - ); + let chartsPerRow = Math.min(Math.max(Math.floor(containerWith / 550), 1), MAX_CHARTS_PER_ROW); if (allSeriesRecords.length === 1) { chartsPerRow = 1; } @@ -81,7 +81,7 @@ export const anomalyDataChange = function ( // Calculate the time range of the charts, which is a function of the chart width and max job bucket span. data.tooManyBuckets = false; - const chartWidth = Math.floor(chartsContainerWidth / chartsPerRow); + const chartWidth = Math.floor(containerWith / chartsPerRow); const { chartRange, tooManyBuckets } = calculateChartRange( seriesConfigs, selectedEarliestMs, diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx index 101d4857a89b1e..145f6cc0fcf7ae 100644 --- a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx +++ b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx @@ -46,11 +46,11 @@ import { useUiSettings } from '../contexts/kibana'; /** * Ignore insignificant resize, e.g. browser scrollbar appearance. */ -const RESIZE_IGNORED_DIFF_PX = 20; const RESIZE_THROTTLE_TIME_MS = 500; const CELL_HEIGHT = 30; const LEGEND_HEIGHT = 34; const Y_AXIS_HEIGHT = 24; +export const SWIM_LANE_LABEL_WIDTH = 200; export function isViewBySwimLaneData(arg: any): arg is ViewBySwimLaneData { return arg && arg.hasOwnProperty('cardinality'); @@ -167,12 +167,9 @@ export const SwimlaneContainer: FC = ({ const resizeHandler = useCallback( throttle((e: { width: number; height: number }) => { - const labelWidth = 200; - const resultNewWidth = e.width - labelWidth; - if (Math.abs(resultNewWidth - chartWidth) > RESIZE_IGNORED_DIFF_PX) { - setChartWidth(resultNewWidth); - onResize(resultNewWidth); - } + const resultNewWidth = e.width - SWIM_LANE_LABEL_WIDTH; + setChartWidth(resultNewWidth); + onResize(resultNewWidth); }, RESIZE_THROTTLE_TIME_MS), [chartWidth] );