Charts plugin (combining ui/color_maps and EuiUtils) (#55469) (#56151)

* Combine ui/color_maps and EuiUtils into new Charts plugin
* EuiUtils is now the theme service
* ui/color_maps is now the colorMaps service
* Fix all imports of each to pull from new Charts plugin
* Add theme methods to both setup and start contracts
* Move and jestify heatMapColors tests
* Convert remaining js files to ts
* Move vis/color to Charts plugin
* Update missed visTypeVislib naming

.i18nrc.json

@@ -12,6 +12,7 @@
     "embeddableExamples": "examples/embeddable_examples",
     "share": "src/plugins/share",
     "home": "src/plugins/home",
+    "charts": "src/plugins/charts",
     "esUi": "src/plugins/es_ui_shared",
     "devTools": "src/plugins/dev_tools",
     "expressions": "src/plugins/expressions",

src/legacy/core_plugins/kibana/public/discover/build_services.ts

@@ -32,10 +32,10 @@ import {
 } from 'src/plugins/data/public';
 import { createSavedSearchesLoader } from './saved_searches';
 import { DiscoverStartPlugins } from './plugin';
-import { EuiUtilsStart } from '../../../../../plugins/eui_utils/public';
 import { SharePluginStart } from '../../../../../plugins/share/public';
 import { SavedSearch } from './np_ready/types';
 import { DocViewsRegistry } from './np_ready/doc_views/doc_views_registry';
+import { ChartsPluginStart } from '../../../../../plugins/charts/public';
 
 export interface DiscoverServices {
   addBasePath: (path: string) => string;
@@ -45,7 +45,7 @@ export interface DiscoverServices {
   data: DataPublicPluginStart;
   docLinks: DocLinksStart;
   docViewsRegistry: DocViewsRegistry;
-  eui_utils: EuiUtilsStart;
+  theme: ChartsPluginStart['theme'];
   filterManager: FilterManager;
   indexPatterns: IndexPatternsContract;
   inspector: unknown;
@@ -77,7 +77,7 @@ export async function buildServices(
     data: plugins.data,
     docLinks: core.docLinks,
     docViewsRegistry,
-    eui_utils: plugins.eui_utils,
+    theme: plugins.charts.theme,
     filterManager: plugins.data.query.filterManager,
     getSavedSearchById: async (id: string) => savedObjectService.get(id),
     getSavedSearchUrlById: async (id: string) => savedObjectService.urlFor(id),

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/directives/histogram.tsx

@@ -114,13 +114,13 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
 
   private subscription?: Subscription;
   public state = {
-    chartsTheme: getServices().eui_utils.getChartsThemeDefault(),
+    chartsTheme: getServices().theme.chartsDefaultTheme,
   };
 
   componentDidMount() {
-    this.subscription = getServices()
-      .eui_utils.getChartsTheme$()
-      .subscribe((chartsTheme: EuiChartThemeType['theme']) => this.setState({ chartsTheme }));
+    this.subscription = getServices().theme.chartsTheme$.subscribe(
+      (chartsTheme: EuiChartThemeType['theme']) => this.setState({ chartsTheme })
+    );
   }
 
   componentWillUnmount() {

src/legacy/core_plugins/kibana/public/discover/plugin.ts

@@ -27,7 +27,7 @@ import { IEmbeddableStart, IEmbeddableSetup } from '../../../../../plugins/embed
 import { getInnerAngularModule, getInnerAngularModuleEmbeddable } from './get_inner_angular';
 import { setAngularModule, setServices } from './kibana_services';
 import { NavigationPublicPluginStart as NavigationStart } from '../../../../../plugins/navigation/public';
-import { EuiUtilsStart } from '../../../../../plugins/eui_utils/public';
+import { ChartsPluginStart } from '../../../../../plugins/charts/public';
 import { buildServices } from './build_services';
 import { SharePluginStart } from '../../../../../plugins/share/public';
 import { KibanaLegacySetup } from '../../../../../plugins/kibana_legacy/public';
@@ -56,7 +56,7 @@ export interface DiscoverStartPlugins {
   uiActions: IUiActionsStart;
   embeddable: IEmbeddableStart;
   navigation: NavigationStart;
-  eui_utils: EuiUtilsStart;
+  charts: ChartsPluginStart;
   data: DataPublicPluginStart;
   share: SharePluginStart;
   inspector: any;

src/legacy/core_plugins/kibana/public/kibana.js

@@ -52,7 +52,6 @@ import './visualize/legacy';
 import './dashboard/legacy';
 import './management';
 import './dev_tools';
-import 'ui/color_maps';
 import 'ui/agg_response';
 import 'ui/agg_types';
 import { showAppRedirectNotification } from 'ui/notify';

src/legacy/core_plugins/region_map/public/choropleth_layer.js

@@ -23,11 +23,12 @@ import _ from 'lodash';
 import d3 from 'd3';
 import { i18n } from '@kbn/i18n';
 import { KibanaMapLayer } from 'ui/vis/map/kibana_map_layer';
-import { truncatedColorMaps } from 'ui/color_maps';
 import * as topojson from 'topojson-client';
 import { toastNotifications } from 'ui/notify';
 import * as colorUtil from 'ui/vis/map/color_util';
 
+import { truncatedColorMaps } from '../../../../plugins/charts/public';
+
 const EMPTY_STYLE = {
   weight: 1,
   opacity: 0.6,

src/legacy/core_plugins/region_map/public/region_map_type.js

@@ -19,11 +19,11 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { Schemas } from 'ui/vis/editors/default/schemas';
-import { truncatedColorSchemas as colorSchemas } from 'ui/color_maps';
 import { mapToLayerWithId } from './util';
 import { createRegionMapVisualization } from './region_map_visualization';
 import { Status } from '../../visualizations/public';
 import { RegionMapOptions } from './components/region_map_options';
+import { truncatedColorSchemas } from '../../../../plugins/charts/public';
 
 // TODO: reference to TILE_MAP plugin should be removed
 import { ORIGIN } from '../../tile_map/common/origin';
@@ -60,7 +60,7 @@ provided base maps, or add your own. Darker colors represent higher values.',
     editorConfig: {
       optionsTemplate: props => <RegionMapOptions {...props} serviceSettings={serviceSettings} />,
       collections: {
-        colorSchemas,
+        colorSchemas: truncatedColorSchemas,
         vectorLayers: [],
         tmsLayers: [],
       },

src/legacy/core_plugins/region_map/public/region_map_visualization.js

@@ -19,11 +19,11 @@
 
 import { i18n } from '@kbn/i18n';
 import ChoroplethLayer from './choropleth_layer';
-import { truncatedColorMaps } from 'ui/color_maps';
 import { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 import { toastNotifications } from 'ui/notify';
 
 import { TileMapTooltipFormatter } from './tooltip_formatter';
+import { truncatedColorMaps } from '../../../../plugins/charts/public';
 
 // TODO: reference to TILE_MAP plugin should be removed
 import { BaseMapsVisualizationProvider } from '../../tile_map/public/base_maps_visualization';

src/legacy/core_plugins/tile_map/public/markers/scaled_circles.js

@@ -22,9 +22,10 @@ import _ from 'lodash';
 import d3 from 'd3';
 import $ from 'jquery';
 import { EventEmitter } from 'events';
-import { truncatedColorMaps } from 'ui/color_maps';
 import * as colorUtil from 'ui/vis/map/color_util';
 
+import { truncatedColorMaps } from '../../../../../plugins/charts/public';
+
 export class ScaledCirclesMarkers extends EventEmitter {
   constructor(
     featureCollection,
@@ -87,7 +88,7 @@ export class ScaledCirclesMarkers extends EventEmitter {
 
     const quantizeDomain = min !== max ? [min, max] : d3.scale.quantize().domain();
 
-    this._legendColors = makeLegendColors(this._colorRamp);
+    this._legendColors = this.getLegendColors();
     this._legendQuantizer = d3.scale
       .quantize()
       .domain(quantizeDomain)
@@ -222,11 +223,11 @@ export class ScaledCirclesMarkers extends EventEmitter {
   getBounds() {
     return this._leafletLayer.getBounds();
   }
-}
 
-function makeLegendColors(colorRampKey) {
-  const colorRamp = _.get(truncatedColorMaps[colorRampKey], 'value');
-  return colorUtil.getLegendColors(colorRamp);
+  getLegendColors() {
+    const colorRamp = _.get(truncatedColorMaps[this._colorRamp], 'value');
+    return colorUtil.getLegendColors(colorRamp);
+  }
 }
 
 function makeColorDarker(color) {

src/legacy/core_plugins/tile_map/public/tile_map_type.js

@@ -21,14 +21,14 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 
 import { Schemas } from 'ui/vis/editors/default/schemas';
-import { truncatedColorSchemas as colorSchemas } from 'ui/color_maps';
 import { convertToGeoJson } from 'ui/vis/map/convert_to_geojson';
 
 import { createTileMapVisualization } from './tile_map_visualization';
 import { Status } from '../../visualizations/public';
 import { TileMapOptions } from './components/tile_map_options';
 import { MapTypes } from './map_types';
 import { supportsCssFilters } from './css_filters';
+import { truncatedColorSchemas } from '../../../../plugins/charts/public';
 
 export function createTileMapTypeDefinition(dependencies) {
   const CoordinateMapsVisualization = createTileMapVisualization(dependencies);
@@ -63,7 +63,7 @@ export function createTileMapTypeDefinition(dependencies) {
     responseHandler: convertToGeoJson,
     editorConfig: {
       collections: {
-        colorSchemas,
+        colorSchemas: truncatedColorSchemas,
         legendPositions: [
           {
             value: 'bottomleft',

src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.test.tsx

@@ -20,12 +20,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { MetricVisComponent } from './metric_vis_component';
 import { Vis } from '../legacy_imports';
+import { MetricVisComponent, MetricVisComponentProps } from './metric_vis_component';
 
 jest.mock('ui/new_platform');
 
-type Props = MetricVisComponent['props'];
+type Props = MetricVisComponentProps;
 
 const baseVisData = {
   columns: [{ id: 'col-0', name: 'Count' }],

src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.tsx

@@ -22,15 +22,16 @@ import React, { Component } from 'react';
 
 import { isColorDark } from '@elastic/eui';
 
-import { getHeatmapColors, getFormat, Vis } from '../legacy_imports';
+import { getFormat, Vis } from '../legacy_imports';
 import { MetricVisValue } from './metric_vis_value';
 import { fieldFormats } from '../../../../../plugins/data/public';
 import { Context } from '../metric_vis_fn';
 import { KibanaDatatable } from '../../../../../plugins/expressions/public';
+import { getHeatmapColors } from '../../../../../plugins/charts/public';
 import { VisParams, MetricVisMetric } from '../types';
 import { SchemaConfig } from '../../../visualizations/public';
 
-interface MetricVisComponentProps {
+export interface MetricVisComponentProps {
   visParams: VisParams;
   visData: Context;
   vis: Vis;
@@ -50,7 +51,6 @@ export class MetricVisComponent extends Component<MetricVisComponentProps> {
       const to = isPercentageMode ? Math.round((100 * range.to) / max) : range.to;
       labels.push(`${from} - ${to}`);
     });
-
     return labels;
   }
 

src/legacy/core_plugins/vis_type_metric/public/legacy.ts

@@ -27,6 +27,7 @@ import { plugin } from '.';
 const plugins: Readonly<MetricVisPluginSetupDependencies> = {
   expressions: npSetup.plugins.expressions,
   visualizations: visualizationsSetup,
+  charts: npSetup.plugins.charts,
 };
 
 const pluginInstance = plugin({} as PluginInitializerContext);

src/legacy/core_plugins/vis_type_metric/public/legacy_imports.ts

@@ -18,8 +18,6 @@
  */
 
 export { Vis, VisParams } from 'ui/vis';
-export { vislibColorMaps, colorSchemas, ColorSchemas } from 'ui/color_maps';
-export { getHeatmapColors } from 'ui/color_maps';
 export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 export { VisOptionsProps } from 'ui/vis/editors/default';
 // @ts-ignore

src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.test.ts

@@ -18,8 +18,7 @@
  */
 
 import { createMetricVisFn } from './metric_vis_fn';
-
-// eslint-disable-next-line
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { functionWrapper } from '../../../../plugins/expressions/public/functions/tests/utils';
 
 jest.mock('ui/new_platform');

src/legacy/core_plugins/vis_type_metric/public/metric_vis_fn.ts

@@ -19,7 +19,6 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { vislibColorMaps, ColorSchemas } from './legacy_imports';
 import {
   ExpressionFunction,
   KibanaDatatable,
@@ -29,6 +28,7 @@ import {
 } from '../../../../plugins/expressions/public';
 import { ColorModes } from '../../vis_type_vislib/public';
 import { visType, DimensionsVisParam, VisParams } from './types';
+import { ColorSchemas, vislibColorMaps } from '../../../../plugins/charts/public';
 
 export type Context = KibanaDatatable;
 

src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.test.ts

@@ -29,15 +29,15 @@ import {
   setup as visualizationsSetup,
   start as visualizationsStart,
 } from '../../visualizations/public/np_ready/public/legacy';
-import { metricVisTypeDefinition } from './metric_vis_type';
+import { createMetricVisTypeDefinition } from './metric_vis_type';
 
 jest.mock('ui/new_platform');
 
 describe('metric_vis - createMetricVisTypeDefinition', () => {
   let vis: Vis;
 
   beforeAll(() => {
-    visualizationsSetup.types.createReactVisualization(metricVisTypeDefinition);
+    visualizationsSetup.types.createReactVisualization(createMetricVisTypeDefinition());
     (npStart.plugins.data.fieldFormats.getType as jest.Mock).mockImplementation(() => {
       return fieldFormats.UrlFormat;
     });

src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.ts

@@ -22,9 +22,10 @@ import { i18n } from '@kbn/i18n';
 import { MetricVisComponent } from './components/metric_vis_component';
 import { MetricVisOptions } from './components/metric_vis_options';
 import { ColorModes } from '../../vis_type_vislib/public';
-import { Schemas, AggGroupNames, colorSchemas, ColorSchemas } from './legacy_imports';
+import { Schemas, AggGroupNames } from './legacy_imports';
+import { ColorSchemas, colorSchemas } from '../../../../plugins/charts/public';
 
-export const metricVisTypeDefinition = {
+export const createMetricVisTypeDefinition = () => ({
   name: 'metric',
   title: i18n.translate('visTypeMetric.metricTitle', { defaultMessage: 'Metric' }),
   icon: 'visMetric',
@@ -121,4 +122,4 @@ export const metricVisTypeDefinition = {
       },
     ]),
   },
-};
+});

src/legacy/core_plugins/vis_type_metric/public/plugin.ts

@@ -22,12 +22,14 @@ import { Plugin as ExpressionsPublicPlugin } from '../../../../plugins/expressio
 import { VisualizationsSetup } from '../../visualizations/public';
 
 import { createMetricVisFn } from './metric_vis_fn';
-import { metricVisTypeDefinition } from './metric_vis_type';
+import { createMetricVisTypeDefinition } from './metric_vis_type';
+import { ChartsPluginSetup } from '../../../../plugins/charts/public';
 
 /** @internal */
 export interface MetricVisPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
   visualizations: VisualizationsSetup;
+  charts: ChartsPluginSetup;
 }
 
 /** @internal */
@@ -38,9 +40,12 @@ export class MetricVisPlugin implements Plugin<void, void> {
     this.initializerContext = initializerContext;
   }
 
-  public setup(core: CoreSetup, { expressions, visualizations }: MetricVisPluginSetupDependencies) {
+  public setup(
+    core: CoreSetup,
+    { expressions, visualizations, charts }: MetricVisPluginSetupDependencies
+  ) {
     expressions.registerFunction(createMetricVisFn);
-    visualizations.types.createReactVisualization(metricVisTypeDefinition);
+    visualizations.types.createReactVisualization(createMetricVisTypeDefinition());
   }
 
   public start(core: CoreStart) {

src/legacy/core_plugins/vis_type_metric/public/types.ts

@@ -17,10 +17,10 @@
  * under the License.
  */
 
-import { ColorSchemas } from './legacy_imports';
 import { Range } from '../../../../plugins/expressions/public';
 import { SchemaConfig } from '../../visualizations/public';
 import { ColorModes, Labels, Style } from '../../vis_type_vislib/public';
+import { ColorSchemas } from '../../../../plugins/charts/public';
 
 export const visType = 'metric';