reuse color scale generator

elastic · Sep 27, 2023 · b492532 · b492532
1 parent 6701a1f
commit b492532
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 78 deletions.
diff --git a/packages/kbn-coloring/src/shared_components/color_mapping/color/color_handling.ts b/packages/kbn-coloring/src/shared_components/color_mapping/color/color_handling.ts
@@ -7,11 +7,12 @@
  */
 import chroma from 'chroma-js';
 import { ColorMapping } from '../config';
-import { changeAlpha, combineColors } from './color_math';
+import { changeAlpha, combineColors, getValidColor } from './color_math';
 import { generateAutoAssignmentsForCategories } from '../config/assignment_from_categories';
 import { getPalette } from '../palettes';
 import { ColorMappingInputData } from '../categorical_color_mapping';
 import { ruleMatch } from './rule_matching';
+import { GradientColorMode } from '../config/types';
 
 export function getAssignmentColor(
   colorMode: ColorMapping.Config['colorMode'],
@@ -29,23 +30,8 @@ export function getAssignmentColor(
       if (colorMode.type === 'categorical') {
         return 'red';
       }
-      const steps =
-        colorMode.steps.length === 1
-          ? [
-              getColor(colorMode.steps[0], getPaletteFn, isDarkMode),
-              combineColors(
-                changeAlpha(getColor(colorMode.steps[0], getPaletteFn, isDarkMode), 0.3),
-                isDarkMode ? 'black' : 'white'
-              ),
-            ]
-          : colorMode.steps.map((d) => getColor(d, getPaletteFn, isDarkMode));
-      steps.sort(() => (colorMode.sort === 'asc' ? -1 : 1));
-      const colorScale = chroma.scale(steps).mode('lab');
-      return total === 0
-        ? 'red'
-        : total === 1
-        ? colorScale(0).hex()
-        : colorScale(index / (total - 1)).hex();
+      const colorScale = getGradientColorScale(colorMode, getPaletteFn, isDarkMode);
+      return total === 0 ? 'red' : total === 1 ? colorScale(0) : colorScale(index / (total - 1));
     }
   }
 }
@@ -55,12 +41,9 @@ export function getColor(
   getPaletteFn: ReturnType<typeof getPalette>,
   isDarkMode: boolean
 ) {
-  switch (color.type) {
-    case 'colorCode':
-      return color.colorCode;
-    case 'categorical':
-      return getPaletteFn(color.paletteId).getColor(color.colorIndex, isDarkMode);
-  }
+  return color.type === 'colorCode'
+    ? color.colorCode
+    : getValidColor(getPaletteFn(color.paletteId).getColor(color.colorIndex, isDarkMode)).hex();
 }
 
 export function getColorFactory(
@@ -159,3 +142,23 @@ export function getColorFactory(
     }
   };
 }
+
+export function getGradientColorScale(
+  colorMode: GradientColorMode,
+  getPaletteFn: ReturnType<typeof getPalette>,
+  isDarkMode: boolean
+): (value: number) => string {
+  const steps =
+    colorMode.steps.length === 1
+      ? [
+          getColor(colorMode.steps[0], getPaletteFn, isDarkMode),
+          combineColors(
+            changeAlpha(getColor(colorMode.steps[0], getPaletteFn, isDarkMode), 0.3),
+            isDarkMode ? 'black' : 'white'
+          ),
+        ]
+      : colorMode.steps.map((d) => getColor(d, getPaletteFn, isDarkMode));
+  steps.sort(() => (colorMode.sort === 'asc' ? -1 : 1));
+  const scale = chroma.scale(steps).mode('lab');
+  return (value: number) => scale(value).hex();
+}
diff --git a/...kbn-coloring/src/shared_components/color_mapping/components/palette_selector/gradient.tsx b/...kbn-coloring/src/shared_components/color_mapping/components/palette_selector/gradient.tsx
@@ -5,22 +5,22 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import chroma from 'chroma-js';
 
 import { euiFocusRing, EuiIcon, euiShadowSmall, useEuiTheme } from '@elastic/eui';
 import React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { euiThemeVars } from '@kbn/ui-theme';
 import { css } from '@emotion/react';
-import { changeAlpha, getValidColor, combineColors } from '../../color/color_math';
+import { changeAlpha } from '../../color/color_math';
 
 import { ColorMapping } from '../../config';
 import { ColorSwatch } from '../color_picker/color_swatch';
 import { getPalette } from '../../palettes';
 
 import { addGradientColorStep, updateGradientColorStep } from '../../state/color_mapping';
 import { colorPickerVisibility } from '../../state/ui';
