[ML] Migrate Explorer Charts to React.

x-pack/plugins/ml/public/components/chart_tooltip/__tests__/chart_tooltip.js

@@ -4,19 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import ngMock from 'ng_mock';
 import expect from 'expect.js';
 
-describe('ML - mlChartTooltipService', () => {
- let mlChartTooltipService;
-
- beforeEach(ngMock.module('kibana'));
- beforeEach(() => {
- ngMock.inject(function ($injector) {
- mlChartTooltipService = $injector.get('mlChartTooltipService');
- });
- });
+import { mlChartTooltipService } from '../chart_tooltip_service';
 
+describe('ML - mlChartTooltipService', () => {
  it('service API duck typing', () => {
  expect(mlChartTooltipService).to.be.an('object');
  expect(mlChartTooltipService.show).to.be.a('function');

x-pack/plugins/ml/public/components/chart_tooltip/chart_tooltip.js

@@ -5,14 +5,14 @@
  */
 
 
-
-import $ from 'jquery';
 import template from './chart_tooltip.html';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
 
-module.directive('mlChartTooltip', function (mlChartTooltipService) {
+import { mlChartTooltipService } from './chart_tooltip_service';
+
+module.directive('mlChartTooltip', function () {
  return {
  restrict: 'E',
  replace: true,
@@ -21,67 +21,4 @@ module.directive('mlChartTooltip', function (mlChartTooltipService) {
  mlChartTooltipService.element = element;
  }
  };
-})
- .service('mlChartTooltipService', function ($timeout) {
- this.element = null;
- this.fadeTimeout = null;
- const doc = document.documentElement;
- const FADE_TIMEOUT_MS = 200;
-
- this.show = function (contents, target, offset = { x: 0, y: 0 }) {
- if (this.element !== null) {
-
- // if a previous fade out was happening, stop it
- if (this.fadeTimeout !== null) {
- $timeout.cancel(this.fadeTimeout);
- }
-
- // populate the tooltip contents
- this.element.html(contents);
-
- // side bar width
- const navOffset = $('.global-nav').width();
- const contentWidth = $('body').width() - navOffset - 10;
- const tooltipWidth = this.element.width();
- const scrollTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
-
- const pos = target.getBoundingClientRect();
- const x = (pos.left + (offset.x) + 4) - navOffset;
- const y = pos.top + (offset.y) + scrollTop;
-
- if (x + tooltipWidth > contentWidth) {
- // the tooltip is hanging off the side of the page,
- // so move it to the other side of the target
- this.element.css({
- 'left': x - (tooltipWidth + offset.x + 22),
- 'top': (y - 28)
- });
- } else {
- this.element.css({
- 'left': x,
- 'top': (y - 28)
- });
- }
-
- this.element.css({
- 'opacity': '0.9',
- 'display': 'block'
- });
- }
- };
-
- this.hide = function () {
- if (this.element !== null) {
- this.element.css({
- 'opacity': '0',
- });
-
- // after the fade out transition has finished, set the display to
- // none so it doesn't block any mouse events underneath it.
- this.fadeTimeout = $timeout(() => {
- this.element.css('display', 'none');
- this.fadeTimeout = null;
- }, FADE_TIMEOUT_MS);
- }
- };
- });
+});

x-pack/plugins/ml/public/components/chart_tooltip/chart_tooltip_service.js

@@ -0,0 +1,77 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+
+import $ from 'jquery';
+
+const doc = document.documentElement;
+const FADE_TIMEOUT_MS = 200;
+
+export const mlChartTooltipService = {
+ element: null,
+ fadeTimeout: null,
+};
+
+mlChartTooltipService.show = function (contents, target, offset = { x: 0, y: 0 }) {
+ if (this.element === null) {
+ return;
+ }
+
+ // if a previous fade out was happening, stop it
+ if (this.fadeTimeout !== null) {
+ clearTimeout(this.fadeTimeout);
+ }
+
+ // populate the tooltip contents
+ this.element.html(contents);
+
+ // side bar width
+ const navOffset = $('.global-nav').width();
+ const contentWidth = $('body').width() - navOffset - 10;
+ const tooltipWidth = this.element.width();
+ const scrollTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
+
+ const pos = target.getBoundingClientRect();
+ const x = (pos.left + (offset.x) + 4) - navOffset;
+ const y = pos.top + (offset.y) + scrollTop;
+
+ if (x + tooltipWidth > contentWidth) {
+ // the tooltip is hanging off the side of the page,
+ // so move it to the other side of the target
+ this.element.css({
+ 'left': x - (tooltipWidth + offset.x + 22),
+ 'top': (y - 28)
+ });
+ } else {
+ this.element.css({
+ 'left': x,
+ 'top': (y - 28)
+ });
+ }
+
+ this.element.css({
+ 'opacity': '0.9',
+ 'display': 'block'
+ });
+};
+
+mlChartTooltipService.hide = function () {
+ if (this.element === null) {
+ return;
+ }
+
+ this.element.css({
+ 'opacity': '0',
+ });
+
+ // after the fade out transition has finished, set the display to
+ // none so it doesn't block any mouse events underneath it.
+ this.fadeTimeout = setTimeout(() => {
+ this.element.css('display', 'none');
+ this.fadeTimeout = null;
+ }, FADE_TIMEOUT_MS);
+};

x-pack/plugins/ml/public/components/field_data_card/document_count_chart_directive.js

@@ -19,15 +19,13 @@ import { parseInterval } from 'ui/utils/parse_interval';
 import { numTicksForDateFormat } from 'plugins/ml/util/chart_utils';
 import { calculateTextWidth } from 'plugins/ml/util/string_utils';
 import { IntervalHelperProvider } from 'plugins/ml/util/ml_time_buckets';
+import { mlChartTooltipService } from '../../components/chart_tooltip/chart_tooltip_service';
 
 import { uiModules } from 'ui/modules';
 import { timefilter } from 'ui/timefilter';
 const module = uiModules.get('apps/ml');
 
-module.directive('mlDocumentCountChart', function (
- Private,
- mlChartTooltipService) {
-
+module.directive('mlDocumentCountChart', function (Private) {
  function link(scope, element, attrs) {
  const svgWidth = attrs.width ? +attrs.width : 400;
  const svgHeight = scope.height = attrs.height ? +attrs.height : 400;

x-pack/plugins/ml/public/components/field_data_card/metric_distribution_chart_directive.js

@@ -16,11 +16,12 @@ import d3 from 'd3';
 
 import { numTicks } from 'plugins/ml/util/chart_utils';
 import { ordinalSuffix } from 'ui/utils/ordinal_suffix';
+import { mlChartTooltipService } from '../../components/chart_tooltip/chart_tooltip_service';
 
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
 
-module.directive('mlMetricDistributionChart', function (mlChartTooltipService) {
+module.directive('mlMetricDistributionChart', function () {
 
  function link(scope, element, attrs) {
  const svgWidth = attrs.width ? +attrs.width : 400;

x-pack/plugins/ml/public/components/loading_indicator/loading_indicator.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+
+
+import './styles/main.less';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export function LoadingIndicator({ height }) {
+ height = height ? +height : 100;
+ return (
+ <div className="ml-loading-indicator" style={{ height: `${height}px` }}>
+ <div className="loading-spinner"><i className="fa fa-spinner fa-spin" /></div>
+ </div>
+ );
+}
+LoadingIndicator.propTypes = {
+ height: PropTypes.number
+};

x-pack/plugins/ml/public/components/loading_indicator/styles/main.less

@@ -1,3 +1,4 @@
+/* angular */
 ml-loading-indicator {
  .loading-indicator {
  text-align: center;
@@ -12,3 +13,17 @@ ml-loading-indicator {
  }
  }
 }
+
+/* react */
+.ml-loading-indicator {
+ text-align: center;
+ font-size: 17px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+
+ .loading-spinner {
+ font-size: 24px;
+ }
+}

x-pack/plugins/ml/public/explorer/explorer.html

@@ -145,18 +145,8 @@ <h4 class="euiTitle euiTitle--small">No {{swimlaneViewByFieldName}} influencers
  </div>
  </div>
 
- <div ng-controller="MlExplorerChartsContainerController" class="euiText">
- <ml-explorer-charts-container
- series-to-plot="seriesToPlot"
- time-field-name="timeFieldName"
- plot-earliest="plotEarliest"
- plot-latest="plotLatest"
- selected-earliest="selectedEarliest"
- selected-latest="selectedLatest"
- charts-per-row="chartsPerRow"
- layout-cells-per-chart="layoutCellsPerChart"
- too-many-buckets="tooManyBuckets">
- </ml-explorer-charts-container>
+ <div class="euiText explorer-charts">
+ <ml-explorer-charts-container />
  </div>
 
  <ml-anomalies-table