Merge remote-tracking branch 'upstream/master' into luminance-pie

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [19.4.1](https://github.com/elastic/elastic-charts/compare/v19.4.0...v19.4.1) (2020-06-01)
+
+
+### Bug Fixes
+
+* missing dash style in line annotation ([#692](https://github.com/elastic/elastic-charts/issues/692)) ([e2ba940](https://github.com/elastic/elastic-charts/commit/e2ba940f3e3483dd250879866d8d5c3e7e786e5b)), closes [#687](https://github.com/elastic/elastic-charts/issues/687)
+
 # [19.4.0](https://github.com/elastic/elastic-charts/compare/v19.3.0...v19.4.0) (2020-05-28)
 
 

api/charts.api.md

@@ -772,14 +772,11 @@ export type LineAnnotationSpec = BaseAnnotationSpec<typeof AnnotationTypes.Line,
     zIndex?: number;
 };
 
-// Warning: (ae-missing-release-tag) "LineAnnotationStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
+// @public
 export interface LineAnnotationStyle {
-    // (undocumented)
+    // @deprecated
     details: TextStyle;
-    // (undocumented)
-    line: StrokeStyle & Opacity;
+    line: StrokeStyle & Opacity & Partial<StrokeDashArray>;
 }
 
 // Warning: (ae-forgotten-export) The symbol "SpecRequiredProps" needs to be exported by the entry point index.d.ts
@@ -1081,7 +1078,7 @@ export type RectAnnotationSpec = BaseAnnotationSpec<typeof AnnotationTypes.Recta
 // Warning: (ae-missing-release-tag) "RectAnnotationStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export type RectAnnotationStyle = StrokeStyle & FillStyle & Opacity;
+export type RectAnnotationStyle = StrokeStyle & FillStyle & Opacity & Partial<StrokeDashArray>;
 
 // Warning: (ae-missing-release-tag) "RectBorderStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -1380,16 +1377,12 @@ export const SpecTypes: Readonly<{
 // @public (undocumented)
 export type SpecTypes = $Values<typeof SpecTypes>;
 
-// Warning: (ae-missing-release-tag) "StrokeDashArray" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
+// @public
 export interface StrokeDashArray {
     dash: number[];
 }
 
-// Warning: (ae-missing-release-tag) "StrokeStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
+// @public
 export interface StrokeStyle<C = Color> {
     stroke: C;
     strokeWidth: number;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/charts",
   "description": "Elastic-Charts data visualization library",
-  "version": "19.4.0",
+  "version": "19.4.1",
   "author": "Marco Vettorello <[email protected]>",
   "license": "Apache-2.0",
   "main": "dist/index.js",

src/chart_types/xy_chart/renderer/canvas/annotations/lines.ts

@@ -45,6 +45,7 @@ export function renderLineAnnotations(
   const stroke: Stroke = {
     color: strokeColor,
     width: lineStyle.line.strokeWidth,
+    dash: lineStyle.line.dash,
   };
 
   renderMultiLine(ctx, lines, stroke);

src/utils/themes/theme.ts

@@ -58,6 +58,10 @@ export interface SharedGeometryStateStyle {
   unhighlighted: GeometryStateStyle;
 }
 
+/**
+ * The stroke color style
+ * @public
+ */
 export interface StrokeStyle<C = Color> {
   /** The stroke color in hex, rgba, hsl */
   stroke: C;
@@ -67,6 +71,10 @@ export interface StrokeStyle<C = Color> {
 
 export type TickStyle = StrokeStyle & Visible;
 
+/**
+ * The dash array for a stroke
+ * @public
+ */
 export interface StrokeDashArray {
   /** The dash array for dashed strokes */
   dash: number[];
@@ -307,12 +315,24 @@ export interface CrosshairStyle {
   line: StrokeStyle & Visible & Partial<StrokeDashArray>;
 }
 
+/**
+ * The style for a linear annotation
+ * @public
+ */
 export interface LineAnnotationStyle {
-  line: StrokeStyle & Opacity;
+  /**
+   * The style for the line geometry
+   */
+  line: StrokeStyle & Opacity & Partial<StrokeDashArray>;
+  /**
+   * The style for the text shown on the tooltip.
+   * @deprecated This style is not currently used and will
+   * soon be removed.
+   */
   details: TextStyle;
 }
 
-export type RectAnnotationStyle = StrokeStyle & FillStyle & Opacity;
+export type RectAnnotationStyle = StrokeStyle & FillStyle & Opacity & Partial<StrokeDashArray>;
 
 export const DEFAULT_ANNOTATION_LINE_STYLE: LineAnnotationStyle = {
   line: {

stories/annotations/lines/5_styling.tsx

@@ -27,6 +27,7 @@ import {
   LineAnnotationDatum,
   ScaleType,
   Settings,
+  LineAnnotationStyle,
 } from '../../../src';
 import { Icon } from '../../../src/components/icons/icon';
 import { getChartRotationKnob } from '../../utils/knobs';
@@ -43,15 +44,15 @@ export const Example = () => {
   const data = [2.5, 7.2];
   const dataValues = generateAnnotationData(data);
 
-  const dashWidth = number('dash line width', 1);
-  const dashGapWidth = number('dash gap width', 0);
+  const dashWidth = number('dash line width', 5);
+  const dashGapWidth = number('dash gap width', 8);
 
-  const style = {
+  const style: Partial<LineAnnotationStyle> = {
     line: {
-      strokeWidth: number('line stroke width', 3),
-      stroke: color('line & marker color', '#f00'),
+      strokeWidth: number('line stroke width', 5),
+      stroke: color('line & marker color', 'blue'),
       dash: [dashWidth, dashGapWidth],
-      opacity: number('line opacity', 1, {
+      opacity: number('line opacity', 0.5, {
         range: true,
         min: 0,
         max: 1,