Charts plugin (combining ui/color_maps and EuiUtils)

.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 { createSavedSearchesService } 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 { Chrome, 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';
@@ -59,7 +59,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/__tests__/region_map_visualization.js

@@ -40,6 +40,9 @@ import afterdatachangeandresizePng from './afterdatachangeandresize.png';
 import aftercolorchangePng from './aftercolorchange.png';
 import changestartupPng from './changestartup.png';
 import { setup as visualizationsSetup } from '../../../visualizations/public/np_ready/public/legacy';
+// TODO: Remove when converted to jest
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { colorMapsService as colorMaps } from '../../../../../plugins/charts/public/services';
 
 import { createRegionMapVisualization } from '../region_map_visualization';
 import { createRegionMapTypeDefinition } from '../region_map_type';
@@ -105,6 +108,7 @@ describe('RegionMapsVisualizationTests', function() {
         $injector,
         regionmapsConfig,
         uiSettings,
+        colorMaps,
       };
 
       if (!visRegComplete) {

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

@@ -23,7 +23,6 @@ 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';
@@ -73,12 +72,22 @@ export default class ChoroplethLayer extends KibanaMapLayer {
     }
   }
 
-  constructor(name, attribution, format, showAllShapes, meta, layerConfig, serviceSettings) {
+  constructor(
+    name,
+    attribution,
+    format,
+    showAllShapes,
+    meta,
+    layerConfig,
+    serviceSettings,
+    colorMaps
+  ) {
     super();
     this._serviceSettings = serviceSettings;
     this._metrics = null;
     this._joinField = null;
-    this._colorRamp = truncatedColorMaps[Object.keys(truncatedColorMaps)[0]].value;
+    this._colorRamp =
+      colorMaps.truncatedColorMaps[Object.keys(colorMaps.truncatedColorMaps)[0]].value;
     this._lineWeight = 1;
     this._tooltipFormatter = () => '';
     this._attribution = attribution;
@@ -279,7 +288,8 @@ CORS configuration of the server permits requests from the Kibana application on
     showAllData,
     meta,
     layerConfig,
-    serviceSettings
+    serviceSettings,
+    colorMaps
   ) {
     const clonedLayer = new ChoroplethLayer(
       name,
@@ -288,7 +298,8 @@ CORS configuration of the server permits requests from the Kibana application on
       showAllData,
       meta,
       layerConfig,
-      serviceSettings
+      serviceSettings,
+      colorMaps
     );
     clonedLayer.setJoinField(this._joinField);
     clonedLayer.setColorRamp(this._colorRamp);

src/legacy/core_plugins/region_map/public/legacy.ts

@@ -32,6 +32,7 @@ const regionmapsConfig = npSetup.core.injectedMetadata.getInjectedVar(
 const plugins: Readonly<RegionMapPluginSetupDependencies> = {
   expressions: npSetup.plugins.expressions,
   visualizations: visualizationsSetup,
+  charts: npSetup.plugins.charts,
 
   // Temporary solution
   // It will be removed when all dependent services are migrated to the new platform.

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

@@ -32,16 +32,19 @@ import { LegacyDependenciesPlugin, LegacyDependenciesPluginSetup } from './shim'
 import { createRegionMapFn } from './region_map_fn';
 // @ts-ignore
 import { createRegionMapTypeDefinition } from './region_map_type';
+import { ChartsPluginSetup } from '../../../../plugins/charts/public';
 
 /** @private */
 interface RegionMapVisualizationDependencies extends LegacyDependenciesPluginSetup {
   uiSettings: IUiSettingsClient;
+  colorMaps: ChartsPluginSetup['colorMaps'];
 }
 
 /** @internal */
 export interface RegionMapPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
   visualizations: VisualizationsSetup;
+  charts: ChartsPluginSetup;
   __LEGACY: LegacyDependenciesPlugin;
 }
 
@@ -61,9 +64,10 @@ export class RegionMapPlugin implements Plugin<Promise<void>, void> {
 
   public async setup(
     core: CoreSetup,
-    { expressions, visualizations, __LEGACY }: RegionMapPluginSetupDependencies
+    { expressions, visualizations, charts, __LEGACY }: RegionMapPluginSetupDependencies
   ) {
     const visualizationDependencies: Readonly<RegionMapVisualizationDependencies> = {
+      colorMaps: charts.colorMaps,
       uiSettings: core.uiSettings,
       ...(await __LEGACY.setup()),
     };

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

@@ -19,7 +19,6 @@
 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';
@@ -29,7 +28,7 @@ import { RegionMapOptions } from './components/region_map_options';
 import { ORIGIN } from '../../tile_map/common/origin';
 
 export function createRegionMapTypeDefinition(dependencies) {
-  const { uiSettings, regionmapsConfig, serviceSettings } = dependencies;
+  const { uiSettings, regionmapsConfig, serviceSettings, colorMaps } = dependencies;
   const visualization = createRegionMapVisualization(dependencies);
 
   return {
@@ -60,7 +59,7 @@ provided base maps, or add your own. Darker colors represent higher values.',
     editorConfig: {
       optionsTemplate: props => <RegionMapOptions {...props} serviceSettings={serviceSettings} />,
       collections: {
-        colorSchemas,
+        colorSchemas: colorMaps.truncatedColorSchemas,
         vectorLayers: [],
         tmsLayers: [],
       },

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

@@ -19,7 +19,6 @@
 
 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';
 
@@ -28,7 +27,12 @@ import { TileMapTooltipFormatter } from './tooltip_formatter';
 // TODO: reference to TILE_MAP plugin should be removed
 import { BaseMapsVisualizationProvider } from '../../tile_map/public/base_maps_visualization';
 
-export function createRegionMapVisualization({ serviceSettings, $injector, uiSettings }) {
+export function createRegionMapVisualization({
+  serviceSettings,
+  $injector,
+  uiSettings,
+  colorMaps,
+}) {
   const BaseMapsVisualization = new BaseMapsVisualizationProvider(serviceSettings);
   const tooltipFormatter = new TileMapTooltipFormatter($injector);
 
@@ -112,7 +116,7 @@ export function createRegionMapVisualization({ serviceSettings, $injector, uiSet
       const metricFieldFormatter = getFormat(this._params.metric.format);
 
       this._choroplethLayer.setJoinField(visParams.selectedJoinField.name);
-      this._choroplethLayer.setColorRamp(truncatedColorMaps[visParams.colorSchema].value);
+      this._choroplethLayer.setColorRamp(colorMaps.truncatedColorMaps[visParams.colorSchema].value);
       this._choroplethLayer.setLineWeight(visParams.outlineWeight);
       this._choroplethLayer.setTooltipFormatter(
         tooltipFormatter,
@@ -149,7 +153,8 @@ export function createRegionMapVisualization({ serviceSettings, $injector, uiSet
           showAllData,
           this._params.selectedLayer.meta,
           this._params.selectedLayer,
-          serviceSettings
+          serviceSettings,
+          colorMaps
         );
       } else {
         this._choroplethLayer = new ChoroplethLayer(
@@ -159,7 +164,8 @@ export function createRegionMapVisualization({ serviceSettings, $injector, uiSet
           showAllData,
           this._params.selectedLayer.meta,
           this._params.selectedLayer,
-          serviceSettings
+          serviceSettings,
+          colorMaps
         );
       }
 

src/legacy/core_plugins/tile_map/public/__tests__/coordinate_maps_visualization.js

@@ -34,6 +34,9 @@ import EMS_STYLE_ROAD_MAP_BRIGHT from '../../../../ui/public/vis/__tests__/map/e
 import EMS_STYLE_ROAD_MAP_DESATURATED from '../../../../ui/public/vis/__tests__/map/ems_mocks/sample_style_desaturated';
 import EMS_STYLE_DARK_MAP from '../../../../ui/public/vis/__tests__/map/ems_mocks/sample_style_dark';
 import { setup as visualizationsSetup } from '../../../visualizations/public/np_ready/public/legacy';
+// TODO: Remove when converted to jest
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { colorMapsService as colorMaps } from '../../../../../plugins/charts/public/services';
 
 import { createTileMapVisualization } from '../tile_map_visualization';
 import { createTileMapTypeDefinition } from '../tile_map_type';
@@ -82,6 +85,7 @@ describe('CoordinateMapsVisualizationTest', function() {
         serviceSettings,
         uiSettings,
         $injector,
+        colorMaps,
       };
 
       if (!visRegComplete) {

src/legacy/core_plugins/tile_map/public/__tests__/geohash_layer.js

@@ -25,6 +25,9 @@ import scaledCircleMarkersPng from './scaledCircleMarkers.png';
 // import shadedCircleMarkersPng from './shadedCircleMarkers.png';
 import { ImageComparator } from 'test_utils/image_comparator';
 import GeoHashSampleData from './dummy_es_response.json';
+// TODO: Mock this plugin in jest tests
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { colorMapsService } from '../../../../../plugins/charts/public/services';
 
 describe('geohash_layer', function() {
   let domNode;
@@ -102,7 +105,8 @@ describe('geohash_layer', function() {
           GeoHashSampleData.meta,
           geohashGridOptions,
           kibanaMap.getZoomLevel(),
-          kibanaMap
+          kibanaMap,
+          colorMapsService
         );
         kibanaMap.addLayer(geohashLayer);
 
@@ -124,7 +128,8 @@ describe('geohash_layer', function() {
         {},
         { mapType: 'Scaled Circle Markers', colorRamp: 'Yellow to Red' },
         kibanaMap.getZoomLevel(),
-        kibanaMap
+        kibanaMap,
+        colorMapsService
       );
       kibanaMap.addLayer(geohashLayer);
 

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

@@ -29,7 +29,7 @@ import { GeohashGridMarkers } from './markers/geohash_grid';
 import { MapTypes } from './map_types';
 
 export class GeohashLayer extends KibanaMapLayer {
-  constructor(featureCollection, featureCollectionMetaData, options, zoom, kibanaMap) {
+  constructor(featureCollection, featureCollectionMetaData, options, zoom, kibanaMap, colorMaps) {
     super();
 
     this._featureCollection = featureCollection;
@@ -38,6 +38,7 @@ export class GeohashLayer extends KibanaMapLayer {
     this._geohashOptions = options;
     this._zoom = zoom;
     this._kibanaMap = kibanaMap;
+    this._colorMaps = colorMaps;
     const geojson = L.geoJson(this._featureCollection);
     this._bounds = geojson.getBounds();
     this._createGeohashMarkers();
@@ -59,7 +60,9 @@ export class GeohashLayer extends KibanaMapLayer {
           this._featureCollectionMetaData,
           markerOptions,
           this._zoom,
-          this._kibanaMap
+          this._kibanaMap,
+          undefined,
+          this._colorMaps
         );
         break;
       case MapTypes.ShadedCircleMarkers:
@@ -68,7 +71,9 @@ export class GeohashLayer extends KibanaMapLayer {
           this._featureCollectionMetaData,
           markerOptions,
           this._zoom,
-          this._kibanaMap
+          this._kibanaMap,
+          undefined,
+          this._colorMaps
         );
         break;
       case MapTypes.ShadedGeohashGrid:
@@ -77,7 +82,9 @@ export class GeohashLayer extends KibanaMapLayer {
           this._featureCollectionMetaData,
           markerOptions,
           this._zoom,
-          this._kibanaMap
+          this._kibanaMap,
+          undefined,
+          this._colorMaps
         );
         break;
       case MapTypes.Heatmap:

src/legacy/core_plugins/tile_map/public/legacy.ts

@@ -28,6 +28,7 @@ import { plugin } from '.';
 const plugins: Readonly<TileMapPluginSetupDependencies> = {
   expressions: npSetup.plugins.expressions,
   visualizations: visualizationsSetup,
+  charts: npSetup.plugins.charts,
 
   // Temporary solution
   // It will be removed when all dependent services are migrated to the new platform.