[ML] Fix charts grid on the Anomaly Explorer page (#86904)
* [ML] fix AR charts grid items width * [ML] update test snapshot
This commit is contained in:
parent
6fc041c1d4
commit
47ce575cc0
|
@ -596,8 +596,8 @@ Object {
|
|||
"loading": false,
|
||||
"metricFieldName": "responsetime",
|
||||
"metricFunction": "avg",
|
||||
"plotEarliest": 1486560600000,
|
||||
"plotLatest": 1486765800000,
|
||||
"plotEarliest": 1486542600000,
|
||||
"plotLatest": 1486783800000,
|
||||
"selectedEarliest": 1486656000000,
|
||||
"selectedLatest": 1486670399999,
|
||||
"timeField": "@timestamp",
|
||||
|
|
|
@ -29,6 +29,7 @@ import { explorerService } from '../explorer_dashboard_service';
|
|||
|
||||
import { CHART_TYPE } from '../explorer_constants';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
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, errorMessages] = 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,
|
||||
|
|
|
@ -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<SwimlaneProps> = ({
|
|||
|
||||
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]
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue