Optimize charts plugin

elastic · Sep 30, 2020 · 1cd1bf9 · 1cd1bf9
1 parent 14c7a5e
commit 1cd1bf9
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/src/plugins/charts/public/services/colors/color_palette.ts b/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).toString());
   });
 
   return colors;

diff --git a/src/plugins/charts/public/services/colors/colors_palette.test.ts b/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();
   });

diff --git a/src/plugins/charts/public/services/colors/mapped_colors.test.ts b/src/plugins/charts/public/services/colors/mapped_colors.test.ts
@@ -18,7 +18,7 @@
  */
 
 import _ from 'lodash';
-import d3 from 'd3';
+import { rgb } from 'color';
 
 import { coreMock } from '../../../../../core/public/mocks';
 import { COLOR_MAPPING_SETTING } from '../../../common';
@@ -78,9 +78,9 @@ 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 newConfig = { bar: rgb };
+    const color = rgb(seedColors[0]);
+    const rgbColorString = `rgbColorString(${color.red}, ${color.green}, ${color.blue})`;
+    const newConfig = { bar: rgbColorString };
     config.set(COLOR_MAPPING_SETTING, newConfig);
 
     const arr = ['foo', 'bar', 'baz', 'qux'];

diff --git a/src/plugins/charts/public/services/colors/mapped_colors.ts b/src/plugins/charts/public/services/colors/mapped_colors.ts
@@ -18,14 +18,14 @@
  */
 
 import _ from 'lodash';
-import d3 from 'd3';
+import { rgb } 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) => rgb(color).toString();
 
 /**
  * Maintains a lookup table that associates the value (key) with a hex color (value)