[ML] fix charts container width init (#72389)
This commit is contained in:
parent
3442451aac
commit
4acdf278dc
5 changed files with 14 additions and 26 deletions
|
@ -200,6 +200,7 @@ const loadExplorerDataProvider = (anomalyTimelineService: AnomalyTimelineService
|
|||
if (selectedCells !== undefined && Array.isArray(anomalyChartRecords)) {
|
||||
memoizedAnomalyDataChange(
|
||||
lastRefresh,
|
||||
swimlaneContainerWidth,
|
||||
anomalyChartRecords,
|
||||
timerange.earliestMs,
|
||||
timerange.latestMs,
|
||||
|
@ -208,6 +209,7 @@ const loadExplorerDataProvider = (anomalyTimelineService: AnomalyTimelineService
|
|||
} else {
|
||||
memoizedAnomalyDataChange(
|
||||
lastRefresh,
|
||||
swimlaneContainerWidth,
|
||||
[],
|
||||
timerange.earliestMs,
|
||||
timerange.latestMs,
|
||||
|
|
|
@ -14,6 +14,7 @@ export declare interface ExplorerChartsData {
|
|||
export declare const getDefaultChartsData: () => ExplorerChartsData;
|
||||
|
||||
export declare const anomalyDataChange: (
|
||||
chartsContainerWidth: number,
|
||||
anomalyRecords: any[],
|
||||
earliestMs: number,
|
||||
latestMs: number,
|
||||
|
|
|
@ -24,7 +24,6 @@ import {
|
|||
} from '../../../../common/util/job_utils';
|
||||
import { mlResultsService } from '../../services/results_service';
|
||||
import { mlJobService } from '../../services/job_service';
|
||||
import { getChartContainerWidth } from '../legacy_utils';
|
||||
import { explorerService } from '../explorer_dashboard_service';
|
||||
|
||||
import { CHART_TYPE } from '../explorer_constants';
|
||||
|
@ -48,7 +47,13 @@ const MAX_CHARTS_PER_ROW = 4;
|
|||
|
||||
// callback(getDefaultChartsData());
|
||||
|
||||
export const anomalyDataChange = function (anomalyRecords, earliestMs, latestMs, severity = 0) {
|
||||
export const anomalyDataChange = function (
|
||||
chartsContainerWidth,
|
||||
anomalyRecords,
|
||||
earliestMs,
|
||||
latestMs,
|
||||
severity = 0
|
||||
) {
|
||||
const data = getDefaultChartsData();
|
||||
|
||||
const filteredRecords = anomalyRecords.filter((record) => {
|
||||
|
@ -56,7 +61,6 @@ export const anomalyDataChange = function (anomalyRecords, earliestMs, latestMs,
|
|||
});
|
||||
const allSeriesRecords = processRecordsForDisplay(filteredRecords);
|
||||
// Calculate the number of charts per row, depending on the width available, to a max of 4.
|
||||
const chartsContainerWidth = getChartContainerWidth();
|
||||
let chartsPerRow = Math.min(
|
||||
Math.max(Math.floor(chartsContainerWidth / 550), 1),
|
||||
MAX_CHARTS_PER_ROW
|
||||
|
|
|
@ -88,12 +88,6 @@ jest.mock('../../util/string_utils', () => ({
|
|||
},
|
||||
}));
|
||||
|
||||
jest.mock('../legacy_utils', () => ({
|
||||
getChartContainerWidth() {
|
||||
return 1140;
|
||||
},
|
||||
}));
|
||||
|
||||
jest.mock('../explorer_dashboard_service', () => ({
|
||||
explorerService: {
|
||||
setCharts: jest.fn(),
|
||||
|
@ -109,7 +103,7 @@ describe('explorerChartsContainerService', () => {
|
|||
});
|
||||
|
||||
test('call anomalyChangeListener with empty series config', (done) => {
|
||||
anomalyDataChange([], 1486656000000, 1486670399999);
|
||||
anomalyDataChange(1140, [], 1486656000000, 1486670399999);
|
||||
|
||||
setImmediate(() => {
|
||||
expect(explorerService.setCharts.mock.calls.length).toBe(1);
|
||||
|
@ -122,7 +116,7 @@ describe('explorerChartsContainerService', () => {
|
|||
});
|
||||
|
||||
test('call anomalyChangeListener with actual series config', (done) => {
|
||||
anomalyDataChange(mockAnomalyChartRecords, 1486656000000, 1486670399999);
|
||||
anomalyDataChange(1140, mockAnomalyChartRecords, 1486656000000, 1486670399999);
|
||||
|
||||
setImmediate(() => {
|
||||
expect(explorerService.setCharts.mock.calls.length).toBe(2);
|
||||
|
@ -138,7 +132,7 @@ describe('explorerChartsContainerService', () => {
|
|||
return d;
|
||||
});
|
||||
|
||||
anomalyDataChange(mockAnomalyChartRecordsClone, 1486656000000, 1486670399999);
|
||||
anomalyDataChange(1140, mockAnomalyChartRecordsClone, 1486656000000, 1486670399999);
|
||||
|
||||
setImmediate(() => {
|
||||
expect(explorerService.setCharts.mock.calls.length).toBe(2);
|
||||
|
@ -161,7 +155,7 @@ describe('explorerChartsContainerService', () => {
|
|||
mockAnomalyChartRecordsClone[1].partition_field_value = 'AAL.';
|
||||
|
||||
expect(() => {
|
||||
anomalyDataChange(mockAnomalyChartRecordsClone, 1486656000000, 1486670399999);
|
||||
anomalyDataChange(1140, mockAnomalyChartRecordsClone, 1486656000000, 1486670399999);
|
||||
}).not.toThrow();
|
||||
|
||||
setImmediate(() => {
|
||||
|
|
|
@ -1,13 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
// This file includes utils which should eventuelly become obsolete once Anomaly Explorer
|
||||
// is fully migrated to React. Their purpose is to retain functionality while we migrate step by step.
|
||||
|
||||
export function getChartContainerWidth() {
|
||||
const chartContainer = document.querySelector('.explorer-charts');
|
||||
return Math.floor((chartContainer && chartContainer.clientWidth) || 0);
|
||||
}
|
Loading…
Reference in a new issue