fix small things

elastic · Mar 22, 2022 · fc618c1 · fc618c1
1 parent fd789e4
commit fc618c1
Show file tree

Hide file tree

Showing 15 changed files with 57 additions and 119 deletions.
diff --git a/src/plugins/event_annotation/common/manual_event_annotation/index.ts b/src/plugins/event_annotation/common/manual_event_annotation/index.ts
@@ -60,13 +60,6 @@ export const manualEventAnnotation: ExpressionFunctionDefinition<
         defaultMessage: 'An optional icon used for annotation lines',
       }),
     },
-    iconPosition: {
-      types: ['string'],
-      options: ['auto', 'above', 'below', 'left', 'right'],
-      help: i18n.translate('event_annotation.manual_annotation_group.args.iconPosition', {
-        defaultMessage: 'The placement of the icon for the annotation line',
-      }),
-    },
     textVisibility: {
       types: ['boolean'],
       help: i18n.translate('event_annotation.manual_annotation_group.args.textVisibility', {

diff --git a/src/plugins/event_annotation/common/types.ts b/src/plugins/event_annotation/common/types.ts
@@ -7,7 +7,6 @@
  */
 
 export type LineStyle = 'solid' | 'dashed' | 'dotted';
-export type IconPosition = 'auto' | 'left' | 'right' | 'above' | 'below';
 export type AnnotationType = 'manual';
 export type KeyType = 'point_in_time';
 
@@ -17,7 +16,6 @@ export interface StyleProps {
   icon?: string;
   lineWidth?: number;
   lineStyle?: LineStyle;
-  iconPosition?: IconPosition;
   textVisibility?: boolean;
   isHidden?: boolean;
 }

diff --git a/src/plugins/event_annotation/public/event_annotation_service/service.tsx b/src/plugins/event_annotation/public/event_annotation_service/service.tsx
@@ -22,7 +22,6 @@ export function getEventAnnotationService(): EventAnnotationServiceType {
       lineStyle,
       lineWidth,
       icon,
-      iconPosition,
       textVisibility,
       time,
     }) => {
@@ -38,8 +37,7 @@ export function getEventAnnotationService(): EventAnnotationServiceType {
               color: [color || defaultAnnotationColor],
               lineWidth: [lineWidth || 1],
               lineStyle: [lineStyle || 'solid'],
-              icon: hasIcon(icon) ? [icon] : ['empty'],
-              iconPosition: hasIcon(icon) || textVisibility ? [iconPosition || 'auto'] : ['auto'],
+              icon: hasIcon(icon) ? [icon] : ['triangle'],
               textVisibility: [textVisibility || false],
               isHidden: [Boolean(isHidden)],
             },

diff --git a/x-pack/plugins/lens/public/app_plugin/app.scss b/x-pack/plugins/lens/public/app_plugin/app.scss
@@ -38,6 +38,9 @@
     fill: makeGraphicContrastColor($euiColorVis0, $euiColorDarkShade);
   }
 }
+.lensAnnotationIconNoFill {
+  fill: none;
+}
 
 .lensAnnotationIconFill {
   fill: $euiColorLightestShade;

diff --git a/x-pack/plugins/lens/public/assets/annotation_icons/circle.tsx b/x-pack/plugins/lens/public/assets/annotation_icons/circle.tsx
@@ -7,6 +7,7 @@
 
 import * as React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import classnames from 'classnames';
 
 export const IconCircle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
@@ -19,13 +20,12 @@ export const IconCircle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'typ
   >
     {title ? <title id={titleId}>{title}</title> : null}
     <circle
-      clipPath="circle()"
+      strokeWidth="1"
+      stroke="currentColor"
       cx="8"
       cy="8"
-      r="8"
-      className="lensAnnotationIconFill"
-      strokeWidth={typeof props.strokeWidth === 'number' ? Math.max(props.strokeWidth, 2) : 2}
-      stroke={'currentColor'}
+      className={classnames('lensAnnotationIconNoFill', props.className)}
+      r="7"
     />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/assets/annotation_icons/triangle.tsx b/x-pack/plugins/lens/public/assets/annotation_icons/triangle.tsx
@@ -7,27 +7,24 @@
 
 import * as React from 'react';
 import { EuiIconProps } from '@elastic/eui';
+import classnames from 'classnames';
 
 export const IconTriangle = ({ title, titleId, ...props }: Omit<EuiIconProps, 'type'>) => (
   <svg
     width="16"
-    height="12"
+    height="16"
     fill="none"
-    viewBox="0 0 16 12"
+    viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
     aria-labelledby={titleId}
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <clipPath id="lnsAnnotationIconTriangle">
-      <path fillRule="evenodd" d="M8 12h.47L16 0H0l7.53 12H8zm0-1.011L14.424.75H1.576L8 10.989z" />
-    </clipPath>
     <path
-      strokeWidth={props.strokeWidth}
+      strokeWidth="1"
       stroke="currentColor"
-      clipPath="url(#lnsAnnotationIconTriangle)"
-      d="M8 12h.47L16 0H0l7.53 12H8zm0-1.011L14.424.75H1.576L8 10.989z"
-      className="lensAnnotationIconFill"
+      d="M 6.9 11.612 C 7.64533 12.7953 8.39067 12.7953 9.136 11.612 L 13.11 5.3 C 13.8553 4.11667 13.4827 3.525 11.992 3.525 L 4.044 3.525 C 2.55333 3.525 2.18067 4.11667 2.926 5.3 Z"
+      className={classnames('lensAnnotationIconNoFill', props.className)}
     />
   </svg>
 );
diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap
diff --git a/x-pack/plugins/lens/public/xy_visualization/annotations/config_panel/icon_set.ts b/x-pack/plugins/lens/public/xy_visualization/annotations/config_panel/icon_set.ts
@@ -8,12 +8,6 @@ import { i18n } from '@kbn/i18n';
 import { IconTriangle, IconCircle } from '../../../assets/annotation_icons';
 
 export const annotationsIconSet = [
-  {
-    value: 'empty',
-    label: i18n.translate('xpack.lens.xyChart.iconSelect.noIconLabel', {
-      defaultMessage: 'None',
-    }),
-  },
   {
     value: 'asterisk',
     label: i18n.translate('xpack.lens.xyChart.iconSelect.asteriskIconLabel', {
@@ -50,6 +44,7 @@ export const annotationsIconSet = [
       defaultMessage: 'Circle',
     }),
     icon: IconCircle,
+    canFill: true,
   },
 
   {
@@ -76,5 +71,7 @@ export const annotationsIconSet = [
       defaultMessage: 'Triangle',
     }),
     icon: IconTriangle,
+    shouldRotate: true,
+    canFill: true,
   },
 ];
diff --git a/x-pack/plugins/lens/public/xy_visualization/annotations/expression.scss b/x-pack/plugins/lens/public/xy_visualization/annotations/expression.scss
@@ -32,11 +32,6 @@
 }
 
 .lnsXyAnnotationIcon_rotate90 {
-  transform: rotate(90deg);
-}
-.lnsXyAnnotationIcon_rotate180 {
-  transform: rotate(180deg);
-}
-.lnsXyAnnotationIcon_rotate270 {
-  transform: rotate(270deg);
+  transform: rotate(45deg);
+  transform-origin: center;
 }
diff --git a/x-pack/plugins/lens/public/xy_visualization/annotations/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/annotations/expression.tsx
@@ -19,16 +19,14 @@ import type { EventAnnotationArgs } from 'src/plugins/event_annotation/common';
 import moment from 'moment';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { defaultAnnotationColor } from '../../../../../../src/plugins/event_annotation/public';
-import type { AnnotationLayerArgs, IconPosition } from '../../../common/expressions';
+import type { AnnotationLayerArgs } from '../../../common/expressions';
 import { hasIcon } from '../xy_config_panel/shared/icon_select';
 import {
-  getBaseIconPlacement,
   mapVerticalToHorizontalPlacement,
   LINES_MARKER_SIZE,
   MarkerBody,
   Marker,
   AnnotationIcon,
-  getIconRotationClass,
 } from '../annotations_helpers';
 
 const getRoundedTimestamp = (timestamp: number, firstTimestamp?: number, minInterval?: number) => {
@@ -120,8 +118,6 @@ const getCommonStyles = (configArr: EventAnnotationArgs[]) => {
     ),
     lineWidth: getCommonProperty(configArr, 'lineWidth', 1),
     lineStyle: getCommonProperty(configArr, 'lineStyle', 'solid'),
-    iconPosition: getCommonProperty(configArr, 'iconPosition', Position.Top as IconPosition),
-    label: getCommonProperty(configArr, 'label', ''),
     textVisibility: getCommonProperty(configArr, 'textVisibility', false),
   };
 };
@@ -165,7 +161,7 @@ export const Annotations = ({
   return (
     <>
       {groupedAnnotations.map((annotation) => {
-        const markerPositionVertical = getBaseIconPlacement(annotation.iconPosition);
+        const markerPositionVertical = Position.Top;
         const markerPosition = isHorizontal
           ? mapVerticalToHorizontalPlacement(markerPositionVertical)
           : markerPositionVertical;
@@ -190,8 +186,7 @@ export const Annotations = ({
                     isHorizontal: !isHorizontal,
                     hasReducedPadding,
                     label: annotation.label,
-                    rotationClass: getIconRotationClass(markerPosition),
-                    strokeWidth,
+                    rotateClassName: isHorizontal ? 'lnsXyAnnotationIcon_rotate90' : undefined,
                   }}
                 />
               ) : undefined