feat: small caret size and dashed annotation line (#540)

influxdata · Apr 14, 2021 · c65c4d1 · c65c4d1
1 parent 997d84b
commit c65c4d1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/giraffe/package.json b/giraffe/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe",
-  "version": "2.7.5",
+  "version": "2.7.6",
   "main": "dist/index.js",
   "module": "src/index.js",
   "license": "MIT",

diff --git a/giraffe/src/components/AnnotationLine.tsx b/giraffe/src/components/AnnotationLine.tsx
@@ -16,8 +16,8 @@ interface AnnotationLineProps {
 
 // These could become configurable values
 const PIN_CIRCLE_RADIUS = 4
-const PIN_TRIANGLE_HEIGHT = 18
-const PIN_TRIANGLE_WIDTH = 11
+const PIN_TRIANGLE_HEIGHT = 8
+const PIN_TRIANGLE_WIDTH = 6
 
 export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
   const {dimension, color, strokeWidth, startValue, length, pin} = props
@@ -70,17 +70,32 @@ export const AnnotationLine: FunctionComponent<AnnotationLineProps> = props => {
   }
 
   return (
+    // a separate line layer on the annotation line is required on top,
+    // because the dashed line doesnt allow for a continuous click-able target
+    // this top layer has an opacity of 0 so is not visible.
     <>
       <line
         x1={clampedStart}
         x2={clampedStart}
         y1="0"
         y2={length}
         stroke={color}
+        strokeOpacity={0}
         strokeWidth={strokeWidth}
         id={props.id}
         className={`${styles['giraffe-annotation-hover']} giraffe-annotation-line`}
       />
+      <line
+        x1={clampedStart}
+        x2={clampedStart}
+        y1="0"
+        y2={length}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        id={props.id}
+        className={`${styles['giraffe-annotation-hover']} giraffe-annotation-line`}
+        strokeDasharray={'4'}
+      />
       {pin === 'circle' &&
         createElement('circle', {
           r: PIN_CIRCLE_RADIUS,