Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[6.x] [ML] Fixes clean up of multi-bucket markers on Single Metric chart update (#24080) #24126

Merged
merged 1 commit into from
Oct 17, 2018
Merged

[6.x] [ML] Fixes clean up of multi-bucket markers on Single Metric chart update (#24080) #24126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_single_metric.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,11 +301,11 @@ export class ExplorerChartSingleMetric extends React.Component {
// Remove multi-bucket markers that are no longer needed
multiBucketMarkers.exit().remove();

// Update markers to new positions.
// Append the multi-bucket markers and position on chart.
multiBucketMarkers.enter().append('path')
.attr('d', d3.svg.symbol().size(MULTI_BUCKET_SYMBOL_SIZE).type('cross'))
.attr('transform', d => `translate(${lineChartXScale(d.date)}, ${lineChartYScale(d.value)})`)
.attr('class', d => `metric-value anomaly-marker multi-bucket ${getSeverityWithLow(d.anomalyScore)}`)
.attr('class', d => `anomaly-marker multi-bucket ${getSeverityWithLow(d.anomalyScore)}`)
.on('mouseover', function (d) {
showLineChartTooltip(d, this);
})
Expand Down
13 changes: 7 additions & 6 deletions x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,27 +84,28 @@
stroke: #32a7c2;
}

.metric-value.critical {
.anomaly-marker.critical {
fill: #fe5050;
}

.metric-value.major {
.anomaly-marker.major {
fill: #ff7e00;
}

.metric-value.minor {
.anomaly-marker.minor {
fill: #ffdd00;
}

.metric-value.warning {
.anomaly-marker.warning {
fill: #8bc8fb;
}

.metric-value.low {
.anomaly-marker.low {
fill: #d2e9f7;
}

.metric-value:hover {
.metric-value:hover,
.anomaly-marker:hover {
stroke-width: 6px;
stroke-opacity: 0.65;
}
Expand Down
18 changes: 6 additions & 12 deletions x-pack/plugins/ml/public/timeseriesexplorer/styles/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,34 +163,28 @@
stroke: #aaaaaa;
}

.metric-value.critical {
.anomaly-marker.critical {
fill: #fe5050;
}

.metric-value.major {
.anomaly-marker.major {
fill: #ff7e00;
}

.metric-value.minor {
.anomaly-marker.minor {
fill: #ffdd00;
}

.metric-value.warning {
.anomaly-marker.warning {
fill: #8bc8fb;
}

.metric-value.low {
.anomaly-marker.low {
fill: #d2e9f7;
}

.metric-value:hover,
.anomaly-marker.highlighted {
stroke-width: 6px;
stroke-opacity: 0.65;
stroke: #32a7c2;
}

.metric-value:hover,
.anomaly-marker:hover,
.anomaly-marker.highlighted {
stroke-width: 6px;
stroke-opacity: 0.65;
Expand Down
25 changes: 14 additions & 11 deletions x-pack/plugins/ml/public/timeseriesexplorer/timeseries_chart_directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -489,23 +489,26 @@ module.directive('mlTimeseriesChart', function () {
return markerClass;
});


// Render cross symbols for any multi-bucket anomalies.
const multiBucketMarkers = d3.select('.focus-chart-markers').selectAll('.multi-bucket')
.data(data.filter(d => (d.anomalyScore !== null && showMultiBucketAnomalyMarker(d) === true)));

// Remove multi-bucket markers that are no longer needed
// Remove multi-bucket markers that are no longer needed.
multiBucketMarkers.exit().remove();

// Update markers to new positions.
// Add any new markers that are needed i.e. if number of multi-bucket points has increased.
multiBucketMarkers.enter().append('path')
.attr('d', d3.svg.symbol().size(MULTI_BUCKET_SYMBOL_SIZE).type('cross'))
.attr('transform', d => `translate(${focusXScale(d.date)}, ${focusYScale(d.value)})`)
.attr('class', d => `metric-value anomaly-marker multi-bucket ${getSeverityWithLow(d.anomalyScore)}`)
.on('mouseover', function (d) {
showFocusChartTooltip(d, this);
})
.on('mouseout', () => mlChartTooltipService.hide());

// Update all markers to new positions.
multiBucketMarkers.attr('transform', d => `translate(${focusXScale(d.date)}, ${focusYScale(d.value)})`)
.attr('class', d => `anomaly-marker multi-bucket ${getSeverityWithLow(d.anomalyScore)}`);


// Add rectangular markers for any scheduled events.
const scheduledEventMarkers = d3.select('.focus-chart-markers').selectAll('.scheduled-event-marker')
Expand Down Expand Up @@ -1056,21 +1059,21 @@ module.directive('mlTimeseriesChart', function () {
if (showMultiBucketAnomalyMarker(markerToSelect) === true) {
selectedMarker.enter().append('path')
.attr('d', d3.svg.symbol().size(MULTI_BUCKET_SYMBOL_SIZE).type('cross'))
.attr('transform', d => `translate(${focusXScale(d.date)}, ${focusYScale(d.value)})`);
.attr('transform', d => `translate(${focusXScale(d.date)}, ${focusYScale(d.value)})`)
.attr('class', d => `anomaly-marker multi-bucket ${getSeverityWithLow(d.anomalyScore)} highlighted`);
} else {
selectedMarker.enter().append('circle')
.attr('r', LINE_CHART_ANOMALY_RADIUS)
.attr('cx', d => focusXScale(d.date))
.attr('cy', d => focusYScale(d.value));
.attr('cy', d => focusYScale(d.value))
.attr('class', d => `anomaly-marker metric-value ${getSeverityWithLow(d.anomalyScore)} highlighted`);
}
selectedMarker.attr('class',
d => `metric-value anomaly-marker ${getSeverityWithLow(d.anomalyScore)} highlighted`);

// Display the chart tooltip for this marker.
// Note the values of the record and marker may differ depending on the levels of aggregation.
const circle = $('.focus-chart-markers .anomaly-marker.highlighted');
if (circle.length) {
showFocusChartTooltip(markerToSelect, circle[0]);
const anomalyMarker = $('.focus-chart-markers .anomaly-marker.highlighted');
if (anomalyMarker.length) {
showFocusChartTooltip(markerToSelect, anomalyMarker[0]);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/ml/public/util/chart_utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import { timefilter } from 'ui/timefilter';
import { CHART_TYPE } from '../explorer/explorer_constants';

export const LINE_CHART_ANOMALY_RADIUS = 7;
export const MULTI_BUCKET_SYMBOL_SIZE = 144; // In square pixels for use with d3 symbol.size
export const MULTI_BUCKET_SYMBOL_SIZE = 100; // In square pixels for use with d3 symbol.size
export const SCHEDULED_EVENT_SYMBOL_HEIGHT = 5;

const MAX_LABEL_WIDTH = 100;
Expand Down