Optimize charts plugin (#78922)

* Optimize charts plugin

* Fix issues to keep same behavior

* Remove dead import

* Revert name change

src/plugins/charts/public/services/colors/color_palette.ts

@@ -17,8 +17,8 @@
  * under the License.
  */
 
-import d3 from 'd3';
 import _ from 'lodash';
+import { hsl } from 'color';
 
 import { seedColors } from './seed_colors';
 
@@ -49,7 +49,7 @@ const fraction = function (goal: number) {
  * If the number is greater than the length of seed colors available,
  * new colors are generated up to the value of the input number.
  */
-export function createColorPalette(num?: any): string[] {
+export function createColorPalette(num: number): string[] {
   if (!_.isNumber(num)) {
     throw new TypeError('ColorPaletteUtilService expects a number');
   }
@@ -58,7 +58,7 @@ export function createColorPalette(num?: any): string[] {
   const seedLength = seedColors.length;
 
   _.times(num - seedLength, function (i) {
-    colors.push(d3.hsl((fraction(i + seedLength + 1) * 360 + offset) % 360, 0.5, 0.5).toString());
+    colors.push(hsl((fraction(i + seedLength + 1) * 360 + offset) % 360, 0.5, 0.5).hex());
   });
 
   return colors;

src/plugins/charts/public/services/colors/colors_palette.test.ts

@@ -37,26 +37,32 @@ describe('Color Palette', () => {
 
   it('should throw an error if input is not a number', () => {
     expect(() => {
+      // @ts-expect-error
       createColorPalette(string);
     }).toThrowError();
 
     expect(() => {
+      // @ts-expect-error
       createColorPalette(bool);
     }).toThrowError();
 
     expect(() => {
+      // @ts-expect-error
       createColorPalette(nullValue);
     }).toThrowError();
 
     expect(() => {
+      // @ts-expect-error
       createColorPalette(emptyArr);
     }).toThrowError();
 
     expect(() => {
+      // @ts-expect-error
       createColorPalette(emptyObject);
     }).toThrowError();
 
     expect(() => {
+      // @ts-expect-error
       createColorPalette();
     }).toThrowError();
   });

src/plugins/charts/public/services/colors/mapped_colors.test.ts

@@ -18,7 +18,7 @@
  */
 
 import _ from 'lodash';
-import d3 from 'd3';
+import Color from 'color';
 
 import { coreMock } from '../../../../../core/public/mocks';
 import { COLOR_MAPPING_SETTING } from '../../../common';
@@ -61,7 +61,7 @@ describe('Mapped Colors', () => {
     mappedColors.mapKeys(arr);
 
     const colorValues = _(mappedColors.mapping).values();
-    expect(colorValues.includes(seedColors[0])).toBe(false);
+    expect(colorValues).not.toContain(seedColors[0]);
     expect(colorValues.uniq().size()).toBe(arr.length);
   });
 
@@ -78,8 +78,8 @@ describe('Mapped Colors', () => {
   });
 
   it('should treat different formats of colors as equal', () => {
-    const color = d3.rgb(seedColors[0]);
-    const rgb = `rgb(${color.r}, ${color.g}, ${color.b})`;
+    const color = new Color(seedColors[0]);
+    const rgb = `rgb(${color.red()}, ${color.green()}, ${color.blue()})`;
     const newConfig = { bar: rgb };
     config.set(COLOR_MAPPING_SETTING, newConfig);
 

src/plugins/charts/public/services/colors/mapped_colors.ts

@@ -18,14 +18,14 @@
  */
 
 import _ from 'lodash';
-import d3 from 'd3';
+import Color from 'color';
 
 import { CoreSetup } from 'kibana/public';
 
 import { COLOR_MAPPING_SETTING } from '../../../common';
 import { createColorPalette } from './color_palette';
 
-const standardizeColor = (color: string) => d3.rgb(color).toString();
+const standardizeColor = (color: string) => new Color(color).hex().toLowerCase();
 
 /**
  * Maintains a lookup table that associates the value (key) with a hex color (value)