fix: missing dash style in line annotation (#692)

This commit re-adds the dash style for line annotations. This probably was an existing feature before we removed Konva library, the story annotations/lines/5_styling.tsx has references to dashWidth and dashGapWidth used on the line style.
The VRT was manually updated as with the current change threshold (0,005% of the whole image) the change is not surfaced. I will open a subsequent PR to check if we can safely remove this threshold

fix #687

api/charts.api.md

@@ -764,14 +764,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
@@ -1073,7 +1070,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)
 //
@@ -1370,16 +1367,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;

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[];
@@ -303,12 +311,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,