diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/__mocks__/mock_series_config_rare.json b/x-pack/plugins/ml/public/explorer/explorer_charts/__mocks__/mock_series_config_rare.json
new file mode 100644
index 0000000000000..b82583a730323
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/__mocks__/mock_series_config_rare.json
@@ -0,0 +1,49 @@
+{
+ "jobId": "ffb-rare-url-0921",
+ "detectorIndex": 0,
+ "metricFunction": "count",
+ "timeField": "@timestamp",
+ "interval": "15m",
+ "datafeedConfig": {
+ "datafeed_id": "datafeed-ffb-rare-url-0921",
+ "job_id": "ffb-rare-url-0921",
+ "query_delay": "115433ms",
+ "indices": [
+ "filebeat-6.0.0-2017-nginx-elasticco-anon"
+ ],
+ "types": [],
+ "query": {
+ "match_all": {
+ "boost": 1
+ }
+ },
+ "scroll_size": 1000,
+ "chunking_config": {
+ "mode": "auto"
+ },
+ "state": "stopped"
+ },
+ "functionDescription": "rare",
+ "bucketSpanSeconds": 900,
+ "detectorLabel": "rare by \"nginx.access.url\"",
+ "entityFields": [
+ {
+ "fieldName": "nginx.access.url",
+ "fieldValue": "/?node=4.1.1,5,7",
+ "fieldType": "by"
+ }
+ ],
+ "infoTooltip": {
+ "jobId": "ffb-rare-url-0921",
+ "aggregationInterval": "15m",
+ "chartFunction": "count",
+ "entityFields": [
+ {
+ "fieldName": "nginx.access.url",
+ "fieldValue": "/?node=4.1.1,5,7"
+ }
+ ]
+ },
+ "loading": true,
+ "chartData": null
+}
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
index c6dd2cc357aca..b62c219edbfc7 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
@@ -65,7 +65,7 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
);
}
ExplorerChartLabel.propTypes = {
- detectorLabel: PropTypes.string.isRequired,
+ detectorLabel: PropTypes.object.isRequired,
entityFields: PropTypes.arrayOf(ExplorerChartLabelBadge.propTypes.entity),
infoTooltip: PropTypes.object.isRequired,
wrapLabel: PropTypes.bool
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js
index 1e4a335abf583..3c54899be60cd 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js
@@ -57,13 +57,25 @@ function ExplorerChartContainer({
} = series;
const chartType = getChartType(series);
+ let DetectorLabel = {detectorLabel};
+
+ if (chartType === CHART_TYPE.EVENT_DISTRIBUTION) {
+ const byField = series.entityFields.find(d => d.fieldType === 'by');
+ if (typeof byField !== 'undefined') {
+ DetectorLabel = (
+
+ {detectorLabel}
y-axis event distribution split by "{byField.fieldName}"
+
+ );
+ }
+ }
return (
{
const mockedGetBBox = { x: 0, y: -11.5, width: 12.1875, height: 14.5 };
const originalGetBBox = SVGElement.prototype.getBBox;
+ const rareChartUniqueString = 'y-axis event distribution split by';
beforeEach(() => SVGElement.prototype.getBBox = () => mockedGetBBox);
afterEach(() => (SVGElement.prototype.getBBox = originalGetBBox));
@@ -111,5 +113,29 @@ describe('ExplorerChartsContainer', () => {
// We test child components with snapshots separately
// so we just do some high level sanity check here.
expect(wrapper.find('.ml-explorer-chart-container').children()).toHaveLength(2);
+
+ // Check if the additional y-axis information for rare charts is not part of the chart
+ expect(wrapper.html().search(rareChartUniqueString)).toBe(-1);
+ });
+
+ test('Initialization with rare detector', () => {
+ const wrapper = mount();
+
+ // We test child components with snapshots separately
+ // so we just do some high level sanity check here.
+ expect(wrapper.find('.ml-explorer-chart-container').children()).toHaveLength(2);
+
+ // Check if the additional y-axis information for rare charts is part of the chart
+ expect(wrapper.html().search(rareChartUniqueString)).toBeGreaterThan(0);
});
});
diff --git a/x-pack/plugins/ml/public/util/chart_utils.js b/x-pack/plugins/ml/public/util/chart_utils.js
index a5965e5356501..0a061f32fbf6f 100644
--- a/x-pack/plugins/ml/public/util/chart_utils.js
+++ b/x-pack/plugins/ml/public/util/chart_utils.js
@@ -324,7 +324,7 @@ export function removeLabelOverlap(axis, startTimeMs, tickInterval, width) {
const fn = function (ts) {
const filteredTicks = axis.selectAll('.tick').filter(d => d === ts);
- if (filteredTicks[0].length === 0) {
+ if (filteredTicks.length === 0 || filteredTicks[0].length === 0) {
return false;
}