Skip to content

Commit

Permalink
[ML] Fix charts grid on the Anomaly Explorer page (#86904)
Browse files Browse the repository at this point in the history
* [ML] fix AR charts grid items width

* [ML] update test snapshot
  • Loading branch information
darnautov authored Dec 24, 2020
1 parent 6fc041c commit 47ce575
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 14 deletions.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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]
);
Expand Down

0 comments on commit 47ce575

Please sign in to comment.