[ML] Use arrow functions where applicable.

elastic · Oct 15, 2018 · c60385f · c60385f
1 parent 5271787
commit c60385f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_distribution.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_distribution.js
@@ -182,6 +182,7 @@ export class ExplorerChartDistribution extends React.Component {
             return d;
           }
         })
+        // Don't use an arrow function since we need access to `this`.
         .each(function () {
           maxYAxisLabelWidth = Math.max(this.getBBox().width + yAxis.tickPadding(), maxYAxisLabelWidth);
         })
@@ -342,16 +343,17 @@ export class ExplorerChartDistribution extends React.Component {
       // Create any new dots that are needed i.e. if number of chart points has increased.
       dots.enter().append('circle')
         .attr('r', LINE_CHART_ANOMALY_RADIUS)
+        // Don't use an arrow function since we need access to `this`.
         .on('mouseover', function (d) {
           showLineChartTooltip(d, this);
         })
         .on('mouseout', () => mlChartTooltipService.hide());
 
       // Update all dots to new positions.
       const threshold = mlSelectSeverityService.state.get('threshold');
-      dots.attr('cx', function (d) { return lineChartXScale(d.date); })
-        .attr('cy', function (d) { return lineChartYScale(d[CHART_Y_ATTRIBUTE]); })
-        .attr('class', function (d) {
+      dots.attr('cx', d => lineChartXScale(d.date))
+        .attr('cy', d => lineChartYScale(d[CHART_Y_ATTRIBUTE]))
+        .attr('class', (d) => {
           let markerClass = 'metric-value';
           if (_.has(d, 'anomalyScore') && Number(d.anomalyScore) >= threshold.val) {
             markerClass += ' anomaly-marker ';

diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_single_metric.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_single_metric.js
@@ -138,6 +138,7 @@ export class ExplorerChartSingleMetric extends React.Component {
             return lineChartYScale.tickFormat()(d);
           }
         })
+        // Don't use an arrow function since we need access to `this`.
         .each(function () {
           maxYAxisLabelWidth = Math.max(this.getBBox().width + yAxis.tickPadding(), maxYAxisLabelWidth);
         })
@@ -277,16 +278,17 @@ export class ExplorerChartSingleMetric extends React.Component {
       // Create any new dots that are needed i.e. if number of chart points has increased.
       dots.enter().append('circle')
         .attr('r', LINE_CHART_ANOMALY_RADIUS)
+        // Don't use an arrow function since we need access to `this`.
         .on('mouseover', function (d) {
           showLineChartTooltip(d, this);
         })
         .on('mouseout', () => mlChartTooltipService.hide());
 
       // Update all dots to new positions.
       const threshold = mlSelectSeverityService.state.get('threshold');
-      dots.attr('cx', function (d) { return lineChartXScale(d.date); })
-        .attr('cy', function (d) { return lineChartYScale(d.value); })
-        .attr('class', function (d) {
+      dots.attr('cx', d => lineChartXScale(d.date))
+        .attr('cy', d => lineChartYScale(d.value))
+        .attr('class', (d) => {
           let markerClass = 'metric-value';
           if (_.has(d, 'anomalyScore') && Number(d.anomalyScore) >= threshold.val) {
             markerClass += ` anomaly-marker ${getSeverityWithLow(d.anomalyScore)}`;
@@ -306,6 +308,7 @@ export class ExplorerChartSingleMetric extends React.Component {
         .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)}`)
+        // Don't use an arrow function since we need access to `this`.
         .on('mouseover', function (d) {
           showLineChartTooltip(d, this);
         })