feat(theme): move annotation default styles to Theme (#2357)

- moves default styles to theme under `lineAnnotation` & `rectAnnotation`
- deprecates `DEFAULT_ANNOTATION_LINE_STYLE` and `DEFAULT_ANNOTATION_RECT_STYLE`

.eslintrc.js

@@ -488,6 +488,7 @@ module.exports = {
         // see https://github.com/benmosher/eslint-plugin-import/issues/1174
         'import/no-extraneous-dependencies': 0,
         '@typescript-eslint/no-loss-of-precision': 0,
+        '@typescript-eslint/no-floating-promises': 0, // rule has false positive on it
       },
     },
     {

packages/charts/api/charts.api.md

@@ -890,7 +890,7 @@ export interface CustomTooltipProps<D extends BaseDatum = Datum, SI extends Seri
 // @public (undocumented)
 export type CustomXDomain = (DomainRange & Pick<LogScaleOptions, 'logBase'>) | OrdinalDomain;
 
-// @public (undocumented)
+// @public
 export const DARK_BASE_COLORS: ChartBaseColors;
 
 // @public (undocumented)
@@ -1078,10 +1078,10 @@ export interface DebugStateLineConfig {
 // @public (undocumented)
 export type DebugStateValue = Pick<GeometryValue, 'x' | 'y' | 'mark'>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const DEFAULT_ANNOTATION_LINE_STYLE: LineAnnotationStyle;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const DEFAULT_ANNOTATION_RECT_STYLE: RectAnnotationStyle;
 
 // @public
@@ -1887,7 +1887,7 @@ export interface LegendStyle {
     verticalWidth: number;
 }
 
-// @public (undocumented)
+// @public
 export const LIGHT_BASE_COLORS: ChartBaseColors;
 
 // @public (undocumented)
@@ -1998,10 +1998,10 @@ export type Margins = PerSideDistance;
 export type MarkBuffer = number | ((radius: number) => number);
 
 // @public (undocumented)
-export function mergeWithDefaultAnnotationLine(config?: RecursivePartial<LineAnnotationStyle>): LineAnnotationStyle;
+export function mergeWithDefaultAnnotationLine(defaultStyles: LineAnnotationStyle, config?: RecursivePartial<LineAnnotationStyle>): LineAnnotationStyle;
 
 // @public (undocumented)
-export function mergeWithDefaultAnnotationRect(config?: RecursivePartial<RectAnnotationStyle>): RectAnnotationStyle;
+export function mergeWithDefaultAnnotationRect(defaultStyles: RectAnnotationStyle, config?: RecursivePartial<RectAnnotationStyle>): RectAnnotationStyle;
 
 // @alpha (undocumented)
 export const Metric: FC<SFProps<MetricSpec, "chartType" | "specType", "data", never, "id">>;
@@ -2480,7 +2480,7 @@ export type Ratio = number;
 export type RawTextGetter = (node: ShapeTreeNode) => string;
 
 // @public (undocumented)
-export const RectAnnotation: FC<SFProps<RectAnnotationSpec, "chartType" | "specType", "style" | "zIndex" | "groupId" | "annotationType" | "outside", "fallbackPlacements" | "placement" | "offset" | "boundary" | "boundaryPadding" | "hideTooltips" | "animations" | "customTooltip" | "customTooltipDetails" | "outsideDimension", "id" | "dataValues">>;
+export const RectAnnotation: FC<SFProps<RectAnnotationSpec, "chartType" | "specType", "zIndex" | "groupId" | "annotationType" | "outside", "style" | "fallbackPlacements" | "placement" | "offset" | "boundary" | "boundaryPadding" | "hideTooltips" | "animations" | "customTooltip" | "customTooltipDetails" | "outsideDimension", "id" | "dataValues">>;
 
 // @public
 export interface RectAnnotationDatum {
@@ -3001,11 +3001,15 @@ export interface Theme {
     highlighter: HighlighterStyle;
     // (undocumented)
     legend: LegendStyle;
+    // (undocumented)
+    lineAnnotation: LineAnnotationStyle;
     lineSeriesStyle: LineSeriesStyle;
     markSizeRatio?: number;
     metric: MetricStyle;
     partition: PartitionStyle;
     // (undocumented)
+    rectAnnotation: RectAnnotationStyle;
+    // (undocumented)
     scales: ScalesConfig;
     // (undocumented)
     sharedStyle: SharedGeometryStateStyle;

packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts

@@ -16,6 +16,7 @@ import { Position, Rotation } from '../../../../utils/common';
 import { Dimensions, Size } from '../../../../utils/dimensions';
 import { GroupId } from '../../../../utils/ids';
 import { mergeWithDefaultAnnotationLine } from '../../../../utils/themes/merge_utils';
+import { LineAnnotationStyle } from '../../../../utils/themes/theme';
 import { isHorizontalRotation, isVerticalRotation } from '../../state/utils/common';
 import { computeXScaleOffset } from '../../state/utils/utils';
 import { AnnotationDomainType, LineAnnotationDatum, LineAnnotationSpec } from '../../utils/specs';
@@ -24,6 +25,7 @@ function computeYDomainLineAnnotationDimensions(
   annotationSpec: LineAnnotationSpec,
   yScale: ScaleContinuous,
   { vertical, horizontal }: SmallMultipleScales,
+  lineAnnotationStyle: LineAnnotationStyle,
   chartRotation: Rotation,
   axisPosition?: Position,
 ): AnnotationLineProps[] {
@@ -36,7 +38,7 @@ function computeYDomainLineAnnotationDimensions(
     markerPosition: specMarkerPosition,
     style,
   } = annotationSpec;
-  const lineStyle = mergeWithDefaultAnnotationLine(style);
+  const lineStyle = mergeWithDefaultAnnotationLine(lineAnnotationStyle, style);
   const color = lineStyle?.line?.stroke ?? Colors.Red.keyword;
   const isHorizontalChartRotation = isHorizontalRotation(chartRotation);
   // let's use a default Bottom-X/Left-Y axis orientation if we are not showing an axis
@@ -115,6 +117,7 @@ function computeXDomainLineAnnotationDimensions(
   annotationSpec: LineAnnotationSpec,
   xScale: ScaleContinuous | ScaleBand,
   { vertical, horizontal }: SmallMultipleScales,
+  lineAnnotationStyle: LineAnnotationStyle,
   chartRotation: Rotation,
   isHistogramMode: boolean,
   axisPosition?: Position,
@@ -128,7 +131,7 @@ function computeXDomainLineAnnotationDimensions(
     markerPosition: specMarkerPosition,
     style,
   } = annotationSpec;
-  const lineStyle = mergeWithDefaultAnnotationLine(style);
+  const lineStyle = mergeWithDefaultAnnotationLine(lineAnnotationStyle, style);
   const color = lineStyle?.line?.stroke ?? Colors.Red.keyword;
 
   const lineProps: AnnotationLineProps[] = [];
@@ -228,6 +231,7 @@ export function computeLineAnnotationDimensions(
   yScales: Map<GroupId, ScaleContinuous>,
   xScale: ScaleContinuous | ScaleBand,
   smallMultipleScales: SmallMultipleScales,
+  lineAnnotationStyle: LineAnnotationStyle,
   isHistogramMode: boolean,
   axisPosition?: Position,
 ): AnnotationLineProps[] | null {
@@ -242,6 +246,7 @@ export function computeLineAnnotationDimensions(
       annotationSpec,
       xScale,
       smallMultipleScales,
+      lineAnnotationStyle,
       chartRotation,
       isHistogramMode,
       axisPosition,
@@ -258,6 +263,7 @@ export function computeLineAnnotationDimensions(
     annotationSpec,
     yScale,
     smallMultipleScales,
+    lineAnnotationStyle,
     chartRotation,
     axisPosition,
   );

packages/charts/src/chart_types/xy_chart/annotations/utils.ts

@@ -15,7 +15,7 @@ import { Rotation, Position } from '../../../utils/common';
 import { Dimensions } from '../../../utils/dimensions';
 import { AnnotationId, AxisId, GroupId } from '../../../utils/ids';
 import { Point } from '../../../utils/point';
-import { AxisStyle } from '../../../utils/themes/theme';
+import { AxisStyle, Theme } from '../../../utils/themes/theme';
 import { getAxesSpecForSpecId } from '../state/utils/spec';
 import { ComputedGeometries } from '../state/utils/types';
 import { AnnotationDomainType, AnnotationSpec, AxisSpec, isLineAnnotation } from '../utils/specs';
@@ -117,6 +117,7 @@ export function computeAnnotationDimensions(
   { rotation: chartRotation }: Pick<SettingsSpec, 'rotation'>,
   { scales: { xScale, yScales } }: Pick<ComputedGeometries, 'scales'>,
   axesSpecs: AxisSpec[],
+  { lineAnnotation: lineAnnotationStyle }: Theme,
   isHistogramModeEnabled: boolean,
   smallMultipleScales: SmallMultipleScales,
   getAxisStyle: (id?: AxisId) => AxisStyle,
@@ -134,6 +135,7 @@ export function computeAnnotationDimensions(
         yScales,
         xScale,
         smallMultipleScales,
+        lineAnnotationStyle,
         isHistogramModeEnabled,
         annotationAxisPosition,
       );

packages/charts/src/chart_types/xy_chart/renderer/canvas/annotations/index.ts

@@ -15,7 +15,7 @@ import {
   mergeWithDefaultAnnotationLine,
   mergeWithDefaultAnnotationRect,
 } from '../../../../../utils/themes/merge_utils';
-import { SharedGeometryStateStyle } from '../../../../../utils/themes/theme';
+import { LineAnnotationStyle, RectAnnotationStyle, SharedGeometryStateStyle } from '../../../../../utils/themes/theme';
 import { AnnotationLineProps } from '../../../annotations/line/types';
 import { AnnotationRectProps } from '../../../annotations/rect/types';
 import { AnnotationDimensions } from '../../../annotations/types';
@@ -34,6 +34,8 @@ export function renderAnnotations(
   renderingArea: Dimensions,
   sharedStyle: SharedGeometryStateStyle,
   hoveredAnnotationIds: string[],
+  lineAnnotationStyle: LineAnnotationStyle,
+  rectAnnotationStyle: RectAnnotationStyle,
   renderOnBackground: boolean = true,
 ) {
   annotationDimensions.forEach((annotation, id) => {
@@ -43,7 +45,7 @@ export function renderAnnotations(
     if (spec && isBackground === renderOnBackground) {
       const getHoverParams = getAnnotationHoverParamsFn(hoveredAnnotationIds, sharedStyle, spec.animations);
       if (isLineAnnotation(spec)) {
-        const lineStyle = mergeWithDefaultAnnotationLine(spec.style);
+        const lineStyle = mergeWithDefaultAnnotationLine(lineAnnotationStyle, spec.style);
         renderLineAnnotations(
           ctx,
           aCtx,
@@ -54,7 +56,7 @@ export function renderAnnotations(
           renderingArea,
         );
       } else if (isRectAnnotation(spec)) {
-        const rectStyle = mergeWithDefaultAnnotationRect(spec.style);
+        const rectStyle = mergeWithDefaultAnnotationRect(rectAnnotationStyle, spec.style);
         renderRectAnnotations(
           ctx,
           aCtx,

packages/charts/src/chart_types/xy_chart/renderer/canvas/renderers.ts

@@ -40,7 +40,14 @@ export function renderXYChartCanvas2d(
         rotation,
         geometries,
         geometriesIndex,
-        theme: { axes: sharedAxesStyle, sharedStyle, barSeriesStyle, background },
+        theme: {
+          axes: sharedAxesStyle,
+          sharedStyle,
+          lineAnnotation: lineAnnotationStyle,
+          rectAnnotation: rectAnnotationStyle,
+          barSeriesStyle,
+          background,
+        },
         highlightedLegendItem,
         annotationDimensions,
         annotationSpecs,
@@ -96,6 +103,8 @@ export function renderXYChartCanvas2d(
             renderingArea,
             sharedStyle,
             hoveredAnnotationIds,
+            lineAnnotationStyle,
+            rectAnnotationStyle,
             true,
           ),
 
@@ -136,6 +145,8 @@ export function renderXYChartCanvas2d(
             renderingArea,
             sharedStyle,
             hoveredAnnotationIds,
+            lineAnnotationStyle,
+            rectAnnotationStyle,
             false,
           ),
 

packages/charts/src/chart_types/xy_chart/specs/line_annotation.ts

@@ -12,7 +12,6 @@ import { ChartType } from '../..';
 import { SpecType } from '../../../specs/constants';
 import { buildSFProps, SFProps, useSpecFactory } from '../../../state/spec_factory';
 import { stripUndefined } from '../../../utils/common';
-import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../utils/themes/merge_utils';
 import { LineAnnotationSpec, DEFAULT_GLOBAL_ID, AnnotationType } from '../utils/specs';
 
 const buildProps = buildSFProps<LineAnnotationSpec>()(
@@ -23,7 +22,6 @@ const buildProps = buildSFProps<LineAnnotationSpec>()(
   {
     groupId: DEFAULT_GLOBAL_ID,
     annotationType: AnnotationType.Line,
-    style: DEFAULT_ANNOTATION_LINE_STYLE,
     hideLines: false,
     hideTooltips: false,
     hideLinesTooltips: true,

packages/charts/src/chart_types/xy_chart/specs/rect_annotation.ts

@@ -11,7 +11,6 @@ import { ComponentProps } from 'react';
 import { ChartType } from '../..';
 import { SpecType } from '../../../specs/constants';
 import { specComponentFactory } from '../../../state/spec_factory';
-import { DEFAULT_ANNOTATION_RECT_STYLE } from '../../../utils/themes/merge_utils';
 import { RectAnnotationSpec, DEFAULT_GLOBAL_ID, AnnotationType } from '../utils/specs';
 
 /** @public */
@@ -24,7 +23,6 @@ export const RectAnnotation = specComponentFactory<RectAnnotationSpec>()(
     groupId: DEFAULT_GLOBAL_ID,
     annotationType: AnnotationType.Rectangle,
     zIndex: -1,
-    style: DEFAULT_ANNOTATION_RECT_STYLE,
     outside: false,
   },
 );

packages/charts/src/chart_types/xy_chart/state/selectors/compute_annotations.ts

@@ -31,6 +31,7 @@ export const computeAnnotationDimensionsSelector = createCustomCachedSelector(
     getSettingsSpecSelector,
     computeSeriesGeometriesSelector,
     getAxisSpecsSelector,
+    getChartThemeSelector,
     isHistogramModeEnabledSelector,
     computeSmallMultipleScalesSelector,
     getAxisStyleGetter,

packages/charts/src/chart_types/xy_chart/state/selectors/get_debug_state.ts

@@ -15,6 +15,7 @@ import { LegendItem } from '../../../../common/legend';
 import { getPredicateFn, Predicate } from '../../../../common/predicate';
 import { AnnotationSpec, AnnotationType, AxisSpec } from '../../../../specs';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
 import {
   DebugState,
@@ -29,7 +30,7 @@ import {
 import { Rotation } from '../../../../utils/common';
 import { AreaGeometry, BandedAccessorType, BarGeometry, LineGeometry, PerPanel } from '../../../../utils/geometry';
 import { mergeWithDefaultAnnotationLine, mergeWithDefaultAnnotationRect } from '../../../../utils/themes/merge_utils';
-import { FillStyle, Opacity, StrokeStyle, Visible } from '../../../../utils/themes/theme';
+import { FillStyle, Opacity, StrokeStyle, Theme, Visible } from '../../../../utils/themes/theme';
 import { isHorizontalAxis, isVerticalAxis } from '../../utils/axis_type_utils';
 import { AxisGeometry } from '../../utils/axis_utils';
 import { LinesGrid } from '../../utils/grid_lines';
@@ -48,16 +49,17 @@ export const getDebugStateSelector = createCustomCachedSelector(
     getAxisSpecsSelector,
     getSettingsSpecSelector,
     getAnnotationSpecsSelector,
+    getChartThemeSelector,
   ],
-  ({ geometries }, legend, axes, gridLines, axesSpecs, { rotation, locale }, annotations): DebugState => {
+  ({ geometries }, legend, axes, gridLines, axesSpecs, { rotation, locale }, annotations, theme): DebugState => {
     const seriesNameMap = getSeriesNameMap(legend);
     return {
       legend: getLegendState(legend),
       axes: getAxes(axes, axesSpecs, gridLines, rotation, locale),
       areas: geometries.areas.map(getAreaState(seriesNameMap)),
       lines: geometries.lines.map(getLineState(seriesNameMap)),
       bars: getBarsState(seriesNameMap, geometries.bars),
-      annotations: getAnnotationsState(annotations),
+      annotations: getAnnotationsState(theme, annotations),
     };
   },
 );
@@ -266,15 +268,18 @@ function getLegendState(legendItems: LegendItem[]): DebugStateLegend {
   return { items };
 }
 
-function getAnnotationsState(annotationSpecs: AnnotationSpec[]): DebugStateAnnotations[] {
+function getAnnotationsState(
+  { lineAnnotation, rectAnnotation }: Theme,
+  annotationSpecs: AnnotationSpec[],
+): DebugStateAnnotations[] {
   return annotationSpecs.flatMap<DebugStateAnnotations>((annotation) => {
     return annotation.dataValues.map((dataValue) => ({
       data: dataValue,
       id: annotation.id,
       style:
         annotation.annotationType === AnnotationType.Line
-          ? mergeWithDefaultAnnotationLine(annotation?.style)
-          : mergeWithDefaultAnnotationRect(annotation?.style),
+          ? mergeWithDefaultAnnotationLine(lineAnnotation, annotation?.style)
+          : mergeWithDefaultAnnotationRect(rectAnnotation, annotation?.style),
       type: annotation.annotationType,
       domainType: annotation.annotationType === AnnotationType.Line ? annotation.domainType : undefined,
     }));

packages/charts/src/utils/themes/base_colors.ts

@@ -8,7 +8,10 @@
 
 import { ChartBaseColors } from './theme';
 
-/** @public */
+/**
+ * Base light theme colors designed to match eui, see https://eui.elastic.co/#/theming/colors/values#shades
+ * @public
+ */
 export const LIGHT_BASE_COLORS: ChartBaseColors = {
   emptyShade: '#FFF',
   lightestShade: '#F1F4FA',
@@ -19,7 +22,10 @@ export const LIGHT_BASE_COLORS: ChartBaseColors = {
   title: '#1A1C21',
 };
 
-/** @public */
+/**
+ * Base dark theme colors designed to match eui, see https://eui.elastic.co/#/theming/colors/values#shades
+ * @public
+ */
 export const DARK_BASE_COLORS: ChartBaseColors = {
   emptyShade: '#1D1E24',
   lightestShade: '#25262E',

packages/charts/src/utils/themes/dark_theme.ts

@@ -441,4 +441,17 @@ export const DARK_THEME: Theme = {
       radius: 10,
     },
   },
+  lineAnnotation: {
+    line: {
+      stroke: DARK_BASE_COLORS.darkShade,
+      strokeWidth: 1,
+      opacity: 1,
+    },
+  },
+  rectAnnotation: {
+    strokeWidth: 0,
+    opacity: 0.25,
+    fill: DARK_BASE_COLORS.darkShade,
+    stroke: DARK_BASE_COLORS.darkShade,
+  },
 };

packages/charts/src/utils/themes/legacy_dark_theme.ts

@@ -7,6 +7,7 @@
  */
 
 import { palettes } from './colors';
+import { DEFAULT_ANNOTATION_LINE_STYLE, DEFAULT_ANNOTATION_RECT_STYLE } from './merge_utils';
 import { Theme } from './theme';
 import {
   DEFAULT_GEOMETRY_STYLES,
@@ -446,4 +447,6 @@ export const LEGACY_DARK_THEME: Theme = {
       radius: 10,
     },
   },
+  lineAnnotation: DEFAULT_ANNOTATION_LINE_STYLE,
+  rectAnnotation: DEFAULT_ANNOTATION_RECT_STYLE,
 };