+import { getGradientColorScale } from '../../color/color_handling';
 
 export function Gradient({
   paletteId,
@@ -39,20 +39,7 @@ export function Gradient({
     return null;
   }
   const currentPalette = getPaletteFn(paletteId);
-  const gradientDirection = () => (colorMode.sort === 'asc' ? -1 : 1);
-
-  const gradientColorSteps =
-    colorMode.steps.length === 1
-      ? [
-          getColor(colorMode.steps[0], getPaletteFn, isDarkMode),
-          combineColors(
-            changeAlpha(getColor(colorMode.steps[0], getPaletteFn, isDarkMode), 0.3),
-            isDarkMode ? 'black' : 'white'
-          ),
-        ].sort(gradientDirection)
-      : colorMode.steps.map((d) => getColor(d, getPaletteFn, isDarkMode)).sort(gradientDirection);
-
-  const gradientColorScale = chroma.scale(gradientColorSteps).mode('lab');
+  const gradientColorScale = getGradientColorScale(colorMode, getPaletteFn, isDarkMode);
 
   const topMostColorStop =
     colorMode.sort === 'asc'
@@ -316,11 +303,7 @@ function ColorStop({
   getPaletteFn,
   isDarkMode,
 }: {
-  colorMode: {
-    type: 'gradient';
-    steps: Array<(ColorMapping.CategoricalColor | ColorMapping.ColorCode) & { touched: boolean }>;
-    sort: 'asc' | 'desc';
-  };
+  colorMode: ColorMapping.GradientColorMode;
   step: ColorMapping.CategoricalColor | ColorMapping.ColorCode;
   index: number;
   currentPalette: ColorMapping.CategoricalPalette;
@@ -351,13 +334,3 @@ function ColorStop({
     />
   );
 }
-
-function getColor(
-  color: ColorMapping.CategoricalColor | ColorMapping.ColorCode,
-  getPaletteFn: ReturnType<typeof getPalette>,
-  isDarkMode: boolean
-) {
-  return color.type === 'colorCode'
-    ? color.colorCode
-    : getValidColor(getPaletteFn(color.paletteId).getColor(color.colorIndex, isDarkMode)).hex();
-}
diff --git a/packages/kbn-coloring/src/shared_components/color_mapping/config/default_color_mapping.ts b/packages/kbn-coloring/src/shared_components/color_mapping/config/default_color_mapping.ts
@@ -6,13 +6,11 @@
  * Side Public License, v 1.
  */
 
-import chroma from 'chroma-js';
 import { ColorMapping } from '.';
 import { AVAILABLE_PALETTES, getPalette } from '../palettes';
 import { EUIAmsterdamColorBlindPalette } from '../palettes/eui_amsterdam';
 import { NeutralPalette } from '../palettes/neutral';
-import { changeAlpha, combineColors } from '../color/color_math';
-import { getColor } from '../color/color_handling';
+import { getColor, getGradientColorScale } from '../color/color_handling';
 
 export const DEFAULT_NEUTRAL_PALETTE_INDEX = 1;
 
@@ -61,19 +59,8 @@ export function getColorsFromMapping(
 
   const getPaletteFn = getPalette(AVAILABLE_PALETTES, NeutralPalette);
   if (colorMode.type === 'gradient') {
-    const steps =
-      colorMode.steps.length === 1
-        ? [
-            getColor(colorMode.steps[0], getPaletteFn, isDarkMode),
-            combineColors(
-              changeAlpha(getColor(colorMode.steps[0], getPaletteFn, isDarkMode), 0.3),
-              isDarkMode ? 'black' : 'white'
-            ),
-          ]
-        : colorMode.steps.map((d) => getColor(d, getPaletteFn, isDarkMode));
-    steps.sort(() => (colorMode.sort === 'asc' ? -1 : 1));
-    const colorScale = chroma.scale(steps).mode('lab');
-    return Array.from({ length: 6 }, (d, i) => colorScale(i / 6).hex());
+    const colorScale = getGradientColorScale(colorMode, getPaletteFn, isDarkMode);
+    return Array.from({ length: 6 }, (d, i) => colorScale(i / 6));
   } else {
     const palette = getPaletteFn(paletteId);
     if (assignmentMode === 'auto') {

diff --git a/packages/kbn-coloring/src/shared_components/color_mapping/config/types.ts b/packages/kbn-coloring/src/shared_components/color_mapping/config/types.ts
@@ -122,15 +122,18 @@ export interface Assignment<R, C> {
   touched: boolean;
 }
 
+export interface CategoricalColorMode {
+  type: 'categorical';
+}
+export interface GradientColorMode {
+  type: 'gradient';
+  steps: Array<(CategoricalColor | ColorCode) & { touched: boolean }>;
+  sort: 'asc' | 'desc';
+}
+
 export interface Config {
   paletteId: string;
-  colorMode:
-    | { type: 'categorical' }
-    | {
-        type: 'gradient';
-        steps: Array<(CategoricalColor | ColorCode) & { touched: boolean }>;
-        sort: 'asc' | 'desc';
-      };
+  colorMode: CategoricalColorMode | GradientColorMode;
   assignmentMode: 'auto' | 'manual';
   assignments: Array<
     Assignment<