[Charts Plugin] Color mappings preliminary cleanups (#160898)

I took a stab at cleaning up unused/unnecessary functions/types and
objects.

src/plugins/charts/README.md

@@ -6,24 +6,16 @@ The Charts plugin is a way to create easier integration of shared colors, themes
 
 ### `vislibColorMaps`
 
-Color mappings related to vislib visualizations
-
-### `truncatedColorMaps`
-
-Color mappings subset of `vislibColorMaps`
+Color mappings related to vislib colors
 
 ### `colorSchemas`
 
-Color mappings in `value`/`text` form
+Color mappings in `value`/`text` form related to vislib colors
 
 ### `getHeatmapColors`
 
 Function to retrieve heatmap related colors based on `value` and `colorSchemaName`
 
-### `truncatedColorSchemas`
-
-Truncated color mappings in `value`/`text` form
-
 ## Theme
 
 See Theme service [docs](public/services/theme/README.md)

src/plugins/charts/common/index.ts

@@ -24,8 +24,6 @@ export {
   vislibColorMaps,
   colorSchemas,
   getHeatmapColors,
-  truncatedColorMaps,
-  truncatedColorSchemas,
   ColorMode,
   LabelRotation,
   defaultCountLabel,

src/plugins/charts/common/static/color_maps/heatmap_color.test.ts

@@ -67,22 +67,4 @@ describe('Vislib Heatmap Color Module Test Suite', () => {
       expect(getHeatmapColors(i / 10, schema)).toMatch(colorRegex);
     }
   });
-
-  describe('drawColormap function', () => {
-    const canvasElement = {
-      getContext: jest.fn(() => ({
-        fillStyle: null,
-        fillRect: jest.fn(),
-      })),
-    };
-    beforeEach(() => {
-      jest.spyOn(document, 'createElement').mockImplementation(() => canvasElement as any);
-    });
-
-    it('should return canvas element', () => {
-      const response = getHeatmapColors.prototype.drawColormap('Greens');
-      expect(typeof response).toEqual('object');
-      expect(response).toBe(canvasElement);
-    });
-  });
 });

src/plugins/charts/common/static/color_maps/heatmap_color.ts

@@ -6,20 +6,10 @@
  * Side Public License, v 1.
  */
 
-import _ from 'lodash';
+import { isNumber, clamp } from 'lodash';
 
 import { vislibColorMaps, RawColorSchema } from './color_maps';
 
