feat: add 4.5 contrast for text in partition slices

api/charts.api.md

@@ -176,11 +176,8 @@ export interface AxisStyle {
     tickLabelPadding?: number;
 }
 
-// Warning: (ae-missing-release-tag) "BackgroundStyles" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
 // @public
-export interface BackgroundStyles {
-    // (undocumented)
+export interface BackgroundStyle {
     color: string;
 }
 
@@ -1411,7 +1408,7 @@ export interface Theme {
     areaSeriesStyle: AreaSeriesStyle;
     // (undocumented)
     axes: AxisConfig;
-    background: BackgroundStyles;
+    background: BackgroundStyle;
     barSeriesStyle: BarSeriesStyle;
     bubbleSeriesStyle: BubbleSeriesStyle;
     chartMargins: Margins;

src/chart_types/partition_chart/layout/utils/calcs.ts

@@ -52,8 +52,9 @@ export function arrayToLookup(keyFun: Function, array: Array<any>) {
 
 /** If the user specifies the background of the container in which the chart will be on, we can use that color
  * and make sure to provide optimal contrast
-/** @internal */
-export function combineColors(foregroundColor: Color, backgroundColor: Color) {
+ * @internal
+ */
+export function combineColors(foregroundColor: Color, backgroundColor: Color): Color {
   const [red1, green1, blue1, alpha1] = chroma(foregroundColor).rgba();
   const [red2, green2, blue2, alpha2] = chroma(backgroundColor).rgba();
 
@@ -63,23 +64,37 @@ export function combineColors(foregroundColor: Color, backgroundColor: Color) {
   const combinedRed = Math.round((red1 * alpha1 + red2 * alpha2 * (1 - alpha1)) / combinedAlpha);
   const combinedGreen = Math.round((green1 * alpha1 + green2 * alpha2 * (1 - alpha1)) / combinedAlpha);
   const combinedBlue = Math.round((blue1 * alpha1 + blue2 * alpha2 * (1 - alpha1)) / combinedAlpha);
-  return RGBATupleToString([combinedRed, combinedGreen, combinedBlue, combinedAlpha] as RgbTuple);
+  const rgba: RgbTuple = [combinedRed, combinedGreen, combinedBlue, combinedAlpha];
+  return RGBATupleToString(rgba);
 }
 
 /**
  * Returns a valid color
  * @param color valid color
  * @internal
  */
-export function validateColor(color?: string, defaultColor?: string): string {
-  return color === undefined || color === 'transparent' ? defaultColor ?? 'rgba(255, 255, 255, 0)' : color;
+export function validateColor(color?: string, defaultColor = 'rgba(255, 255, 255, 0)'): string {
+  return color === undefined || color === 'transparent' ? defaultColor : color;
+}
+
+/**
+ * Return true if the color is a valid CSS color, false otherwise
+ * @param color a color written in string
+ */
+export function isColorValid(color: string) {
+  try {
+    chroma(color);
+    return true;
+  } catch {
+    return false;
+  }
 }
 
 /**
  * Adjust the text color in cases black and white can't reach ideal 4.5 ratio
  * @internal
  */
-export function makeHighContrastColor(foreground: Color, background: Color, ratio = 4.5) {
+export function makeHighContrastColor(foreground: Color, background: Color, ratio = 4.5): Color {
   // determine the lightness factor of the background color to determine whether to lighten or darken the foreground
   const lightness = chroma(background).get('hsl.l');
   let highContrastTextColor = foreground;
@@ -118,15 +133,15 @@ export function makeHighContrastColor(foreground: Color, background: Color, rati
  * show contrast amount
  * @internal
  */
-export function getContrast(foregroundColor: string | chroma.Color, backgroundColor: string | chroma.Color) {
+export function getContrast(foregroundColor: string | chroma.Color, backgroundColor: string | chroma.Color): number {
   return chroma.contrast(foregroundColor, backgroundColor);
 }
 
 /**
  * determines if the color is dark based on the luminance
  * @internal
  */
-export function colorIsDark(color: Color) {
+export function colorIsDark(color: Color): boolean {
   const luminance = chroma(color).luminance();
   return luminance < 0.2;
 }

src/chart_types/partition_chart/layout/utils/color_library_wrappers.ts

@@ -114,7 +114,7 @@ export function RGBATupleToString(rgba: RgbTuple): string {
   if (rgba.length === 4) {
     return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]}, ${rgba[3]})`;
   }
-  return `rgba(${rgba[0]}, ${rgba[1]}, ${rgba[2]})`;
+  return `rgb(${rgba[0]}, ${rgba[1]}, ${rgba[2]})`;
 }
 
 /** convert rgb to hex

src/chart_types/partition_chart/state/selectors/geometries.ts

@@ -26,23 +26,18 @@ import { PartitionSpec } from '../../specs/index';
 import { SpecTypes } from '../../../../specs/settings';
 import { getTree } from './tree';
 import { getChartContainerDimensionsSelector } from '../../../../state/selectors/get_chart_container_dimensions';
-import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
+import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
+import { isColorValid } from '../../layout/utils/calcs';
 
 const getSpecs = (state: GlobalChartState) => state.specs;
 
 /** @internal */
 export const partitionGeometries = createCachedSelector(
-  [getSpecs, getChartContainerDimensionsSelector, getTree, getSettingsSpecSelector],
-  (specs, parentDimensions, tree, settingsSpec): ShapeViewModel => {
+  [getSpecs, getChartContainerDimensionsSelector, getTree, getChartThemeSelector],
+  (specs, parentDimensions, tree, theme): ShapeViewModel => {
     const pieSpecs = getSpecsFromStore<PartitionSpec>(specs, ChartTypes.Partition, SpecTypes.Series);
-    // @ts-ignore
-    const { background } = settingsSpec.theme;
-    if (background !== undefined) {
-      return pieSpecs.length === 1
-        ? render(pieSpecs[0], parentDimensions, tree, background.color)
-        : nullShapeViewModel();
-    } else {
-      return pieSpecs.length === 1 ? render(pieSpecs[0], parentDimensions, tree) : nullShapeViewModel();
-    }
+    const { color } = theme.background;
+    const bgColor: string | undefined = isColorValid(color) ? color : undefined;
+    return pieSpecs.length === 1 ? render(pieSpecs[0], parentDimensions, tree, bgColor) : nullShapeViewModel();
   },
 )((state) => state.chartId);

src/components/_container.scss

@@ -1,7 +1,7 @@
 .echChart {
+  position: relative;
   display: flex;
   height: 100%;
-  position: relative;
 
   &--column {
     flex-direction: column;

src/components/_global.scss

@@ -12,9 +12,9 @@
 }
 
 .echChartBackground {
+  position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  position: absolute;
 }

src/components/chart.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License. */
 
-import React, { CSSProperties, createRef } from 'react';
+import React, { createRef } from 'react';
 import classNames from 'classnames';
 import { Provider } from 'react-redux';
 import { createStore, Store, Unsubscribe } from 'redux';
@@ -50,15 +50,6 @@ interface ChartState {
   legendPosition: Position;
 }
 
-function getContainerStyle(size: any): CSSProperties {
-  if (size) {
-    return {
-      ...getChartSize(size),
-    };
-  }
-  return {};
-}
-
 export class Chart extends React.Component<ChartProps, ChartState> {
   static defaultProps: ChartProps = {
     renderer: 'canvas',
@@ -156,7 +147,7 @@ export class Chart extends React.Component<ChartProps, ChartState> {
 
   render() {
     const { size, className } = this.props;
-    const containerStyle = getContainerStyle(size);
+    const containerStyle = getChartSize(size);
     const horizontal = isHorizontalAxis(this.state.legendPosition);
     const chartClassNames = classNames('echChart', className, {
       'echChart--column': horizontal,

src/components/chart_background.tsx

@@ -17,13 +17,12 @@
  * under the License. */
 import React from 'react';
 import { connect } from 'react-redux';
-import { BackgroundStyles } from '../utils/themes/theme';
 import { getChartThemeSelector } from '../state/selectors/get_chart_theme';
 import { GlobalChartState } from '../state/chart_state';
 import { getInternalIsInitializedSelector } from '../state/selectors/get_internal_is_intialized';
 
 interface ChartBackgroundProps {
-  backgroundStyles?: BackgroundStyles;
+  background: string;
 }
 
 export class ChartBackgroundComponent extends React.Component<ChartBackgroundProps> {
@@ -34,18 +33,19 @@ export class ChartBackgroundComponent extends React.Component<ChartBackgroundPro
   }
 
   render() {
-    return <div className="echChartBackground" style={{ background: this.props?.backgroundStyles?.color }} />;
+    const { background } = this.props;
+    return <div className="echChartBackground" style={{ background }} />;
   }
 }
 
 const mapStateToProps = (state: GlobalChartState): ChartBackgroundProps => {
   if (!getInternalIsInitializedSelector(state)) {
     return {
-      backgroundStyles: getChartThemeSelector(state).background,
+      background: 'transparent',
     };
   }
   return {
-    backgroundStyles: getChartThemeSelector(state).background,
+    background: getChartThemeSelector(state).background.color,
   };
 };
 

src/state/selectors/get_settings_specs.ts

@@ -20,7 +20,7 @@ import createCachedSelector from 're-reselect';
 import { GlobalChartState } from '../chart_state';
 import { ChartTypes } from '../../chart_types';
 import { getSpecsFromStore } from '../utils';
-import { SettingsSpec, SpecTypes } from '../../specs/settings';
+import { SettingsSpec, SpecTypes, DEFAULT_SETTINGS_SPEC } from '../../specs/settings';
 import { getChartIdSelector } from './get_chart_id';
 
 const getSpecs = (state: GlobalChartState) => state.specs;
@@ -30,9 +30,9 @@ export const getSettingsSpecSelector = createCachedSelector(
   [getSpecs],
   (specs): SettingsSpec => {
     const settingsSpecs = getSpecsFromStore<SettingsSpec>(specs, ChartTypes.Global, SpecTypes.Settings);
-    if (settingsSpecs.length > 1) {
-      throw new Error('Multiple settings specs are configured on the same chart');
+    if (settingsSpecs.length === 1) {
+      return settingsSpecs[0];
     }
-    return settingsSpecs[0];
+    return DEFAULT_SETTINGS_SPEC;
   },
 )(getChartIdSelector);

src/utils/chart_size.ts

@@ -16,8 +16,6 @@
  * specific language governing permissions and limitations
  * under the License. */
 
-import { CSSProperties } from 'react';
-
 export type ChartSizeArray = [number | string | undefined, number | string | undefined];
 export interface ChartSizeObject {
   width?: number | string;
@@ -27,26 +25,23 @@ export interface ChartSizeObject {
 export type ChartSize = number | string | ChartSizeArray | ChartSizeObject;
 
 /** @internal */
-export function getChartSize(size?: ChartSize): CSSProperties {
+export function getChartSize(size?: ChartSize): ChartSizeObject {
   if (size === undefined) {
     return {};
   }
   if (Array.isArray(size)) {
     return {
-      position: 'relative',
       width: size[0] === undefined ? '100%' : size[0],
       height: size[1] === undefined ? '100%' : size[1],
     };
   } else if (typeof size === 'object') {
     return {
-      position: 'relative',
       width: size.width === undefined ? '100%' : size.width,
       height: size.height === undefined ? '100%' : size.height,
     };
   }
   const sameSize = size === undefined ? '100%' : size;
   return {
-    position: 'relative',
     width: sameSize,
     height: sameSize,
   };

src/utils/themes/dark_theme.ts

@@ -164,6 +164,6 @@ export const DARK_THEME: Theme = {
     },
   },
   background: {
-    color: 'transparent',
+    color: '#1D1E24', // $euiColorEmptyShade
   },
 };

src/utils/themes/light_theme.ts

@@ -163,6 +163,6 @@ export const LIGHT_THEME: Theme = {
     },
   },
   background: {
-    color: 'white',
+    color: '#FFFFFF', // $euiColorEmptyShade: #FFF !default;
   },
 };

src/utils/themes/theme.ts

@@ -124,9 +124,14 @@ export interface ColorConfig {
   defaultVizColor: Color;
 }
 /**
+ * The background style applied to the chart.
  * This is used to coordinate adequate contrast of the text in partition and treemap charts.
+ * @public
  */
-export interface BackgroundStyles {
+export interface BackgroundStyle {
+  /**
+   * The background color
+   */
   color: string;
 }
 export interface LegendStyle {
@@ -207,7 +212,7 @@ export interface Theme {
    * The background allows the consumer to provide a color of the background container of the chart.
    * This can then be used to calculate the contrast of the text for partition charts.
    */
-  background: BackgroundStyles;
+  background: BackgroundStyle;
 }
 
 export type PartialTheme = RecursivePartial<Theme>;