fix: annotation typings

markov00 · Feb 27, 2020 · 8d684ae · 8d684ae
1 parent 19eb644
commit 8d684ae
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 22 deletions.
diff --git a/.playground/playground.tsx b/.playground/playground.tsx
@@ -1,6 +1,14 @@
 import React from 'react';
-
-import { Chart, LineSeries, ScaleType, Position, Axis } from '../src';
+import {
+  Chart,
+  ScaleType,
+  Position,
+  Axis,
+  LineSeries,
+  LineAnnotation,
+  RectAnnotation,
+  AnnotationDomainTypes,
+} from '../src';
 import { SeededDataGenerator } from '../src/mocks/utils';
 
 export class Playground extends React.Component<{}, { isSunburstShown: boolean }> {
@@ -35,6 +43,8 @@ export class Playground extends React.Component<{}, { isSunburstShown: boolean }
               splitSeriesAccessors={['g']}
               data={data}
             />
+            <LineAnnotation id="sss" dataValues={[{ dataValue: 321321 }]} domainType={AnnotationDomainTypes.XDomain} />
+            <RectAnnotation id="111" dataValues={[{ coordinates: { x1: 100 } }]} />
           </Chart>
         </div>
       </>

diff --git a/src/chart_types/xy_chart/specs/line_annotation.tsx b/src/chart_types/xy_chart/specs/line_annotation.tsx
@@ -1,7 +1,7 @@
 import React, { createRef, CSSProperties, Component } from 'react';
 import { deepEqual } from '../../../utils/fast_deep_equal';
 import { LineAnnotationSpec, DEFAULT_GLOBAL_ID, AnnotationTypes } from '../utils/specs';
-import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../utils/themes/theme';
+import { DEFAULT_ANNOTATION_LINE_STYLE, mergeWithDefaultAnnotationLine } from '../../../utils/themes/theme';
 import { bindActionCreators, Dispatch } from 'redux';
 import { connect } from 'react-redux';
 import { upsertSpec, removeSpec } from '../../../state/actions/specs';
@@ -37,7 +37,9 @@ export class LineAnnotationSpecComponent extends Component<LineAnnotationSpec> {
         height: offsetHeight,
       };
     }
-    upsertSpec({ ...config });
+    const style = mergeWithDefaultAnnotationLine(config.style);
+    const spec = { ...config, style };
+    upsertSpec(spec);
   }
 
   shouldComponentUpdate(nextProps: LineAnnotationSpec) {
@@ -53,7 +55,9 @@ export class LineAnnotationSpecComponent extends Component<LineAnnotationSpec> {
         height: offsetHeight,
       };
     }
-    upsertSpec({ ...config });
+    const style = mergeWithDefaultAnnotationLine(config.style);
+    const spec = { ...config, style };
+    upsertSpec(spec);
   }
   componentWillUnmount() {
     const { removeSpec, id } = this.props as InjectedProps;

diff --git a/src/chart_types/xy_chart/utils/specs.ts b/src/chart_types/xy_chart/utils/specs.ts
@@ -540,13 +540,9 @@ export interface LineAnnotationDatum {
   header?: string;
 }
 
-export type LineAnnotationSpec = BaseAnnotationSpec & {
+export type LineAnnotationSpec = BaseAnnotationSpec<LineAnnotationDatum, LineAnnotationStyle> & {
   annotationType: typeof AnnotationTypes.Line;
   domainType: AnnotationDomainType;
-  /** Data values defined with value, details, and header */
-  dataValues: LineAnnotationDatum[];
-  /** Custom line styles */
-  style?: Partial<LineAnnotationStyle>;
   /** Custom marker */
   marker?: JSX.Element;
   /**
@@ -579,21 +575,20 @@ export interface RectAnnotationDatum {
   details?: string;
 }
 
-export type RectAnnotationSpec = BaseAnnotationSpec & {
+export type RectAnnotationSpec = BaseAnnotationSpec<RectAnnotationDatum, RectAnnotationStyle> & {
   annotationType: typeof AnnotationTypes.Rectangle;
   /** Custom rendering function for tooltip */
   renderTooltip?: AnnotationTooltipFormatter;
-  /** Data values defined with coordinates and details */
-  dataValues: RectAnnotationDatum[];
-  /** Custom annotation style */
-  style?: Partial<RectAnnotationStyle>;
   /** z-index of the annotation relative to other elements in the chart
    * @default -1
    */
   zIndex?: number;
 };
 
-export interface BaseAnnotationSpec extends Spec {
+export interface BaseAnnotationSpec<
+  D extends RectAnnotationDatum | LineAnnotationDatum,
+  S extends RectAnnotationStyle | LineAnnotationStyle
+> extends Spec {
   chartType: ChartTypes;
   specType: typeof SpecTypes.Annotation;
   /** Annotation type: line, rectangle, text */
@@ -603,9 +598,9 @@ export interface BaseAnnotationSpec extends Spec {
    */
   groupId: GroupId; // defaults to __global__; needed for yDomain position
   /** Data values defined with coordinates and details */
-  dataValues: AnnotationDatum[];
+  dataValues: D[];
   /** Custom annotation style */
-  style?: Partial<AnnotationStyle>;
+  style?: Partial<S>;
   /** Toggles tooltip annotation visibility */
   hideTooltips?: boolean;
   /** z-index of the annotation relative to other elements in the chart
@@ -614,10 +609,6 @@ export interface BaseAnnotationSpec extends Spec {
   zIndex?: number;
 }
 
-export type AnnotationDatum = LineAnnotationDatum | RectAnnotationDatum;
-export type AnnotationStyle = LineAnnotationStyle | RectAnnotationStyle;
-
-// TODO:  TextAnnotationSpec
 export type AnnotationSpec = LineAnnotationSpec | RectAnnotationSpec;
 
 export function isLineAnnotation(spec: AnnotationSpec): spec is LineAnnotationSpec {