-function enforceBounds(x: number) {
-  if (x < 0) {
-    return 0;
-  } else if (x > 1) {
-    return 1;
-  } else {
-    return x;
-  }
-}
-
 function interpolateLinearly(x: number, values: RawColorSchema['value']) {
   // Split values into four lists
   const xValues: number[] = [];
@@ -41,16 +31,15 @@ function interpolateLinearly(x: number, values: RawColorSchema['value']) {
   const r = rValues[i - 1] + scalingFactor * (rValues[i] - rValues[i - 1]);
   const g = gValues[i - 1] + scalingFactor * (gValues[i] - gValues[i - 1]);
   const b = bValues[i - 1] + scalingFactor * (bValues[i] - bValues[i - 1]);
-  return [enforceBounds(r), enforceBounds(g), enforceBounds(b)];
+  return [clamp(r, 0, 1), clamp(g, 0, 1), clamp(b, 0, 1)];
 }
 
 export function getHeatmapColors(value: any, colorSchemaName: string) {
-  if (!_.isNumber(value) || value < 0 || value > 1) {
+  if (!isNumber(value) || value < 0 || value > 1) {
     throw new Error('heatmap_color expects a number from 0 to 1 as first parameter');
   }
 
-  // @ts-ignore
-  const colorSchema = vislibColorMaps[colorSchemaName].value;
+  const colorSchema = vislibColorMaps[colorSchemaName]?.value;
   if (!colorSchema) {
     throw new Error('invalid colorSchemaName provided');
   }
@@ -61,22 +50,3 @@ export function getHeatmapColors(value: any, colorSchemaName: string) {
   const b = Math.round(255 * color[2]);
   return `rgb(${r},${g},${b})`;
 }
-
-function drawColormap(colorSchema: string, width = 100, height = 10) {
-  const canvas = document.createElement('canvas');
-  canvas.width = width;
-  canvas.height = height;
-  const ctx = canvas.getContext('2d');
-
-  if (ctx === null) {
-    throw new Error('no HeatmapColors canvas context found');
-  }
-
-  for (let i = 0; i <= width; i++) {
-    ctx.fillStyle = getHeatmapColors(i / width, colorSchema);
-    ctx.fillRect(i, 0, 1, height);
-  }
-  return canvas;
-}
-
-getHeatmapColors.prototype.drawColormap = drawColormap;

src/plugins/charts/common/static/color_maps/index.ts

@@ -9,4 +9,3 @@
 export type { ColorSchema, RawColorSchema, ColorMap } from './color_maps';
 export { ColorSchemas, vislibColorMaps, colorSchemas } from './color_maps';
 export { getHeatmapColors } from './heatmap_color';
-export { truncatedColorMaps, truncatedColorSchemas } from './truncated_color_maps';

src/plugins/charts/common/static/color_maps/mock.ts

@@ -1,20 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { colorSchemas, vislibColorMaps } from './color_maps';
-import { getHeatmapColors } from './heatmap_color';
-import { truncatedColorMaps, truncatedColorSchemas } from './truncated_color_maps';
-
-// Note: Using actual values due to existing test dependencies
-export const colorMapsMock = {
-  getHeatmapColors: jest.fn(getHeatmapColors),
-  vislibColorMaps,
-  colorSchemas,
-  truncatedColorMaps,
-  truncatedColorSchemas,
-} as any;

src/plugins/charts/common/static/color_maps/truncated_color_maps.ts

@@ -1,31 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { vislibColorMaps, ColorMap, ColorSchema } from './color_maps';
-
-export const truncatedColorMaps: ColorMap = {};
-
-const colormaps: ColorMap = vislibColorMaps;
-for (const key in colormaps) {
-  if (colormaps.hasOwnProperty(key)) {
-    // slice off lightest colors
-    // @ts-ignore
-    const color = colormaps[key];
-    truncatedColorMaps[key] = {
-      ...color,
-      value: color.value.slice(Math.floor(color.value.length / 4)),
-    };
-  }
-}
-
-export const truncatedColorSchemas: ColorSchema[] = Object.values(truncatedColorMaps).map(
-  ({ id, label }) => ({
-    value: id,
-    text: label,
-  })
-);

src/plugins/charts/common/static/index.ts

@@ -7,14 +7,7 @@
  */
 
 export type { ColorSchema, RawColorSchema, ColorMap } from './color_maps';
-export {
-  ColorSchemas,
-  vislibColorMaps,
-  colorSchemas,
-  getHeatmapColors,
-  truncatedColorMaps,
-  truncatedColorSchemas,
-} from './color_maps';
+export { ColorSchemas, vislibColorMaps, colorSchemas, getHeatmapColors } from './color_maps';
 
 export { ColorMode, LabelRotation, defaultCountLabel } from './components';
 export * from './styles';

src/plugins/charts/public/index.ts

@@ -56,8 +56,6 @@ export {
   vislibColorMaps,
   colorSchemas,
   getHeatmapColors,
-  truncatedColorMaps,
-  truncatedColorSchemas,
   ColorMode,
   LabelRotation,
   defaultCountLabel,

src/plugins/charts/public/mocks.ts

@@ -28,8 +28,6 @@ const createStartContract = (): Start => ({
   palettes: paletteServiceMock.setup({} as any),
 });
 
-export { colorMapsMock } from '../common/static/color_maps/mock';
-
 export const chartPluginMock = {
   createSetupContract,
   createStartContract,

src/plugins/charts/public/plugin.ts

@@ -14,17 +14,14 @@ import { ThemeService, LegacyColorsService } from './services';
 import { PaletteService } from './services/palettes/service';
 import { ActiveCursor } from './services/active_cursor';
 
-export type Theme = Omit<ThemeService, 'init'>;
-export type Color = Omit<LegacyColorsService, 'init'>;
-
 interface SetupDependencies {
   expressions: ExpressionsSetup;
 }
 
 /** @public */
 export interface ChartsPluginSetup {
-  legacyColors: Color;
-  theme: Theme;
+  legacyColors: Omit<LegacyColorsService, 'init'>;
+  theme: Omit<ThemeService, 'init'>;
   palettes: ReturnType<PaletteService['setup']>;
 }
 

src/plugins/charts/public/services/palettes/palettes.tsx

@@ -6,7 +6,6 @@
  * Side Public License, v 1.
  */
 
-// @ts-ignore
 import chroma from 'chroma-js';
 import { i18n } from '@kbn/i18n';
 import {
@@ -263,9 +262,7 @@ export const buildPalettes: (
 ) => Record<string, PaletteDefinition> = (legacyColorsService) => {
   return {
     default: {
-      title: i18n.translate('charts.palettes.defaultPaletteLabel', {
-        defaultMessage: 'Default',
-      }),
+      title: i18n.translate('charts.palettes.defaultPaletteLabel', { defaultMessage: 'Default' }),
       ...buildRoundRobinCategoricalWithMappedColors(),
     },
     status: {