feat(annotations): add annotations to DebugState (#1434)

packages/charts/api/charts.api.md

@@ -42,6 +42,20 @@ export interface AngleFromTo {
     x1: Radian;
 }
 
+// @alpha (undocumented)
+export interface AnimKeyframe {
+    // Warning: (ae-forgotten-export) The symbol "EasingFunction" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    easingFunction: EasingFunction;
+    // Warning: (ae-forgotten-export) The symbol "StaticConfig" needs to be exported by the entry point index.d.ts
+    //
+    // (undocumented)
+    keyframeConfig: Partial<StaticConfig>;
+    // (undocumented)
+    time: number;
+}
+
 // @public (undocumented)
 export type AnnotationClickListener = (annotations: {
     rects: RectAnnotationEvent[];
@@ -583,26 +597,18 @@ export type Datum = any;
 
 // @public
 export interface DebugState {
-    // Warning: (ae-forgotten-export) The symbol "DebugStateArea" needs to be exported by the entry point index.d.ts
-    //
+    // (undocumented)
+    annotations?: DebugStateAnnotations[];
     // (undocumented)
     areas?: DebugStateArea[];
-    // Warning: (ae-forgotten-export) The symbol "DebugStateAxes" needs to be exported by the entry point index.d.ts
-    //
     // (undocumented)
     axes?: DebugStateAxes;
-    // Warning: (ae-forgotten-export) The symbol "DebugStateBar" needs to be exported by the entry point index.d.ts
-    //
     // (undocumented)
     bars?: DebugStateBar[];
     // Warning: (ae-forgotten-export) The symbol "HeatmapDebugState" needs to be exported by the entry point index.d.ts
     heatmap?: HeatmapDebugState;
-    // Warning: (ae-forgotten-export) The symbol "DebugStateLegend" needs to be exported by the entry point index.d.ts
-    //
     // (undocumented)
     legend?: DebugStateLegend;
-    // Warning: (ae-forgotten-export) The symbol "DebugStateLine" needs to be exported by the entry point index.d.ts
-    //
     // (undocumented)
     lines?: DebugStateLine[];
     // Warning: (ae-forgotten-export) The symbol "PartitionDebugState" needs to be exported by the entry point index.d.ts
@@ -611,6 +617,103 @@ export interface DebugState {
     partition?: PartitionDebugState[];
 }
 
+// @public (undocumented)
+export type DebugStateAnnotations = {
+    id: string;
+    style: RectAnnotationStyle | LineAnnotationStyle;
+    type: typeof AnnotationType.Line | typeof AnnotationType.Rectangle;
+    domainType?: 'xDomain' | 'yDomain';
+    data: LineAnnotationDatum | RectAnnotationDatum;
+};
+
+// @public (undocumented)
+export type DebugStateArea = Omit<DebugStateLine, 'points' | 'visiblePoints'> & {
+    path: string;
+    lines: {
+        y0?: DebugStateLineConfig;
+        y1: DebugStateLineConfig;
+    };
+};
+
+// @public (undocumented)
+export interface DebugStateAxes {
+    // (undocumented)
+    x: DebugStateAxis[];
+    // (undocumented)
+    y: DebugStateAxis[];
+}
+
+// @public (undocumented)
+export interface DebugStateAxis {
+    // (undocumented)
+    gridlines: {
+        y: number;
+        x: number;
+    }[];
+    // (undocumented)
+    id: string;
+    // (undocumented)
+    labels: string[];
+    // (undocumented)
+    position: Position;
+    // (undocumented)
+    title?: string;
+    // (undocumented)
+    values: any[];
+}
+
+// @public (undocumented)
+export type DebugStateBar = DebugStateBase & {
+    visible: boolean;
+    bars: DebugStateValue[];
+    labels: any[];
+};
+
+// @public (undocumented)
+export interface DebugStateBase {
+    // (undocumented)
+    color: string;
+    // (undocumented)
+    key: string;
+    // (undocumented)
+    name: string;
+}
+
+// @public (undocumented)
+export interface DebugStateLegend {
+    // (undocumented)
+    items: DebugStateLegendItem[];
+}
+
+// @public (undocumented)
+export interface DebugStateLegendItem {
+    // (undocumented)
+    color: string;
+    // (undocumented)
+    key: string;
+    // (undocumented)
+    name: string;
+}
+
+// @public (undocumented)
+export interface DebugStateLine extends DebugStateBase, DebugStateLineConfig {
+}
+
+// @public (undocumented)
+export interface DebugStateLineConfig {
+    // (undocumented)
+    path: string;
+    // (undocumented)
+    points: DebugStateValue[];
+    // (undocumented)
+    visible: boolean;
+    // (undocumented)
+    visiblePoints: boolean;
+}
+
+// @public (undocumented)
+export type DebugStateValue = Pick<GeometryValue, 'x' | 'y' | 'mark'>;
+
 // @public (undocumented)
 export const DEFAULT_ANNOTATION_LINE_STYLE: LineAnnotationStyle;
 
@@ -1461,8 +1564,6 @@ export type PartialTheme = RecursivePartial<Theme>;
 // @public (undocumented)
 export const Partition: React_2.FunctionComponent<SpecRequiredProps_7 & SpecOptionalProps_7>;
 
-// Warning: (ae-forgotten-export) The symbol "StaticConfig" needs to be exported by the entry point index.d.ts
-//
 // @public (undocumented)
 export interface PartitionConfig extends StaticConfig {
     // @alpha (undocumented)
@@ -1981,6 +2082,9 @@ export interface SimplePadding {
     outer: number;
 }
 
+// @public (undocumented)
+export type SizeRatio = Ratio;
+
 // @alpha (undocumented)
 export const SmallMultiples: React_2.FunctionComponent<SmallMultiplesProps>;
 
@@ -2072,6 +2176,11 @@ export interface StrokeStyle<C = Color> {
     strokeWidth: number;
 }
 
+// Warning: (ae-forgotten-export) The symbol "TEXT_ALIGNS" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export type TextAlign = typeof TEXT_ALIGNS[number];
+
 // @public
 export interface TextAlignment {
     // (undocumented)
@@ -2080,6 +2189,11 @@ export interface TextAlignment {
     vertical: VerticalAlignment;
 }
 
+// Warning: (ae-forgotten-export) The symbol "TEXT_BASELINE" needs to be exported by the entry point index.d.ts
+//
+// @public (undocumented)
+export type TextBaseline = typeof TEXT_BASELINE[number];
+
 // @public
 export interface TextOffset {
     reference: 'global' | 'local';
@@ -2190,6 +2304,9 @@ export type TickStyle = StrokeStyle & Visible & {
 // @public (undocumented)
 export function timeFormatter(format: string): TickFormatter;
 
+// @public (undocumented)
+export type TimeMs = number;
+
 // @public (undocumented)
 export interface TimeScale {
     // (undocumented)
@@ -2469,14 +2586,6 @@ export interface YDomainBase {
 // @public (undocumented)
 export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions;
 
-// Warnings were encountered during analysis:
-//
-// src/chart_types/heatmap/layout/types/config_types.ts:19:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts
-// src/chart_types/heatmap/layout/types/config_types.ts:47:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
-// src/chart_types/heatmap/layout/types/config_types.ts:48:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
-// src/chart_types/partition_chart/layout/types/config_types.ts:137:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
-// src/chart_types/partition_chart/layout/types/config_types.ts:138:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
-
 // (No @packageDocumentation comment for this package)
 
 ```

packages/charts/src/chart_types/xy_chart/state/__snapshots__/chart_state.debug.test.ts.snap

@@ -2,6 +2,7 @@
 
 exports[`XYChart - debug state line chart rotation: -90 1`] = `
 Object {
+  "annotations": Array [],
   "areas": Array [],
   "axes": Object {
     "x": Array [
@@ -115,6 +116,7 @@ Object {
 
 exports[`XYChart - debug state line chart rotation: 0 1`] = `
 Object {
+  "annotations": Array [],
   "areas": Array [],
   "axes": Object {
     "x": Array [
@@ -228,6 +230,7 @@ Object {
 
 exports[`XYChart - debug state line chart rotation: 90 1`] = `
 Object {
+  "annotations": Array [],
   "areas": Array [],
   "axes": Object {
     "x": Array [
@@ -341,6 +344,7 @@ Object {
 
 exports[`XYChart - debug state line chart rotation: 180 1`] = `
 Object {
+  "annotations": Array [],
   "areas": Array [],
   "axes": Object {
     "x": Array [

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

@@ -8,11 +8,12 @@
 
 import { LegendItem } from '../../../../common/legend';
 import { getPredicateFn, Predicate } from '../../../../common/predicate';
-import { AxisSpec } from '../../../../specs';
+import { AnnotationSpec, AnnotationType, AxisSpec } from '../../../../specs';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import {
   DebugState,
+  DebugStateAnnotations,
   DebugStateArea,
   DebugStateAxes,
   DebugStateBar,
@@ -22,6 +23,7 @@ import {
 } from '../../../../state/types';
 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 { isHorizontalAxis, isVerticalAxis } from '../../utils/axis_type_utils';
 import { AxisGeometry } from '../../utils/axis_utils';
@@ -31,7 +33,7 @@ import { computeAxesGeometriesSelector } from './compute_axes_geometries';
 import { computeLegendSelector } from './compute_legend';
 import { computeSeriesGeometriesSelector } from './compute_series_geometries';
 import { getGridLinesSelector } from './get_grid_lines';
-import { getAxisSpecsSelector } from './get_specs';
+import { getAnnotationSpecsSelector, getAxisSpecsSelector } from './get_specs';
 
 /**
  * Returns a stringified version of the `debugState`
@@ -45,15 +47,17 @@ export const getDebugStateSelector = createCustomCachedSelector(
     getGridLinesSelector,
     getAxisSpecsSelector,
     getSettingsSpecSelector,
+    getAnnotationSpecsSelector,
   ],
-  ({ geometries }, legend, axes, gridLines, axesSpecs, { rotation }): DebugState => {
+  ({ geometries }, legend, axes, gridLines, axesSpecs, { rotation }, annotations): DebugState => {
     const seriesNameMap = getSeriesNameMap(legend);
     return {
       legend: getLegendState(legend),
       axes: getAxes(axes, axesSpecs, gridLines, rotation),
       areas: geometries.areas.map(getAreaState(seriesNameMap)),
       lines: geometries.lines.map(getLineState(seriesNameMap)),
       bars: getBarsState(seriesNameMap, geometries.bars),
+      annotations: getAnnotationsState(annotations),
     };
   },
 );
@@ -265,6 +269,21 @@ function getLegendState(legendItems: LegendItem[]): DebugStateLegend {
   return { items };
 }
 
+function getAnnotationsState(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),
+      type: annotation.annotationType,
+      domainType: annotation.annotationType === AnnotationType.Line ? annotation.domainType : undefined,
+    }));
+  });
+}
+
 /**
  * Returns true for styles if they are visible
  * Serves as a catchall for multiple style types

packages/charts/src/components/chart_status.tsx

@@ -49,7 +49,6 @@ class ChartStatusComponent extends React.Component<ChartStatusStateProps> {
   render() {
     const { rendered, renderedCount, debugState } = this.props;
     const debugStateString: string | null = debugState && JSON.stringify(debugState);
-
     return (
       <div
         className="echChartStatus"

packages/charts/src/index.ts

@@ -14,7 +14,20 @@ export { SpecId, GroupId, AxisId, AnnotationId } from './utils/ids';
 
 // Everything related to the specs types and react-components
 export * from './specs';
-export { DebugState } from './state/types';
+export {
+  DebugState,
+  DebugStateLine,
+  DebugStateValue,
+  DebugStateAnnotations,
+  DebugStateArea,
+  DebugStateAxes,
+  DebugStateBar,
+  DebugStateLegend,
+  DebugStateLineConfig,
+  DebugStateAxis,
+  DebugStateBase,
+  DebugStateLegendItem,
+} from './state/types';
 export { toEntries } from './utils/common';
 export { CurveType } from './utils/curves';
 export { ContinuousDomain, OrdinalDomain } from './utils/domain';
@@ -62,9 +75,12 @@ export { DARK_THEME } from './utils/themes/dark_theme';
 // partition
 export * from './chart_types/partition_chart/layout/types/viewmodel_types';
 export * from './chart_types/partition_chart/layout/utils/group_by_rollup';
+export { AnimKeyframe } from './chart_types/partition_chart/layout/types/config_types';
 
 // heatmap
 export { Cell } from './chart_types/heatmap/layout/types/viewmodel_types';
+export { SizeRatio, TimeMs } from './common/geometry';
+export { TextAlign, TextBaseline } from './common/text_utils';
 export { Config as HeatmapConfig } from './chart_types/heatmap/layout/types/config_types';
 export { ColorBand, HeatmapBandsColorScale } from './chart_types/heatmap/specs/heatmap';