elastic · markov00 · Aug 20, 2021 · Aug 20, 2021 · Aug 20, 2021 · Aug 23, 2021
diff --git a/packages/charts/src/chart_types/goal_chart/layout/types/config_types.ts b/packages/charts/src/chart_types/goal_chart/layout/types/config_types.ts
@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/color';
 import { Pixels, SizeRatio } from '../../../../common/geometry';
 import { FontFamily } from '../../../../common/text_utils';
-import { Color } from '../../../../utils/common';
 
 // todo switch to `io-ts` style, generic way of combining static and runtime type info
 /** @public */

diff --git a/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts b/packages/charts/src/chart_types/goal_chart/layout/viewmodel/geoms.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { BLACK_COLOR } from '../../../../common/color';
 import { GOLDEN_RATIO, TAU } from '../../../../common/constants';
 import { PointObject, Radian, Rectangle } from '../../../../common/geometry';
 import { cssFontShorthand, Font } from '../../../../common/text_utils';
@@ -293,14 +294,14 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
     {
       order: 1,
       landmarks: { from: 'base', to: 'actual' },
-      aes: { shape, fillColor: 'black', lineWidth: tickLength },
+      aes: { shape, fillColor: BLACK_COLOR, lineWidth: tickLength },
     },
     ...(target
       ? [
           {
             order: 2,
             landmarks: { at: 'target' },
-            aes: { shape, fillColor: 'black', lineWidth: barThickness / GOLDEN_RATIO },
+            aes: { shape, fillColor: BLACK_COLOR, lineWidth: barThickness / GOLDEN_RATIO },
           },
         ]
       : []),
@@ -316,7 +317,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
         shape: 'text',
         textAlign: vertical ? 'right' : 'center',
         textBaseline: vertical ? 'middle' : 'top',
-        fillColor: 'black',
+        fillColor: BLACK_COLOR,
         fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '500', fontFamily: 'sans-serif' },
         axisNormalOffset: -barThickness,
       },
@@ -330,7 +331,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
         axisTangentOffset: circular || !vertical ? 0 : 2 * labelFontSize,
         textAlign: vertical ? 'center' : 'right',
         textBaseline: 'bottom',
-        fillColor: 'black',
+        fillColor: BLACK_COLOR,
         fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '900', fontFamily: 'sans-serif' },
       },
     },
@@ -343,7 +344,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
         axisTangentOffset: circular || !vertical ? 0 : 2 * labelFontSize,
         textAlign: vertical ? 'center' : 'right',
         textBaseline: 'top',
-        fillColor: 'black',
+        fillColor: BLACK_COLOR,
         fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '300', fontFamily: 'sans-serif' },
       },
     },
@@ -356,7 +357,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
               shape: 'text',
               textAlign: 'center',
               textBaseline: 'bottom',
-              fillColor: 'black',
+              fillColor: BLACK_COLOR,
               fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '900', fontFamily: 'sans-serif' },
             },
           },
@@ -367,7 +368,7 @@ export function geoms(bulletViewModel: BulletViewModel, config: Config, chartCen
               shape: 'text',
               textAlign: 'center',
               textBaseline: 'top',
-              fillColor: 'black',
+              fillColor: BLACK_COLOR,
               fontShape: { fontStyle: 'normal', fontVariant: 'normal', fontWeight: '300', fontFamily: 'sans-serif' },
             },
           },

diff --git a/packages/charts/src/chart_types/goal_chart/specs/index.ts b/packages/charts/src/chart_types/goal_chart/specs/index.ts
@@ -9,10 +9,11 @@
 import React from 'react';
 
 import { ChartType } from '../..';
+import { Color } from '../../../common/color';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
 import { getConnect, specComponentFactory } from '../../../state/spec_factory';
-import { Color, RecursivePartial } from '../../../utils/common';
+import { RecursivePartial } from '../../../utils/common';
 import { config } from '../layout/config/config';
 import { Config } from '../layout/types/config_types';
 import { defaultGoalSpec } from '../layout/types/viewmodel_types';

diff --git a/packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts b/packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { WHITE_COLOR } from '../../../../common/color';
 import { TooltipInfo } from '../../../../components/tooltip/types';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { BandViewModel } from '../../layout/types/viewmodel_types';
@@ -20,7 +21,7 @@ const EMPTY_TOOLTIP = Object.freeze({
 const getBandColor = (value: number, bands: BandViewModel[]) =>
   bands.find(({ value: v }) => {
     return v >= value;
-  })?.fillColor ?? 'white';
+  })?.fillColor ?? WHITE_COLOR;
 
 /** @internal */
 export const getTooltipInfoSelector = createCustomCachedSelector(

diff --git a/packages/charts/src/chart_types/heatmap/layout/config/config.ts b/packages/charts/src/chart_types/heatmap/layout/config/config.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { BLACK_COLOR } from '../../../../common/color';
 import { Config } from '../types/config_types';
 
 /** @internal */
@@ -22,7 +23,7 @@ export const config: Config = {
 
   brushArea: {
     visible: true,
-    fill: 'black', // black === transparent
+    fill: BLACK_COLOR,
     stroke: '#69707D', // euiColorDarkShade,
     strokeWidth: 2,
   },
@@ -44,7 +45,7 @@ export const config: Config = {
     fontSize: 12,
     fontFamily: 'Sans-Serif',
     fontStyle: 'normal',
-    textColor: 'black',
+    textColor: BLACK_COLOR,
     fontVariant: 'normal',
     fontWeight: 'normal',
     textOpacity: 1,
@@ -60,7 +61,7 @@ export const config: Config = {
     fontSize: 12,
     fontFamily: 'Sans-Serif',
     fontStyle: 'normal',
-    textColor: 'black',
+    textColor: BLACK_COLOR,
     fontVariant: 'normal',
     fontWeight: 'normal',
     textOpacity: 1,
@@ -92,7 +93,7 @@ export const config: Config = {
       fontSize: 10,
       fontFamily: 'Sans-Serif',
       fontStyle: 'normal',
-      textColor: 'black',
+      textColor: BLACK_COLOR,
       fontVariant: 'normal',
       fontWeight: 'normal',
       textOpacity: 1,

diff --git a/packages/charts/src/chart_types/heatmap/layout/types/config_types.ts b/packages/charts/src/chart_types/heatmap/layout/types/config_types.ts
@@ -6,9 +6,9 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/color';
 import { Pixels, SizeRatio } from '../../../../common/geometry';
 import { Font, FontFamily, TextAlign, TextBaseline } from '../../../../common/text_utils';
-import { Color } from '../../../../utils/common';
 import { Cell } from './viewmodel_types';
 
 /**

diff --git a/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts b/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { BLACK_COLOR } from '../../../../common/color';
 import { Font } from '../../../../common/text_utils';
 import { clearCanvas, renderLayers, withContext } from '../../../../renderers/canvas';
 import { renderMultiLine } from '../../../xy_chart/renderer/canvas/primitives/line';
@@ -92,7 +93,7 @@ export function renderCanvas2d(
               fontStyle: config.yAxisLabel.fontStyle ? config.yAxisLabel.fontStyle : 'normal',
               fontVariant: 'normal',
               fontWeight: 'normal',
-              textColor: 'black',
+              textColor: BLACK_COLOR,
               textOpacity: 1,
             };
             const { padding } = config.yAxisLabel;

diff --git a/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts b/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts
@@ -6,13 +6,12 @@
  * Side Public License, v 1.
  */
 
+import { TRANSPARENT_COLOR } from '../../../common/color';
 import { getPredicateFn } from '../../../common/predicate';
-import { Color, safeFormat, ValueFormatter } from '../../../utils/common';
+import { safeFormat, ValueFormatter } from '../../../utils/common';
 import { ColorBand, HeatmapBandsColorScale } from '../specs/heatmap';
 import { ColorScale } from '../state/selectors/get_color_scale';
 
-const TRANSPARENT_COLOR: Color = 'rgba(0, 0, 0, 0)';
-
 function defaultColorBandFormatter(valueFormatter?: ValueFormatter) {
   return (startValue: number, endValue: number) => {
     const finiteStart = Number.isFinite(startValue);

diff --git a/packages/charts/src/chart_types/heatmap/specs/heatmap.ts b/packages/charts/src/chart_types/heatmap/specs/heatmap.ts
@@ -9,13 +9,14 @@
 import React from 'react';
 
 import { ChartType } from '../..';
+import { Color } from '../../../common/color';
 import { Predicate } from '../../../common/predicate';
 import { ScaleType } from '../../../scales/constants';
 import { SeriesScales, Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
 import { getConnect, specComponentFactory } from '../../../state/spec_factory';
 import { Accessor, AccessorFn } from '../../../utils/accessor';
-import { Color, Datum, RecursivePartial } from '../../../utils/common';
+import { Datum, RecursivePartial } from '../../../utils/common';
 import { config } from '../layout/config/config';
 import { Config } from '../layout/types/config_types';
 import { X_SCALE_DEFAULT } from './scale_defaults';

diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_color_scale.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_color_scale.ts
@@ -6,8 +6,8 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/color';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
-import { Color } from '../../../../utils/common';
 import { getBandsColorScale } from '../../scales/band_color_scale';
 import { ColorBand } from '../../specs/heatmap';
 import { getHeatmapSpecSelector } from './get_heatmap_spec';

diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts b/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { TRANSPARENT_COLOR } from '../../../../common/color';
 import { RGBtoString } from '../../../../common/color_library_wrappers';
 import { TooltipInfo } from '../../../../components/tooltip/types';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
@@ -38,7 +39,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
           // X-axis value
           tooltipInfo.values.push({
             label: config.xAxisLabel.name,
-            color: 'transparent',
+            color: TRANSPARENT_COLOR,
             isHighlighted: false,
             isVisible: true,
             seriesIdentifier: {
@@ -53,7 +54,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
           // Y-axis value
           tooltipInfo.values.push({
             label: config.yAxisLabel.name,
-            color: 'transparent',
+            color: TRANSPARENT_COLOR,
             isHighlighted: false,
             isVisible: true,
             seriesIdentifier: {
@@ -83,7 +84,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
     } else {
       tooltipInfo.values.push({
         label: ``,
-        color: 'transparent',
+        color: TRANSPARENT_COLOR,
         isHighlighted: false,
         isVisible: true,
         seriesIdentifier: {

diff --git a/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts b/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts
@@ -8,9 +8,10 @@
 
 import { $Values as Values } from 'utility-types';
 
+import { Color } from '../../../../common/color';
 import { Distance, Pixels, Radian, Radius, Ratio, SizeRatio, TimeMs } from '../../../../common/geometry';
 import { Font, FontFamily, PartialFont, TextContrast } from '../../../../common/text_utils';
-import { Color, StrokeStyle, ValueFormatter } from '../../../../utils/common';
+import { StrokeStyle, ValueFormatter } from '../../../../utils/common';
 import { PerSideDistance } from '../../../../utils/dimensions';
 
 /** @public */

diff --git a/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/partition_chart/layout/types/viewmodel_types.ts
@@ -7,6 +7,7 @@
  */
 
 import { CategoryKey } from '../../../../common/category';
+import { BLACK_COLOR, Color } from '../../../../common/color';
 import {
   Coordinate,
   Distance,
@@ -20,7 +21,6 @@ import {
 import { Font, VerticalAlignments } from '../../../../common/text_utils';
 import { GroupByAccessor } from '../../../../specs';
 import { LegendPath } from '../../../../state/actions/legend';
-import { Color } from '../../../../utils/common';
 import { ContinuousDomainFocus } from '../../renderer/canvas/partition';
 import { Layer } from '../../specs';
 import { config, MODEL_KEY, ValueGetterName } from '../config';
@@ -136,7 +136,7 @@ const defaultFont: Font = {
   fontVariant: 'normal',
   fontFamily: '',
   fontWeight: 'normal',
-  textColor: 'black',
+  textColor: BLACK_COLOR,
   textOpacity: 1,
 };
 

diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/color';
 import { getOnPaperColorSet } from '../../../../common/color_calcs';
 import { TAU } from '../../../../common/constants';
 import {
@@ -17,7 +18,7 @@ import {
   trueBearingToStandardPositionAngle,
 } from '../../../../common/geometry';
 import { cutToLength, fitText, Font, measureOneBoxWidth, TextMeasure } from '../../../../common/text_utils';
-import { Color, ValueFormatter } from '../../../../utils/common';
+import { ValueFormatter } from '../../../../utils/common';
 import { Point } from '../../../../utils/point';
 import { Config, LinkLabelConfig } from '../types/config_types';
 import { LinkLabelVM, RawTextGetter, ShapeTreeNode, ValueGetterFunction } from '../types/viewmodel_types';

diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/scenegraph.ts
@@ -6,9 +6,10 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/color';
 import { measureText } from '../../../../common/text_utils';
 import { SmallMultiplesStyle } from '../../../../specs';
-import { Color, identity, mergePartial, RecursivePartial } from '../../../../utils/common';
+import { identity, mergePartial, RecursivePartial } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
 import { Layer, PartitionSpec } from '../../specs';
 import { config as defaultConfig, VALUE_GETTERS } from '../config';

diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { Color, TRANSPARENT_COLOR } from '../../../../common/color';
 import { argsToRGBString, stringToRGB } from '../../../../common/color_library_wrappers';
 import { TAU } from '../../../../common/constants';
 import { fillTextColor } from '../../../../common/fill_text_color';
@@ -19,7 +20,7 @@ import {
 } from '../../../../common/geometry';
 import { Part, TextMeasure } from '../../../../common/text_utils';
 import { GroupByAccessor, SmallMultiplesStyle } from '../../../../specs';
-import { StrokeStyle, ValueFormatter, Color, RecursivePartial } from '../../../../utils/common';
+import { StrokeStyle, ValueFormatter, RecursivePartial } from '../../../../utils/common';
 import { Layer } from '../../specs';
 import { config as defaultConfig, MODEL_KEY, percentValueGetter } from '../config';
 import { Config, FillLabelConfig, PartitionLayout } from '../types/config_types';
@@ -154,7 +155,7 @@ export function makeQuadViewModel(
     const { textColor, textInvertible, textContrast } = { ...fillLabel, ...layer.fillLabel };
     const color =
       !isSunburstLayout && textNegligible
-        ? 'transparent'
+        ? TRANSPARENT_COLOR
         : fillTextColor(textColor, textInvertible, textContrast, fillColor, containerBackgroundColor);
     return { index, innerIndex, smAccessorValue, strokeWidth, strokeStyle, fillColor, textColor: color, ...node };
   });

diff --git a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_linear_renderers.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { TRANSPARENT_COLOR } from '../../../../common/color';
 import { ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { AnimationState, ContinuousDomainFocus } from './partition';
 
@@ -88,7 +89,7 @@ export function renderLinearPartitionCanvas2d(
       ctx.beginPath();
       ctx.rect(fx0 + fPadding, y0 + padding / 2, fWidth - fPadding, y1 - y0 - padding);
       ctx.fill();
-      if (textColor === 'transparent' || label === '' || fWidth < 4) return;
+      if (textColor === 'transparent' || textColor === TRANSPARENT_COLOR || label === '' || fWidth < 4) return;
       ctx.fillStyle = textColor;
       ctx.save();
       ctx.clip(); // undoing a clip needs context save/restore, which is why it's wrapped in a save/restore

diff --git a/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts b/packages/charts/src/chart_types/partition_chart/renderer/canvas/canvas_renderers.ts
@@ -6,12 +6,12 @@
  * Side Public License, v 1.
  */
 
+import { Color } from '../../../../common/color';
 import { addOpacity } from '../../../../common/color_calcs';
 import { TAU } from '../../../../common/constants';
 import { Pixels } from '../../../../common/geometry';
 import { cssFontShorthand } from '../../../../common/text_utils';
 import { renderLayers, withContext } from '../../../../renderers/canvas';
-import { Color } from '../../../../utils/common';
 import { MIN_STROKE_WIDTH } from '../../../xy_chart/renderer/canvas/primitives/line';
 import {
   LinkLabelVM,

diff --git a/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx b/packages/charts/src/chart_types/partition_chart/renderer/dom/highlighter.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 
+import { BLACK_COLOR } from '../../../../common/color';
 import { TAU } from '../../../../common/constants';
 import { PointObject } from '../../../../common/geometry';
 import { Dimensions } from '../../../../utils/dimensions';
@@ -188,7 +189,7 @@ export class HighlighterComponent extends React.Component<HighlighterProps> {
                     fill="white"
                   />
                   <g transform={`translate(${diskCenter.x}, ${diskCenter.y})`}>
-                    {renderGeometries(geometries, partitionLayout, { color: 'black' }, geometriesFoci, width)}
+                    {renderGeometries(geometries, partitionLayout, { color: BLACK_COLOR }, geometriesFoci, width)}
                   </g>
                 </mask>
               ),